HTML5新增特性详解

HTML5新增特性详解

HTML5的概念与定义

  • 定义:HTML5定义了 HTML标准的最新版本,是对 HTML的第五次重大修改,号称下一代的 HTML。

  • 两个概念:

    • 是一个新版本的 HTML语言,定义了新的标签、特性和属性。
    • 拥有一个强大的技术集,这些技术集是指: HTML5、CSS3 、javascript, 这也是广义上的 HTML5。
  • 现状:

    • 大多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性,

      总的来说:HTML5 已经是大势所趋。

HTML5 拓展的新内容

  • 语义化标签:header、nav、article、footer、section、aside
  • 本地存储:localStorage和sessionStorage
  • 兼容特性
  • 2D、3D
  • 动画、过渡
  • CSS3 特性
  • 性能与集成
  • 用于媒介回放的视频video 和 音频audio 元素
  • 用于绘画的 canvas 元素
  • 新的表单控件,比如 calendar、date、time、email、url、search

HTML5 新增语义化标签

标签用法
header头部标签
nav导航标签
article内容标签
section块级标签
aside侧边栏标签
footer尾部标签
  1. 使用语义化标签需要注意:
    • 语义化标签主要针对搜索引擎。
    • 新标签可以使用一次或者多次。
    • 在 IE9 浏览器中,需要把语义化标签都转换为块级元素。
    • 语义化标签,在移动端支持比较友好。

多媒体音频标签audio

  1. 多媒体标签有两个,分别是
    • 音频 – audio
    • 视频 – video
  2. audio音频标签说明
    • 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
    • 但是:播放格式是有限的
  3. audio 支持的音频格式
    • audio 目前支持三种格式
格式IE9Firefox3.5Opera10.5Chrome3.0Safari3.0
Ogg Vorbis支持支持支持
MP3支持支持支持
Wav支持支持支持
  1. audio 的参数
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
looploop如果出现该属性,则每当音频结束时重新开始播放
srcurl要播放的音频的URL

5、audio 代码演示

<body>
    <!-- 注意:在 chrome 浏览器中已经禁用了 autoplay 属性 -->
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    <!-- 因为不同浏览器支持不同的格式,所以我们采取的方案是为这个音频准备多个文件 -->
    <audio controls>
        <source src="./media/snow.mp3" type="audio/mpeg" />
    </audio>
</body>

多媒体视频标签video

  1. video 视频标签

    • 目前支持三种格式
    格式IEFirefoxOperaChromeSafari
    OggNo3.5+10.5+5.0+No
    MPEG 49.0+NoNo5.0+3.0+
    WebMNo4.0+10.6+6.0+No
  2. 语法格式

    <video src="./media/video.mp4" controls="controls"></video>
    
  3. video 参数

    属性描述
    autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
    controlscontrols向用户显示播放控件
    widthpixels(像素)设置播放器宽度
    heightpixels(像素)设置播放器高度
    looploop播放完是否继续播放该视频,循环播放
    preloadauto(预先加载视频) none(不应加载视频)规定是否预加载视频(如果有了autoplay就忽略该属性)
    srcurl视频url地址
    posterImgurl加载等待的画面图片
    mutedmuted静音播放
  4. video 代码演示

    <body>
        <!-- <video src="./media/video.mp4" controls="controls"></video> -->
        <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
        <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
            <source src="./media/video.mp4" type="video/mp4">
            <source src="./media/video.ogg" type="video/ogg">
        </video>
    </body>
    
  5. 多媒体标签总结

    • 音频标签与视频标签使用基本一致。
    • 多媒体标签在不同浏览器下情况不同,存在兼容性问题。
    • 谷歌浏览器把音频和视频标签的自动播放都禁止了。
    • 谷歌浏览器中视频添加 muted 标签可以自己静音播放。

新增 input 标签type属性

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

新增表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本(占位符)表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=" on " 关闭 autocomplete= " off " ,需要放在表单内同时加上name属相,同时成功提交
multiplemultiple可以多选文件提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值