提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

产品文档与社区权益中心定价云市场更多导航↓合作伙伴支持与服务了解阿里云

下载

海量开发者使用工具、手册，免费下载

镜像站

探索云世界

新手上云云上应用构建云上数据管理云上探索人工智能

云计算弹性计算无影存储网络倚天

云原生容器 serverless 中间件微服务可观测消息队列

数据库关系型数据库 NoSQL数据库数据仓库数据管理工具 PolarDB开源向量数据库

H5新增标签

2024-05-2348

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：H5新增标签

语义化标签

div啥都能干, 就是啥都不精确:

<div class=“header”> </div><div class=“nav”> </div><div class=“content”> </div><div class=“footer”> </div>

于是针对这点, h5新增了语义化标签:

: 头部标签
: 导航标签
: 内容标签
: 定义文档某个区域
: 侧边栏标签
: 尾部标签

以后布置网页, 就不需要纯div去做了:

但是使用之前, 你应该去了解他们是什么类型的标签, 是块级元素还是行内元素. 如果有必要, 你需要将其转换为块级元素.

请注意:

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签
HTML5 还增加了很多其他标签，我们后面再慢慢学

视频标签

视频：

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件

当然不同的视频有不同的格式, 例如mp4, Ogg等, 当前的video标签对不同的格式也是有着不同的支持的, 如下:

可以看出来, mp4基本是支持所有浏览器的, 所以最好是使用mp4视频格式.

但是我们可以采取一种更加安全的方式, 就是像指定字体家庭一样, 给这个播放器添加支持的格式:

<video controls="controls" width="300">     <source src="move.ogg" type="video/ogg" >     <source src="move.mp4" type="video/mp4" >     您的浏览器暂不支持 <video> 标签播放视频 </video>

其语法规范如下:

<video src="文件地址" controls="controls"></video>

原视频:

我们打开一个视频, 发现, 他几乎占据了整个浏览器窗口, 因此我们需要去设置其属性:

修改宽高属性之后:

  <div>    <video     src="./video/7f6d571cd86e1ce466ba19eb7Video1.mp4"     controls="controls"    autoplay="autoplay"    muted="muted"    poster="./images/arr.png"></video>  </div>

    video {      width: 100%;          }     div {      width: 1255px;      height: 704px;    }

音频标签

标签:

当前在不使用插件的情况下, 音频文件的播放支持的格式也是有限的. :

如下:

同样还是可以使用保守的支持方式:

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

一般方法：

<audio src="文件地址" controls="controls"></audio>

常见属性如下:

目前谷歌浏览器将视频和音频的自动播放给优化掉了这不是bug.
也可以使用muted让音频静音.
其他属性就不多讲解, 可以自行研究

input表单

type新增

说明如下:

input标签在h5中新增了很多对应语义的类型, 例如如果type=email的时候, 就再也不需要提前对表单进行验证了.

<form action="">        <ul>            <li>邮箱: <input type="email" /></li>            <li>网址: <input type="url" /></li>            <li>日期: <input type="date" /></li>            <li>时间: <input type="time" /></li>            <li>数量: <input type="number" /></li>            <li>手机号码: <input type="tel" /></li>            <li>搜索: <input type="search" /></li>            <li>颜色: <input type="color" /></li>            <!-- 当我们点击提交按钮就可以验证表单了 -->            <li> <input type="submit" value="提交"></li>        </ul>    </form>

邮箱格式验证:

直接选择日期:

数字: 先定位数字类型

选择颜色:

需要注意的是, 提交input的时候, 需要在表单域进行提交. 通过type为submit的input标签来进行提交.

新增属性

例如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>HTML5新增表单属性</title>    <style>        input::placeholder {            color: pink;        }    </style></head><body>    <form action="">            <input type="search" name="sear" id="" required="required" placeholder="请输入内容" autofocus="autofocus" autocomplete="off">            <input type="file" name="" id="" multiple="multiple">            <input type="submit" value="提交">    </form>  </body></html>

如果不输入, 就会提示:

placeholder : 提示文本, 就是在输入之前进行一个提示.

文章标签：

4月前

供应链搜索推荐

偏好类标签支持自定义统计方式，标签场景覆盖更广

在个性化营销场景，零售商必须理解顾客的行为才能更准确的预测客户需求，优化库存管理、制定营销策略，并提供个性化的购物体验，然而偏好类标签的加工不仅仅是简单的属性出现频次或最大值的统计，Dataphin V4.0版本新增了自定义统计的方式加工偏好标签，通过简单的配置即可完成复杂的标签加工场景。

瓴羊Dataphin

7622

冷辞

4月前

前端开发JavaScript

基础标签应用

冷辞

3522

疯狂学习GIS

4月前

ArcGIS修改图层标签标注（Label）对应字段与内容的方法

疯狂学习GIS

19211

游客af6ph6rww4mlo

HTML教程6——列表标签

无序列表用<ul>标签表示，无序列表的每一项前默认都是用圆点标识，<ul>标签中比较重要的属性为type(列表前的符号),默认为disc(圆点),还有circle(空心圆)，square(实心正方形)，<ul>标签中只能有<li>标签，<li>标签的元素代表列表每一行的内容，<ul>标签中可以允许有任意个<li>标签。

游客af6ph6rww4mlo

24111