HTML5+CSS3新特性新功能新理解

HTML5-01 HTML5新标签、新特性

HTML5新增语义化标签：

header : 用来定义文档的页眉，文档的头部

nav : 用来定义导航栏

main: 用来定义文档主题

section: 用来定义文档主题中的节

article: 用于定义表示文档、页面、应用程序中独立的、完整的导航元素链接到其他页面或其他部分

footer: 用来定义文档底部

aside: 用于定义侧边栏

meter: 用来定义进度条

（meter颜色改变：meter中有4个属性，把mater分为了3个部分，每个部分都有它独立的颜色，从小到大依次为min=“0” low=“2” high=“7” max=“10” value=9）min-low 红色 low-high黄色 high-max绿色

progress: 蓝色的进度条，同样可以使用value来控制

h5中最具特点的还是对于表单的特性功能的增加

1.4 常用新属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符提供可描述输入字段预期值的提示信息
autofocus	<input type="text" autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="on" name="auto">	规定表单是否应该启用自动完成功能，on默认，启用自动完成（name必须，提交按钮必须）
required	<input type="text" required>	必填项
tabindex	<button tabindex="2">点我</button>	指定获取焦点的顺序
data-*	<div id="box" data-user-name="张美丽">box</div>	自定义标签属性

1.5 新增的input的type属性值(重点)

类型****	使用示例****	含义****
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
time	<input type="time">
date	<input type="date">
month	<input type="month">
week	<input type="week">

新增媒体标签

• embed：标签定义嵌入的内容
• audio：播放音频
• video：播放视频

媒体标签audio属性：

controls 是否显不默认播放控件
autoplay 自动播放(目前很多浏览器不支持自动播放)
loop 循环播放video：播放视频

媒体标签video属性：

autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放）
muted 静音播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度

新增用于绘画的canvas

新增API:Location、Navigator、History、FileReader

新增本地离线储存：localStorage、sessionStorage

字体图标

在一定程度上图片可以用来展示很多文字所不能展示的画面，或则功能，但是有没有想过图片也有它的弊端，那就是太大，且放大会失真，这时字体图标（iconfont）应运而生。

字体图标优势：

非常小 、可以受文本样式所控制、以文本格式保存书写 、放大不会失真。可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器。
移动端设备必备良药…

字体图标的搜索及使用：

http://www.iconfont.cn/

这个是阿里巴巴M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

简介步骤：点击搜索，搜索想要类型的图标，然后点击添加到购物车选择完毕后点击右侧进行代码下载，然后解压，随后打开文件夹中的index.html文件然后点击 Font class 根据步骤进行引入css文件更改类名（不可以删除基类类名）

（如果反响好的话后续推出详细使用方式）