一文详解HTML标签和属性（主体结构浅析）-html教程-PHP中文网

首页

web前端

html教程

一文详解HTML标签和属性（主体结构浅析）

青灯夜游

Aug 02, 2022 pm 06:47 PM

html5

本篇文章带大家了解一下HTML标签和属性，聊聊HTML文档的主体结构与相关标签，希望对大家有所帮助！

一文详解HTML标签和属性（主体结构浅析）

HTML的主体结构

HTML 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 doctype、html、head 和 body 等）。

<!--这是html的注释信息-->

<!DOCTYPE html> <!--这是DOCTYPE声明-->

<html> <!--这是根-->

<head> <!--这是头-->

    <meta charset = "UTF-8"> <!--  描述性标签  -->
    
     <title>Hello</title> <!--标题栏-->
</head>

    <body> <!--网页体-->
    
    <!--这里的内容显示到网页上-->
    这是我的第一个HTML页面
    
    </body>
</html>

最顶部声明8b05045a5be5764f313ed5b9168a17e6
- 声明是文档的第一成份，位于文档的最顶部。
- 该标签就是告诉浏览器所使用的 HTML 规范。
以100db36a723c770d327fc0aef2ce13b1开始，以73a6ac4ed44ffec12cee46588e518a5e结束，中间包含头部标签及主体标签

HTML 标签的语法格式

一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：

	  属性
	   ↓
<div class="foo">PHP中文网</div>
 ↑            ↑           ↑
开始标签        内容   结束标签

除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等，这些我们会在后面进行讲解。

注意，虽然 HTML 标签在语法上不区分大小写，但是为了规范和专业，强烈建议在定义标签时一律采用小写。

当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。

一个 HTML 文档中必须具有一些基本的标签，以便浏览器区分普通文本和 HTML 文档。您可以根据想要实现的效果使用任意数量的标签，但有以下几点需要注意：

所有 HTML 标签都必须放在尖括号6d267e5fab17ea8bc578f9e7e5e1570b内；
HTML 中不同的标签可以实现不同的效果；
如果使用了某个标签，则必须使用对应的结束标签来结尾（自闭和标签除外）。

自闭和标签

有一些 HTML 标签没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭和标签。请看下面的例子：

<img src="./logo.png" alt="C语言中文网Logo" />  <!-- 图像 -->
<hr />  <!-- 分割线 -->
<br />  <!-- 文本换行 -->
<input type="text" placeholder="请输入内容" />  <!-- 文本输入框 -->

自闭和标签不用包围内容，所以不需要单独的结束标签。只有少部分 HTML 标签是自闭和的。

506b3d9c1956a587497006e170f6675c 表示 HTML 注释，用来对 HTML 代码进行说明，浏览器会忽略注释内容，所以用户在网页中看不到注释

HTML属性的概念和使用

什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号""或者单引号''包围。

注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。

一个标签可以没有属性，也可以有一个或者多个属性。

使用 HTML 属性的例子：

<p id="user-info" class="color-red">
欢迎 <font color="red" size="3">Tom</font> 来到PHP中文网。
<p>

专用属性

HTML 属性有很多，大体可以分为两类：

有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；

有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。

HTML 中的 a1f02c36ba31691bcfe87b2722de723b 标签就有 src 和 alt 两个专用属性，3499910bf9dac5ae3c52d5ede7383485 标签也有 href 和 target 两个专用属性，如下例所示：

<img src="./logo.png" alt="PHP中文网Logo" width="100" height="50">
<a href="http://c.biancheng.net/" target="_blank">PHP中文网</a>

对代码的说明：

a1f02c36ba31691bcfe87b2722de723b 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
3499910bf9dac5ae3c52d5ede7383485 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。

自定义属性

除了自带的属性，HTML 也允许我们自定义属性，这些属性虽然可以被浏览器识别，但是并不会添加什么特殊效果，我们需要借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为。

data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。

<element data-*="somevalue">

somevalue：指定属性值 (一个字符串)

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
属性值，该属性值可以是任何字符串

注意：自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值？

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba68

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i cb2c6a096fab264382c82bd2890c9f59标签中常用的标签<p><strong>1、b2386ffb911b14667cb8f0f91ea547a7 标签</strong></p><p>b2386ffb911b14667cb8f0f91ea547a7 标签用来定义 HTML 文档的标题，只有包含 b2386ffb911b14667cb8f0f91ea547a7 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 b2386ffb911b14667cb8f0f91ea547a7 标签，并且 b2386ffb911b14667cb8f0f91ea547a7 标签必须放置在 93f0f5c25f18dab9d176bd4f6de5d30e 标签中。</p><p><strong>2、dde6fb694e6711ae5e6f381704c04ae4 标签</strong></p><p>dde6fb694e6711ae5e6f381704c04ae4 标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：</p><p><strong>3、2cdf5bf648cf2f33323966d7f58a7f3f 标签</strong></p><p>2cdf5bf648cf2f33323966d7f58a7f3f 标签经常用于引用外部 CSS 样式表，2cdf5bf648cf2f33323966d7f58a7f3f 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><pre class='brush:php;toolbar:false;'><link rel="stylesheet" href="common.css">

4、c9ccee2e6ea535a969eb3f532ad9fe89标签

使用 c9ccee2e6ea535a969eb3f532ad9fe89 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 c9ccee2e6ea535a969eb3f532ad9fe89 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：

<style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
</style>

5、e8e496c15ba93d81f6ea4fe5f55a2244 标签

e8e496c15ba93d81f6ea4fe5f55a2244 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。e8e496c15ba93d81f6ea4fe5f55a2244 标签定义的数据并不会显示在页面上，但却会被浏览器解析。

6、3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签

3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签用于定义 JavaScript 脚本，示例代码如下：

<script>
        document.write("PHP中文网")
</script>

7、2b0b25ff593c5b6c03403dd6234ffb2c 标签

当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 2b0b25ff593c5b6c03403dd6234ffb2c 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。除了 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签外，在 2b0b25ff593c5b6c03403dd6234ffb2c 标签中可以包含任何 HTML 元素

HTML注释标签506b3d9c1956a587497006e170f6675c

在 HTML 中您可以使用506b3d9c1956a587497006e170f6675c在代码中添加注释，37ce428d34cd6f9783b8b251c3e6bdfc之间的所有内容都会被视为注释。示例代码如下：

<!DOCTYPE html>
<html>
<!-- head 开始 -->
<head>
    <meta charset="UTF-8">  <!-- 当前文档采用UTF-8编码 -->
    <title>HTML注释的写法</title>
</head>
<!-- head 结束 -->
<!-- body 开始 -->
<body>
    <!-- 一段文本 -->
    <p>欢迎来到PHP中文网</p>
</body>
<!-- body 结束 -->
</html>

注释可以出现在 HTML 文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等。

相关推荐：《html视频教程》

以上是一文详解HTML标签和属性（主体结构浅析）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract