HTML5文档结构标签及其作用
HTML5文档结构标签及其作用
HTML5是现代网页开发的基础，其文档结构标签对于创建清晰、语义化的网页至关重要。本文将详细介绍HTML5的各种标签及其作用，帮助读者掌握HTML5的基础知识。
一、网页结构
1. 构成
2. 文档声明
告诉浏览器，当前页面是按照HTML5规范编写的。如果不写，浏览器解析页面时可能会进入怪异模式，导致页面无法正常显示。
3. 头部标签
所有的标签都应该写在<html>中，一个页面只有一个根标签。
3.1 meta标签
用来设置网页的元数据，不会变的数据，是给浏览器看的，是自结束标签
3.1.1 常用属性
charset属性：设置网页的字符集，避免乱码问题。name和keywords：帮助浏览器收录网页。
3.2 移动端
4. 头部标签
保存一些元信息，元数据，这标签内的内容，不会在页面中展示，它是用来帮助浏览器解析页面的
5. 主内容区
硬写也可以显示，但浏览器默认会把你放在一个根标签内，属于叫怪异模式(不推荐这么写)。
注意：
- HTML中不区分大小写，但一般使用小写。
- HTML中的注释不能嵌套。
- HTML标签结构必须完整，要么成对出现，要么是自结束标签。
- 浏览器会修正不符合语法规范的内容，但有些情况会影响网站性能，所以要避免。
- HTML标签可以嵌套，但不可交叉嵌套。
二、实体
在网页编写中多个空格会被浏览器默认为一个空格
eg：3<5>4
在HTML中，一些特殊的字符是不能直接使用的，比如空格，大于号，小于号，©，像这些特殊的没有办法直接打出来的字符，我们需要用其他的字符来表示，这些字符就叫做实体。
1. 语法
&实体的名字;
2. 常用的实体
三、常用标签
关注语义，而不是样式！！！
1. 注释标签
不会在页面中显示
- 做一些简单的注释，帮助理解记忆代码
- 注释符号，不可以嵌套
- 养成注释习惯
- 简单明确
2. 标题标签
块元素
效果：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
3. 段落标签
块元素
一般情况，用来包裹文字，注意段与段之间有间隔
效果：
否釜害才天挟知人人我赠第她，我在和什玉或间主后韩留由是才历壬中样，特夭葬人何骨血死天嗣派让护，一颜留，间负要丈有国其娇种土沫办自是生，回措人主笔同于亡这都生高好兼，负了他了非清创招为五化，得个言葬保屯未考了战徒己快者张之留解，当文君，我始快死杨，我人承非。
胜三人的，哥说杨国县可，活要求就生统我，仍就藏一诗认一兴们爱圣人二才韩有，谭君极普处日了同三气憾会作锐此临洪王送，即虽有颜才少当方土主才圣，乏前善出尝才未领制帝法九揽要，报哉在活过什设人始洪冒同郭的不则，作极生意案必看首极说盲程要秦，第乡方的办山，法那便。
4. hgroup标签
用于为标题分组，可以将一组相关的标题同时放入到hgroup
效果：
古诗一首
杜甫
5. 强调标签
行内元素
5.1 em标签
从样式看，有倾斜，强调语音语调。
效果：
必须
5.2 strong标签
强调内容的重要性，从样式看，文字有加粗的效果。
效果：
作业写完
abc
6. 换行标签
br标签，强制换行，是自结束标签。
效果：
全球网络搜索总量达662亿次，在排名前十的网站中，谷歌以62.4%的份额高居榜首，搜索量是排名第二的雅虎的近五倍。非美国公司占据四席，其中，中国搜索引擎百度以5.2%的市场份额排名第三，比排名第四的微软高出2个百分点。排行第五的是韩国最大搜索引擎NHN，第八为俄罗斯搜索引擎Yandex，另一家中国网络公司阿里巴巴位居第十，其搜索流量包括中国雅虎。
7. 分割线标签(水平线标签)
效果：
8. 删除线标签
效果：
原价：9999
现价：9.9
9. 居中效果
10. 图像标签
效果：
四、行内与块元素
注意：
- 一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素。
- 块元素中基本什么都能放。
- p元素中不能放任何块元素 特殊的存在。
1. 块元素
特点：主要用来布局，它会独占一行
例如：h1-h6标签、p、div、header、footer ··· ···
2. 行内元素
特点：主要用来包裹文字的，不会独占一行
例如：em、strong、span、a ··· ···
3. 行内块元素
例如： img ··· ···
五、结构化标签
header：网页的头部。
main：网页的主体部分（一般就一个）。
footer：网页的底部。
nav：网页的导航。
aside：和主体相关的内容，侧边栏。
article：文章之类的。
section：独立的区块，上面的标签都不合适，就用这个。
div：没有语义，就用来表示一个区块，目前来讲div还是主流的布局元素。
span：行内元素 ，也是没有任何语义，一般用于在网页中选中文字。
六、列表
列表（list），以 一组一组的形式出现。
- 有序列表 用ol标签创建，li表示列表项。
- 无序列表 用ul标签创建，li表示列表项。
- 定义列表 用dl标签创建，使用dd对内容进行解释说明。
注意：列表之间是可以互相嵌套的。
1. ol标签和ul标签
type属性可以更改项目符号，可选值：1（默认值）、a、A、I、i
效果：
起床三件事
- 刷牙
- 吃早餐
- 准备上班
type属性可以更改项目符号，可选值： disc：默认实心圆点 square：实心的方块 circle：空心的圆
效果：
最喜欢的三件事
2. dl标签
效果：
内容的详解1
内容的详解2
内容的详解3
CSS
内容的详解1
内容的详解2
内容的详解3
3. 表格标签
效果：
行合并与列合并
效果：
七、超链接
href:设置超链接跳转的位置 target：设置网页打开位置 _self:在当前窗口中打开网页 _blank:在新建窗口中打开网页
效果：
百度
锚链接
效果：
快速到达底部111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111