共计 1490 个字符，预计需要花费 4 分钟才能阅读完成。
目录
HTML5 新特性
前言
准备工作
语义化标签
概念
新内容
案例
多媒体标签
音频标签 audio
视频标签 video
新增部分 input 表单属性
预告和回顾
后话
HTML5 新特性
前言
本系列博客是对入门专栏的 HTML 知识的补充，并伴随一些补充案例。
这一期主要介绍 HTML5 在 HTML 基础上新增的一些内容。
不是专业的科普博主，文笔不好，多多包涵（嘿嘿）。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server
浏览器版本：Chrome
系统版本：Win10/11/ 其他非 Windows 版本
* 我的电脑是 Win10 的版本，仅供参考 *
语义化标签
概念
HTML5 新增的语义化标签，实质上就是使用 合理 、 正确 的标签来展示内容。
有利于 搜索引擎优化 （SEO），爬虫会依据不同的标签赋予相应的 权重。
新内容
新增的语义化标签如下：
案例
一个典型的 移动端网页 布局如下：
这里在布局时有一个技巧，如果需要左右布局宽度占满整个窗口，比如 aside 和 article，则只需要给 aside 设置宽度，然后为 section 的 CSS 样式设置 flex:1 即可（不要忘记让 article 的布局方式设置为弹性盒模型）。
而 article 的高度则由 calc(100vh – 其他区域的高度)来决定。
多媒体标签
HTML5 新增了多媒体标签，分别为音频标签 audio 和视频标签video。
音频标签 audio
audio 常见的属性和对应的含义如下:
| 属性 | 含义 |
|---|---|
| src | 需要使用的音频文件的地址 |
| controls | 多媒体元素的控制组件 |
| autoplay | 自动播放音频（需要配合其他属性使用） |
| loop | 循环播放多媒体文件 |
视频标签 video
video 常见的属性和对应的含义如下：
其中，preload 属性的值如下：
| 属性值 | 作用 |
|---|---|
| auto | 一边加载一边播放 |
| metadata | 加载完之后再播放 |
| none | 页面加载完之后不加载视频 |
新增部分 input 表单属性
HTML5 新增了一些表单的属性，常见的有以下 5 种：
| 属性 | 含义 |
|---|---|
|
required |
表单的内容是必填项 , 不能为空 |
|
placeholder |
表单的提示信息 |
|
multiple |
表单的提示信息 |
|
autofocus |
进入表单界面时，自动聚焦至该元素 |
|
autocomplete |
属性值为 off / on , 浏览器会记录之前输入的值, 默认值是 on , 自动补全默认是打开的 ; 使用自动补全 , 需要满足以下两个条件 : 为表单添加 name 属性, 自动补全的内容需要之前提交成功过 |
预告和回顾
对网页布局和制作感兴趣的朋友，可以看下面的 HTML 进阶专栏，里面有很多讲解详尽的案例，当前为第二期：
专栏 | HTML 进阶
https://blog.csdn.net/zc13786305863/category_12779892.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12779892&sharerefer=PC&sharesource=ZC13786305863&sharefrom=from_link
当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
== 期待与你在下一期博客中再次相遇 ==
——浓度骤降的【H2O2】
原文地址: 【H2O2| 全栈】更多关于 HTML（2）HTML5 新增内容
