沃梦达 / 编程技术 / 前端开发 / 正文

HTML5新增-页面结构状态-列表-表单-音视频-全局兼容

前端开发
2023-10-27

页面结构状态-列表-表单-音视频-全局兼容1 HTML5 新增语义化标签1.1 新增页面结构标签标签名语义和功能属性单标签还是双标签header表示页面或section中的页眉双footer表示页面或section中的页脚双article表示文章...

页面结构状态-列表-表单-音视频-全局兼容

1 HTML5 新增语义化标签

1.1 新增页面结构标签

标签名语义和功能属性单标签还是双标签
header表示页面或section中的页眉双
footer表示页面或section中的页脚双
article表示文章、博客、新闻、帖子、评论等双
aside表示侧边栏双
nav表示导航双
section表示页面中的一节或文章中的一段双

总结： HTML5新增的这些结构标签就是具有语义的 div。

1.2 新增状态标签

标签名语义和功能属性单标签还是双标签
meter表示静态的度量，如用量、磁盘容量、温度等max、min、value、high、low 等双
progress表示进度，如完成多少、进行多少等max、value双

meter 和 progress 什么区别？

meter 表示静态的度量，如用量、磁盘容量、温度等； progress 表示进度，如完成多少、进行多少等

1.3 新增列表标签

标签名语义和功能属性单标签还是双标签
datalist定义输入框的输入提示列表双
details定义对某个问题的详细说明双
summary嵌套在 details 里面，表示要解释的问题双

① datalist 的用法

<input type="text" list="inputData">
<datalist id="inputData">
    <option value="abc"></option>
    <option value="ab"></option>
    <option value="aaab"></option>
    <option value="abcd"></option>
    <option value="bcd"></option>
    <option value="ddd"></option>
</datalist>

② details 的用法

<details>
    <summary>如何一夜暴富？</summary>
    <p>我们大家要学习他毫无自私自利之心的精神。从这点出发，就可以变为大有利于人民的人。一个人能力有大小，但只要有这点精神，就是一个高尚的人，一个纯粹的人，一个有道德的人，一个脱离了低级趣味的人，一个有益于人民的人。</p>
    <p>我们大家要学习他毫无自私自利之心的精神。从这点出发，就可以变为大有利于人民的人。一个人能力有大小，但只要有这点精神，就是一个高尚的人，一个纯粹的人，一个有道德的人，一个脱离了低级趣味的人，一个有益于人民的人。</p>
</details>

1.4 新增注释标签（注音标签）

标签名语义和功能属性单标签还是双标签
ruby注音标签双
rt嵌套在ruby的里面，定义注音双
<p>
    今天学了一个成语
    <ruby>魑<rt>chi</rt></ruby>
    <ruby>魅<rt>mei</rt></ruby>
    <ruby>魍<rt>wang</rt></ruby>
    <ruby>魉<rt>liang</rt></ruby>
</p>

1.5 新增文本标签

标签名语义和功能属性单标签还是双标签
mark定义标记双

注意： mark 推荐用于在搜索结果中标记关键字。

2 HTML5 表单新增功能

2.1 表单控件新增属性

placeholder： 给可以输入的表单控件指定文字提示。 用于文本框、密码框、文本域等。

required： 设置该表单控件必填，否则表单无法提交； 该属性使用的时候无需给值； 适用于所有的表单控件。

autofocus： 设置该表单控件自动获取焦点； 该属性使用的时候无需给值；适用于所有的表单控件。

autocomplete： 设置浏览器是否记录输入框的历史输入； 属性的值可以设置为 on（默认值） 或者 off（不记录）。

pattern： 设置该表单控件的验证规则，值要指定正则表达式，适用于可以输入的表单控件。

2.2 input 标签的 type 属性新增的值

之前学过的 type 属性的值： text、password、radio、checkbox、submit、reset、button 。

HTML 5 新增的 type 属性的值： email、url、number、search、tel、range、color、date、month、week、time、datetime-local

① 文本输入类

<!-- 邮箱输入框 -->
<input type="email" placeholder="请输入邮箱">
<br>
<br>

<!-- URL 输入框 -->
<input type="url" placeholder="请输入网址">
<br>
<br>

<!-- 数字输入框 -->
<input type="number">
<br>
<input type="number" min="10" max="40">
<br>
<input type="number" min="0" max="100" step=".1">
<br>
<br>

<!-- 搜索框 重要的是语义，表现形式与 text 相同-->
<input type="search" placeholder="请输入关键字">
<br>
<br>

<!-- 电话号码输入框  不会进行验证，在移动端会自动弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">

② 范围选择框

<!--范围选择框 使用 max、min 属性指定最大最小值， value 指定默认值-->
<input type="range" value="0">
<input type="range" max="100" min="0" value="20">

③ 颜色选择框

<input type="color">

④ 时间日期选择类

 <!-- 日期选择器（年月日） -->
<input type="date">
<br>

<!-- 月选择框（年月） -->
<input type="month">
<br>

<!-- 星期选择框（选择哪一年的第几周） -->
<input type="week">
<br>

<!-- 时间选择器（几点几分） -->
<input type="time">
<br>

<!-- 日期时间选择器（年月日 时分） -->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate： 用于设置表单不需要验证；该属性无需给值。

3 HTML5 音视频

3.1 音视频标签

标签名功能和语义属性单标签还是双标签
video视频src： 指定视频文件地址。
controls： 显示控制条，无需给值
muted： 设置静音，无需给值
autoplay： 设置自动播放，无需给值。
loop： 设置循环播放，无需给值。
preload： 设置视频预先加载，无需给值。
poster： 设置视频封面，指定一个图片的地址。
width： 设置视频宽。
height： 设置视频高。		双标签
audio音频src： 指定音频频文件地址。
controls： 显示控制条，无需给值
muted： 设置静音，无需给值
autoplay： 设置自动播放，无需给值。
loop： 设置循环播放，无需给值。
preload： 设置视频预先加载，无需给值。		双标签
source加载音频或视频
嵌套在audio或者video的里面		src： 指定音频或视频文件的地址
type： 指定视频或视频的类型		单标签

注意：

  1. 视频或音频能够自动播放的前提是，设置静音；这是浏览器做出的规定。
  2. 默认情况下，点击播放按钮的时候，才会下载视频或音频文件，如果设置了 preload 属性，页面一打开就开始下载视频或音频文件。

3.2 浏览器支持的音视频格式

① 视频格式

mp4	所有浏览器都支持，推荐
webm
ogg

② 音频格式

mp3	所有的浏览器都支持，推荐
wav
ogg

4 HTML5 新增全局属性

contenteditable 属性： 设置元素中文本内容可以编辑；值：yes 或者 no。

hidden 属性： 隐藏元素，无需给值。

5 HTML5 兼容性方案

5.1 设置元信息

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

5.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签

<!-- 导入js文件，让IE8以下以下的浏览器支持H5新标签 -->
<!--[if lt ie 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->

本文标题为：HTML5新增-页面结构状态-列表-表单-音视频-全局兼容

上一篇： HTML-CSS（四十）transfrom变形
下一篇： IE6的兼容问题 ———HTML基础学习

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2