HTML5 新特性,html5新属性

这里写自定义目录标题 1、新标签-语义标签2、新增的多媒体标签3、新增的 input 类型4、新增的表单元素5、新增的表单属性6、其他新增

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性

1、新标签-语义标签

< header>：头部标签
< nav>：导航标签
< article>：内容标签
< section>：定义文档某个区域
< aside>：侧边栏标签
< footer>：尾部标签

<details>定义用户可以看到或者隐藏的额外细节<summary>标签包含details元素的标题 <dialog>定义对话框 <figure>定义自包含内容，如图表<main> 定义文档主内容<mark> 定义文档的主内容<time> 定义日期/时间 2、新增的多媒体标签

新增的多媒体标签主要包含两个： 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

音频：< audio>视频：< video>
HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前元素支持三种视频格式： 尽量使用 mp4格式 <video src="文件地址" controls="controls">< /video> <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持 <video> 标签播放视频 </video>

视频 video——常见属性

属性值描述autoplayautoplay视频自动播放controlscontrols向用户显示播放控件widthpx像素设置播放器宽度heightpx像素设置播放器高度looploop播放完是否继续播放该视频，循环播放preloadauto、noneauto预先加载视频 none 不预先加视频srcurl视频url地址posterimgurl加载等待的画面图片mutedmuted静音播放<audio src="文件地址" controls="controls"></audio> <audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持 <audio> 标签。 </audio>

视频 audio ——常见属性

属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮srcurl要播放的音频的urllooploop如果出现该属性，则当音频结束时重新开始播放

谷歌浏览器把音频和视频自动播放禁止了
要想视频自动播放需要添加muted来解决

多媒体标签总结
音频标签和视频标签使用方式基本一致，浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了 ，我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

3、新增的 input 类型 属性值说明type=“email”限制用户输入必须为email类型type=“url”限制用户输入必须为url类型type=“date”限制用户输入必须为日期类型type=“time”限制用户输入必须为时间类型type=“month”限制用户输入必须为月类型type=“week”限制用户输入必须为周类型type=“number”限制用户输入必须为数字类型type=“tel”手机号码type=“search”搜索框type=“color”生成一个颜色的选择表单

重点记住： number tel search 这三个

4、新增的表单元素

html5新增了五个表单元素（form里面的元素）

<datalist>用户会在他们输入数据时看到预定义选项的下拉列表<progress>进度条，展示连接/下载进度<meter> 刻度值，用于某些计量，例如温度、重量等<keygen>提供一种验证用户的可靠方法、生成一个公钥和私钥<output>用于不同类型的输出、比如尖酸或脚本输出 5、新增的表单属性 属性值说明requiredrequired表单拥有该属性表示其内容不能为空，必填placeholder提示文本表单的提示信息，存在默认值将不显示autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单autocompleteoff/on当用户在字段开始键入时，浏览器会基于之前入过的值，应该显示出在字段中填写的选项默认已经打开，需要放在表单内，同时加上name属性，同时提交成功multiplemultiple可以多选文件提交pattern自定义正则表达式描述一个正则表达式验证输入的值min/max自定义数字设置元素最小/最大值step自定义数字为输入域规定合法的数字间隔height/wdith自定义数值用于image类型< input >标签图像高度/宽度//可以通过以下设置方式修改placeholder里面的字体颜色： input::placeholder { color: pink; } 6、其他新增

canvas绘图
svg绘图
地理定位
拖放API
Web Worker
Web Storage
WebSocket