HTML標簽和屬性應用實例分析

發(fā)布時間：2022-08-03 17:18:31 來源：億速云閱讀：150 作者：iii 欄目：web開發(fā)

本篇內容主要講解“HTML標簽和屬性應用實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML標簽和屬性應用實例分析”吧!

HTML標簽和屬性應用實例分析

HTML的主體結構

HTML 頁面的基本結構如下所示，其中包含了各種創(chuàng)建網(wǎng)頁所需的標簽（例如 doctype、html、head 和 body 等）。

<!--這是html的注釋信息-->

<!DOCTYPE html> <!--這是DOCTYPE聲明-->

<html> <!--這是根-->

<head> <!--這是頭-->

    <meta charset = "UTF-8"> <!--  描述性標簽  -->
    
     <title>Hello</title> <!--標題欄-->
</head>

    <body> <!--網(wǎng)頁體-->
    
    <!--這里的內容顯示到網(wǎng)頁上-->
    這是我的第一個HTML頁面
    
    </body>
</html>

最頂部聲明<!DOCTYPE html>

聲明是文檔的第一成份，位于文檔的最頂部。
該標簽就是告訴瀏覽器所使用的 HTML 規(guī)范。

以<html>開始，以</html>結束，中間包含頭部標簽及主體標簽

HTML 標簽的語法格式

一般情況下，一個 HTML 標簽由開始標簽、屬性、內容和結束標簽組成，標簽的名稱不區(qū)分大小寫，但大多數(shù)屬性的值需要區(qū)分大小寫，如下所示：

	  屬性
	   ↓
<div class="foo">億速云</div>
 ↑            ↑           ↑
開始標簽        內容   結束標簽

除了 class 屬性外，開始標簽中還可以包含其它屬性信息，比如 id、title 等，這些我們會在后面進行講解。

注意，雖然 HTML 標簽在語法上不區(qū)分大小寫，但是為了規(guī)范和專業(yè)，強烈建議在定義標簽時一律采用小寫。

當使用瀏覽器打開我們編寫的 HTML 文檔時，瀏覽器會從上到下依次讀取文檔中的內容，并根據(jù) HTML 標簽和屬性將標簽中的內容呈現(xiàn)在瀏覽器中。

一個 HTML 文檔中必須具有一些基本的標簽，以便瀏覽器區(qū)分普通文本和 HTML 文檔。您可以根據(jù)想要實現(xiàn)的效果使用任意數(shù)量的標簽，但有以下幾點需要注意：

所有 HTML 標簽都必須放在尖括號< >內；
HTML 中不同的標簽可以實現(xiàn)不同的效果；
如果使用了某個標簽，則必須使用對應的結束標簽來結尾（自閉和標簽除外）。

自閉和標簽

有一些 HTML 標簽沒有單獨的結束標簽，而是在開始標簽中添加/來進行閉合，這種標簽稱為自閉和標簽。請看下面的例子：

<img src="./logo.png" alt="C語言中文網(wǎng)Logo" />  <!-- 圖像 -->
<hr />  <!-- 分割線 -->
<br />  <!-- 文本換行 -->
<input type="text" placeholder="請輸入內容" />  <!-- 文本輸入框 -->

自閉和標簽不用包圍內容，所以不需要單獨的結束標簽。只有少部分 HTML 標簽是自閉和的。

表示 HTML 注釋，用來對 HTML 代碼進行說明，瀏覽器會忽略注釋內容，所以用戶在網(wǎng)頁中看不到注釋

HTML屬性的概念和使用

什么是屬性

屬性可以為 HTML 標簽提供一些額外信息，或者對 HTML 標簽進行修飾。屬性需要添加在開始標簽中，語法格式為：

attr="value"

attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號""或者單引號''包圍。

注意，雖然雙引號和單引號都可以包圍屬性值，但是為了規(guī)范和專業(yè)，請盡量使用雙引號。

一個標簽可以沒有屬性，也可以有一個或者多個屬性。

使用 HTML 屬性的例子：

<p id="user-info" class="color-red">
歡迎 <font color="red" size="3">Tom</font> 來到億速云。
<p>

專用屬性

HTML 屬性有很多，大體可以分為兩類：

有些屬性適用于大部分或者所有 HTML 標簽，我們將這些屬性稱為通用屬性；

有些屬性只適用于一個或者幾個特定的 HTML 標簽，我們將這些屬性稱為專用屬性。

HTML 中的 <img> 標簽就有 src 和 alt 兩個專用屬性，<a> 標簽也有 href 和 target 兩個專用屬性，如下例所示：

<img src="./logo.png" alt="億速云Logo" width="100" height="50">
<a href="http://c.biancheng.net/" target="_blank">億速云</a>

對代碼的說明：

<img> 標簽中的 src 屬性用來定義圖像的路徑，alt 屬性用來定義圖像的描述信息，當圖像出現(xiàn)異常無法正常顯示時就會顯示 alt 中的信息。
<a> 標簽的 href 屬性用來定義鏈接的地址，target 屬性用來定義新頁面在瀏覽器中的打開方式。

自定義屬性

除了自帶的屬性，HTML 也允許我們自定義屬性，這些屬性雖然可以被瀏覽器識別，但是并不會添加什么特殊效果，我們需要借助 CSS 和 JavaScript 處理自定義屬性，為 HTML 標簽添加指定樣式或者行為。

data-* 屬性用于存儲私有頁面后應用的自定義數(shù)據(jù)，是 HTML5 新增的屬性。

<element data-*="somevalue">

somevalue：指定屬性值 (一個字符串)

data-* 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。

自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗（不需要使用 Ajax 或去服務端查詢數(shù)據(jù)）。

data-* 屬性由以下兩部分組成：

屬性名不要包含大寫字母，在 data- 后必須至少有一個字符。
屬性值，該屬性值可以是任何字符串

注意：自定義屬性前綴 "data-" 會被客戶端忽略。

利用dataset可以獲取data-屬性構造的對象，該方法目前只能在Chrome 、Opera等部分瀏覽器中實現(xiàn)，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。

只要在標簽里面以”data-”為前綴定義我們的自定義屬性就可以用來進行一些數(shù)據(jù)的存放。

<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元素定義了多個自定義屬性，如何獲?。?/p>

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標簽里設置多個自定義屬性</div>

1、使用循環(huán)遍歷

 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）、讓所有的自定義的屬性值塞到一個數(shù)組中

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 等，這些通用屬性可以在大多數(shù) HTML 標簽中使用，下面來簡單介紹一下它們的用法。

1) id

id 屬性用來賦予某個標簽唯一的名稱（標識符），當我們使用 CSS 或者 JavaScript 來操作這個標簽時，就可以通過 id 屬性來找到這個標簽。

為標簽定義 id 屬性可以給我們提供很多便利，比如：

如果標簽中帶有 id 屬性作為唯一標識符，通過 id 屬性可以很方便的定位到該標簽；

如果 HTML 文檔中包含多個同名的標簽，利用 id 屬性的唯一性，可以很方便的區(qū)分它們。

注意：在一個 HTML 文檔中 id 屬性的值必須是唯一的。

示例代碼如下所示：

<input type="text" id="username" />
<div id="content">億速云</div>
<p id="url">http://kemok4.com/</p>

2) class

與 id 屬性類似，class 屬性也可以為標簽定義名稱（標識符），不同的是 class 屬性在整個 HTML 文檔中不必是唯一的，我們可以為多個標簽定義相同的 class 屬性值。另外，還可以為一個 HTML 標簽定義多個 class 屬性值，如下所示：

<div class="className1 className2 className3"></div>
<p>億速云</p>
<div>http://kemok4.com/</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="http://kemok4.com/" title="HTML教程">HTML教程</a>
</body>
</html>

運行結果如下圖所示：

HTML標簽和屬性應用實例分析

將鼠標在鏈接處懸停片刻才能看到提示框。

4) style

使用 style 屬性我們可以在 HTML 標簽內部為標簽定義 CSS 樣式，例如設置文本的顏色、字體等，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>演示文檔</title>
</head>
<body>
    <p style="color:red;">http://kemok4.com/</p>
    <img src="./logo.png" style="height:50px;" alt="億速云LOGO">
    <div style="padding:10px;border:2px solid #999;text-align:center;">億速云</div>
</body>
</html>

<head>標簽中常用的標簽

1、<title> 標簽

<title> 標簽用來定義 HTML 文檔的標題，只有包含 <title> 標簽的文檔才算是一個有效的 HTML 文檔。另外，一個 HTML 文檔中僅允許存在一個 <title> 標簽，并且 <title> 標簽必須放置在 <head> 標簽中。

2、<base> 標簽

<base> 標簽用于為頁面中所有相對鏈接指定一個基本鏈接，當您設置了基本鏈接后，當前頁面中的所有相對鏈接都會使用這個基本鏈接作為前綴，如下例所示：

3、<link> 標簽

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

4、<style>標簽

使用 <style> 標簽可以在 HTML 文檔中嵌入 CSS 樣式，需要注意的是在 <style> 標簽中定義的樣式僅對當前 HTML 文檔有效。示例代碼如下：

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

5、<meta> 標簽

6、<script> 標簽

<script>
        document.write("億速云")
</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>歡迎來到億速云</p>
</body>
<!-- body 結束 -->
</html>

HTML標簽和屬性應用實例分析

注釋可以出現(xiàn)在 HTML 文檔的任意位置，包括文檔開頭、文檔末尾、文檔中間、標簽外部、標簽內容中等。

到此，相信大家對“HTML標簽和屬性應用實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

向AI問一下細節(jié)

HTML標簽和屬性應用實例分析

猜你喜歡

最新資訊

相關推薦

相關標簽