一、html5简介

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

二、新增语义化标签

1、语义化标签的好处：

去掉或样式丢失的时候能让页面呈现清晰的结构

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

便于团队开发和维护,遵循W3C标准,可以减少差异化

2、块元素：

标签	描述
<header></header>	定义文档或节的页眉。
<nav></nav>	导航栏
<section></section>	定义文档中的节
<main></main>	定义文档的主内容。
<aside></aside>	定义页面内容之外的内容，侧边栏。
<article></article>	定义文档内的文章，和段落p类似。
<figure> <figcaption>独立流内容标题 </figcaption> </figure>	<figure>定义自包含内容，比如图示、图表、照片、代码清单等等。 <figcaption>定义 <figure> 元素的标题
<details> <summary>概要，标题</summary> 内容 <details>	<details>定义用户可查看或隐藏的额外细节。定义 <details> 元素的可见标题。
<footer></footer>	定义文档或节的页脚

用法示例：

  <!-- 都是块元素 ，用法和div类似--><header>头</header><nav>导航</nav><main>对文档来说是唯一的，其他元素不能包该元素，一个文档只能出现一次，只能放在body里面<header>主题头</header><footer>主题脚部</footer></main><aside>侧边栏</aside><section>节</section><article>和段落p类似，文章 段落</article><!-- 定义文章的节，小块 --><footer><header>底部头部</header>脚注</footer>

<!-- 块元素 --><details><summary>摘要</summary>详情,概要,不定义默认显示为详情,可以用summary定义Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel tenetur necessitatibus aspernatur maiores aliasassumenda quia quam odio commodi eum fugiat, placeat, dicta consectetur beatae quo iure minima porro. Error?</details><figure><p> 规定独立的流内容（图片、图像、照片、代码等等）</p><img src="1-banner1.jpg" alt=""><figcaption>文字说明 对主题内容的补充说明</figcaption></figure>

3、新增行内块元素

进度条 progress：

进度条：
<progress value="50" max="100">进度条,不显示证明浏览器不支持 ，不给进度则一直左右动，浏览器不支持时显示此行文字。<!--value代表进度值,max表示最大值-->
</progress

度量衡 meter

 度量衡：<meter value="90" min="1" max="100" low="60" high="80">浏览器不支持时显示此行文字</meter><!-- 磁盘等使用的百分比 low和height表示到一定程度变色此行代码表示高于60低于80变黄,高于80的变红一般很少用 -->

时间 time

   <p>我们每天早上<time>9：00上课</time></p><!-- 告诉浏览器这是个时间,搜索引擎会生成更智能的搜索结果，例如手机事务提醒，就类似该原理 -->

标记 mark

 <section>今年的<time datetime="2022-2-14">情人节</time>是<mark>一个人</mark>过 mark标记，使文字背景变色</section>

三、新增表单控件

1、数据列表

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

<input type="" list="id">
<datalist id="id值“
<option value="值">文本</option>
......
</datalist>

   <input type="text" list="car"><datalist id="shuguo"><!-- value可以删掉不写，但是不能为空，带value值，输入框中出现的就是value值 --><!-- 此标签在IE中只支持10以上版本 --><option>葡萄</option><option>橘子</option><option value="tao">油桃</option><option value="yt">樱桃</option><option value="mg">芒果</option><option value="xg">西瓜</option></datalist>

2、电子邮箱

在提交表单时，会自动验证 email 域的值。

<input type="email">

  邮箱：<input type="email" name="email" autofocus required><!-- autofocus表示打开自动获得焦点 --><!-- required表示必填项，提交前必须填写该项 -->

3、网址

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

<input type="url">

  url:<input type="url" name="url"> <!-- 必须输入网址形式 -->

4、数字

<input type="number" min="" max="" step="步长">

  年龄：<input type="number" name="age" value="18" step="2" min="1" max="120"> <!-- 18岁不是从1开始的加2后的值，会被校对，所以不是有效值，可以选择不写value值 --><!-- step 步长，不写默认为1，等于2的话点一下加2 --><!-- 可以设置初始值value --><!-- min  最小值 --><!-- max  最大值 -->

5、搜索域

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

<input type="search">

搜索域：<input type="search" name="search">

6、电话

<input type="tel">

电话：<input type="tel" name="tel" pattern="\d{11}"><!-- pattern 格式 模式，规定电话的格式 --><!-- [0-9]  等同于 \d 数字0到9中取值 --><!-- \d{11}  ，正则表达式，表示在0-9里面取11位数字 -->

7、日期控件

（1）年月日

<input type="date">

年月日：<input type="date" name="date">

（2）年月

<input type="month">

年月：<input type="month" name="month">

（3）年周

<input type="week">

年周：<input type="week" name="week">

（4）时间

<input type="time">

时分：<input type="time" name="time">

（5）UTC年月日时分

<input type="datetime">

 utc时间:<input type="datetime" name="datetime"><!-- 国际协调时 国内浏览器基本都不支持，作为了解-->

（6）本地年月份时分

<input type="datetime-local">

 本地时间:<input type="datetime-local" name="datetime-local"><!-- 本地时间-->

8、其他

（1）滑动条

<input type="range" min="" max="' step="">

滑动条：<input type="range" name="rang" min="0" max="10" value="2" step="2"><!-- 此标签在IE中只支持10以上版本 --><!-- step规定一下滑动多少 -->

（2）拾色器

<input type="color">

 颜色：<input type="color" name="color" value="#fF0000"><!-- 规定颜色只能用全写的16进制，拾色器 --><!-- IE不显示颜色，兼容性很差 -->

四、音频和视频

Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。

1、音频

  <audio src="song.mp3" controls loop>您的浏览器不支持此标签</audio><!-- controls="controls"向用户展示控件，不加默认没有 --><!-- loop单曲循环，视频同样支持 -->

2、视频

  <video src="explore_promo.mp4" controls="controls" autoplay mutedposter="1-banner1.jpg">您的浏览器不支持此标签</video><!-- poster=""给视频加封面 --><!-- autoplay视频加载结束后立马播放 --><!-- muted 视频/音频静音，视频不自动播放，因为有声音，怕你社死，关闭声音，就会自动播放，十分银杏化 -->

解决兼容性问题：

 <audio ><source src="song.mp3" type="audio/mp3"> <!-- 为了兼容不同的音频格式，视频操作类似 --><source src="song.ogg" type="audio/ogg"> </audio>

HTML5 —新增标签相关推荐

html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
十二、HTML5新增标签特性详解（audio、video、input）
HTML5 第一天一.什么是 HTML5 HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
HTML5新增标签有哪些你知道吗？
html5新增标签 <article>标签定义外部的内容. 比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTM ...
HTML5新增标签以及扩展属性
HTML5新增标签以及属性 1. form表单可以和里面的内容分离 <form id=login action=login.php method=post ></form> & ...
HTML5新增标签及废除标签整理
HTML5新增标签及废除标签整理(有些很偏就没有列出) 1>新增的标签 1>section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分,其实就像div,比div更具 ...
HTML5新增标签最有用的总结
HTML5新增标签: 欢迎关注我的github: https://github.com/godkun/blog ##概要 1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代H ...
HTML5移动开发的基础与技巧（一）HTML5新增标签及应用场景
HTML5移动开发 HTML5的发展 HTML5 是 W3C 与 WHATWG 合作的结果.WHATWG为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScr ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...
HTML5新增标签的汇总与详解
趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...

HTML5 —新增标签

一、html5简介

二、新增语义化标签

三、新增表单控件

四、音频和视频

HTML5 —新增标签相关推荐

最新文章

热门文章