HTML5 标签简介（四）

最新推荐文章于 2023-05-06 23:34:34 发布

hoo_chsodene

最新推荐文章于 2023-05-06 23:34:34 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： HTML5 标签

本文链接：https://blog.csdn.net/hoo_chsodene/article/details/8955005

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文的主要内容参考于 w3shool 网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。

51<keygen> 52<kbd> 53<label> 54<legend> 55<ol><ul><li> 56<link> 57<mark> 58<menu> 59<meta> 60<meter> 61<nav> 62<noscript> 63<object> 64<output> 65<p> 66<param> 67<pre> 68<progress>

<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。例：

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

它的属性：

autofocus	autofocus	使 keygen 字段在页面加载时获得焦点。
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问。
disabled	disabled	禁用 keytag 字段。
form	formname	定义该 keygen 字段所属的一个或多个表单。
keytype	rsa	定义 keytype。rsa 生成 RSA 密钥。
name	fieldname	定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

支持 HTML5 全局属性和事件属性。

<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。支持 HTML5 全局属性和事件属性。
<label> 标签为 input 元素定义标签（label）。label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。例：
```
<!DOCTYPE HTML>
<html>
<body>

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

</body>
</html>
```
它的属性：
for id 规定 label 绑定到哪个表单元素。
form formid 规定 label 字段所属的一个或多个表单。
支持 HTML5 全局属性和事件属性。

for	id	规定 label 绑定到哪个表单元素。
form	formid	规定 label 字段所属的一个或多个表单。

<legend> 标签为以下标签定义标题（caption）：<fieldset>、<details>、<figure>。例：

<!DOCTYPE HTML>
<html>
<body>

<fieldset>
  <legend>健康信息：</legend>
  <form>
    <label>身高：<input type="text" /></label>
    <label>体重：<input type="text" /></label>
  </form>
</fieldset>

</body>
</html>

支持 HTML5 全局属性和事件属性。

<ol><ul><li> 其中 <ol> 标签定义有序列表。<ul> 标签定义无序列表。<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签。例：
```
<!DOCTYPE html>
<html>
<body>

<body>
<ol>
   <li>Coffee</li>
   <li>Tea</li>
</ol>

<ol>
   <li value="8">Coffee</li>
   <li>Tea</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
</ul>
</body>

</body>
</html>
```
<li> 标签的属性：
type
A
a
I
i
1
disc
square
circle
规定列表的类型。HTML5 中不再支持。请使用样式替代。
value number_of_list_item 不赞成使用。请使用样式替代。
<ol> 标签的属性：
compact compact_rendering HTML5 中不支持。使用 CSS 代替。
start start_on_number 规定起始数字。
type
A
a
I
i
1
HTML5 中不支持。规定列表的类型。使用 CSS 代替。
<ul> 在 HTML5 中无特殊属性。这三个标签均支持 HTML5 全局属性和事件属性。

type	A a I i 1 disc square circle	规定列表的类型。HTML5 中不再支持。请使用样式替代。
value	number_of_list_item	不赞成使用。请使用样式替代。

compact	compact_rendering	HTML5 中不支持。使用 CSS 代替。
start	start_on_number	规定起始数字。
type	A a I i 1	HTML5 中不支持。规定列表的类型。使用 CSS 代替。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/example/html5/styles.css" />
</head>

<body>
<h1>一个外部样式表对我进行了格式化</h1>
<p>我也是！</p>
</body>

</html>

该标签只能位于 head 部分，但可以出现任何次数。它的属性：

href	URL	规定被链接文档的位置。
hreflang	language_code	规定被链接文档中文本的语言。
media	media_query	规定被链接文档将被显示在什么设备上。
rel	alternate author help icon licence next pingback prefetch prev search sidebar stylesheet tag	规定当前文档与被链接文档之间的关系。
sizes	heightxwidth any	规定被链接资源的尺寸。仅适用于 rel="icon"。详见 sizes 属性。
type	MIME_type	规定被链接文档的 MIME 类型。

支持 HTML5 全局属性和事件属性。

<mark> 标签定义带有记号（添加背景色）的文本。例：
```
<!DOCTYPE HTML>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>
```
支持 HTML5 全局属性和事件属性。

<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

<!DOCTYPE HTML>
<html>
<body>

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

</body>
</html>

它的属性：

autosubmit	truefalse	如果为 true，那么当表单控件改变时会自动提交。
label	menulabel	为菜单定义一个可见的标注。
type	context toolbar list	定义显示那种类型的菜单。默认值是 "list"。

支持 HTML5 全局属性和事件属性。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定义对页面的描述：

<meta name="description" content="免费的 web 技术教程。" />

定义页面的最新版本：

<meta name="revised" content="David, 2008/8/8/" />

每 5 秒刷新一次页面：

<meta http-equiv="refresh" content="5" />

它的属性：

charset	character encoding	定义文档的字符编码。
content	some_text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。

支持 HTML5 全局属性和事件属性。

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。例：

<!DOCTYPE HTML>
<html>
<body>

<meter min="0" max="10">2</meter><br />
<meter>2 out of 10</meter><br />
<meter>20%</meter>

</body>
</html>

必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。它的属性：

high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。

支持 HTML5 全局属性和事件属性。

<nav> 标签定义导航链接的部分。例：

<!DOCTYPE HTML>
<html>
<body>

<nav>
<a href="/html5/index.asp">Home</a>
<a href="/html5/tag_meter.asp">Previous</a>
<a href="/html5/tag_noscript.asp">Next</a>
</nav>

</body>
</html>

如果文档中有“前后”按钮，则应该把它放到 <nav> 标签中。支持 HTML5 全局属性和事件属性。

<noscript> 标签用来定义在脚本未被执行时的替代内容（文本）。此标签用于可识别 <script> 标签但无法支持其中脚本的浏览器。如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！例：
```
<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本，而且由于用了注释隐藏脚本不会显示 script 元素中的文本。</p>
 
</body>
</html>
```

data	URL	规定对象使用的资源的 URL。
form	form_id	规定对象所属的一个或多个表单。
height	pixels	规定对象的高度。
name	name	为对象定义名称。
type	MIME_type	定义 data 属性中规定的数据的 MIME 类型。
usemap	#mapname	规定与对象一同使用的客户端图像映射的名称。详见 usemap 属性。
width	pixels	规定对象的宽度。

至少必须定义 "data" 和 "type" 属性之一。支持 HTML5 全局属性和事件属性。

<output> 标签定义不同类型的输出，比如脚本的输出。下例为在表单中使用 output 元素：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function write_sum()
{
x=5
y=3
document.forms["sumform"]["sum"].value=x+y
}
</script>
</head>

<body οnlοad="write_sum()">

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

</body>
</html>

它的属性：

for	id of another element	定义输出域相关的一个或多个元素。
form	formname	定义输入字段所属的一个或多个表单。
name	unique name	定义对象的唯一名称。（表单提交时使用）

支持 HTML5 全局属性和事件属性。

<p> 标签定义段落。支持 HTML5 全局属性和事件属性。
<param> 标签允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 标签提供参数。例如代码片段：
```
<object id="Slider1" width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>
```
它的属性：
name unique_name 定义参数的唯一的名称（唯一标识符）。
value value 规定参数的值。
支持 HTML5 全局属性和事件属性。
<pre> 标签可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。例如，本博客的 HTML 源代码均是定义在 pre 元素中。该标签支持 HTML5 全局属性和事件属性。
<progress> 标签定义运行中的进度（进程）。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。例如：
```
<!DOCTYPE HTML>
<html>
<body>

The object's downloading progress:
<progress>
<span id="objprogress">76</span>%
</progress>

</body>
</html>
```
请使用 <progress> 标签来显示下载的进度。它的属性：
max number 定义完成的值。
value number 定义进程的当前值。
该标签支持 HTML5 全局属性和事件属性。

name	unique_name	定义参数的唯一的名称（唯一标识符）。
value	value	规定参数的值。

max	number	定义完成的值。
value	number	定义进程的当前值。

hoo_chsodene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 标签简介（四）

本文的主要内容参考于w3shool网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。
复制链接

扫一扫