html学习笔记基础篇

HTML笔记基本介绍

此笔记依照菜鸟教程进行编写，有兴趣的朋友可以看看。
如何查看源代码？
你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
基本实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>

我的第一个段落。<br/><a href="https://www.runoob.com">这是此学习笔记的学习课程</a><br>


</p>
 
</body>
</html>

上述代码在运行后网页显示

上述是一段包括了基本的HTML语言语法
HTML语言一个特点就是“有开头就要有结尾”，如开头h1就需要有结尾/h1
博主用的是vscode进行编写，另外 Windows 用户可以使用记事本。

HTML语法笔记

1.!DOCTYPE html

1
2
3
4
它是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language
是一条标示语言。支持 HTML5 标准的主流浏览器都认识这个声明。
表示网页采用 HTML5，<!DOCTYPE html> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2.HTML

在开始编写之前相当于申明该语言为HTML，类似于C中incloud?（此处存疑）

3.头标签

1
2
3
4
5
"<head>"元素包括了所有头部标签元素，你可以在里面插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
显示时，要将<link>标签放入<head>里。

举例

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>

对于中文网页需要使用 声明编码，否则会出现乱码。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。

1
2
3
4
5
6
7
8
9
10
<header>
header 标签用于定义文档的页眉（介绍信息）。
<html>
  <body>
    <header>
        <p>段落</p>
        <h1>一级标题</h1>
    </header>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
(1)"<title>"
<title>标签定义了不同文档的标题
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:定义了浏览器工具栏的标题
                   当网页添加到收藏夹时，显示在收藏夹中的标题
                   显示在搜索引擎结果页面的标题
(2)<base>
(3)<link> 
(4)<style> 
(5)<meta> 
(6)<script>

4.显示的文章主体

1
2
<body> 文章主体 </body>
<body>显示你文章主体后可跟标题，段落等，可以类比成报纸上的内容物

5.标题：

1
2
3
4
5
<h1>标题1</h1>
<h2>标题2</h2>
请确保标题只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推

6.段落：

1
2
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

7.链接：

1
2
3
4
5
6
7
8
9
10
11
12
<a href="url">链接文本</a>
如：<a href="https://www.runoob.com">这是一个链接</a>
注意：<a></a>中间才是显示内容<a "这里是链接的目的地址或网址">
链接还能是图片等新奇的玩法<a href="https://www.runoob.com/html/html-links.html" target="_blank" rel="noopener noreferrer">从这里出发</a>
(1)链接的target 属性
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
如上述例子，" target="_blank"将会让你点击链接时打开一个新的页面而不是从这个页面跳转。
在后面加上 rel="noopener noreferrer"能保证你不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址
(2)nofollow
nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"。
它的出现为网站管理员提供了一种方式，即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接"。这个标签的意义是
告诉搜索引擎这个链接不是经过作者信任的，所以这个链接不是一个信任票。

如下是实际效果

链接文本
如：这是一个链接
注意：中间才是显示内容<a “这里是链接的目的地址或网址”>
链接还能是图片等新奇的玩法从这里出发
(1)链接的target 属性
访问菜鸟教程!
如上述例子，” target=”_blank”将会让你点击链接时打开一个新的页面而不是从这个页面跳转。
在后面加上 rel=”noopener noreferrer”能保证你不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址
(2)nofollow
nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接或不要追踪此特定链接”。
它的出现为网站管理员提供了一种方式，即告诉搜索引擎”不要追踪此网页上的链接”或”不要追踪此特定链接”。这个标签的意义是
告诉搜索引擎这个链接不是经过作者信任的，所以这个链接不是一个信任票。

8.图像：

1
2
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
注：src后为地址，其他均为图片属性，如"width="258" height="39"说明高度为258，长度为39 'loading="lazy"'为字体

9.换行：

1
2
3
4
5
<br>属于空元素，在开始标签中完成关闭，实现他的作用，但在XHTML以及XML或未来的HTML版本中开始添加斜杠
写作<br/>相当于有关闭动作

空元素一般没有结尾在开始标签中关闭
常见的还有<hr>生成一条水平线

10.注释

1
<!-- 这是一个注释 -->该内容不会显示在主题中，仅作为编写代码时提醒以后自己或者浏览者读懂意思

补充笔记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
地址书写补充(网站上大佬的补充笔记)
1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 图片在相同目录下：

<img src="*.jpg" width="300" height="120"/>3、*.html 文件跟 *.jpg 图片在不同目录下：
a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：

<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>
4、如果图片来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

HTML 中 href、src 区别

href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:

<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。

html 相对路径的写法：

 ./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
 ../：代表文件所在的父级目录
 ../../：代表文件所在的父级目录的父级目录
 /：代表文件所在的根目录

标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

这个笔记本该在一个月前就发出来的，期末考试害人啊，原计划是要更新进阶的学习笔记，目前不准备发了，笔记参考在文章开头，想细学的朋友可以参考下。下一步计划更新python爬虫，JAVA基础，基于C的数据结构。就这样把~