一文详解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>

登录后复制

最顶部声明<!DOCTYPE html>
- 声明是文档的第一成份，位于文档的最顶部。
- 该标签就是告诉浏览器所使用的 HTML 规范。
以<html>开始，以</html>结束，中间包含头部标签及主体标签

HTML 标签的语法格式

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

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

登录后复制

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

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

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

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

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

自闭和标签

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

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

登录后复制

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

表示 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 中的标签就有 src 和 alt 两个专用属性，标签也有 href 和 target 两个专用属性，如下例所示：

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