HTML5介绍

HTML5介绍

超文本标记语言第5代，万维网的核心语言

• 新特性

  • 5代的目的是为了在移动设备上支持多媒体。
  • 增加了语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维，图形及特效特性，性能与集成特性，CSS3特性。
  • 废弃了一些元素和属性

• 新变化

  • XHTML 是一种增强了的HTML，它的可扩展性灵活性适应未来。

• 优势

  • 提高可用性，改进用户体验
  • 更好的语义化标签
  • 更多多媒体元素
  • 替代了 flash 和 Silverlight
  • 涉及网站抓取和索引时，对 SEO 很友好
  • 大量被用于移动应用程序和游戏
  • 可移植性好

• 劣势

  • 没有被所有浏览器支持
  • ie9 以下的浏览器几乎不兼容

• 广义的HTML5

  • HTML5 + css3 + JavaScript 技术的综合

新增的语义化标签

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

注意：

• 这种语义化主要针对搜索引擎
• 新标签可以在页面中使用多次
• IE9 中最好把这些元素转为块级元素
• 移动端用的更多

新增的视频音频标签

• video 视频
  • autoplay:autoplay :加载后自动播放 (属性名:属性值) 俩个一样
    • 谷歌不支持 除非加了muted
  • controls:controls :视频控制条
  • loop:loop :循环播放
  • preload: 是否预加载视频
    • auto: 预加载
    • none: 不加载
  • src:url :视频加载地址
  • width :设置播放器的宽度
  • height :设置播放器的高度
  • poster:IngUrl :加载等待播放图
  • muted:muted :静音播放
• audio 音频
  • autoplay:autoplay :加载后自动播放 (属性名:属性值) 俩个一样
    • 谷歌不支持
  • controls:controls :音频控制条
  • loop:loop :循环播放
  • preload:preload :预加载数据 改善用户 autoplay存在时 该属性无效
  • src:url :要播放的文件url

HTML5 中属性名与属性值一样时，可以简写成一个

<audio src="../模块1/snow.mp3" controls="controls"></audio>
<audio src="../模块1/snow.mp3" controls></audio>

多种音频视频格式的兼容写法
不同的浏览器支持的音频视频格式可能不同，考虑到浏览器兼容，建议采用兼容写法

<audio controls>
    <source src="../模块1/snow.mp3" type="audio/mpeg">
    <source src="../模块1/snow.ogg" type="audio/ogg">
    您的浏览器版本过低，不支持 audio 标签
</audio
<video controls width="300px">
    <source src="../模块1/video.mp4" type="video/mp4">
    <source src="../模块1/video.ogg" type="video/ogg">
    您的浏览器版本过低，不支持 video 标签
</video

HTML5 新增表单（input 的 type 值）的属性

• email ：必须输入Email类型
• url ：必须输入url类型
• date ：必须输入日期
• time ：必须输入时间
• month ：必须输入月份
• week ：必须输入周类型
• number ： 必须输入数字类型
  • max ：可以控制输入的最大值
  • min ：输入最小值
  • step : 按钮每次跳转间隔数
• range ： 滑动条
  • max ：可以控制输入的最大值
  • min ：输入最小值
  • step : 按钮每次跳转间隔数
• tel ： 手机号
• search ： 搜索框
• color ： 生成一个颜色选择表单

新增可输入表单 datalist

在 datalist 提前预设好一些值，这样用户在表单输入的时候就可以自动关联。
datalist 元素包含了一组 option 元素来定义预设值,通过 input 的 list 属性来关联 datalist 的id值

<form action="">
        城市：<input type="text" list="list1"><br>
        <datalist id="list1">
            <option value="北京">bj</option>
            <option value="上海">sh</option>
            <option value="成都">cd</option>
            <option value="纽约">
        </datalist>
    </form>

表单（input 的属性）新增属性

• required
  • 属性值：required
  • 内容不能为空，必填
• placeholder
  • 属性值：提示的文本
  • 默认值不显示
• autofocus
  • 属性值：autofocus
  • 自动聚焦属性，页面加载完成聚焦到指定表单，一般页面中只放一个
• autocompelte
  • on/off
  • 显示用户之前填过的信息
    • input 必须有 name 属性
    • 必须提交过
• mutiple
  • mutiple
  • 多选文件提交

用户名：<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" autocomplete="on" name="user"><br>