浏览器使用html5_HTML5

HTML 5

H5新变化

• XHTML可扩展超文本标记语言，XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需要
• HTML5 HTML 5的设计目的是为了在移动设备上支持多媒体
• 增加了新特性:语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，GSS3特性
• 废弃了一些元素和属性比如 font center等

HTML5 优势

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素(视频和音频)
• 可以很好的替代FL ASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于
• SEO很友好
• 将被大量应用于移动应用程序和游戏
• 可移植性好

HTML5 劣势

• 该标准并未能很好的被pc端浏览器所支持
• ie9以下的浏览器几乎都不兼容

广义的HTML5

• 狭义的HTML5是指HTML语言的第5个版本
• 而广义的HTML5是HTML5本身+ CSS3 + JavaScript技术的综合

新增语义化标签

• <header>:头部标签
• <nav>:导航标签
• <main>:主体标签
• <article>:独立的内容标签
• <section>:区段标签
• <aside>:侧边栏标签
• <footer>:尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎的
• 这些新标签页面中可以使用多次的
• 在IE9中，需要把这些元素转换为块级元素
• 其实，我们移动端更喜欢使用这些标签
• HTML5 还增加了很多其他标签，我们后面再慢慢学
• https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

多媒体标签

• 多媒体标签包含两个，具体如下:
• 音频:<audio>
• 视频:<video>
• 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件

<audio> 音频标签

• HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
• 音频格式：

• <audio> 音频标签语法格式

<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> 音频标签常见属性

属性	值	描述

<video> 视频标签

• HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的
• 视频格式：

<video src="文件地址" controls=“controls”></video>

• 兼容写法：

<video controls="controls" width="300">
  <source src="move.ogg" type="video/mpeg">
  <source src="move.mp4" type="video/ogg">
  您的浏览器暂不支持 video 播放视频标签
</video>

<video>视频标签常见属性

属性	值	描述｜

• 总结：
  • 音频标签和视频标签使用基本一致
  • 浏览器支持情况不同
  • 我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以
  • 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件

HTML5新增表单标签

• 已学表单<input>标签类型

属性值	描述

• h5 新增<input>表单类型

属性值	描述

<datalist>标签

• <datalist> 标签规定了 <input> 元素可能的选项列表。
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值
• 绑定的<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值

<input type="text" list="city-list">
<datalist id="city-list">
  <option value="广州">gz</option>
  <option value="北京">bj</option>
  <option value="上海">sh</option>
</datalist>

<input type="text" list="city-list-2">
<datalist id="city-list-2">
  <option value="广州">
  <option value="北京">
  <option value="上海">
</datalist>

新增表单属性

属性	值	描述

|----|----|----|
|required|required|表单拥有该属性表示其内容不能为空，必填
|placeholder|提示文本|表单的提示信息，存在默认值将不显示
|autofocus|autofocus|自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页 面中放1个
|autocomplete|off / on|当用户在字段开始键入时，浏览器基于之前键入过的值，应 该显示出在字段中填写的选项。默认已经打开，如 autocomplete=”on “关闭 autocomplete =”off” -需要放在表单内同时加上name属性-同时成功提交
|multiple|multiple|可以多选文件提交