01.HTML5提高-新增属性

目录

前言

一、html5新增语义化标签

二、html5新增多媒体标签

1.视频标签video

video-常见属性

兼容性写法：

2.音频标签 audio

audio-常见属性

兼容性写法（一般不需要这样写）：

三、html5新增input 类型

常见的input类型 

四、html5新增表单属性

1. placeholder-提示文本   

2. multiple-多文件提交     

3. autofocus-自动聚焦     

4. autocomplete-自动记录填写过的属性

总结

---

前言

分享相关H5新增的属性-后续会持续补充

---

一、html5新增语义化标签

1. header   头部标签

2. nav  导航栏标签

3. article   内容标签

4. section  某个区域  基本和div一致

5. aside 侧边栏标签

6. footer  尾部标签

优点：一看就知道是什么要干什么 

缺点：有兼容性，IE9以上版本浏览器才可以使用

使用注意：

• 语义化标签主要是针对搜索引擎使用的

• 可以多次使用

• 在IE9中，需要把这些元素转化为块级元素

• 移动端更喜欢使用这些标签

---

二、html5新增多媒体标签

1.视频标签video

支持三种视频格式：MP4 （基本所有浏览器都支持）、WebM、Ogg

写法：<video src="文件地址"></video>

video-常见属性

autoplay    自动播放（goole浏览器不支持，需要再添加muted来解决自动播放）

loop        循环播放

controls    显示播放控件（一般不直接设置，后期会用js实现）

width       设置宽度

height      设置高度

src         视频url地址

poster      加载等待的画面

muted       静音播放

src         文件地址

兼容性写法：

<video width="320" height="240" controls> 

<source src="movie.mp4" type="video/mp4"> 

<source src="movie.ogg" type="video/ogg"> 

您的浏览器不支持 video 标签。 

</video>

2.音频标签 audio

支持三种音频格式：MP3 （基本所有浏览器都支持）、WebM、Ogg

写法：<audio src="文件地址"></audio>代码如下（示例）：

audio-常见属性

autoplay    自动播放（goole浏览器不支持，后期学了js后实现）

loop        循环播放

controls    显示播放控件（一般不直接设置，后期会用js实现）

src         文件地址

muted       静音播放

兼容性写法（一般不需要这样写）：

<audio controls> 

<source src="horse.ogg" type="audio/ogg"> 

<source src="horse.mp3" type="audio/mpeg"> 

您的浏览器不支持 audio 元素。

 </audio>

---

三、html5新增input 类型

语法：<input type="" > 

常见的input类型 

type="email"      限制用户输入的必须为邮件类型

type="url"        限制用户输入的必须为url网址类型

type="date"       限制用户输入的必须为日期类型

type="time"       限制用户输入的必须为时间类型

type="month"      限制用户输入的必须为月

type="week"       限制用户输入的必须为周

type="number"     限制用户输入的必须为数字

type="tel"        手机号码

type="search"     搜索框

type="color"      生成一个颜色选择表单

---

四、html5新增表单属性

1. placeholder-提示文本   

语法：<input type="text" placeholder="请输入用户名">

可以通过以下方式修改placeholder里面的字体

input::placeholder {

    color: pink;

}

2. multiple-多文件提交     

语法： multiple="multiple"

3. autofocus-自动聚焦     

语法：autofoucs="autofoucs"

4. autocomplete-自动记录填写过的属性

语法1：autocomplete="on"   默认打开

语法2：autocomplete="off"   为了安全性一般都需要关闭

使用场景：input必须要设置name名称并且成功提交过一次

总结

以上是分享的关于H5新增的少部分内容，主要是关于新增语义化标签、新增input类型、新增表单属性以及新增的多媒体标签。还有很多其他相关的内容，后续会继续补充。

学习"pink" 的含义： 拼尽全力！克服困难