HTML5新特性(基本)

1、HTML5改进

(1)兼容性 核心理念:保持一切新特性平滑过渡

(2)实用性和用户优先

(3)化繁为简

2、HTML新特性

(1)减少了对外部插件的需求(flash)

(2)更优秀的错误处理

(3)更多取代脚本的标记

(4)HTML5应该独立与设备

(5)用于媒介回放的video和audio元素

3、HTML5最大的改变是可以插入视频与音频

<video>标签定义视频(支持三种格式MP4 WebM Ogg)

<audio>标签定义音频(支持三种格式MP3 Wav Ogg)

<source>标签为媒体元素用来定义媒体资源(一个媒体可定义两个视频或音频文件供浏览器根据其对媒体类型的支持进行选择)

属性:

control 供添加播放 暂停和音量控件

preload 预先加载

muted 静音模式

loop 循环播放

poster 刚开始先出现一副图片

autoplay 自动播放

语法结构:

<video controls >

<source src="视频/音频地址"></source>

<source src="视频/音频地址"></source>

视频无法播放,您的浏览器版本太低。请升级

</video>

4、语义化标签

<header> 定义文档的头部区域

<nav> 标签定义导航链接的部分

<section> 定义文档中的节

<article>定义独立的内容

<aside>定义页面主区域内容之外的内容

<footer>描述文档的底部区域

5、新增块级语义化标签

dialog元素 定义对话或者特殊术语 对话中的每个句子都必须属于<dt>标签所定义的部分 脱离文档流上一层中

<dialog open>

<dt>你好吗?</dt>

<dd>我很好。</dd>

<dt>你真的好吗?</dt>

<dd>我真的很好。</dd>

<dt>.........</dt>

<dd>.......</dd>

</dialog>

6、行内元素

<mark> </mark> 标记一段话 着重表示

<meter></meter> 度量衡 必须定义度量的范围

<progress></progress>表示运行中的进程 无范围

7、新增嵌入式模块和交互式模块(块级模块 智能化选择)

<details>

<summary>HTML5<summary>  //标题

HTML5新特性    //解释内容

</details>

用户要求得到且可以得到的细节信息 与summary结合使用


<datalist> 可选数据的列表与input结合使用

<input list="列表id"/>     //定义要输入内容的列表

<datalist id="列表id">.    //确保找到的列表唯一 所以用id标识

<option>选择1</option>

<option>选择2</option>

</datalist>

8、新增input元素类型(使输入更加智能化识别 方便用户进行操作)

email 邮件号输入时会验证署人员格式是否正确

url 地址同样

number 只输入一个数 且可以规定最大值 最小值 每次递增或者递减数

color 颜色的输入选择

tel 电话号码的输入选择

date month week time datetime 等时间的新输入类型

9、对表单的自动验证

required属性 确保必填

pattern 根据所要求的规则验证用户输入是否正确

autocomplete 自动补全属性


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值