目录
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），爬虫会依据不同的标签赋予相应的权重。
新内容
新增的语义化标签如下：
<!-- 主题标签 -->
<main></main>
<!-- 头部标签 -->
<header></header>
<!-- 导航栏 -->
<nav></nav>
<!-- 侧边栏 -->
<aside></aside>
<!-- 内容 -->
<article></article>
<!-- 块标签（相当于div） -->
<section></section>
<!-- 底部 -->
<footer></footer>案例
一个典型的移动端网页布局如下：
<header></header>
<nav></nav>
<main>
<aside></aside>
<article></article>
</main>
<footer></footer>这里在布局时有一个技巧 ，如果需要左右布局宽度占满整个窗口，比如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】
