吃透HTML5：从基础标签到核心新特性全覆盖

引言

HTML（超文本标记语言）是一种用于创建网页的标准标记语言，而HTML5是HTML最新的修订版本。

一、HTML5基本结构

<!DOCTYPE html>是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏，来告知浏览器当前文档使用的是HTML5标准。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    主体内容
</body>
</html>

二、HTML5的一些常用标签

2.1 标题标签

双标签，1至6级，文字加粗，文字变大程度1~6级逐级递减，独占一行。

注：h1在一个页面中只能使用一次，h2-h6没有使用限制

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
</body>
</html>

2.2 段落标签

双标签，段落中间存在缝隙，独占一行。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <p>这是段落一</p>
    <p>这是段落二</p>
</body>
</html>

2.3 换行标签

单标签，在当前使用位置强制换行

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <p>这是一个HTML知识点总结</p>
    <p>这是一个<br>HTML知识点总结</p>
</body>
</html>

2.4 水平线标签

单标签，单行显示一条水平线

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    这是一个HTML知识点总结
    <hr>
    这是一个HTML知识点总结
</body>
</html

2.5 文本格式化标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!-- 文字加粗 -->
    <b>文字加粗</b>
    <strong>文字加粗</strong>
    <!-- 文字下划线 -->
    <u>文字下划线</u>
    <ins>文字下划线</ins>
    <!-- 文字倾斜 -->
    <i>文字倾斜</i>
    <em>文字倾斜</em>
    <!-- 文字删除线 -->
    <s>文字删除线</s>
    <del>文字删除线</del>
</body>
</html>

2.6 图片标签

单标签img的一些属性：

1、src：目标图片的路径

注：绝对路径与相对路径

绝对路径 -> c:/xxx 或者网络图片直接复制的路径

相对路径 -> 同级文件夹 ./

上级文件夹 ../

2、alt：替换文本

图片加载失败时，显示alt文本内容；图片加载成功时，不显示alt文本内容。

3、tittle：提示文本

鼠标悬停时显示的文本

注：tittle不仅可以用在img标签中，还可以用在其他标签中。

4、width和height：设置当前图片的高度和宽度

" "内写数字即可，不用写单位

注：两个属性只写一个时，另一个属性会等比例放大两个属性同时写，图片可能会变形

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!-- <img src="" alt="" tittle="" width="" height="" >  -->
    <img src="./images/1.jpg" alt="">
</body>

2.7 链接标签

双标签<a></a>的一些属性：

1、href：目标网页的路径 （a标签点击后跳转的指定页面）

外部链接：外部网页

内部链接：文件夹内部文件

注：herf="#"表示空链接回到页面顶部或不确定跳转页面用#进行链接占位

2、target：目标网页的打开形式

_self: 默认值，在当前窗口跳转（覆盖原网页）

_blank: 在新窗口跳转（保留原网页）

双标签<a></a>的一些显示特点：

1、a标签默认文字存在下划线

2、a标签未点击时字体显示蓝色

3、a标签点击后，字体显示紫色（清除浏览器历史记录字体颜色可恢复成蓝色）

注：可在css中使用t ext-decoration:none 去除a标签的默认下划线，使用 color:inherit 让字体颜色继承父元素的颜色或手动指定颜色。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <a href="">这是一个链接</a>
</body>
</html>

2.8 列表标签

2.8.1 无序列表

1、无序列表：没有顺序之分的列表

2、显示特点：列表每一项前默认有圆点标识和缩进效果，属性type可改变标识样式

type属性值：desc实心圆（默认）

square方形

circle空心圆

注：可在css中使用 list-style:none 清除列表的默认样式

3、标签：

ul：表示无序列表的整体，只能包含li标签

li：表示无序列表的每一项，包含每一行的内容，可以包含任意内容

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
     </ul>
</body>
</html>

2.8.2 有序列表

1、有序列表：有顺序之分的列表

2、显示特点：列表每一项前默认有序号标识，属性type可改变序号标识

type属性值：I i A a 1（默认）

3、标签：

ol：表示有序列表的整体，只能包含li标签

li：表示有序列表的每一项，包含每一行的内容，可以包含任意内容

4、其他属性：

start=" " : 从......开始正序

reversed ：倒序

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
     <ol start="5" reversed>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>
</body>
</html>

2.8.3 定义列表

dl：定义列表，dl中只能包含dt和dd

dt：定义列表的标题，可以包含任何内容

dd：定义列表的描述/详情，可以包含任何内容

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>HTML知识点总结</dd>
        <dd>HTML知识点总结</dd>
        <dd>HTML知识点总结</dd>
        <dt>HTML</dt>
        <dd>HTML知识点总结</dd>
        <dd>HTML知识点总结</dd>
        <dd>HTML知识点总结</dd>
     </dl>
</body>
</html>

2.9 表格标签

1、嵌套规则：table嵌套tr，tr嵌套td/tr

2、标签说明： table：标签

tr：行

th：表头单元格

td内容单元格

thead：表格头部部分，表格头部内容

tbody：表格主题，包含表格主要内容

tfoot：表格底部，汇总信息，一般为最后一行

3、边框：表格默认没有边框，用 border属性添加边框

4、合并规则

<td rowspan=" "></td>

rowspan：行合并，在需要合并的最上面的行添加 rowspan=" "，" "内写需要合并的行数，并删除其他行中对应的

<td colspan=" "></td>

colspan：列合并，在需要合并的最左面的列添加 colspan=" "，" "内写需要合并的列数，并删除当前行中其他的<td>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
      <!-- 表格外框 -->
      <table border="1">
        <!-- 标头 -->
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" align="center">a1</td>
                <!-- <td>a1</td> -->
                <td>a1</td>
            </tr>
            <tr>
                <td>b1</td>
                <td>b1</td>
                <td rowspan="2" align="center">b1</td>
            </tr>
            <tr>
                <td>c1</td>
                <td>c1</td>
                <!-- <td>c1</td> -->
            </tr>
        </tbody>
 
     </table>
</body>
</html>

2.10 表单标签

2.10.1 input

1、type的属性值

text：文本框，用于输入单行文本

password：密码框

radio：单选框 <input type="radio" name=" " checked>

name：控件分组，name值相等的为一组每次只能选择一个（实现单选）

checked：每次刷新默认选中

checkbox：多选框（复选框）

checked默认选中

disabled不可选

file：上传文件 <input type="file" multiple>

file：默认每次只能上传一个文件

multiple：可以实现文件多选功能

accept：设置接收文件的类型

color:调色板，value设置指定颜色

submit：提交按钮

reset：重置按钮

date：日期，value设置指定日期

time：时间，value设置指定时间

search：搜索

range:进度条，value设置进度条最大数值

number：数值，value设置显示数值，max设置可选择最大数值，min设置可选择最小数值

tel：手机号，maxlength设置手机号输入最大长度

2、placeholder属性：文本框的占位文本提示信息文本框和密码框都可以使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <input type="text" placeholder="请输入你的名字">
    <br>
    <input type="password">
    <br>
    <input type="submit">
    <br>
    <input typr="reset">
    <br>
    <input type="radio" name="a">男
    <input type="radio" name="a">女
    <br>
    <input type="checkbox">篮球
    <input type="checkbox" checked>网球
    <input type="checkbox">羽毛球
    <input type="checkbox" disabled>足球
    <br>
    <input type="color" value="#ff0000">
    <br>
    <input type="date" value="2024-02-21">
    <br>
    <input type="time" value="12:00">
    <br>
    <input type="search">
    <br>
    <input type="range" value="100">
    <br>
    <input type="number" value="3" max="10" min="1">
    <br>
    <input type="tel" maxlength="11">
    <br>
    <input type="file" accept="image/jpg,image/png">
    <br>
</body>
</html>

2.10.2 label

扩大点击范围文本框、密码框、上传文件、单选、多选、下拉、文本域均可用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
 
<body>
    <!-- 正常写法：<input type="redio" id = "man">男 -->
    <!-- 写法一 label只包裹内容 不包裹控件 设置label的for属性值等于表单控件的id属性值相同-->
    <input type="redio" id="man"><label for="man">男</label>
    <!-- 写法二 label包裹内容和控件 不需要属性-->
    <label><input type="redio">男<label>
</body>
</html>

2.10.3 文本域

文本域不用css设置样式尺寸时可以在右下角拖拽变换尺寸

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <textarea>提示文字</textarea>
<html>

2.11 多媒体标签

1、标签：audio：音频标签

video：视频标签

注：audio和video的所有属性方法是通用的

2、属性：

src:视频路径;

controls:显示控件；属性值：controls

loop：是否循环播放；属性名：loop; 属性值：loop;

dom.currentTime：视频当前播放的时间，音频/视频播放的当前时间(以秒计);

playbackRate：设置或返回音频/视频播放的速度

注：设置播放的速度,1--16最大16倍速;0-1慢速

dom.duration：返回当前音频/视频的长度（以秒计）

ended：返回音频/视频的播放是否已结束(结束返回true 没结束返回false);

muted：设置或返回音频/视频是否静音布尔值

paused：返回音频/视频是否暂停布尔值

volume：设置或返回音频/视频的音量

3、方法：

load()：重新加载音频/视频元素

play()：开始播放音频/视频

pause()：暂停当前播放的音频/视频

4、事件：

canplaythrough ：音频/视频缓冲完成（当资源加载完毕触发该事件）

timeupdate ：正在播放的事件（播放进度改变的时候触发）

ended：目前的播放列表已结束触发

三、HTML5的一些新特性

3.1 语义化标签

HTML5中提供了语义化标签来创建更好的页面结构

Q:增加了语义化标签有什么优点：

A: 1、方便搜索引擎查找内容，提高SEO（Search Engine Optimization 搜索引擎优化）效果

2、便携开发，提高开发效率，增加点啊可读性

html 复制代码

<!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>
    <div>
        <!-- 定义页面头部内容 -->
        <header></header>
        <!-- 定义导航内容 -->
        <nav></nav>
        <!-- 定义侧边框 -->
        <aside></aside>
        <!-- 定义文章内容 -->
        <article></article>
        <!-- 定义文章中的一块内容 -->
        <section></section>
        <!-- 定义页尾内容 -->
        <footer></footer>
    </div>
</body>
</html>

3.2 原生多媒体标签

HTML5提供了audio和video的原生音视频标签，不需要依赖其他的插件即可实现音视频播放。

3.3 表单增强

HTML5新增了许多表单的输入类型，比如color、email、range、number、date、time，其中email自带邮箱格式校验（输入需要存在@），也新增了许多表单的属性和方法，大大提升用户体验和开发效率。

3.4 Web Storage

WebStorage是HTML5新增的一个会话存储对象，提供了在浏览器中存储数据的功能，可以分为localStorage（本地存储）和sessionStorage（会话存储）。

Q：WebStorage和cookie有什么区别？

A： cookie在服务端存储数据，大小为4KB，会随着请求发到服务器，过期时间必须手动设置，否则浏览器关闭则消失，存储格式必须是字符串，不能直接存对象；而WebStorage是在客户端存储数据，不随请求发服务器，而且存储空间有5MB，比cookie更大，且WebStorage有自带的一些方法，不需要像cookie一样去复杂的封装。

Q：localStorage和sessionStorage有什么区别？

A： sessionStorage和localStorage的数据都保存在客户端，但sessionStorage下的数据仅在当前页面打开期间存在，关闭页面或者浏览器数据就消失了，即使不同的标签页，数据也不会共享；而localStorage下的数据尽管关闭页面或者浏览器，数据仍旧存在，除非手动删除或者清除缓存。

Q：localStorage有哪些方法？

A： 1、setItem(key,value): 用于向localStorage以键值对的方式存储数据，其中value会自动被转为字符串类型；

2、getItem(key)：用于从localStorage获取数据，若没有返回null；

3、removeItem(key)：用于从localStorage中删除指定数据；

4、clear()：清除localStorage中的所有数据；

5、key(index)：用于从localStorage获取当前索引下的value。

HTML5还有许多新特性，但是先写到这里啦~