【H2O2|全栈】更多关于HTML（2）HTML5新增内容
目录
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】
原文地址：https://blog.csdn.net/ZC13786305863/article/details/142925396
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！