H5新增标签和属性

最新推荐文章于 2024-10-11 13:06:20 发布

yx_back

最新推荐文章于 2024-10-11 13:06:20 发布

阅读量2.2k

点赞数 7

分类专栏： Html 文章标签： H5新增属性 H5新增标签

本文链接：https://blog.csdn.net/yx_back/article/details/90948121

版权

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

H5新增标签和属性

H5新增标签

1、结构标签

header：某个区块的头部信息/标题；
section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
nav：导航条部分信息
footer：底部信息；
hgroup：头部信息/标题的补充内容；
aside：标签内容之外与标签内容相关的辅助信息；
article：特殊独立区块，表示这篇页眉中的核心内容；
增加了 检查列表 功能。
figure：独立的单元，例如某个有图片与内容的新闻块。
figcaption 给figure组合添加一个标题
dialog 类似于会话框
eg: <dialog open>这是打开的对话窗口</dialog>

2、媒体标签

video：视频
audio：音频
embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。

audio

<audio controls autoplay loop>
          <source src="1.mp3" type="audio/mp3"/>
          <source src="2.ogg" type="audio/ogg"/>
          <source src="3.wav" type="audio/wav"/>
      您的浏览器版本太低，请升级浏览器！
</audio>

a) controls 添加音频控制条

b) autoplay 设置音频自动播放（高版本屏蔽了autoplay自动播放功能）
muted属性可以解决高版本屏蔽自动播放功能

c) loop 循环播放

注：audio支持的音频格式：mp3,wav,ogg

video

 <video controls autoplay loop width="数值" height="数值" poster="图片路径">
          <source src="a.mp4" type="video/mp4"/>
          <source src="b.ogg" type="video/ogg"/>
          <source src="c.webm" type="video/webm"/>
          您的浏览器版本太低，请升级浏览器！
</video>

注：

a) width和height 定义视频区域的宽度和高度

b) poster 在视频播放前加载一张图片

c) controls,autoplay,loop同audio中的这些属性

注：video支持的视频格式：mp4(MPEG4),ogg,webm

3、表单标签

1.email：必须输入邮件；
2. url：必须输入url地址；
3. number：必须输入数值；
4. range：必须输入一定范围内的数值；
5. Date Pickers：日期选择器；
　　a.date：选取日、月、年
　　b.month：选取月、年
　　c.week：选取周和年
　　d.time：选取时间（小时和分钟）
　　e.datetime：选取时间、日、月、年（UTC时间）
　　f.datetime-local：选取时间、日、月、年（本地时间）　
6. search：搜索常规的文本域；
7. color：颜色

4、其他功能标签

progress：进度条；
wbr：软换行，页面宽度到需要换行时换行；
canvas：使用JS代码做内容进行图像绘制；
datailst：文本域下拉提示；
deteils ：展开菜单； keygen:加密； mark：标注（像荧光笔做笔记）
time：属性：datetime datetime 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
pubdate pubdate 指示元素中的日期 / 时间是文档（或
元素）的发布日期。

<p>我们每天早上 <time>9:00</time> 开始上课。</p>
 <p>我在 <time datetime="2020-02-14">情人节</time> 有个约会。</p>

ruby和rt：对某一个字进行注释；<ruby><rt>注释</rt><rp>浏览器不支持时如何显示</rp></ruby>
bdi：定义文本的文本方向，使其脱离其周围文本的方向设置
command：按钮；

H5新增属性

1、required 限制用户输入为必填项，不能为空
eg: <input type="text" required/>

2.placeholder=“默认提示信息” 给input输入框添加默认提示信息

eg: <input type="text" placeholder="请输入用户名"/>

3.autofocus 页面加载完成后光标自动聚焦到某个输入框

eg: <input type="text" autofocus/>

4.pattern=“正则表达式” 输入的内容要匹配指定的正则表达式

eg: <input type="text" pattern="^[a-zA-Z0-9]{6,16}$"/>

5.min 设置最小值 max设置最大值 step 设置递增递减的数量

6.list 指定一个datalist作为下拉提示单

eg:

<input type="search" list="data"/>
   <datalist id="data">
       <option>a</option>
       ...
   </datalist>

扩展：autocomplete=“on|off” 自动完成，显示历史记录

eg:

<input type="text" autocomplete="off" name="username"/>
	 <form autocomplete="on|off"></form>

7.取消h5的表单验证

语法：<form novalidate></form>

1、对于js进行添加的属性。

<script defer src=".....js" onload="alert('a')"></script>
<script async src=".....js" onload="alert('b')"></script>

dater(延迟加载) :先加载（下载）src中文件内容，然后等页面全部加载完成后，再加载onload

.async属性（异步加载），它会在加载src后，立即执行onload,同时还会继续加载页面以上执行顺序，alert显示会先显示b然后再显示a

2、网页中标签中加入小图标的样式代码

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

3、iframe新增属性

seamless定义框架无边框无边距
srcdoc的显示级别比sandbox高
sandbox用来规定一个内嵌框架的安全级别
sandbox=“allow-forms:允许提交表单”
sandbox=“allow-origin:允许是相同的源”
sandbox="allow-scripts：允许执行脚本
sandbox=“allow-top-navigation:允许使外面的页面进行跳转”

4、其他属性

manifest属性：定义页面需要用到的离线应用文件，一般放在标签里
charset属性：meta属性之一,定义页面的字符集
sizes属性：新增属性，当link的rel="icon"时，用以设置图标大小
base属性:<base href="http://localhost/" target="_blank">表示当在新窗口打开一个页面时，会将href中的内容作为前缀添加到地址前
defer属性：script标签属性，表示脚本加载完毕后，只有当页面也加载完毕才执行（推迟执行）
async属性：script标签属性，脚本加载完毕后马上执行（运行过程中浏览器会解析下面的内容），即使页面还没有加载完毕（异步执行）
media属性：<a>元素属性：表示对何种设备进行优化
hreflang属性：<a>的属性，表示超链接指向的网址使用的语言
ref属性：<a>的属性,定义超链接是否是外部链接
reversed属性:<ol>的属性，定义序号是否倒叙
start属性：<ol>的属性，定义序号的起始值
scoped属性：内嵌CSS样式的属性，定义该样式只局限于拥有该内嵌样式的元素，适用于单页开发