双标签关系可以分为两类:包含关系和并列关系
包含关系(父子关系):
<head>
<title></title>
</head>
并列关系(兄弟关系):
<head>
</head>
<body>
</body>
每个网页都有一个基本的结构标签(也称骨架标签),页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须设置title标签 |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 包含文档的所有内容,页面内容基本都是放在body里的 |
<html>
<head>
<title>我的第一个页面的标题</title>
</head>
<body>
我的第一个页面的内容
</body>
</html>
VS Code工具生成的骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
其中新增加的代码:<!DOCTYPE>文档类型声明标签、lang语言种类、charset字符集
作用是告诉浏览器使用哪种HTML版本来显式网页
<!DOCTYPE html>
这句代码的意思是:当前页面采用HTML5版本来显式网页
注意:
用来定义当前文档显示的语言:
实际上,对于文档显示来说,定义为en的文档也可以显示中文,同样定义为zh-CN的文档也可以显示英文。
字符集(Character set)是多个字符的集合,以便计算机能够识别和存储各种文字。在<head></head>标签内可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8">
charset常用的值由:GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。
注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用"UTF-8"编码。
为了使网页更具有语义化,我们经常在页面中用到标题标签。HTML提供了6个等级的标题标签,即<h1> - <h6>(分别为1级标题到6级标题)。
<h1></h1>
<h2></h2>
...
<h6></h6>
其中h为head的缩写,意为头部、标题
标签语义:作为标题使用,并且重要性依次递减。
特点:
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
<p>
我是一个段落标签
</p>
p为paragraph的缩写,意为段落
标签语义:可以把HTML文档分割为若干段落
特点:
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端才自动换行。如果需要某段文本强制换行显示,就需要使用换行标签<br />
<br />
br为break的缩写,意为打断、换行
标签语义:强制换行
特点:是一个单标签
在网页中,有时需要为文字设置粗体、斜体、或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong>或<b></b> | 推荐使用语义强烈的<strong> |
倾斜 | <em></em>或<i></i> | 同理推荐使用<em> |
删除线 | <del></del>或<s></s> | 同理推荐使用<del> |
下划线 | <ins></ins>或<u></u> | 同理推荐使用<ins> |
注:重点记住加粗和倾斜
和 是没有语义的,它们是一个盒子,用来装某些内容。
<div>
这是一个盒子
</div>
<span>这也是一个盒子</span>
其中div是division的缩写,表示分割、分区。span意为跨度、跨距。
特点:
注:通常width和heigth只需要设置一个即可,另一个会等比例缩放,避免失真。
图像标签属性注意点:
在HTML标签中,<a></a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
<!-- 这是一个注释 -->
<!-- 快捷键:ctrl+/ -->
在HTML页面中,一些特殊符号很难或不方便直接使用,此时我们可以使用下面的字符代码来代替。
特殊字符 | 描述 | 字符代码 |
---|---|---|
空字符 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 与号 | &; |
¥ | 人民币 | ¥; |
© | 版权 | ©; |
® | 注册商标 | ®; |
° | 摄氏度 | °; |
± | 正负号 | ±; |
× | 乘号 | ×; |
÷ | 除号 | ÷; |
² | 平方2(上标2) | ²; |
³ | 立方3(上标3) | ³; |
注:末尾分号应为英文输入