H5新增属性

最新推荐文章于 2024-08-06 10:39:23 发布

半夜删你代码·

最新推荐文章于 2024-08-06 10:39:23 发布

阅读量502

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_60376759/article/details/124023017

版权

HTML5的优势

（1）web应用更容易开发

（2）功能强大，用户体验佳

（3）搜索引擎友好，网站流量大

（4）摆脱平台依赖，兼容性好

（5）实时更新，维护更简单

（6）使用门槛低，容易推广

（7）更精美的动画效果，更低的开发成本

新增语义化标签：

nav、header、footer、aside、section、article

新增状态标签：

meter标签

语义：标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。双标签。例子：电量、磁盘用量等。

<meter> 标签不应用于指示进度（在进度条中）

max min 是决定他的范围的一个是最小值一个是最大值

value是当前的值是在max 和min 的基础之上计算的

high和low是极值如果超过了这个颜色就变为黄色

<meter max="100" min="0" value="19" high="60" low="20"></meter>

可以显示两种颜色，value值在19-20之间为黄色，20+为绿色

<meter max="100" min="0" value="19" high="60" low="20" optimum="80"></meter>

加了optimum属性（最优值），会显示三种颜色，value值0-19显示红色，19-60为黄色，60+绿色

progress标签

语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签。

max规定需要完成的值，value规定进程的当前值。

一般情况如果结合js的话想让进度表进行移动都会使用progress

<progress max="100" value="80"></progress>

meter 和 progress 什么区别？

meter 表示静态的度量，progress表示动态的进度。

新增列表标签

datalist

datalist 会包含一组 option 元素，这些元素表示其表单控件的可选值。 datalist 的 id 必须要和 input 中的 list 一致。

用于搜索框的关键字提示

<input type="text" list="myData">
        <datalist id="myData">
            <option value="周公解梦"></option>
            <option value="周公解"></option>
            <option value="周公瑾"></option>
            <option value="周杰"></option>
            <option value="周杰伦"></option>
            <option value="周博通"></option>
        </datalist>

details

标签用于描述文档或文档某个部分的细节，与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

detalis:用于展示问题和答案或者专有名词和对专有名字的解释

summary:写在 details 的里面，用于指定问题或专有名词，summary下面或上面的文字或标签都会显示在子菜单内

<details>
            123
            <summary>如何实现一夜暴富？？？</summary>
            <p>找个老太太</p>
            <p>睡觉 做梦</p>
            456
            555 <br>
            666
        </details>

新增注释标签

<ruby></ruby> 标签定义注释（中文注音或字符）

<rt></rt> 展示文字注音或字符注释。

    <ruby>惢<rt>suo</rt></ruby>
    <ruby>龘<rt>da</rt></ruby>
    <ruby>矗<rt>chu</rt></ruby>
    <ruby>譶<rt>ta</rt></ruby>
    <ruby>畾<rt>lei</rt></ruby>

新增mark标签

<mark></mark> 定义带有记号的文本请在需要突出显示文本时使用,如搜索引擎搜索页面

<p>锦州电棍女，<mark>ddd</mark></p>

新增表单功能

placeholder： 设置提示文字；用于文本输入类的表单控件（如文本输入框、密码输入框、文本域等）。

autofocus： 自动获取焦点，无需给值；适用于所有的表单控件。当多个表单控件都具备了autofocus的话会以第一个为主

autocomplete： 设置表单控件是否记录输入历史；值是 on 后者 off；适用于文本输入类的表单控件。

required： 设置该表单控件必填或必选；无需设置值；如果设置了 required 又没有填写，提交的时候会提示且无法提交。适用于除按钮外其他表单控件。

pattern： 指定正则验证表单控件的格式，适用于文本输入类表单控件。当表单提交的时候进行验证，验证不通过会提示且无法提交表单；空的输入框不会验证，往往与 required 配合。

（通过一个正则表达式来验证你输入的文本框中数据是否符合你要求、要求就是正则表达式

只能输入6个数字字母 _ pattern="\w{6}"）

multiple: multiple属性用于设置input元素是否可以有多个值。该属性只适用于email和file类型的input元素。如果给email类型的input元素设置multiple属性，那么在输入框中可以输入多个email地址，多个email地址之间用逗号隔开。如果给file类型的input元素设置multiple属性，那么在打开的选择文件对话框中就可以选择对个文件。

input的type属性值

文本输入框

email： 邮箱。email验证了邮箱的格式必须要包含@

url： URL网址。要写的是域名域名必须是http://www.xxx.xxx

number： 数字；可以设置数 max、min、step。只能输入字母e和数字，e的前后必须有数字

max 最大值

min 最小值

step 步长（每次增加的数字）

search： 搜索框。在文本框的后面添加了一个一次性清除操作也就是有一个x

tel： 电话号码；移动端弹出数字键盘。

range 范围选择框：

<input type="range" name="range" value="80" max="100" min="0"> value表示当前值

color 颜色选择框

时间日期选择类

date： 选择日期（年月日）。

month： 选择哪一年哪一月。

week： 选择哪一年的第几周。

time： 选择时间（时分）。

datetime-local： 选择日期和时间。

form 标签新增属性

novalidate 属性： 如果给 form 标签设置了该属性，表单提交的时候不再进行验证；该属性无需给值。

新增音视频标签

视频

当前 <video> 元素支持三种视频格式：尽量使用 mp4格式

<video></video> 标签定义视频，比如电影片段或其他视频流，双标签。

属性	值	描述
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
height	pixels	设置视频播放器的高度。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
muted	muted	如果出现该属性，视频的音频输出为静音。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

音频

当前 <audio> 元素支持三种视频格式：尽量使用 mp3格式

<audio></audio> 标签定义声音，比如音乐或其他音频流，双标签。

属性	值	描述
src	URL	规定音频文件的 URL。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
muted	muted	如果出现该属性，则音频输出为静音。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

兼容写法

视频兼容写法

浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

type='video/webm; codecs="vp8, vorbis"'
type='video/ogg; codecs="theora, vorbis"'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

    <video controls>
        <source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
        您的破浏览器不支持视频
    </video>

音频兼容写法

浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

type='audio/ogg; codecs="vorbis"'
type='audio/aac; codecs="aac"'

type='audio/mpeg'

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

音视频总结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

扩展

新增全局属性

contenteditable 规定元素内容是否可编辑。 <element contenteditable="true|false">
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。仅有Firefox可用
data-* 用于存储页面或应用程序的私有定制数据。
draggable 规定元素是否可拖动。 <element draggable="true|false|auto">
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。 <element dropzone="copy|move|link">
hidden 规定元素隐藏或不再相关。
spellcheck 规定是否对元素进行拼写和语法检查。 <element spellcheck="true|false">
可以对以下内容进行拼写检查：
<textarea> 元素中的文本
可编辑元素中的文本
input 元素中的文本值（非密码）
translate 规定是否应该翻译元素内容。 <element translate="yes|no">

兼容性处理

(1) 必须要在head标签里面来书写

(2) htmlshiv.js 解决低版本浏览器识别html5新标签的问题

引入js文件

条件注释

半夜删你代码·

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5新增属性

HTML5的优势（1）web应用更容易开发（2）功能强大，用户体验佳（3）搜索引擎友好，网站流量大（4）摆脱平台依赖，兼容性好（5）实时更新，维护更简单（6）使用门槛低，容易推广（7）更精美的动画效果，更低的开发成本新增语义化标签：nav、header、footer、aside、section、article新增状态标签：meter标签语义：标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。双标签。例子：电量、磁盘用量等。<met
复制链接

扫一扫