搜索

首页 >web前端 >html教程 >一文详解HTML标签和属性（主体结构浅析）

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

青灯夜游
青灯夜游原创
2022-08-02 18:47:242550浏览

本篇文章带大家了解一下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 530d5610360edb8539f8c40d04c46b6a标签中常用的标签<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:html;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>

3.png

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

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

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

JavaScript html5 css ajax chrome html 标识符 字符串 循环 class Attribute 对象 dom href 样式表 伪类
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML超文本标记语言--超在那里？（文档分析）下一篇：一文详解HTML注释和颜色（颜色名、十六进制值）

相关文章

查看更多