语义化标签
HTML 新增语义化标签
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立内容
aside元素 在article之外的,与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要内容(ie不兼容)
<header></header>
<section>
<nav>
<figure>nav</figure>
<ul>
<li></li>
</ul>
</nav>
<main>
<article>
<header>article-header</header>
<footer>article-footer</footer>
</article>
<article>
<header>article-header</header>
<footer>article-footer</footer>
</article>
</main>
<aside>
<figure>aside</figure>
<p>lorem</p>
</aside>
</section>
<footer></footer>
音频和视频
<div>视频和音频</div>
音频
controls 控制栏
loop 循环
autoplay 自动播放(谷歌浏览器刷新页面不允许)
muted 静音
<audio src="" controls loop autoplay muted></audio>
视频
autoplay 自动播放(谷歌浏览器刷新页面不允许 静音之后可以)
poster 播放视频之前的海报
width
height
<video src="" controls loop autoplay muted poster="图片路径"></video>
增强表单-input
<div>增强表单</div>
<input type="text">
type="color" 生成一个颜色选择的表单
type="tel" 唤起拨号盘表单 手机使用
type="search" 产生一个搜索意义的表单
type="range" 产生一个滑动条表单 设置区间 min="100" max="200"
type="number" 产生一个数值表单
type="email" 限制用户必须数日emali类型
type="url" 限制用户必须输入url类型 网址 完整地址
type="date" 限制用户必须输入日期
type="month" 限制用户必须输入月类型
type="week" 限制用户必须输入周类型
type="time" 限制用户必须输入时间类型
type="datemite-local" 选取本地时间
<form action="">
name值必须写
颜色选择
<input type="color" name="color">
<input type="submit">
<input type="email" name="email">
滑块效果 step每次滑动增加的值
<input type="range" name="range" min="100" max="200" value="100" step="10">
数字类型
<input type="number" name="number" min="100" max="200" value="100" step="10">
<input type="submit">
</form>
<div>选项列表</div>
Datalist:选项列表
<input type="url" list="url-list" name="link">
<datalist id="url-list">
<option label="命名" value="手机">
</option>
<option label="命名" value="手表">
</option>
<option label="命名" value="手环">
</option>
</datalist>
option元素永远都要设置value属性
新增表单属性
<div>新增表单属性</div>
autofocus属性
给文本,选择框或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个
required属性
验证输入不能为空
Multiple
可以输入一个或多个值,每个值之间用逗号隔开
<input type="email" multiple>
还可以应用于file
pattern
将属性值设为某个格式的正则表达式,在提交时会检查内容是否符合给定格式
<input pattern="[0-9][A-Z]{3}" title="输入内容:一个数与三个大写字母" placeholder="输入内容:一个数与三个大写字母">
<form action="">
<div>
用户名:<input type="text" autofocus raquired>
</div>
<div>
邮箱:<input type="email" raquired>
</div>
</form>