HTML5

168 阅读3分钟

HTML5简介

狭义: HTML5狭义上指的是HTML语言的第五个版本。

广义: 广义上是HTML5+CSS3+JavaScript技术的综合。

概述:
    HTML5设计的目的是为了我移动设备上支持多媒体。

    HTML5增加了新特性:语义化标签、本地储存特性、设备兼容性、链接特性、网页多媒体特性、三维、图形、特效、性能、集成特效。

    废弃了一些元素和属性如:font、center ...

优势: 
    1. 提高可用性、改进用户的友好体验。
    2. 更好的语义化标签。
    3. 可以给站点带来更多的多媒体元素(视频、音频。
    4. 可以很好地替代flash。
    5. 更加友好的支持SEO,语义化的标签和其他设置有利于网站的抓取和索引。
    6. 被大量的应用于移动端程序和游戏。
    7. 可移植性好。 可以实现各个平台终端的移植使用。
劣势: 
    1. 该标准并未很好地 被PC端浏览器所支持。
    2. IE9以下的浏览器几乎不兼容。

H5新增语义化标签

主体框架语义化标签:

    <header> :头部
    <nav> :导航
    <main> :主体
    <article> :主体内容标签
    <section> :区段标签。 类似div
    <aside> :侧边栏
    <footer> :尾部
    ···

多媒体标签

  • 音频 <audio>
  • 视频 <video>

音频标签:<audio>

常见属性:
        属性名:     属性值:    描述:
        autoplay    autoplay    自动播放
        controls    controls    显示控件
        loop        loop        循环播放
        preload     preload     preload值设置在页面加载后载入音频,并预备播放。如果使用 "autoplay",则忽略该属性。   
        src         url         音频地址

书写方式:
        <!--h5中如果标签的属性名和属性值是一样的,属性值可以省略不写-->
        <!--controls,控制属性-->
        <audio src="文件地址" controls></audio>
    
        兼容写法:
                添加多个音频资源。适配各版本浏览器。
                <audio controls>
                    <source src="media/demo.mp3" type="audio/mpeg">
                    <source src="media/demo.ogg" type="audio/ogg">
                </audio>

视频标签:<video>

书写方式:     
        <audio src="文件地址" controls></audio>

常见属性:
          属性	      值	        描述
        autoplay    autoplay	视频在就绪后马上播放。
        controls    controls	向用户显示控件,比如播放按钮。
        width       pixels	    设置视频播放器的宽度。
        height      pixels	    设置视频播放器的高度。
        loop        loop	    当媒介文件完成播放后再次开始播放。
        preload     auto预加载/none不预加载	    视频在页面加载时进行预加载。 如果使用 "autoplay",则忽略该属性。
        src         url	        要播放的视频的 URL。
        poster      imgurl      加载等待图片。 封面
        muted       muted       静音播放
        
兼容写法:
        添加多个视频资源。适配各版本浏览器。
        <video controls width="300px">
            <source src="media/video.mp4" type="video/mp4">
            <source src="media/video.ogg" type="video/ogg">
        </video>

H5新增标签

  • 输入标签
  • 表单属性

输入标签

增加了input表单更多的语义的type类型: email、url、data、time、month、week、number、range、tel、search、color
浏览器会根据各type类型校验输入内容格式是否符合type类型并提醒用户重新填写。

<datalist>标签
规定了<input>元素可能的选项列表。
<datalist>标签包含了一组 <option>元素,预定义的可选项列表。
绑定的<input>标签必须设置list属性,list属性值等于<datalist>标签的id属性值。

表单属性

required 属性       规定必须在提交之前填写输入域(不能为空)。

placeholder 属性    属性值定义了input表单里面的默认提示用户输入信息的提示信息

autofocus           页面加载完自动聚焦到指定的表单

autocomplete        用户键入时浏览器会显示之前用户 成功提交过的历史记录

multiple            规定上传文件是可以多选