HTML - 2
HTML - 2
HTML5 是新一代 HTML 标准，由万维网联盟 W3C 完成标准制定
在狭义上是最新一代的 HTML 标准，广义上是指整个前端
HTML5优势
-
针对 Javascript 新增了很多可操作的接口
-
新增了一些语义化标签、全局属性
-
新增了多媒体标签，可以很好地替代 flash
-
更加侧重语义化，对于 SEO 更友好
-
可移植性好，可以在大量应用在移动设备上
HTML5兼容性
支持 Chrome、Safari、Opera、Firefox 等主流浏览器
IE 必须是9及以上才仅部分支持 HTML5
HTML5新增语义化标签
新增布局标签
| 标签名 | 语义 |
|---|---|
| header | 头部 |
| footer | 脚部 |
| nav | 导航栏 |
| article | 文章、帖子、评论等 |
| section | 页面中的某段文字、文章中的某段文字 |
| aside | 侧边栏 |
| main | 文档的主要内容（几乎不同） |
| hgroup | 包裹连续的标题（几乎不同） |
article 和 section 的区别：
artical里面可以有多个sectionsection强调分段，如果一块内容需要分成几段的时候，可用section元素article比section更强调独立性，如果一块内容比较独立完整，应该使用article
新增状态标签
尺度 <meter>
定义已知范围内的标量测量
<!-- 20-80是正常值：绿色；其它区间：黄色 -->
<meter max="100" min="0" value="50" low="20" high="80"></meter>
<span>手机电量：</span>
<!-- 90在80-100之间：绿色 80-100; 黄色 20-80; 红色 0-20 -->
<meter max="100" min="0" value="50" low="20" high="80" optimu="90"></meter>
进度 <progress>
显式某个任务的进度
<progress max="100" value="20"></progress>
新增列表标签
<option>
搜索框关键字提示
<form action="#">
<input type="text" list="mydata">
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
<details> <summary>
问答，对专有名词的解释
<details>
<summary>details</summary>
<p>点击展开详情内容</p>
</details>
新增文本标签
文本注音
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang liang</rt> <!-- 浏览器中会自动放到文字头上 -->
</ruby>
文本标记
呈现搜索结果
<p>
你好，我是<mark>胡图图</mark>。
</p>
新增表单控件属性
placeholder
可用于：文本输入类表单控件
required必填
可用于：文本输入类表单控件
单选框（加在一个上，表示必须选一个）
多选框（加在一个上，表示必须选那一个）
账号：<input type="text" name="account" placeholder="请输入账号" required autofocus>
autofocus自动获取焦点
可用于：all
autocomplete自动完成 （基于历史输入）
文本输入类表单控件，不能用在 密码 单选 多选 多行输入 上
账号：<input type="text" name="account" autocomplete="on"> <!-- off -->
pattern填写正则表达
账号：<input
type="text"
name="account"
placeholder="请输入账号"
required
autofocus
autocomplete="on"
pattern="\w{6}">
限制不了多行输入
不加 required 也可以不遵守正则表达输入
input新增type属性值
type="email"
输入要符合邮箱格式，输入为空可以提交
type="url"
输入要符合url格式，输入为空可以提交
<form action="#">
邮箱：<input type="email" name="email">
url：<input type="url" name="url">
<button>提交</button>
</form>
type="number"
输入要是数值，输入为空可以提交
数值：<input type="number" name="number" step="2" max="80" min="20">
type="search"
没有校验，可以清空输入，输入为空可以提交
搜索：<input type="search" name="keywords">
type="tel"
不用于pc，移动端只允许输入数字，输入为空可以提交
电话：<input type="tel" name="phone">
type="range"
光照强度：<input type="range" name="range" max="80" min="20" value="20">
type="color"
颜色选择器 (默认黑色)
颜色：<input type="color" name="color">
type="date"type=monthtype=weektype=time
输入为空可以提交
日期：<input type="date" name="date">
type=datetime-local
日期+时间
form新增属性
<!-- 表单不做任何校验 -->
<form action="" novalidate>
</form>
新增视频标签
<video>
<!-- 尽量用css调整宽高 -->
<video src="" width="" height=""></video>
controls 播放控制条
muted 自动静音
autoplay 自动播放（必须静音：受网页媒体参与度影响）
loop 循环播放
poster 视频封面（大小要和视频一致）
preload 预加载
<video src="" controls muted autoplay loop
poster="./封面.jpg"
preload="none"></video>
<!--
metadata: 加载视频基本信息
auto: 自动预加载 -->
新增音频标签
<auto>
autoplay （一般不行，受网页媒体参与度影响）可以通过js完成自动播放
<auto src="" controls muted loop
preload="auto"></auto>
<!-- none metadata -->
可以通过 css 设置宽高（高度是留出空白，不推荐），<auto> 标签没有 width height 属性
新增全局属性
contenteditable
<div contentediable="true">
hello
</div>
draggable配合 js
<div draggable="true">
hello
</div>
hidden不占位隐藏
<div hidden>
hello
</div>
spellcheck拼写检查（浏览器要打开）
<div spellcheck="true">
hello
</div>
-
contextmenu配合 js 设置右键菜单 -
data-*
<div data-a="1">
hello
</div>
兼容性问题
<head>
<!-- 让IE浏览器处于一个最优的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>
浙公网安备 33010602011771号