一、语义化标签
1、在网页中HTML是专门用来负责网页结构，所以在使用HTML标签时，应该关注的是标签的语义而不是它的样式。
2、标题标签：h1~h6，一共六级标题。
从h1到h6重要性递减，h1最重要，h6最不重要。
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1。
一般情况下标题标签只会使用h1~h3，h4~h6很少用。
3、Ctrl+回车 换行不会连着后面一块换行。
4、在页面中独占一行的元素称为块元素（block element）。标题标签都是块元素。
在网页中一般通过块元素来对页面进行布局（宏观布局）。
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。
p元素中不能放任何块元素。块元素中基本什么都能放。
5、p标签表示页面中的一个段落。p也是一个块元素。
6、hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup。
7、em标签表示语音语调加重。语法：<em> </em> 属于行内元素。
8、在页面张不会独占一行的元素称为行内元素（inline element）。
行内元素主要用来包裹文字
9、strong表示强调重要内容。语法：<strong> </strong> 属于行内元素。
10、blockquote表示一个长引用，会独占一行，属于块元素。语法：<blockquote> </blockquote>
11、q表示一个短引用，属于行内元素，不会独占一行。语法：<q> </q>
12、br表示换行。语法：<br> 内容
13、浏览器在解析网页时会自动对网页中不符合规范的内容进行修正。例如：标签卸载了根元素的外部、p元素中嵌套了块元素、根元素中出现了除head和body以外的元素 等。
二、布局标签（结构化语义标签）
① header 表示网页的头部。 语法： <header></header>
② main 表示网页的主体部分。 （一个页面中只会有一个main） 语法：<main></main>
③ footer 表示网页的底部。 语法：<footer></footer>
④ nav 表示网页中的导航。 语法： <nav></nav>
⑤ aside 表示和主体相关的其他类（侧边栏）。 语法：<aside></aside>
⑥ article 表示一个独立的文章。 语法：<article></article>
⑦ section 表示一个独立的区块，上边的标签都不能表示时使用section。 语法：<setion></setion>
⑧ div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素。 语法：<div></div>
⑨ span 行内元素，没有语义，一般用于在网页中选中文字。 语法：<span></span>
三、列表（list）
1、HTML列表一共有三种：有序列表、无序列表、定义列表。
2、有序列表：使用ol标签创建有序列表，使用li表示列表项。
3、无序列表：使用ul标签创建无序列表，使用li表示列表项。
4、定义列表：使用dl标签创建定义列表，使用dt表示定义的内容，dd表示对内容进行解释说明。
5、列表之间可以互相嵌套。
四、超链接
1、超链接可以从一个界面跳转到另一个页面，或者是当前页面的其他位置。
2、使用a标签定义超链接。语法：<a></a>
属性：href 指定跳转的目标路径，其值可以是一个外部网站的一个地址。也可以写一个内部页面的地址。
3、超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。
4、换行用<br>。
5、HTML 链接 - target 属性：使用 target 属性，你可以定义被链接的文档在何处显示。
6、HTML 链接- id 属性：id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID: <a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"： <a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"： <a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
7、图片链接：
8、在当前页面链接到指定位置： <a href="#C4">查看章节 4</a>
9、跳出框架：
10、创建电子邮件链接：
五、其他补充
① target 属性：用来指定超链接打开的位置。
可选值： _self 默认值，在当前页面打开超链接
_blank 在一个新的页面中打开超链接
② 回到顶部：可以直接将超链接的href属性设置为#，这样点击超链接以后页面不发生跳转，而是转到当前页面的顶部的位置。
③ 去到底部：利用id属性（唯一不重复的）。 id属性是元素的唯一标识，同一个页面中不能出现重复的id属性，每一个标签都可以添加一个id属性。
id属性区分大小写字母，一定字母开头。
④ 跳转页面指定位置：只需将href属性设置 #目标元素的id属性值。
⑤ 在开发中可以将#作为超链接的路径的展位符使用。
⑥ 可以使用javascript：；来作为href的属性，此时点击这个超链接什么也不会发生。
六、相对路径和绝对路径
1、路径属性：href
2、绝对路径：具体的网址。如：https://www.baidu.com
3、相对路径：当我们需要跳转到服务器内部的页面时，一般使用相对路径（相对于当前页面）。相对路径都会使用 . 或者 .. 或者 ./ 或者 ../ 开头。./可以省略不写，如果不写./则就相当于写了./。
./表示当前文件所在的目录。 ../ 表示当前所在目录的上一级目录
例如：
七、图片标签
1、图片标签：用于向当前页面中引入一个外部图片。
使用img标签来引入外部图片。 img标签是一个自由结束标签。 img这种元素属于替换元素（基于块和行内元素之间，具有两种元素特点）
属性：src: 指定的是外部图片的路径（路径规则和超链接一样），可选值可以是图片的路径或者是图片地址。
alt：图片的描述，这个描述默认情况下不会显示，有些浏览器图片无法加载时显示。 搜索引擎会根据alt中的内容来识别图片。如果不写alt属性则图片不会被搜索引擎所收录。
width: 图片的宽度（单位是像素）
height： 图片的高度。
宽度和高度中如果只修改了一个，则另一个会等比例缩放。
注意：一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端经常需要对图片进行缩放（大图缩小）。
2、图片的格式
① jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
② gif ：支持的颜色比较少，支持简单透明，支持动图。适用于颜色单一的图片或者动图。
③ png ：支持的颜色丰富，支持复杂透明，不支持动图。用于颜色丰富，复杂透明的图片（专为网页而生）。
④ webp： 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，具备其他图片格式的所有优点，而且文件还特别小。但是兼容性不好。
⑤ base64： 将图片使用base64进行编码，这样可以将图片转换为字符通过字符形式引入图片，一般都是一些需要和网页一起加载的图片才使用 base64。图片加载速度快。
效果一样的用内存小的；效果不一样的用效果好的，同时也要考虑内存大小。
八、内联框架
1、内联框架：用于向当前页面中引入一个其他页面。
2、属性：src ：指定要引入的网页的路径。
frameborder ： 指定内联框架的边框。一般选值0。
width ： 边框的宽度。
height ： 边框的高度。
九、音视频播放
1、audio 标签：用来向页面中引入一个外部的音频文件，音频文件引入时，默认情况下不允许用户自己控制播放停止。
属性：controls 允许用户控制播放，没有属性值。
autoplay 音频文件自动播放，没有属性值。如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动对音乐进行播放。
loop 循环播放，没有属性值。
2、除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径。当浏览器不支持播放时则会忽略source标签但是不会忽略文字，支持播放时则不会显示文字。source可以同时指定多种文件
3、embed 标签：基本适用于所有浏览器，但是会自动播放音频。
4、video 标签：使用方式与audio基本一样。
十、表格
1、在现实生活中，我们经常需要使用表格来表示一些格式化数据，例如：课程表、人名单、成绩单······ 同样在网页中我们也需要用表格，我们通过table标签来创建一个表格。
2、在table中使用tr表示表格中的一行，有几个tr就有几行；在tr中使用td表示一个单元格，有几个td就有几个单元格。
3、colspan 横向合并单元格
rowspan 纵向合并单元格
4、可以将一个表格分成三部分：
头部 thead
主体 tbody
底部 tfoot
5、th 表示头部的单元格
6、表格的样式
（1） border-spacing 指定边框之间的距离
（2）border-collapse 设置边框的合并
目前关于HTML5的学习分享到这里，这是本人学习HTML5过程中的笔记分享，希望大家一起探讨，下一篇文章将开启前端学习的下一个内容学习：CSS，这是渲染网页一个很重要的基础知识储备。
