html5的特点有哪些 html5的特性

文章目录

• 1.HTML5概述
• 2.HTML5新增的标签
• 3.增加了audio和video,抛弃了Flash
• 4 embed
• 5.增加了一些语义化标签
• 6.HTML5新增的属性
• 7.HTML5表单组件
• 8.表单属性
• 9.input属性

1.HTML5概述

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5网页布局标签:

（1）header

(2)article

(3)nav

(4)section

(5)aside

(6)main

(7)footer

2.HTML5新增的标签

• 增加了audio和video,抛弃了Flash
• 增加了canvas画布
• 增加了地理定位
• 增加了离线缓存
• 增加了硬件加速
• web Socket (全双工通信)
• 增加了本地存储
• 增加了一些语义化标签

3.增加了audio和video,抛弃了Flash

(1) audio
（1）作用：播放音频或者音乐。
（2）支持格式：.mp3/.ogg/.wav
（3）属性：

• src: 文件路径
• autoplay: 自动播放
• loop: 循环播放
• controls: 控制条
• muted: 静音
• preload: 预加载（当使用autoplay时，preload自动失效）

<audio src="../audio/夜空中最亮的星.mp3" controls autoplay></audio>

(2) video
（1）作用：播放视频。
（2）支持格式： .mp4/.ogg/.webm
（3）属性：

• src: 文件路径。
• autoplay: 自动播放
• loop: 循环播放
• controls: 控制条
• muted: 静音
• preload: 预加载（当使用autoplay时，preload自动失效）
• width：宽度
• height：高度
• poster: 海报

<video src="../video/w-001.mp4" autoplay width="550px" poster="../image/d.jpg"></video>

4 embed

（1）作用：嵌入内容或者加载插件。
（2）属性：

• src: 文件路径
• width：宽度
• height：高度
• type: 类型

5.增加了一些语义化标签

(1)mark
作用：高亮显示。

<p>深圳最早的前身为广州宝安县，“深圳”地名始见史籍于<mark>1410年</mark>（明永乐八年），于清朝初年建墟。
        当地方言俗称田野间的水沟为“圳”或“涌”。深圳正因其水泽密布，村落边有一条深水沟而得名。 </p>

(2)details和summary

作用：描述与摘要，用于名词解释或者封装一个区块。

<details>
        <summary>深圳历史</summary>
        <p>深圳最早的前身为广州宝安县，“深圳”地名始见史籍于1410年（明永乐八年），于清朝初年建墟。
            当地方言俗称田野间的水沟为“圳”或“涌”。深圳正因其水泽密布，村落边有一条深水沟而得名。 </p>
 </details>

点开之后：

(3) meter

作用：定义度量衡。显示一个计数仪表。

属性：

• value: 当前值。
• max: 最大值。
• min: 最小值。
• low: 指定范围最小值。
• high: 指定范围最大值。

<meter value="90" min="10" max="120">90</meter>公里/小时

(4) progress

作用：显示一个进度条。

属性：

• value: 当前进度。
• max: 进度完成时的最大值。

<p>进度：</p>
 <progress value="90" max="110"></progress>

(5) dialog

作用：定义模块框或者对话框。

<dialog open>
        我的对话框
 </dialog>

(6) figure

作用：用于对图片和文字进行组合。

<figure>
        <h6>image-earth</h6>
        <img src="../image/d.jpg" alt="风景"/>
        <p>地球</p>
    </figure>

6.HTML5新增的属性

（1）contenteditable
将标签转换成可编辑状态。对于所有的标签，只有两个值，true/false。默认值是false。

<p contenteditable="true">深圳是中国的一个一线城市</p>

（2） hidden

对元素进行隐蔽，默认值是hidden。可以隐蔽。

深圳是中国的一个一线城市

（3）data - *
用于存储页面或应用程序的私有自定义数据，一般用于传值。

<p data-id="000">深圳是中国的一个一线城市</p>

（4）multiple
属性规定输入域可以输入多个内容。

<label>
        <select multiple>
            <option value="北京">北京</option>
            <option value="上海">广州</option>
            <option value="天津">天津</option>
        </select>
    </label>

（5）required

约束表单元在提交之前必须填写内容。

<form action="#">
        <label>
            <input type="text" placeholder="请输入用户名" required/><br/>
            <input type="email" placeholder="请输入邮箱"/>
            <input type="submit"/>
        </label>
    </form>

（6）pattern

属性用于验证输入字段的模式。

<form action="#">
        <label>
            <input type="text" placeholder="请输入用户名" pattern="[A-Za-z]{3,5}"/>
            <input type="submit"/>
        </label><br/>
 </form>

7.HTML5表单组件

（1）color：颜色。
（2）email：邮箱。
（3）tel：电话号码。
（4）url：网址
（5）number：数字

• value: 默认值。
• max: 最大值。
• min: 最小值。
• step: 设置数字间隔。

<label>
        <input type="number" min="10" max="100"/>
    </label>

（6）range
范围

<label>
        <input type="range" min="10" max="100"/>
    </label>

（7）search
搜索

<label>
        <input type="search"/>
    </label>

（8）date
日期
（9）datetime
日期时间。
（10）datetime-local
本地日期时间
（11）year
年
（12）month
月
（13）time
时间
（14）week

8.表单属性

(1)formaction：修改数据提交的地方。

<form action="//baidu.com">
        <label>
            <input type="submit" formaction="//jd.com"/>
        </label>
    </form>

(2)formenctype：修改表单请求的类型

<form action="#" enctype="application/x-www-form-urlencoded">
        <label>
            <!--文件上传类型-->
            <input type="submit" formenctype="multipart/form-data"/>
        </label>
</form>

(3)formmethod：修改数据提交的方法

<form action="#" method="get">
        <label>
            <input type="submit" formmethod="post"/>
        </label>
</form>

(4)form：设置表单元素属于哪个表单

<form action="#" method="get" id="user-info">
    <label>
        <input type="text" name="username"/>
        <input type="submit">
    </label>
</form>
<form action="#" method="get" id="student-info">
    <label>
        <input type="text" name="username"/>
        <input type="submit">
    </label>
</form>
<label>
    <!--表单属于最上一个表单域-->
    <input type="password" form="user-info"/>
</label>

(5)novalidate
不验证

<form action="#" novalidate>
        <label>
            <input type="email"/>
            <input type="submit">
        </label>
    </form>

即使不符合email的书写规范，也能正确提交。

9.input属性

（1）autocomplete：自动完成。
用来帮助用户，每一次输入内容，浏览器是否保存内容，以供下一次使用，值分为off/on,默认为on。

<form action="">
        <label>
            <input type="text" name="students"/>
            <input type="submit">
        </label>
</form>

（2）autofocus：自动获焦。
（3）step：步长。
（4）multiple：多选。
（5）pattern：正则匹配。
（6）placeholder：输入提示。

<label>
        <input type="text" name="username" placeholder="请输入用户名:"><br/>
        <label>联系方式:</label>
        <label><input type="tel"/></label><br/>
        <input type="submit"/>
</label>

（7）required：必须输入。