HTML5新增相关内容

HTML5相关内容

HTML5的相关内容

HTL5新增的语义化标签
视频和音频
智能表单
智能表单中的标签属性

1、HTL5新增的语义化标签

section元素表示页面中的一个内容区块(有了section就不要写main)
article元素表示一块与上下文无关的独立的内容
aside:元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer:元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容(ie不兼容)

2、视频和音频

video:元素定义视频

<video src="movie.ogg"controls="controls">Video</video>

属性:

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay:属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted,属性：静音属性。
poster:属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。(视频出现的照片,自己设置)

source 备份文件

src=“文件地址”

视频格式

type=“video/webm” type=“video/ogg” type=“video/mp4”

  <!-- <video src="video/3theA.mp4" controls autoplay loop muted poster="../img/image-20230807114610259.png"></video> -->
    <video controls>
        <source src="video/mov_bbb.mp4" type="video/mp4">

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

audio元素定义音频

<audio src="someaduio.wav">Audio</audio>

属性:

controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay:属性：如果出现该属性，则视频在就绪后马上播放。
loop属性：重复播放属性。
muted,属性：静音属性。

音频格式

type=“audio/mpeg” type=“audio/ogg”

  <audio src="video/a.mp3" controls></audio>
    <audio controls>
        <source src="video/movie.ogg" type="audio/ogg">
        <source src="video/movie.webm" type="audio/ogg">

    </audio>

3、智能表单-新增输入类型

Type="color'"生成一个颜色选择的表单
Type="tel”唤起拨号盘表单
Type="search”产生一个搜索意义的表单
Type="range'”产生一个滑动条表单
Type="number"产生一个数值表单
Type="emai”限制用户必须输入email类型
Type="ur限制用户必须输入url类型
Type="date”限制用户必须输入日期
Type="onth”限制用户必须输入月类型
Type="week”限制用户必须输入周类型
Type="time”限制用户必须输入时间类型
Type="datetime-local”选取本地时间

input类型设置
email:

专门用来输入email地址的文本框，如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查mai地址是否存在。提交时可以为空，除非加上了required属性。
具有multiple,属性，它允许在该文本框中输入一串以(逗号)分隔的email地址。

url类型:

专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。mail地址。
<input name='url1'type='url'value="http://www.baidu.com">

Number类型

专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，兵有min、max、step的属性。
<input name="number1"type="number"value="25"min="10"max="100"step="5"/>

range类型

是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。
<input name="range1"type="range"value="25"min="O"max="100 step="5"/>
    min最小值
    max最大值
    step数字间隔
(date,month,week,time,datetime,datetime-local)
拥有多个可供选取日期和时间的新输入类型。
    date-选取日、月、年
    month-选取月、年
    week-选取周和年
    time-选取时间（小时和分钟）
    datetime-选取时间、日、月、年(UTC时间)
    datetime-local-选取时间、日、月、年（本地时间）
    例：<input type:="month" &gr;
    Search·输入的是搜索的关键字，与type=“"tet”基本上一样。

4.表单新属性

1)、Datalist:选项列表

input的list属性值要与datalist的id值相同

<input type="url"list="url_list"name="link"/>
<datalist id="url list">
    <option label="W3School"value="http://www.W3School.com.cn"/>
    <option label="Google"value="http://www.google.com"/>
    <option label="Microsoft"value="http://www.microsoft.com"/>
</datalist>

提示：option元素永远都要设置value属性。

2.属性

placeholder属性：
文本框处于未输入状态时文本框中显示的输入提示。
autofocus属性：
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得光标焦点，一个页面只能有一个

required属性

验证输入不能为空
list属性：
结合datalist元素使用
autocomplete属性：
输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：
on/off/“”。**on,空,**可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示：<iput
type="text"name=“greeting” autoconplete=“on” list =greeting’>

3.自动验证

1)、required
可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，
2)、pattern正则表达式
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例：

<input pattern="[0-9][A-Z]{3}" title="输入内容：一个数与三个大写字母">