H5标签

HTML5

web前端

发布日期: 2021-07-20

更新日期: 2021-07-24

文章字数: 1.5k

阅读时长: 5 分

阅读次数:

HTML5 新增的语义化标签

语义化标签的好处

易于用户阅读，样式丢失的时候让页面结构更加清晰
有利于SEO，搜索引擎根据标签确定上下文和各个关键字的权重
方便其他设备的解析，如盲人阅读器
有利于开发和维护，语义化标签具有可读性，代码更好维护

布局标签

在之前的布局中，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

<header>：头部标签
<main>:网页的主体部分，内容区域，页面上有且仅有一个标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

多媒体标签

H5媒体标签，早期通过flash技术来引入

音频标签 audio

用于引入音频文件

语法：

写法一:
<audio src="file/music.mp3" controls muted autoplay loop></audio>
写法二：
<!-- 可以连接多种不同的音频文件格式，可以避免浏览器对音频的兼容问题 -->
 < audio controls="controls" >
     <source src="happy.mp3" type="audio/mpeg" >
     <source src="happy.ogg" type="audio/ogg" >
     您的浏览器暂不支持 <audio> 标签。
 </ audio>

src：连接音频的文件
controls：这是一个控制器，可以控制音频的播放等等
muted：静音播放
autoplay：自动播放
loop：循环播放

视频标签 video

用于网页中视频文件的引入

语法：

写法一：
<video src="file/play.mp4" controls muted loop autoplay></video>
写法二：
<!-- 引入多种不同的视频文件格式，避免浏览器兼容性问题 -->
 <video controls="controls" width="300">
     <source src="move.ogg" type="video/ogg" >
     <source src="move.mp4" type="video/mp4" >
      您的浏览器暂不支持 <video> 标签播放视频
 </ video >

属性：
- src：连接视频的文件
- controls：这是一个控制器，可以控制视频的播放、快进等等
- muted：静音播放
- autoplay：自动播放（谷歌浏览器需要添加muted来解决自动播放的问题）
- loop：循环播放
- poster：加载等待的画面图片
学习js的时候，我们可以自己开发视频播放器、弹幕、快进、播放暂停等等

多媒体标签总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

语义化标签的使用

标签名	描述
`<header>`	代表网页的头部
`<main>`	网页的主体部分，内容区域，页面上有且仅有一个标签
`<nav>`	代表导航
`<footer>`	代表网页的尾部
`<aside>`	代表侧边栏
`<article>`	代表网页中一个独立区域，一般方内容
`<section>`	代表网页中一个模块，理解为平时的div
`<audio>`	音频
`<video>`	视频
`<source>`	资源标签，用于连接多媒体资源
`<thead>`	表格的头部
`<tbody>`	表格的内容
`<tfoot>`	表格的尾部
`<canvas>`	定义图形

section：表示网页中一个模块，作用类似div，如果内容可以分为几部分，可以使用article，在article里面使用section来表示没部分。
article：代表是一个独立的区域，区域可以分为多个section
aside：侧边栏、广告。推荐信息

标签如何去选择

最外层标签尽量使用语义化标签
标题尽量使用标题标签，主要目的是为了seo优化
对于网页的内容区域，如果重复出现一些模块可以使用section
具体内容该用什么标签还是用什么标签

H5新增表单标签

form、input（text）、input（password）、input(radio)、input（checkbox）、select、textarea、按钮（input、button）
新增了很多表单标签，新增了功能性的标签。

属性值	说明
`type="email"`	提供邮箱格式的验证，以后通过js控制
`type="number"`	只能输入数字
`ype="url"`	只能输入http或者https开头的完整的网址
`type="color"`	提供选取颜色的色块
`type="range"`	选取范围
`type="file"`	文件上传，默认文件只能上传一个，设置`multiple`属性可以上传多个文件
`type="date"`	选择年/月/日
`type="month"`	选择某年某月
`type="week"`	选择某年第几周
`type="time"`	选择时间
`type=search`	搜索框
`type=tel`	手机号

选项列表 datalist

datalist需要和输入框进行绑定

语法：

<input type="text" list="datalist的id名">
<datalist id="名字">
    <option value="">小猪</option>
    <option value="">小猪佩奇</option>
    <option value="">小猪乔治</option>
    <option value="">小米手机</option>
    <option value="">大米手机</option>
    <option value="">大手机</option>
</datalist>