【H2O2|全栈】更多关于HTML（2）HTML5新增内容

htmledit_views">

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），爬虫会依据不同的标签赋予相应的权重。

新内容

新增的语义化标签如下：

html"><!-- 主题标签 -->
<main></main>
<!-- 头部标签 -->
<header></header>
<!-- 导航栏 -->
<nav></nav>
<!-- 侧边栏 -->
<aside></aside>
<!-- 内容 -->
<article></article>
<!-- 块标签（相当于div） -->
<section></section>
<!-- 底部 -->
<footer></footer>

案例

一个典型的移动端网页布局如下：

html"><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进阶html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A" alt="icon-default.png?t=O83A" />https://blog.csdn.net/zc13786305863/category_12779892.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12779892&sharerefer=PC&sharesource=ZC13786305863&sharefrom=from_link
当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。