重慶分公司
重慶分公司
HTML標(biāo)簽和屬性應(yīng)用實(shí)例分析
本篇內(nèi)容主要講解“HTML標(biāo)簽和屬性應(yīng)用實(shí)例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML標(biāo)簽和屬性應(yīng)用實(shí)例分析”吧!
成都創(chuàng)新互聯(lián)公司10多年成都企業(yè)網(wǎng)站定制服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都企業(yè)網(wǎng)站定制及推廣,對(duì)成都服務(wù)器托管等多個(gè)行業(yè)擁有豐富的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。
.jpg)
HTML的主體結(jié)構(gòu)
HTML 頁面的基本結(jié)構(gòu)如下所示，其中包含了各種創(chuàng)建網(wǎng)頁所需的標(biāo)簽（例如 doctype、html、head 和 body 等）。
Hello
這是我的第一個(gè)HTML頁面
HTML 標(biāo)簽的語法格式
一般情況下，一個(gè) HTML 標(biāo)簽由開始標(biāo)簽、屬性、內(nèi)容和結(jié)束標(biāo)簽組成，標(biāo)簽的名稱不區(qū)分大小寫，但大多數(shù)屬性的值需要區(qū)分大小寫，如下所示：
屬性
↓
創(chuàng)新互聯(lián)
↑ ↑ ↑
開始標(biāo)簽 內(nèi)容 結(jié)束標(biāo)簽
除了 class 屬性外，開始標(biāo)簽中還可以包含其它屬性信息，比如 id、title 等，這些我們會(huì)在后面進(jìn)行講解。
注意，雖然 HTML 標(biāo)簽在語法上不區(qū)分大小寫，但是為了規(guī)范和專業(yè)，強(qiáng)烈建議在定義標(biāo)簽時(shí)一律采用小寫。
當(dāng)使用瀏覽器打開我們編寫的 HTML 文檔時(shí)，瀏覽器會(huì)從上到下依次讀取文檔中的內(nèi)容，并根據(jù) HTML 標(biāo)簽和屬性將標(biāo)簽中的內(nèi)容呈現(xiàn)在瀏覽器中。
一個(gè) HTML 文檔中必須具有一些基本的標(biāo)簽，以便瀏覽器區(qū)分普通文本和 HTML 文檔。您可以根據(jù)想要實(shí)現(xiàn)的效果使用任意數(shù)量的標(biāo)簽，但有以下幾點(diǎn)需要注意：
所有 HTML 標(biāo)簽都必須放在尖括號(hào)< >內(nèi)；
HTML 中不同的標(biāo)簽可以實(shí)現(xiàn)不同的效果；
如果使用了某個(gè)標(biāo)簽，則必須使用對(duì)應(yīng)的結(jié)束標(biāo)簽來結(jié)尾（自閉和標(biāo)簽除外）。
自閉和標(biāo)簽
有一些 HTML 標(biāo)簽沒有單獨(dú)的結(jié)束標(biāo)簽，而是在開始標(biāo)簽中添加/來進(jìn)行閉合，這種標(biāo)簽稱為自閉和標(biāo)簽。請(qǐng)看下面的例子：
自閉和標(biāo)簽不用包圍內(nèi)容，所以不需要單獨(dú)的結(jié)束標(biāo)簽。只有少部分 HTML 標(biāo)簽是自閉和的。
表示 HTML 注釋，用來對(duì) HTML 代碼進(jìn)行說明，瀏覽器會(huì)忽略注釋內(nèi)容，所以用戶在網(wǎng)頁中看不到注釋
HTML屬性的概念和使用
什么是屬性
屬性可以為 HTML 標(biāo)簽提供一些額外信息，或者對(duì) HTML 標(biāo)簽進(jìn)行修飾。屬性需要添加在開始標(biāo)簽中，語法格式為：
attr="value"
attr 表示屬性名，value 表示屬性值。屬性值必須使用雙引號(hào)""或者單引號(hào)''包圍。
注意，雖然雙引號(hào)和單引號(hào)都可以包圍屬性值，但是為了規(guī)范和專業(yè)，請(qǐng)盡量使用雙引號(hào)。
一個(gè)標(biāo)簽可以沒有屬性，也可以有一個(gè)或者多個(gè)屬性。
使用 HTML 屬性的例子：
歡迎 Tom 來到創(chuàng)新互聯(lián)。
專用屬性
HTML 屬性有很多，大體可以分為兩類：
有些屬性適用于大部分或者所有 HTML 標(biāo)簽，我們將這些屬性稱為通用屬性；
有些屬性只適用于一個(gè)或者幾個(gè)特定的 HTML 標(biāo)簽，我們將這些屬性稱為專用屬性。
HTML 中的 ![]()
標(biāo)簽就有 src 和 alt 兩個(gè)專用屬性， 標(biāo)簽也有 href 和 target 兩個(gè)專用屬性，如下例所示：
創(chuàng)新互聯(lián)
對(duì)代碼的說明：
自定義屬性
除了自帶的屬性，HTML 也允許我們自定義屬性，這些屬性雖然可以被瀏覽器識(shí)別，但是并不會(huì)添加什么特殊效果，我們需要借助 CSS 和 JavaScript 處理自定義屬性，為 HTML 標(biāo)簽添加指定樣式或者行為。
data-* 屬性用于存儲(chǔ)私有頁面后應(yīng)用的自定義數(shù)據(jù)，是 HTML5 新增的屬性。
data-* 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。
自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗(yàn)（不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù)）。
data-* 屬性由以下兩部分組成：
注意： 自定義屬性前綴 "data-" 會(huì)被客戶端忽略。
利用dataset可以獲取data-屬性構(gòu)造的對(duì)象，該方法目前只能在Chrome 、Opera等部分瀏覽器中實(shí)現(xiàn)，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。
只要在標(biāo)簽里面以”data-”為前綴定義我們的自定義屬性就可以用來進(jìn)行一些數(shù)據(jù)的存放。
在標(biāo)簽里設(shè)置H5新增的自定義屬性
這個(gè)data屬性還可以應(yīng)用在CSS中，前提是你的瀏覽器支持after偽類，以及content的attr屬性（低版本的IE不支持）：
data屬性應(yīng)用于CSS中
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}如何獲取data屬性的值？
在標(biāo)簽里設(shè)置H5新增的自定義屬性
1、使用getAttribute來獲取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");2、使用Html5自定義屬性對(duì)象Dataset來獲取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.dataset.attribute;注意：帶連字符連接的名稱在使用的時(shí)候需要命名駝峰化，即大小寫組合書寫，這與應(yīng)用元素的style對(duì)象類似，dom.style.borderColor。例如data屬性為data-other-attribute，則我們要獲取相應(yīng)的值可以使用：myp.dataset.otherAttribute
如果Html元素定義了多個(gè)自定義屬性，如何獲?。?/p>
在標(biāo)簽里設(shè)置多個(gè)自定義屬性
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對(duì)象，而是個(gè)DOMStringMap對(duì)象，DOMStringMap是HTML5一種新的含有多個(gè)名-值對(duì)的交互變量
1）、讓所有的自定義的屬性值塞到一個(gè)數(shù)組中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}2）、刪掉一個(gè)data屬性
delete myDiv.dataset.attribute;
3、增加一個(gè)data屬性
myDiv.dataset.attribute4 = 'value4';
dataset的兼容性處理
如果瀏覽器不支持dataset，有必要做一下兼容處理：
if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 設(shè)置自定義屬性
var theValue = myDiv.dataset.attribute; // 獲取自定義屬性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 設(shè)置自定義屬性
var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性
}結(jié)語：
使用dataset操作data 要比使用getAttribute速度稍微慢些，雖然使用dataset不能提高代碼的性能，但是對(duì)于簡(jiǎn)潔代碼，提高代碼的可讀性和可維護(hù)性是很有幫助的。
通用屬性介紹
HTML 標(biāo)簽中有一些通用的屬性，如 id、title、class、style 等，這些通用屬性可以在大多數(shù) HTML 標(biāo)簽中使用，下面來簡(jiǎn)單介紹一下它們的用法。
1) id
id 屬性用來賦予某個(gè)標(biāo)簽唯一的名稱（標(biāo)識(shí)符），當(dāng)我們使用 CSS 或者 JavaScript 來操作這個(gè)標(biāo)簽時(shí)，就可以通過 id 屬性來找到這個(gè)標(biāo)簽。
為標(biāo)簽定義 id 屬性可以給我們提供很多便利，比如：
如果標(biāo)簽中帶有 id 屬性作為唯一標(biāo)識(shí)符，通過 id 屬性可以很方便的定位到該標(biāo)簽；
如果 HTML 文檔中包含多個(gè)同名的標(biāo)簽，利用 id 屬性的唯一性，可以很方便的區(qū)分它們。
注意：在一個(gè) HTML 文檔中 id 屬性的值必須是唯一的。
示例代碼如下所示：
創(chuàng)新互聯(lián)
https://www.cdcxhl.com/
2) class
與 id 屬性類似，class 屬性也可以為標(biāo)簽定義名稱（標(biāo)識(shí)符），不同的是 class 屬性在整個(gè) HTML 文檔中不必是唯一的，我們可以為多個(gè)標(biāo)簽定義相同的 class 屬性值。另外，還可以為一個(gè) HTML 標(biāo)簽定義多個(gè) class 屬性值，如下所示：
創(chuàng)新互聯(lián)
https://www.cdcxhl.com/
當(dāng)使用 CSS 或者 JavaScript 來操作 HTML 標(biāo)簽時(shí)，同樣可以使用 class 屬性來找到對(duì)應(yīng)的 HTML 標(biāo)簽。由于 class 屬性不是唯一的，所以通過 CSS 或 JavaScript 對(duì) HTML 標(biāo)簽的操作會(huì)應(yīng)用于所有具有同名 class 屬性的標(biāo)簽中。
3) title
title 屬性用來對(duì)標(biāo)簽內(nèi)容進(jìn)行描述說明，當(dāng)鼠標(biāo)移動(dòng)到該標(biāo)簽上方時(shí)會(huì)顯示出 title 屬性的值，如下例所示：
演示文檔
HTML教程
運(yùn)行結(jié)果如下圖所示：
將鼠標(biāo)在鏈接處懸停片刻才能看到提示框。
4) style
使用 style 屬性我們可以在 HTML 標(biāo)簽內(nèi)部為標(biāo)簽定義 CSS 樣式，例如設(shè)置文本的顏色、字體等，如下例所示：
演示文檔
https://www.cdcxhl.com/
創(chuàng)新互聯(lián)
標(biāo)簽中常用的標(biāo)簽
1、 標(biāo)簽</strong></p><p><title> 標(biāo)簽用來定義 HTML 文檔的標(biāo)題，只有包含 <title> 標(biāo)簽的文檔才算是一個(gè)有效的 HTML 文檔。另外，一個(gè) HTML 文檔中僅允許存在一個(gè) <title> 標(biāo)簽，并且 <title> 標(biāo)簽必須放置在 <head> 標(biāo)簽中。</p><p><strong>2、<base href="http://weahome.cn/"/> 標(biāo)簽</strong></p><p><base> 標(biāo)簽用于為頁面中所有相對(duì)鏈接指定一個(gè)基本鏈接，當(dāng)您設(shè)置了基本鏈接后，當(dāng)前頁面中的所有相對(duì)鏈接都會(huì)使用這個(gè)基本鏈接作為前綴，如下例所示：</p><p><strong>3、<link> 標(biāo)簽</strong></p><p><link> 標(biāo)簽經(jīng)常用于引用外部 CSS 樣式表，<link> 標(biāo)簽中包含兩個(gè)主要的屬性，分別是 rel 和 href。rel 屬性用來指示引用文件的類型，href 屬性用來設(shè)置外部文件的路徑。示例代碼如下：</p><pre><link rel="stylesheet" href="common.css"></pre><p><strong>4、<style>標(biāo)簽</strong></p><p>使用 <style> 標(biāo)簽可以在 HTML 文檔中嵌入 CSS 樣式，需要注意的是在 <style> 標(biāo)簽中定義的樣式僅對(duì)當(dāng)前 HTML 文檔有效。示例代碼如下：</p><pre><style>
body { background-color: YellowGreen; }
h2 { color: red; }
</style></pre><p><strong>5、<meta> 標(biāo)簽</strong></p><p><meta> 標(biāo)簽用于提供有關(guān) HTML 文檔的元數(shù)據(jù)，例如頁面有效期、頁面作者、關(guān)鍵字列表、頁面描述等信息。<meta> 標(biāo)簽定義的數(shù)據(jù)并不會(huì)顯示在頁面上，但卻會(huì)被瀏覽器解析。</p><p><strong>6、<script> 標(biāo)簽</strong></p><p><script> 標(biāo)簽用于定義 JavaScript 腳本，示例代碼如下：</p><pre><script>
document.write("創(chuàng)新互聯(lián)")
</script></pre><p><strong>7、<noscript> 標(biāo)簽</strong></p><p>當(dāng)用戶的瀏覽器不支持 JavaScript 腳本或者禁用 JavaScript 腳本時(shí)，可以在 <noscript> 標(biāo)簽中定義一些內(nèi)容來替代不能運(yùn)行的 JavaScript 腳本或者給用戶一些提示。除了 <script> 標(biāo)簽外，在 <noscript> 標(biāo)簽中可以包含任何 HTML 元素</p><p><strong>HTML注釋標(biāo)簽<code><!-- --></code></strong></p><p>在 HTML 中您可以使用<code><!-- --></code>在代碼中添加注釋，<code><!--</code>和<code>--></code>之間的所有內(nèi)容都會(huì)被視為注釋。示例代碼如下：</p><pre><!DOCTYPE html>
<html>
<!-- head 開始 -->
<head>
<meta charset="UTF-8"> <!-- 當(dāng)前文檔采用UTF-8編碼 -->
<title>HTML注釋的寫法
歡迎來到創(chuàng)新互聯(lián)
