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

原创

ithorizon 5个月前 (10-19) 阅读数 38 #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>

最顶部声明
立即学习“前端免费学习笔记（深入）”；
- 声明是文档的第一成份，位于文档的最顶部。
- 该标签就是告诉浏览器所使用的 HTML 规范。
以开始，以结束，中间包含头部标签及主体标签

HTML 标签的语法格式

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

	  属性
	   ↓
<div class="foo">IT视界</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> 来到IT视界。
<p>

专用属性

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

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

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

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

<img src="./logo.png" alt="IT视界Logo" width="100"    style="max-width:90%">
<a href="http://c.biancheng.net/" target="_blank">IT视界</a>

对代码的说明：

标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
标签的 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-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

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

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

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

如何获取data属性的值？

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

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元素定义了多个自定义属性，如何获取？

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2、使用dataset属性

var expense = document.getElementById(&#39;myDiv&#39;).dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2）、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = &#39;value4&#39;;

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

通用属性介绍

HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。

为标签定义 id 属性可以给我们提供很多便利，比如：

如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；

如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码如下所示：

<input type="text" id="username" />
<div id="content">IT视界</div>
<p id="url">https://www.php.cn/</p>

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：

<div class="className1 className2 className3"></div>
<p>IT视界</p>
<div>https://www.php.cn/</div>

当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <a href="https://www.php.cn/" title="HTML教程">HTML教程</a>
</body>
</html>

运行结果如下图所示：

将鼠标在链接处悬停片刻才能看到提示框。

4) style

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
</head>
<body>
    <p style="color:red;">https://www.php.cn/</p>
    <img src="./logo.png"   style="max-width:90%" alt="IT视界LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">IT视界</div>
</body>
</html>

运行结果如下图所示：

标签中常用的标签

1、标签

标签用来定义 HTML 文档的标题，只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 <title> 标签，并且 <title> 标签必须放置在 <head> 标签中。2、<base> 标签<base> 标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，如下例所示：3、<link> 标签<link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：<pre class="brush:html;toolbar:false"><link rel="stylesheet" href="common.css"></pre> 4、<style>标签使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：<pre class="brush:html;toolbar:false"><style> body { background-color: YellowGreen; } h1 { color: red; } </style></pre> 5、<meta> 标签<meta> 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上，但却会被浏览器解析。6、 相关标签： JavaScript html5 css ajax chrome html 标识符字符串循环 class Attribute 对象 dom href 样式表伪类来源：IT视界 收藏 点赞 上一篇：HTML超文本标记语言--超在那里？（文档分析） 下一篇：一文详解HTML注释和颜色（颜色名、十六进制值） 本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 作者最新文章 <ul> <li> POPO是什么？ 2024-06-08 22:20:24 </li> <li> 谷歌三件套指的是哪三个软件 2024-06-08 20:01:09 </li> <li> 什么是web3？大白话解析web3形态 2024-01-18 14:52:42 </li> <li> vpc网络是什么意思 2023-10-08 17:47:13 </li> <li> gmail是什么邮箱 2023-10-08 17:42:34 </li> <li> 网络攻击的种类有哪些? 2023-10-08 17:22:59 </li> <li> 云什么意思？ 2023-10-08 17:16:01 </li> <li> 支付通是什么平台 2023-09-12 14:49:39 </li> <li> HMS Core是什么软件 2023-08-17 11:25:41 </li> <li> Word文本框没有旋转按钮怎么办 2023-06-16 17:27:27 </li> </ul> 最新问题用了gard("admin")还需要单独验证吗？在控制器中用了gard("admin")->attempt($rules)后还需要单独写查询语句验证吗？ P粉709840553来自于2024-09-24 11:07:51 0 0 445 为什么password密码在数据据值都不样自动生成后在数据库password这个字段中为什么会出现值不一样，生成都是用的是：admin888 P粉709840553来自于2024-09-24 11:06:02 0 0 372 运行视频看不了啊运行视频看不了啊 P粉109248948来自于2024-09-24 10:21:09 0 0 280 为啥开头不写结束符号？> 就写一个<?php 为啥开头不写结束符号？> 就写一个<?php P粉052048067来自于2024-09-11 18:01:19 0 1 700 按照老师的方法不传值给TP6后台，再接收参数。出现以下错误。怎么办 http://localhost/index.php/admin/index/userliste 的远程资源。（原因：CORS 头缺少 'Access-Control-Al... 凡人来自于2024-07-09 15:20:49 1 39 2107 请问写php项目都要用到git吗请问写php项目都要用到git吗 IT视界用户-4202961来自于2024-06-11 14:28:59 0 57 2711 请问能提供下源码么请问能提供下源码么？想对照着看 周珂儿来自于2024-06-06 08:56:32 0 47 2427 为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容 许飞来自于2024-06-02 14:41:32 0 50 1877 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat 会飞的汤姆来自于2024-05-28 03:09:58 0 47 2472 function_exists()无法判定自定义函数 function test() { return true; } ... 凡人来自于2024-04-29 11:01:01 0 64 3304 相关专题更多> <ul> <li class="ul-li"> js获取数组长度的方法 </li> <li class="ul-li"> js刷新当前页面 </li> <li class="ul-li"> js四舍五入 </li> <li class="ul-li"> js删除节点的方法 </li> <li class="ul-li"> JavaScript转义字符 </li> <li class="ul-li"> js生成随机数的方法 </li> <li class="ul-li"> 如何启用JavaScript </li> <li class="ul-li"> Js中Symbol类详解 </li> </ul> 广告  热门推荐 <ul> <li> html5支持wmv格式吗 </li> <li> HTML5包含哪两种标签 </li> <li> html5不能换行的标签 </li> <li> HTML速学教程(入门课程) </li> </ul>  广告 热门教程更多> 相关推荐热门推荐最新课程 <ul class="one"> <li> html5开发实战之百度外卖手机站前端制作 58242次学习收藏 </li> <li> HTML+CSS网页基础 48029次学习收藏 </li> <li> HTML5前端面试题 21671次学习收藏 </li> </ul> <ul class="two" style="display: none;"> <li> 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1404623次学习收藏 </li> <li> phpStudy极速入门视频教程 517619次学习收藏 </li> <li> 独孤九贱(4)_PHP视频教程 1205265次学习收藏 </li> <li> PHP实战天龙八部之仿爱奇艺电影网站 748041次学习收藏 </li> <li> 独孤九贱(1)_HTML5视频教程 600341次学习收藏 </li> </ul> <ul class="three" style="display: none;"> <li> 支付宝沙箱支付（个人也能用的支付） 486次学习收藏 </li> <li> 麻省理工大佬Python课程 7008次学习收藏 </li> <li> Swoole5 Hyperf3 php8新版本协程框架讲说 5253次学习收藏 </li> <li> 【web前端】Node.js快速入门 4255次学习收藏 </li> <li> 国外Web开发全栈课程全集 2805次学习收藏 </li> </ul> 最新下载更多> <ul class="swiper-wrapper"> <li class="swiper-slide"> </li> <li class="swiper-slide"> </li> <li class="swiper-slide"> </li> </ul> 网站特效网站源码网站素材前端模板 <ul class="onef"> <li> [表单按钮] jQuery企业留言表单联系代码 </li> <li> [播放器特效] HTML5 MP3音乐盒播放特效 </li> <li> [菜单导航] HTML5炫酷粒子动画导航菜单特效 </li> <li> [表单按钮] jQuery可视化表单拖拽编辑代码 </li> <li> [播放器特效] VUE.JS仿酷狗音乐播放器代码 </li> <li> [html5特效] 经典html5推箱子小游戏 </li> <li> [图片特效] jQuery滚动添加或减少图片特效 </li> <li> [相册特效] CSS3个人相册封面悬停放大特效 </li> </ul> <ul class="twof" style="display:none"> <li> [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5 </li> <li> [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus </li> <li> [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5 </li> <li> [Bootstrap模板] 简约简历资料网页模板 Bootstrap4 </li> <li> [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE </li> <li> [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版 </li> <li> [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox </li> <li> [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio </li> </ul> <ul class="threef" style="display:none"> <li> [网站素材] 可爱的夏天元素矢量素材(EPS+PNG) </li> <li> [网站素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) </li> <li> [网站素材] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) </li> <li> [网站素材] 金色的毕业帽矢量素材(EPS+PNG) </li> <li> [网站素材] 黑白风格的山脉图标矢量素材(EPS+PNG) </li> <li> [网站素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) </li> <li> [网站素材] 扁平风格的植树节banner矢量素材(AI+EPS) </li> <li> [网站素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) </li> </ul> <ul class="fourf" style="display:none"> <li> [前端模板] HTML5汉堡美食服务宣传网站模板 </li> <li> [前端模板] 时尚服饰配饰在线商城网站模板 </li> <li> [前端模板] 房地产智能家居服务公司网站模板 </li> <li> [前端模板] 宗教文化在线教育服务网站模板 </li> <li> [前端模板] 犬类护理服务机构网站模板 </li> <li> [前端模板] IT软件技术服务公司网站模板 </li> <li> [前端模板] HTML5石油天然气工业网站模板 </li> <li> [前端模板] 战略营销咨询服务公司网站模板 </li> </ul>   <dl> <dt> 关于我们免责申明意见反馈讲师合作广告合作  最新更新 </dt> <dd class="cont1">IT视界：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> 关注服务号 微信扫码 关注IT视界服务号 技术交流群 QQ扫码 加入技术交流群 </dd> </dl> app下载 扫描下载App <dl> <dt>IT视界订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> <dl> <dt>IT视界APP</dt> <dd>随时随地碎片化学习</dd> </dl> <dl> <dt>IT视界抖音号</dt> <dd>发现有趣的</dd> </dl> Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号 <input type="hidden" id="verifycode" value="/captcha.html">  <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <style> .content img{max-width:100%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style>    <style> .layui-fixbar{display: none;} </style> <li> PHP学习 </li> <li> 技术支持 </li> <li> 返回顶部 </li>  <style> .google-cn { position: fixed; bottom: 0; left: 0; width: 200px; max-width: 100%; z-index: 9999; } </style> </head>