二、HTML5新增标签和被移除标签

最新推荐文章于 2021-07-19 11:33:06 发布

养只狗

最新推荐文章于 2021-07-19 11:33:06 发布

阅读量807

点赞数 1

分类专栏：前端复习部分文章标签： html5

本文链接：https://blog.csdn.net/weixin_45006204/article/details/106483576

版权

前端复习部分专栏收录该内容

13 篇文章 0 订阅

订阅专栏

新增标签

canvas标签

canvas元素本身并没有绘制能力,它只是一个图形容器，必须通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像),canvas元素中的任何文本将会被显示在不支持canvas的浏览器中。
例子：通过元素来显示一个红色的矩形：

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
	var canvas=document.getElementById('myCanvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#FF0000';
	ctx.fillRect(0,0,80,100);
</script>

属性方法详见下面链接：

https://www.runoob.com/tags/ref-canvas.html

新多媒体元素

1、<audio> 标签
定义声音，比如音乐或其他音频流。
提示：当在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
语法：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

属性：
在这里插入图片描述
2、<video> 标签
定义视频（video 或者 movie）
语法：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

属性：
在这里插入图片描述
3、<source>标签
定义多媒体资源<video>和 <audio>
允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。
语法：

<video width="320" height="240" controls="controls">   
    <source src="forrest_gump.mp4" type="video/mp4" />   
    <source src="forrest_gump.ogg" type="video/ogg" />   
    <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">   
    <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> 
</video>

属性：
在这里插入图片描述
4、<embed>标签
定义嵌入的内容，比如图片、视频、HTML页面。
现在已经不建议使用标签了，可以使用 <img>、<iframe>、<video>、<audio> 等标签代替。
5、<track>标签
为诸如 <video>和<audio> 元素之类的媒介规定外部文本轨道。
属性
在这里插入图片描述

新表单元素

1、<datalist>标签
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

运行结果：在这里插入图片描述
2、<keygen>标签
规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）.
该标签已在新的Web标准中被废弃

<form action="demo_keygen.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

属性：
在这里插入图片描述
3、<output>标签
定义不同类型的输出，比如脚本的输出。
例子：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
	<input type="range" id="a" value="50">100
	+<input type="number" id="b" value="50">
	=<output name="x" for="a b"></output>
</form>

运行结果：
在这里插入图片描述

新的表单属性

form新属性：

autocomplete 属性
规定 form 或 input 域应该拥有自动完成功能。
autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color

<form action="demo_form.asp" method="get" autocomplete="on">
	First name: <input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	E-mail: <input type="email" name="email" autocomplete="off" /><br />
	<input type="submit" />
</form>

当用户在设置了该属性的表单元素中，填写并提交了信息后，刷新或者重新打开页面后，之前填写的信息就可自动显示出来
运行结果：
在这里插入图片描述

novalidate 属性
-是一个 boolean(布尔) 属性.，规定在提交表单时不应该验证 form 或 input 域。

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

input新属性

autofocus 属性

是一个 boolean 属性,当页面加载完毕时，域自动地获得焦点。

form 属性

输入域所属的一个或多个表单。如需引用一个以上的表单，必须使用空格分隔的列表。

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
 //Last name表单仍然属于form表单
Last name: <input type="text" name="lname" form="form1">

表单重写属性

formaction 属性（重写action属性）
用于描述表单提交的URL地址，使用此属性可以将表单数据提交到对应的URL地址中
注意: formaction 属性会覆盖<form> 元素中的action属性，且只能用于 type=“submit” 和 type=“image”.

<input type="submit" formaction="demo-admin.php"

formenctype 属性（重写enctype属性）
设置表单提交到服务器所使用什么数据编码 (只对method=“post” 的form表单有用)
注意: 该属性会覆盖<form> 元素中的enctype属性，且只能用于 type=“submit” 和 type=“image”.

//以默认编码格式提交表单数据
<input type="submit" value="提交">
//以Multipart/form-data编码格式提交表单数据
<input type="submit" formenctype="multipart/form-data">

formmethod 属性（重写method 属性）
定义了表单提交的方式，覆盖了元素的 method 属性。

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

formnovalidate 属性（重写novalidate属性.）

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

formtarget 属性（重写target属性）
指定一个名称或一个关键字来指明表单提交数据接收后的展示。

height 和 width 属性

height 和 width 属性规定用于 image 类型的标签的图像高度和宽度。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list 属性

规定输入域的 datalist。datalist 是输入域的自定义列表。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">

在这里插入图片描述

min、max 和 step 属性

用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range

multiple 属性

是一个 boolean 属性，规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file

pattern 属性

描述了一个正则表达式用于验证 <input> 元素的值。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 属性

提供一种提示（hint），描述输入域所期待的值
简短的提示在用户输入值前会显示在输入域上。

required 属性

是一个 boolean 属性.规定必须在提交之前填写输入域（不能为空）。

step 属性

为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.

新的语义元素

什么是语义元素?
语义元素：语义= 意义
语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义元素实例: <div> 和 <span> 无需考虑内容.
语义元素实例: <form>, <table>, and <img> 清楚的定义了它的内容.
<article>元素
定义页面独立的内容区域。其内容容本身必须是有意义的且必须是独立于文档的其余部分。

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

<aside>元素
定义页面的侧边栏内容。

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<section>元素
定义定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
<figure> 规定独立的流内容（图像、图表、照片、代码等等），其内容应该与主内容相关，但如果被删除，也不应对文档流产生影响。
<figcaption> 定义<figure> 元素的标题，应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
<footer> 定义 section 或 document 的页脚
<header> 定义了文档的头部区域
<nav> 定义导航链接的部分。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
目前，主流浏览器都不支持 <command> 标签。只有 IE 9 支持 <command> 标签，其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

运行结果：
在这里插入图片描述

<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）
<rt> 定义字符（中文注音或字符）的解释或发音。 18、
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏
览器所显示的内容。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
我们可以开始使用这些语义元素吗?
以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素)

header, section, footer, aside, nav, article, figure
{
    display: block;
}

移除的标签

<acronym>标签定义首字母缩略词。
HTML5 不支持 <acronym> 标签。可使用 <abbr> 标签代替它。
<abbr> 用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
在某些浏览器中，当您把鼠标移至带有标签的缩写词/首字母缩略词上时，标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

运行结果如下：
在这里插入图片描述

<applet>标签定义嵌入的 applet
HTML5 不支持 <applet> 标签。请使用 <object> 标签代替它。
定义一个嵌入的对象。使用此元素可以向您的 XHTML 页面添加多媒体(例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
在 HTML5 中，objects 可以在form表单中提交，不再出现在 <head> 元素区域内。
实例：用于包含HTML文件：

<object width="100%" height="500px" data="snippet.html"></object>

插入一张图片:

<object data="audi.jpeg"></object>

<basefont>标签定义文档中所有文本的默认颜色、大小和字体。

<head>
	<basefont color="red" size="5" />
</head>
<body>
	<h1>This is a heading</h1>
	<p>This is a paragraph.</p>
</body>

<big>标签用来制作更大的文本。

<p><big>这个文本比较大。</big></p>

<center>标签将 HTML 网页中的文本进行水平居中处理
<dir> 标签被用来定义目录列表。

<dir>
  <li>html</li>
  <li>xhtml</li>
  <li>css</li>
</dir>

<font>标签规定 文本的字体、字体尺寸、字体颜色。
HTML5 不支持 <basefont>、<big>、<center>、<dir>、<font> 标签。请用 CSS 代替。
<frame> 标签定义 <frameset> 中的子窗口（框架）
<frameset> 中的每个 <frame> 都可以设置不同的属性，比如 border、scrolling, noresize 等等。
<frameset> 标签定义一个框架集。
<frameset> 元素被用来组织一个或者多个元素。每个 <frame> 有各自独立的文档。
<frameset> 元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。
<noframes>元素可为那些不支持框架的浏览器显示文本

<html>
   <frameset cols="25%,50%,25%">
     <frame src="frame_a.htm">
     <frame src="frame_b.htm">
     <frame src="frame_c.htm">
     <noframes>
     	Sorry, your browser does not handle frames!
     </noframes>
   </frameset>
</html>

<strike> 定义加删除线文本。
HTML5 不支持 <strike> 标签。请用 <del> 标签代替

<p>
	<del>这是一条友善出现的文本</del>
</p>

<tt>标签定义打字机文本。
HTML5 不支持<tt> 标签。请用 CSS 代替。

新增的input输入类型

color类型用在input字段主要用于选取颜色，如下所示：

选择你喜欢的颜色: 
<input type="color" name="favcolor">

运行结果：
在这里插入图片描述

Date类型允许你从一个日期选择器选择一个日期

生日: 
<input type="date" name="bday">

运行结果：
在这里插入图片描述

datetime类型允许你选择一个日期（UTC 时间）

生日 (日期和时间): 
<input type="datetime" name="bdaytime">

datetime-local 类型允许你选择一个日期和时间 (无时区)
email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效
month 类型允许你选择一个月份。
number 类型用于应该包含数值的输入域，您还能够设定对所接受的数字的限定

数量 ( 1 到 5 之间 ): 
<input type="number" name="quantity" min="1" max="5">

使用下面的属性来规定对数字类型的限定：
在这里插入图片描述

range 类型用于应该包含一定范围内数字值的输入域，显示为滑动条。

<input type="range" name="points" min="1" max="10">

-运行结果：
在这里插入图片描述
== 使用下面的属性来规定对数字类型的限定：==
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

search 类型用于搜索域，比如站点搜索或 Google 搜索。
tel类型定义输入电话号码字段:
time 类型允许你选择一个时间。
url 类型用于应该包含 URL 地址的输入域,在提交表单时，会自动验证 url 域的值。
week 类型允许你选择周和年。

养只狗

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录