H5学习第6天

1.新增语义化标签

新增布局标签
header	头部
footer	底部
nav	导航
aside	侧边栏
article	文章、帖子、杂志、新闻、博客、评论等
section	页面中的某段文字或文章只能的某段文字，（文字里面通常会包含标题）

artice 和section 区别

        1.articele里 可以有多个 section

        2. section 强调的是分段或分块

        3.articele 比 section更强调独立性  

新增状态标签
meter  电量	high low max规定最大值 min规定最小值 optimum最优值 value当前数值
progress	显示任务完成进度

新增列表标签
datalist	用于搜索框的关键字提示
datails	展示问题和答案，对专用名词进行解释，配合summary使用
summary	写在datails里面，用于解释名词等

新增文本标签
ruby rt	名词 和拼音 ，名词ruby写上面 rt拼音写下面，呈现的是 上面拼音下面文字
mark	文本标记,标记搜索结果中的关键字

2.新增表单标签

        

表单控件新增属性（像是hidden等属性）
placeholder	提示文字	用于文字输入类表单控件
required	必填选项	用于除按钮外的其他表单控件
autofocus	自动获取焦点	用于所有
autocomplete：on或者off	自动输入（保留输入的记录）	需要开启浏览器的保存并填写地址
pattern	正则表达式	用于文本输入类 表单控件

input新增的type属性值
type=xxx
email	邮箱	一定要写name
url	网址
number	数值	可以设置max min 最大最小值，step 每次增加的多少
tel	电话	只能作用在手机上
range	范围
color	颜色
data	日期
month	月份
week	周
time	时间
datetime-loacl	日期+时间

form上的属性 novalidate 不验证数据

3.多媒体标签

视频标签 video
src	地址
width height	宽高
controls	显示视频控制控件
muted	视频静音
autoplay	自动播放	自动播放需要禁音才行, 没有静音是因为 媒体参与度高
loop	循环播放
poster	视频封面
preload	视频预加载	none 不预加载 metadata 只获取视频元数据，例如视频长度等 auto 自动加载

音频标签 audio
controls	显示音频控制控件
muted	禁音
autoplay	自动播放
loop	循环播放
preload	音频预加载	none 不预加载 metadata 只获取视频元数据，例如视频长度等 auto 自动加载

音频和视频相比就少了 宽高 和 封面

4.新增全局属性(了解即可)

        

contenteditable：true /false	可编辑
draggable ：true /false	可被拖动
hidden	隐藏元素
spellcheck ：true /false	对元素进行拼写和语法检查
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-*	自定义属性

5.h5兼容性处理

        1.添加元信息，让浏览器处于最优渲染模式

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( chromium ) 内核进行染，针对369等壳浏览器--><meta name="renderer" content="webkit">

        2.使用 htm15shiv 让低版本浏览器认识 H5 的语义化标签

<!--[if lt ie g]>
<script src="../sources/js/html5shiv.js"></script>

<![endif]-->