• 技术文章 >web前端 >html教程

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

    青灯夜游青灯夜游2022-08-02 19:15:52原创199
    本篇文章带大家了解一下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 标签由开始标签、属性、内容和结束标签组成,标签的名称不区分大小写,但大多数属性的值需要区分大小写,如下所示:

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

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

    注意,虽然 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 中的 <img> 标签就有 src 和 alt 两个专用属性,<a> 标签也有 href 和 target 两个专用属性,如下例所示:

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

    对代码的说明:

    自定义属性

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

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

    <element data-*="somevalue">

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

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

    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) == 'data-') {
        expense[attrs[i].name.substring(5)] = attrs[i].value;
      }
    }

    2、使用dataset属性

    var expense = document.getElementById('myDiv').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 = 'value4';

    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">PHP中文网</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>PHP中文网</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>

    运行结果如下图所示:

    1.png

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

    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="height:50px;" alt="PHP中文网LOGO">
        <div style="padding:10px;border:2px solid #999;text-align:center;">PHP中文网</div>
    </body>
    </html>

    运行结果如下图所示:

    2.png

    <head>标签中常用的标签

    1、<title> 标签

    <title> 标签用来定义 HTML 文档的标题,只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外,一个 HTML 文档中仅允许存在一个 <title> 标签,并且 <title> 标签必须放置在 <head> 标签中。

    2、<base> 标签

    <base> 标签用于为页面中所有相对链接指定一个基本链接,当您设置了基本链接后,当前页面中的所有相对链接都会使用这个基本链接作为前缀,如下例所示:

    3、<link> 标签

    <link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:

    <link rel="stylesheet" href="common.css">

    4、<style>标签

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

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

    5、<meta> 标签

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

    6、<script> 标签

    <script> 标签用于定义 JavaScript 脚本,示例代码如下:

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

    7、<noscript> 标签

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

    HTML注释标签<!-- -->

    在 HTML 中您可以使用<!-- -->在代码中添加注释,<!---->之间的所有内容都会被视为注释。示例代码如下:

    <!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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5
    上一篇:HTML超文本标记语言--超在那里?(文档分析) 下一篇:一文详解HTML注释和颜色(颜色名、十六进制值)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• html5支持wmv格式吗• HTML5包含哪两种标签• html5不能换行的标签• html5中可以有多个form吗• HTML超文本标记语言--超在那里?(文档分析)
    1/1

    PHP中文网