當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML笔记——②HTML常用标签、属性

發(fā)布時(shí)間：2023/12/29 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML笔记——②HTML常用标签、属性小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本系列筆記為nmy專屬定制修改

HTML筆記——②HTML常用標(biāo)簽

一 HTML的標(biāo)簽
- 1.1 標(biāo)簽分類
- 1.2 HTML5 代碼規(guī)范
二 HTML常用標(biāo)簽
- 2.1 標(biāo)題與段落
- 2.2 文本修飾標(biāo)簽
- 2.3 div、span標(biāo)簽
- 2.4 間隔符
- 2.5 圖片
- 2.6 路徑的引入
- 2.7 鏈接標(biāo)簽
- 2.8 錨點(diǎn)（頁內(nèi)跳轉(zhuǎn)）
- 2.9 網(wǎng)頁欄圖片設(shè)置
三 HTML初始代碼
- 3.1 `<!DOCTYPE html>`
- 3.2 `<html lang="en">`
- 3.3 meta標(biāo)簽詳解
- - 3.3.1 meta的屬性①name
  - 3.3.2 meta的屬性②http- equiv
- 3.3 `<meta charset="UTF-8">`
- 3.4 `<meta http-equiv="X-UA-Compatible" content="IE=edge">`
- 3.5 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- 3.6 DNS預(yù)解析dns-prefetch
- 3.7 link標(biāo)簽詳解

一 HTML的標(biāo)簽

1.1 標(biāo)簽分類

HTML的標(biāo)簽（又稱標(biāo)記或元素）是由尖括號包圍的關(guān)鍵詞，分為單標(biāo)簽和雙標(biāo)簽

常規(guī)標(biāo)簽（雙標(biāo)簽）

<標(biāo)記></標(biāo)記> <標(biāo)記屬性=“屬性值屬性=“屬性值”></標(biāo)記> <head></head>

空標(biāo)記（單標(biāo)記）

<標(biāo)記/> <標(biāo)記屬性=“屬性值”/> <br/>

1.2 HTML5 代碼規(guī)范

HTML5 在代碼驗(yàn)證時(shí)相對于XHTML會(huì)更寬松一點(diǎn)。

首行聲明文檔類型、元素名、屬性名中可以使用混合大小寫字母

不必關(guān)閉所有元素，包括空元素

允許屬性值不加引號（前提是屬性值沒有空格）

允許等號兩邊的空格

允許省略 <html> 標(biāo)簽和 <body>、<head>

<title> 元素在 HTML5 中是必需的。

短注釋應(yīng)該在單行中書寫，并在  之前增加一個(gè)空格；長注釋，應(yīng)該在獨(dú)立的行中書寫

使用小寫文件名，為了避免從對大小寫不敏感的服務(wù)器轉(zhuǎn)到一臺(tái)對大小寫敏感的服務(wù)器上的情況

但使用格式良好的“近似 XHTML 的”語法，令其他人更容易理解和使用和更加適配。

首行聲明文檔類型使用大寫，元素名、屬性名使用小寫

關(guān)閉所有 HTML 元素，包括空元素

屬性值加引號

等號兩邊精簡空格

避免長代碼行，盡量避免代碼行超過 80 個(gè)字符。

不推薦省略 <html> 和 <body>、<head>

二 HTML常用標(biāo)簽

2.1 標(biāo)題與段落

格式：

標(biāo)題:<h1></h1> ... <h6></h6> 段落:<p></p>縮寫文本<abbr title="etcetera">title對IE5無效，Netscape 6.2有效。</abbr> 定義首字母縮寫：<acronym title="World Wide Web">均有效</acronym>預(yù)格式文本：<pre></pre>  與此類似的：<code>Computer code計(jì)算機(jī)代碼</code> <kbd>Keyboard input鍵盤碼</kbd> <tt>Teletype text打字機(jī)代碼</tt> <samp>Sample text計(jì)算機(jī)代碼樣本</samp> <var>Computer variable變量</var>改變文字方向：<bdo dir="rtl">Here is some Hebrew text</bdo>

在一個(gè)網(wǎng)頁中，<h1>標(biāo)題最重要，并且一個(gè).html文件中只能出現(xiàn)一次<h1>標(biāo)簽。而<h5>、<h6>標(biāo)簽在網(wǎng)頁中不經(jīng)常使用。

2.2 文本修飾標(biāo)簽

格式：

加粗:<strong></strong>、<b></b> 斜體:<em></em>、<i></i> 下標(biāo):<sub></sub> 上標(biāo):<sup></sup> 刪除線:<del></del>、<s></s> 下劃線: <ins></ins>、<u></u>

一般情況下，刪除文本都是和插入文本配合使用的。

2.3 div、span標(biāo)簽

<div></div> <h3><span>體育</span><span style="color:gray;">sports</span></h3>

div標(biāo)簽：沒有語義，用來劃分頁面的區(qū)域，獨(dú)占一行。

span標(biāo)簽：沒有語義，主要應(yīng)用在對于文本獨(dú)立修飾的時(shí)候。

2.4 間隔符

HTML語言中是不識別間隔符的，會(huì)統(tǒng)一按照一個(gè)空格輸出，當(dāng)輸出多個(gè)空格或者其他間隔符時(shí)需要用標(biāo)簽

換行符：<br/> 水平線：<hr/>

2.5 圖片

格式：

圖片的基本屬性
img：圖片標(biāo)簽
src : 引入圖片的地址
alt : 圖片不顯示之后（加載失敗）的提示信息

title : 鼠標(biāo)懸停上去之后的提示信息
width、height : 圖片的大小，單位px

請始終對圖像使用 alt 屬性。當(dāng)圖像無法顯示時(shí)該屬性很重要。

請始終定義圖像尺寸。這樣做會(huì)減少閃爍，因?yàn)闉g覽器會(huì)在圖像加載之前為圖像預(yù)留空間。

2.6 路徑的引入

相對路徑（相對于html文件的位置）
. / ?????下一級
../ ???? 上一級
絕對路徑 （盤符可省略）：絕對路徑是指文件在硬盤上真正存在的路徑，如E:\book\網(wǎng)頁布\代碼\第2章\bg.jpg；
亦或者是完整的網(wǎng)絡(luò)地址https://img-blog.csdnimg.cn/6fe1f68588804f59bcfc7162272cf5fa.png

2.7 鏈接標(biāo)簽

格式：

href屬性 : 鏈接的地址，herf="#" 表示一個(gè)空錨，用于未確定連接地址時(shí)或者返回頁面頂部；
target屬性 : 可以改變鏈接打開的方式；
target="_self"：（默認(rèn)值）在當(dāng)前頁面打開；
target="_top"：在瀏覽器的整個(gè)窗口打開鏈接，忽略任何框架；
target="_parent"：在上一級窗口中打開鏈接；
沒有框架時(shí)前三者幾乎相同
target="_blank" 新窗口打開

base單標(biāo)簽：作用就是改變鏈接跳轉(zhuǎn)的默認(rèn)行為的。一般寫到<head>當(dāng)中，

2.8 錨點(diǎn)（頁內(nèi)跳轉(zhuǎn)）

兩種做法

#號 + id屬性

#號 + name屬性（注意name屬性需單獨(dú)一個(gè)a標(biāo)簽）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><a href="#1">HTML</a><a href="#2">css層疊樣式表</a><a href="#3">JavaScript</a><h2 id="1">HTML超文本編輯語言</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><h2 id="2">css層疊樣式表</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><h2 id="3">JS腳本</h2><p>模擬的段落</p><p>模擬的段落</p></body> </html>

name·

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><a href="#1">HTML</a><a href="#2">css層疊樣式表</a><a href="#3">JavaScript</a><a name="1"></a><h2>HTML超文本編輯語言</h2><p>模擬的段落</p><p>模擬的段落</p><a name="2"></a><h2>css層疊樣式表</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><a name="3"></a><h2>JS腳本</h2><p>模擬的段落</p><p>模擬的段落</p> </body> </html>

2.9 網(wǎng)頁欄圖片設(shè)置

三 HTML初始代碼

每個(gè)html文件都有的代碼叫做初始代碼，要復(fù)合html文件的規(guī)范寫法。

! + tab鍵 : 快速的創(chuàng)建html的初始代碼

<!DOCTYPE html>  <html lang="en">  <head><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>  </head> <body></body> </html>

3.1 <!DOCTYPE html>

文檔類型聲明標(biāo)簽 : 告訴瀏覽器這個(gè)頁面采取哪種版本來顯示頁面，不是HTML標(biāo)簽，只是一條瀏覽器指令，所以大小寫均可，大寫更為標(biāo)準(zhǔn)
<!DOCTYPE html>聲明使用HTML5版本

使瀏覽器按照W3C的標(biāo)準(zhǔn)解析渲染頁面，否則瀏覽器可能使用自己的怪異模式解析渲染頁面，在不同的瀏覽器就會(huì)顯示不同的樣式。

3.2 <html lang="en">

<html lang="zh-CN" xml:lang="zh-CN">更完善

lang屬性：HTML語言聲明屬性，用來定義當(dāng)前文檔顯示的語言。服務(wù)于搜索引擎爬蟲。

新的XHTML文檔中，lang屬性已經(jīng)被xml:lang屬性代替。為了兼容性，XHTML 1.0文檔的<html>元素中同時(shí)使用lang屬性和xml:lang屬性。
如果網(wǎng)頁定義為XHTML1.1或者XML格式,那么可以使用xml:lang屬性(因?yàn)閤ml:lang屬性是在XML中確定語言信息的標(biāo)準(zhǔn)用法)。

3.3 meta標(biāo)簽詳解

3.3.1 meta的屬性①name

name屬性主要用于描述網(wǎng)頁，對應(yīng)于content（網(wǎng)頁內(nèi)容），以便于搜索引擎機(jī)器人查找、分類，語法格式是：

keywords(關(guān)鍵字)，告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。

description(網(wǎng)站內(nèi)容描述)，告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

robots(機(jī)器人向?qū)?，用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。
參數(shù)有all、none、index、noindex、follow、nofollow。默認(rèn)是all。

信息參數(shù)為all：文件將被檢索，且頁面上的鏈接可以被查詢；
信息參數(shù)為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
信息參數(shù)為index：文件將被檢索；
信息參數(shù)為follow：頁面上的鏈接可以被查詢；
信息參數(shù)為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
信息參數(shù)為nofollow：文件將被檢索，但頁面上的鏈接不可以被查詢；

author(作者)，標(biāo)注網(wǎng)頁的作者

generator說明網(wǎng)站的采用的什么軟件制作。

COPYRIGHT說明網(wǎng)站版權(quán)信息。

revisit-after代表網(wǎng)站重訪

3.3.2 meta的屬性②http- equiv

相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content。

expires(期限)使用GMT的時(shí)間格式，用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。

Pragma(cache模式)禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。這樣設(shè)定，訪問者將無法脫機(jī)瀏覽。

Refresh(刷新)自動(dòng)刷新并指向新頁面。

2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址。

Set-Cookie(cookie設(shè)定)如果網(wǎng)頁過期，那么存盤的cookie將被刪除。同樣必須使用GMT的時(shí)間格式。

Window-target(顯示窗口的設(shè)定)強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。用來防止別人在框架里調(diào)用自己的頁面。

content-Type(顯示字符集的設(shè)定)

meta標(biāo)簽的charset的信息參數(shù)如GB2312時(shí)，代表說明網(wǎng)站是采用的編碼是簡體中文；

meta標(biāo)簽的charset的信息參數(shù)如BIG5時(shí)，代表說明網(wǎng)站是采用的編碼是繁體中文；

meta標(biāo)簽的charset的信息參數(shù)如iso-2022-jp時(shí)，代表說明網(wǎng)站是采用的編碼是日文；

meta標(biāo)簽的charset的信息參數(shù)如ks_c_5601時(shí)，代表說明網(wǎng)站是采用的編碼是韓文；

meta標(biāo)簽的charset的信息參數(shù)如ISO-8859-1時(shí)，代表說明網(wǎng)站是采用的編碼是英文；

meta標(biāo)簽的charset的信息參數(shù)如UTF-8時(shí)，代表世界通用的語言編碼；

相當(dāng)于<meta charset="UTF-8">

content-Language（顯示語言的設(shè)定）

Cache-Control(指定請求和響應(yīng)遵循的緩存機(jī)制)

Cache-Control指定請求和響應(yīng)遵循的緩存機(jī)制。在請求消息或響應(yīng)消息中設(shè)置Cache-Control并不會(huì)修改另一個(gè)消息處理過程中的緩存處理過程。請求時(shí)的緩存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached，響應(yīng)消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個(gè)消息中的指令含義如下

Public指示響應(yīng)可被任何緩存區(qū)緩存
Private指示對于單個(gè)用戶的整個(gè)或部分響應(yīng)消息，不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息，此響應(yīng)消息對于其他用戶的請求無效
no-cache指示請求或響應(yīng)消息不能緩存
no-store用于防止重要的信息被無意的發(fā)布。在請求消息中發(fā)送將使得請求和響應(yīng)消息都不使用緩存。
max-age指示客戶機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)
min-fresh指示客戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)
max-stale指示客戶機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值，那么客戶機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。

用于禁止當(dāng)前頁面在移動(dòng)端瀏覽時(shí)，被百度自動(dòng)轉(zhuǎn)碼。雖然百度的本意是好的，但是轉(zhuǎn)碼效果很多時(shí)候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動(dòng)轉(zhuǎn)碼了。

http-equiv="imagetoolbar 指定是否顯示圖片工具欄，當(dāng)為false代表不顯示，當(dāng)為true代表顯示。

Content-Script-Type W3C網(wǎng)頁規(guī)范，指明頁面中腳本的類型。

3.3 <meta charset="UTF-8">

聲明編碼方式，一般采用UTF-8保證中英文兼容，要與右下角的編碼方式相同

是content-Type的簡寫

3.4 <meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible 是針對 IE8 版本的一個(gè)特殊文件頭標(biāo)記，用于為 IE8 指定不同的頁面渲染模式。由于當(dāng)下 IE6 和 IE7 使用率依然較高，綜合考慮，啟用 IE8 版本的 X-UA-Compatible 兼容模式顯得相當(dāng)重要。

為了避免制作出的頁面在IE8下面出現(xiàn)錯(cuò)誤，建議直接將IE8使用IE7進(jìn)行渲染。即content="IE=7"

content="IE=5"/content="IE=7"使用 Windows Internet Explorer 5/7 的標(biāo)準(zhǔn)渲染模式。

content="IE=8"開啟 IE8 的標(biāo)準(zhǔn)渲染模式，但由于本身 X-UA-Compatible 文件頭僅支持 IE8 以上版本，因此等同于冗余代碼。

content="edge"以最高級別的可用模式顯示內(nèi)容

content="IE=Edge,chrome=1" 如果IE有安裝Google Chrome Frame瀏覽器有效，外觀是IE的菜單和界面，使用的是Google Chrome瀏覽器內(nèi)核。

content="IE=EmulateIE7"使用 <!DOCTYPE> 指令確定如何呈現(xiàn)內(nèi)容，標(biāo)準(zhǔn)模式指令以Windows Internet Explorer 7 標(biāo)準(zhǔn)模式顯示，Quirks 模式指令以 IE5 模式顯示。對于多數(shù)網(wǎng)站來說，它是首選的兼容性模式。

在開發(fā)AngularJS項(xiàng)目時(shí)（只支持IE8及以上版本或chrome/firefox），而有些同事IE8登錄卻還提示“請使用IE8及以上版本或chrome/firefox，如果您使用IE8，請?jiān)凇惫ぞ摺辈藛沃?#xff0c;調(diào)整為非“兼容性視圖”！
將項(xiàng)目中的.html及.jsp文件的<head>的最前面加上

（即如上meta加在其它meta之前）

3.5 <meta name="viewport" content="width=device-width, initial-scale=1.0">

主要針對移動(dòng)設(shè)備縮放的問題
width：控制 viewport 的大小，可以指定的一個(gè)值，如果 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：和 width 相對應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放

3.6 DNS預(yù)解析dns-prefetch

DNS Prefetch 是一種 DNS 預(yù)解析技術(shù)。當(dāng)你瀏覽網(wǎng)頁時(shí)，瀏覽器會(huì)在加載網(wǎng)頁時(shí)對網(wǎng)頁中的域名進(jìn)行解析緩存，這樣在你單擊當(dāng)前網(wǎng)頁中的連接時(shí)就無需進(jìn)行 DNS 的解析，減少用戶等待時(shí)間，提高用戶體驗(yàn)。
目前每次DNS解析，通常在200ms以下。針對DNS解析耗時(shí)問題，一些瀏覽器通過DNS Prefetch 來提高訪問的流暢性。

Dns請求雖然占用了很少的帶寬，但會(huì)有很高的延遲，由其以移動(dòng)網(wǎng)絡(luò)會(huì)更加明顯。通過dns預(yù)解析技術(shù)可以很好的降低延遲
在firefox上使用dns-prefetch，dns預(yù)解析是與頁面加載是并行處理的，且不用影響到頁面加載的性能.

DNS Prefetch 應(yīng)該盡量的放在網(wǎng)頁的前面，推薦放在 <meta charset="UTF-8"> 后面

3.7 link標(biāo)簽詳解

引入css樣式表

頁面圖標(biāo)設(shè)置

audio: 音頻文件。
document: 一個(gè)將要被嵌入到或內(nèi)部的HTML文檔。
embed: 一個(gè)將要被嵌入到元素內(nèi)部的資源。
fetch: 那些將要通過fetch和XHR請求來獲取的資源，比如一個(gè)ArrayBuffer或JSON文件。
font: 字體文件。
image: 圖片文件。
object: 一個(gè)將會(huì)被嵌入到元素內(nèi)的文件。
script: JavaScript文件。
style: 樣式表。
track: WebVTT文件。
worker: 一個(gè)JavaScript的web worker或shared worker。
video: 視頻文件。

總結(jié)

以上是生活随笔為你收集整理的HTML笔记——②HTML常用标签、属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： C++中使用strtok函数分割字符串S
下一篇：方便快捷的RGB颜色对照表