二、HTML5
2025-01-29
一、HTML5简介
1、什么是HTML5
HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。
官网地址:
W3C 提供: https://www.w3.org/TR/html/index.html
WHATWG 提供:https://whatwg-cn.github.io/html/multipage
HTML5在侠义上是指新一代的HTML标准,在广义上是指:整个前端
2、HTML5 优势
1、针对JavaScript,新增了很多可操作的接口。
2、新增了一些语义化标签、全局属性
3、新增了多媒体标签,可以很好的替代 flash。
4、更加侧重语义化,对于SEO 更友好。
5、可移植性好,可以大量应用在移动设备上。
3、HTML5兼容性
支持:Chrome、Safari、Opera、Firefox 等主流浏览器。
IE浏览器必须是9及以上版本才支持HTML5,IE9仅支持部分HTML5新特性。
二、新增语义化标签
1、新增布局标签
标签名 | 语义 | 单/双标签 |
header | 整个页面,或部分区域的头部 | 双 |
footer | 整个页面,或部分区域的底部 | 双 |
nav | 导航 | 双 |
article | 文章、帖子、杂志、新闻、博客、评论等。 | 双 |
section | 页面中的某段文字,或者文章中的某段文字(里面文字通常里面会包含标题) | 双 |
aside | 侧边栏 | 双 |
main | 文档的主要内容(WHATWG没有语义,IE不支持),几乎不用 | 双 |
hgroup | 包裹连续的标题,如文章主标题、如文章主标题、副标题的组合(W3C将其删除) | 双 |
上面的标签其实没有什么实际的效果,可以理解为有了语义的div。
关于 article 和 section :
1、artical 里面可以有多个section。
2、section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。
3、article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用 article 元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1>尚品</h1>
</header>
<hr>
<!-- 主导航区 -->
<nav>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<!-- 侧边栏导航 -->
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀专区</a></li>
<li><a href="#">会员专区</a></li>
<li><a href="#">领取优惠卷专区</a></li>
<li><a href="#">品牌专区</a></li>
</ul>
</nav>
</aside>
<!-- 文章 -->
<article>
<h2>《如何一夜暴富》</h2>
<section>
<h3>第一种方式:通过做梦</h3>
<p>你要这么做梦:XXXXXXXXXXXXX</p>
</section>
<section>
<h3>第二种方式:通过彩票</h3>
<p>你要这么买彩票:XXXXXXXXXXXXX</p>
</section>
</article>
<hr>
<!-- 页脚 -->
<footer>
<nav>
<a href="#">友情链接1</a>
<a href="#">友情链接2</a>
<a href="#">友情链接3</a>
</nav>
</footer>
</div>
</body>
</html>
2、新增状态标签
2.1 meter 标签
语义:定义已知范围内的标量测量。也被称为 gauge 尺度,双标签,例如:电量、磁盘用量等。
常用属性如下:
属性 | 值 | 描述 |
high | 数值 | 规定高值 |
low | 数值 | 规定低值 |
max | 数值 | 规定最大值 |
min | 数值 | 规定最小值 |
optimum | 数值 | 规定最优值 |
value | 数值 | 规定当前值 |
2.2 progress标签
语义:显示某个任务完成得进度的指示器,一般用于标识进度条,双标签,例如:工作完成进度等。
常用属性如下:
属性 | 值 | 描述 |
max | 数值 | 规定目标值 |
value | 数值 | 规定当前值 |
<span>手机电量</span>
<meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter><br>
<span>当前进度:</span>
<progress max="100" value="20"></progress>
3、新增列表标签
标签名 | 语义 | 单\双 标签 |
datalist | 用于搜索框的关键字提示 | 双 |
details | 用于展示问题和答案,或对专有名词进行解释 | 双 |
summary | 写在 details 的里面,用于指定问题或专有名词 | 双 |
<form action="#">
<input type="text" list="mydata">
<button>搜素</button>
</form>
<input type = "text" list = "mydata" ><datalist id = "mydata" ><option value = " 周冬雨 " > 周冬雨 </option><option value = " 周杰伦 " > 周杰伦 </option><option value = " 温兆伦 " > 温兆伦 </option><option value = " 马冬梅 " > 马冬梅 </option></datalist>
<details><summary> 如何走上人生巅峰? </summary><p> 一步一步走呗 </p></details>
![]()
4、新增文本标签
4.1 文本注音
标签 | 语义 | 单\双 标签 |
ruby | 包裹需要注音的文字 | 双 |
rt | 写注音,rt标签写在ruby的里面 | 双 |
<ruby>
<span> 魑魅魍魉 </span><rt> chī mèi w ǎ ng li ǎ ng </rt></ruby>
可以找一下在线的网站,将汉字转成拼音先![]()
4.2 文本标记
标签名 | 语义 | 单\双 标签 |
mark | 标记 | 双 |
注意:W3C 建议 mark 用于标记搜索结果中的关键字。
<p> Lorem ipsum <mark>dolor</mark>, sit amet consectetur adipisicing elit. Praesentium </p>
三、新增表单功能
1、表单控件新增属性
属性名 | 功能 |
placeholder | 提示文字(注意:不是默认值,value是默认值),适用于文字输入类的表单控件。 |
required | 表示该输入项必填,适用于 除按钮外 其他表单控件。 |
autofocus | 自动获取焦点,适用于所有表单控件。 |
autocomplete | 自动完成,可以设置为 on 或 off ,适用于文字输入类的表单控件。 注意:密码输入框、多行输入框不可用。 |
pattern | 填写正则表达式,适用于文本输入类表单控件, 注意:多行输入不可用,且空的输入框不会验证,往往于required 配合。 |
<form action="">
账号:<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="正则表达式"><br>
密码:<input type="password" name="pwd" placeholder="请输入密码" required ><br>
性别:
<input type="radio" value="male" name="gender" required>男
<input type="radio" value="female" name="gender">女
<br>
爱好:
<input type="checkbox" value="smoke" name="hobby">抽烟
<input type="checkbox" value="drink" name="hobby" required>喝酒
<input type="checkbox" value="perm" name="hobby">烫头
<br>
其他:<textarea name="other" placeholder="请输入内容"></textarea><br>
<button>提交</button>
</form>
placeholder 效果:输入框中有提示字
required 效果,必填项,必选项:
需要注意的是:放在任意单选项上效果是一样的,只选一个就可以,但是如果放在多选项上,那就必须得选被放在得那个元素上。autofocus:自动获取焦点,就是进入该页面,会自动选中该属性,一般放在第一个元素上。
autocomplete:可以自动联想出最近输入得内容,但是要打开浏览器得设置,且只能用在单行输入框中,密码输入框不行。
pattern:正则表达式,可以根据该表达式验证输入内容。空的时候不校验,一般与required 配合
2、input 新增属性值
属性名 | 功能 |
邮箱类型的输入框,表单提交时会验证格式,输入为空则不验证格式。 | |
url | url 类型的输入框,表单提交时会验证格式,输入为空则不验证格式。 |
number | 数字类型的输入框,表单提交时会验证格式,输入为空则不验证格式。 |
search | 搜索类型的输入框,表单提交时不会验证格式。 |
tel | 电话类型的输入框,表单提交时不会验证格式,在移动端使用时,会唤起数字键盘。 |
range | 范围选择框,默认值为50,表单提交时不会验证格式。 |
color | 颜色选择框,默认值为黑色,扁担提交时不会验证格式。 |
date | 日期选择框,默认值为空,表单提交时不会验证格式。 |
month | 月份选择框,默认值为空,表单提交时不会验证格式。 |
week | 周选择框,默认值为空,表单提交时不会验证格式 |
time | 时间选择框,默认值为空,表单提交时不会验证格式 |
datetime-local | 日期+时间 选择框,默认值为空,表单提交时不会验证格式。 |
1、email : <input type="email" name="email">
2、url:<input type="url" name="url">
![]()
3、number:<input type="number" name="number" step="2" max="80" min="20">
<!-- max最大值 min最小值 step 每次增加得步数 -->
4、search :
搜索:<input type="search " name="keyword">
没什么特殊功能,重在语义。
5、tel: <input type="tel" name="tel">
没有校验功能,但是在手机端能够唤起键盘输入。
6、range:<input type="range" name="range" max="80" min="20" value="50">
7、color:<input type="color" name="color">
8、date:<input type="date" name="date">
9、month:<input type="month" name="month">
10、week:<input type="week" name="week">
11、time:<input type="time" name="time">
12、datetime-local:<input type="datetime-local" name="datetime">
3、form标签新增属性
属性名 | 功能 |
novalidate | 如果给form标签设置了该属性,表单提交的时候不用再进行验证。 |
四、新增多媒体标签
1、视频标签
<video> 标签用来定义视频,它是双标签。
属性 | 值 | 描述 |
src | URL地址 | 视频地址 |
width | 像素值 | 设置视频播放器得宽度 |
height | 像素值 | 设置视频播放器得高度 |
controls | - | 向用户显示视频控件(比如播放、暂停按钮) |
muted | - | 视频静音 |
autoplay | - | 视频自动播放(必须设置静音才能自动播放) |
loop | - | 循环播放 |
poster | URL地址 | 视频封面 |
preload | auto / metadata / none | 视频预加载,如果使用 autoplay ,则忽略该属性。 none:不预加载视频 metadata:仅预先获取视频得元数据(例如长度)。 auto:可以下载整个视频文件,即使用户不希望使用它。 |
<video src="./小电影.mp4" width="600" controls muted loop poster="./封面.png" preload="auto"></video>
2、音频标签
<audio> 标签用来定义音频,它是双标签。
属性 | 值 | 描述 |
src | URL地址 | 音频地址 |
controls | - | 向用户显示音频控件(比如播放/暂定按钮) |
autoplay | - | 音频自动播放 |
muted | - | 音频经营 |
loop | - | 循环播放 |
preload | auto / metadata / none | 音频预加载,如果使用 autoplay ,则忽略该属性。 none:不预加载音频。 metadata:仅预先获取音频得元数据(例如长度)。 auto:可以下载整个音频文件,即使用户不希望使用它。 |
<audio src="./小曲.mp3" controls autoplay loop preload="auto"></audio>
五、新增全局属性(了解)
属性名 | 功能 |
contenteditable | 表示元素是否可被用户编辑,可选值如下: true:可编辑 false:不可编辑 |
draggable | 表示元素可以被拖动,可选值如下: true:可拖动 |
hidden | 隐藏元素 |
spellcheck | 规定是否对元素进行拼写和语法检查,可选值如下: true:检查 false:不检查 |
contextmenu | 规定元素得上下文菜单,在用户鼠标右键点击元素时显示。 |
data-* | 用于存储页面得私有定制数据 |
六、HTML5兼容性处理
添加元信息,让浏览器处于最优渲染模式。
<!-- 设置 IE 总是使用最新的文档模式进行渲染 --><meta http-equiv = "X-UA-Compatible" content = "IE=Edge" >
<!-- 优先使用 webkit ( Chromium ) 内核进行渲染 , 针对 360 等壳浏览器 --><meta name = "renderer" content = "webkit" >
使用 html5shiv 让低版本浏览器认识 H5语义化标签。
<!--[if lt ie 9]><script src="../sources/js/html5shiv.js"></script><![endif]-->
扩展
lt 小于
lte 小于等于gt 大于gte 大于等于! 逻辑非
示例:
<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]> 仅 IE8 以上可见 <![endif]—><!--[if lt IE 8]> 仅 IE8 以下可见 <![endif]—><!--[if gte IE 8]>IE8 及以上可见 <![endif]—><!--[if lte IE 8]>IE8 及以下可见 <![endif]—><!--[if !IE 8]> 非 IE8 的 IE 可见 <![endif]-->