本文摘要：这篇文章详细介绍了HTML中各类标签的使用和功能，包括块级元素与行内元素在CSS中的分类；同时阐述了audio、map、summary/details、table、textarea、tt、u、ul/ol、video等众多HTML标签的具体应用。文中还提及了对HTML5不再支持的center、applet等标签，并强调了表单控件如button、label的重要作用以及embed标签嵌入内容的功能。通过实例展示了如何利用这些标签实现音频播放、图像地图、表格布局、多行文本输入、列表样式、视频嵌入及表单交互等功能。

转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/chehec2010/article/details/85060460。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

1.简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;

行内元素 : span,a,label,input,img,strong,em;

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var></body>
</html

2、HTML <audio> 标签

<audio> 标签是 HTML5 提供的用来播放音频文件的。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><audio controls><source src="/statics/demosource/horse.ogg" ><source src="/statics/demosource/horse.mp3" >
您的浏览器不支持 audio 元素。
</audio></body>
</html>

3、HTML <area> 标签

<area> 标签可以在图像上划分区域，这些区域是可以点击的，并且对应不同的操作。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body><p>点击太阳或其他行星，注意变化：</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"><area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif"><area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map></body>
</html>

4、HTML <select> 标签定义及使用说明

<select> 元素用来创建下拉列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><select><option value="volvo" style="display:none">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option>
</select></body>
</html>

5、HTML <style> 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head><body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body></html>

7、HTML <sub> 标签

包含在 <sub> 标签和其结束标签 </sub> 中的内容会以正常内容的一半的高度显示在下方，而且通常较小，请参见下述例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body><p>这个文本包含 <sub>下标</sub>文本。</p>
<p>这个文本包含 <sup>上标</sup> 文本。</p></body>
</html>

8、HTML <summary> 标签

<summary> 标签元素作为一个<datails>元素的标题，该标题可以包含详细的信息，但是默认情况下不显示，需要单击才能显示详细信息，请参考下述示

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details><p><b>注意：</b>目前只有 Chrome 和 Safari 6 支持 summary 标签。</p></body>
</html>

9、HTML <table> 标签

<table> 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列，如下述示例所示：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body><table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr>
</table></body>
</html>

10、HTML <textarea> 标签

<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本，请参考下述示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool 在线教程(w3cschool.cn)</title> 
</head>
<body><textarea rows="10" cols="30">
我是一个文本框。
</textarea></body>
</html>

11、HTML <tt> 标签 - HTML5 不支持

<tt> 标签用来改变字体样式，使标签中的文本显示为打字机文本，请参考下述例子：

<!DOCTYPE html>
<html>
<body><p>This text is normal.</p>
<p><tt>This text is teletype text.</tt></p></body>
</html>

12、HTML <u> 标签

<u> 标签可以用来对标签内的文本实现下划线样式，请参考下述示例：

<!DOCTYPE html>
<html>
<body><p>This is a <u>parragraph</u>.</p></body>
</html>

13、HTML <ul> 标签

<ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现，请参考下述例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><h4>无序列表:</h4>
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul></body>
</html>

14、HTML <video> 标签

<video> 标签可以将视频内容嵌入到HTML文档中，请参考下述示例：

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

15、HTML <ol> 标签

<ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号，请参考下面的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<ol><li>咖啡</li><li>茶</li><li>牛奶</li>
</ol>

<ol start="50"><li>咖啡</li><li>茶</li><li>牛奶</li>
</ol></body>
</html>

16、HTML <noframes> 标签HTML5不支持该标签

<noframes> 标签用于支持不支持 <frame> 元素的浏览器，请参考下面的示例：

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head><frameset cols="25%,50%,25%"><frame src="/statics/demosource/frame_a.htm"><frame src="/statics/demosource/frame_b.htm"><frame src="/statics/demosource/frame_c.htm"><noframes>抱歉，您的浏览器不支持 frame 属性！</noframes>
</frameset></html>

17、HTML <hr> 标签

<hr> 标签表示段落级元素之间的主题划分。例如，在下面的实例中我们对具有主题变化的内容使用了 <hr> 标签：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p><hr><h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p></body>
</html>

18、HTML <h1> - <h6> 标签

<h1> - <h6> 标签用来定义 HTML 标题，表示了 HTML 网页中六个级别的标题。您可以通过下面的这个实例来看看每个级别的标题有什么区别：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body><h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6></body>
</html>

19、HTML <center> 标签 - HTML 5 不支持

<center> 标签控制文本的居中显示，不能在 HTML5 中使用。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><p>这是一些文本。</p>
<center>这个文本居中对齐。</center>
<p>这是一些文本</p></body>
</html>

20、HTML <button> 标签

<button> 标签用来设置 HTML 中的按钮。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><button type="button" removed="alert('Hello world!')">Click Me!</button></body>
</html>

21、HTML <br> 标签

<br> 标签是空标签，可插入一个简单的换行符。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><p>
使用br元素<br>在文本中<br>换行。
</p></body>
</html>

22、HTML <dt> 标签

<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd>
</dl></body>
</html>

23、HTML <fieldset> 标签

<fieldset> 标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示，比如不同样式的边界、3D效果等。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><form><fieldset><legend>个人信息:</legend>姓名: <input type="text"><br>邮箱: <input type="text"><br>生日: <input type="text"></fieldset>
</form></body>
</html>

24、HTML <embed> 标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><embed src="/statics/demosource/helloworld.swf" tppabs="http://W3Cschool.com/tags/helloworld.swf"></body>
</html>

25、HTML <font> 标签 - HTML5 不支持

<font> 标签的使用示例如下所示，该标签已经过时，因此我们不建议您使用该标签。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><p><font size="3" color="red">这是一些文本！</font></p><p><font size="2" color="blue">这是一些文本！</font></p><p><font face="verdana" color="green">这是一些文本！</font></p></body>
</html>

26、HTML <label> 标签

<label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。参考下述的实例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body><p>点击其中一个文本标签选中选项：</p><form action="/statics/demosource/demo-form.php"><label for="male">Male</label><input type="radio" name="sex" id="male" value="male"><br><label for="female">Female</label><input type="radio" name="sex" id="female" value="female"><br><br><input type="submit" value="提交">
</form></body>
</html>

记录一些重要标签！

本篇文章为转载内容。原文链接：https://blog.csdn.net/chehec2010/article/details/85060460。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

块级元素：在HTML和CSS中，块级元素是指那些在网页布局时默认以整行显示的元素，它们可以设置宽度、高度、外边距和内边距等属性，并且每个块级元素会从新行开始并在其下方结束。例如div、p、h1等标签都是块级元素，它们各自占据独立的一行空间，并能包含其他行内元素或块级元素。

行内元素：在HTML和CSS中，行内元素也称为内联元素，它们在文档流中不会打断文本流，即一行中可以连续排列多个行内元素，且其宽度和高度通常由内容决定，无法直接设置。例如span、a、input、img等标签是行内元素，它们在页面上显示时不会独占一行，而是与相邻文本在同一行中呈现。

WAI-ARIA：Web Accessibility Initiative - Accessible Rich Internet Applications（无障碍网页倡议-可访问富互联网应用）是一组由W3C制定的技术规范，旨在增强动态web内容（如JavaScript、Ajax等技术生成的内容）对于辅助技术（如屏幕阅读器）的支持，确保残障用户能够更好地访问和使用网页功能。尽管文章并未直接提及WAI-ARIA，但作为现代网页开发中提升无障碍性的重要标准，在讨论HTML标签和Web开发时具有相关性。

虚拟DOM：在前端框架React、Vue.js等中提到的概念，虚拟DOM是一种抽象的数据结构，它将实际的DOM树映射为内存中的轻量级对象表示形式。通过比较前后两次渲染的虚拟DOM差异，框架可以在最小化DOM操作的情况下更新页面，从而提高页面渲染性能并减少不必要的重绘和回流。虽然文章没有涉及虚拟DOM，但在讨论现代Web开发技术和HTML标签的实际应用时，虚拟DOM是一个关键概念。

HTML5不支持的标签：随着HTML版本的迭代升级，一些旧版HTML中存在的标签因过时、有更好的替代方案或者不符合现代Web标准等原因，在HTML5及后续版本中不再被推荐或支持。例如，文章提到的标签用于嵌入Java小程序，但因为安全性和兼容性问题，在HTML5中已被废弃，开发者应采用更安全、更现代的技术实现类似功能。