3-HTML常用標簽運用

一.<!DOCTYPE> 文檔聲明

  • 格式：
    1.<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html>標簽之前。
    2.<!DOCTYPE>不區分大小寫。
  • 作用：
    HTML文檔有很多個版本規范，每個版本的規范之間又有一定的差異。所以為了讓瀏覽器能夠正確的編譯，解析，渲染我們的頁面，我們需要在HTML文件的第一行告訴瀏覽器這個頁面是用哪一個版本的HTML規范來編寫的。
  • 注意點：
    1.HTML5的文檔聲明是向下兼容的。在 HTML 4.01 中，<!DOCTYPE>聲明引用 DTD，因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
    2.<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
    3.雖然瀏覽器有自己的一套機制來解析HTML文件，但由于W3C制定的標準必須有<!DOCTYPE> 聲明在HTML文件第一行，所以必須填寫。
    4.在HTML5的網頁中HTML4也能運行。
  • 嚴格模式和混雜模式
    二者的含義：嚴格模式即標準模式，當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如 Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。
    如何觸發：瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式 呈現。對于HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過 渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。

二.<html>標簽

  • 格式：
<html>
</html>
  • 作用：
    是用來告訴瀏覽器這是一個HTML文件。
  • 注意點：
    所有標簽都必須寫在<html></html>之間。

三.<head>標簽

  • 格式：
<head>
<meta charset="utf-8"/>
<title>選項卡標題</title>
<style> </style>
</head>
  • 作用：
    用于給頁面配置基本基本信息。
    1.指定網站標題，網站小圖標。
    2.添加網站的SEO相關信息（網站的關鍵字或描述信息）。
    3.添加瀏覽器配置的相關內容。
  • 注意點：
    1.<head>標簽一般包含有<title> <meta /> 標簽和css樣式標簽<style>。且必須要有<title>標簽。
    2.<head>標簽里的信息不會顯示給用戶查看。除了寫在<title>中的標題信息。

四.<title>標簽

  • 格式：
    <title>選項卡標題信息</title>
  • 作用：
    用于定義文檔的標題。瀏覽器會以特殊的方式來使用標題，并且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。同樣，當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時，標題將成為該文檔鏈接的默認名稱。
  • 注意點：
    <title> 標簽是<head>標簽中唯一必須要求包含的。

五.<meta />標簽

  • 格式：
    1.搜索引擎定義關鍵詞:
    <meta name="keywords" content="搜索 百科">
    2.網頁定義描述內容:
    <meta name="description" content="百度 最大的中文搜索引擎">
    3.定義瀏覽器用什么標準渲染：
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
    意為告訴瀏覽器按照最新的內核進行渲染。若IE有安裝Google Chrome Frame，那么就優先走GCF進行渲染，如果沒有就和<meta http-equiv="X-UA-Compatible" content="edge" />一樣以IE最新模式渲染。
    4.定義瀏覽器用那種標準解析代碼：
    <meta charset="utf-8" />
    即按照utf-8字符集標準解析代碼。
  • 作用：
    1.<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
    2.<meta>標簽位于文檔的頭部，不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。
  • 注意點：
    1.<meta>標簽是一個單標簽。
    2.<meta>標簽中一般必須包含content屬性用來定義與 http-equiv 或 name 屬性相關的元信息。
    3.<meta>標簽中定義的字符集標準必須與文件保存所用標準一致，否則會出現亂碼問題。
  • 字符集與亂碼問題：
    亂碼產生的原因：當我們用編輯器編寫HTML文件然后保存的時候會把我們寫入的文字使用編輯器默認的編碼方式進行保存。但是在瀏覽器中打開文件時瀏覽器采用了自己默認的解碼方式打開文件。比如我們文件保存的時候用的是GBK編碼標準，而瀏覽器解碼使用的是UNICODE標準，因為標準不同相沖突產生亂碼。
    如何解決亂碼問題：保存文件的時候明確自己用哪種編碼方式進行保存。如文件保存的是UTF-8格式，那么在HTML中的<head>里必須添加<meta charset="utf-8">，明確告訴瀏覽器以UTF-8的格式對文件進行解碼。
    字符集選擇：如果一個網站僅僅只包含中文，那么可以使用GBK2312，因為體積較小，但如果包含其它文字那么用UTF-8，一般只有早期的中文網站使用GBK2312，所以開發中一般用UTF-8。

六.<body>標簽

  • 格式：
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>
  • 作用：
    <body>標簽用于定義文檔的主體。
  • 注意點：
    1.<body>元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
    2.HTML中有時候文字寫在<body>外面也有可能顯示出來，但是絕對不要這么做。

七.<H>標簽

  • 格式：
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
  • 作用：
    用來給文本添加標題語義。
  • 注意點：
    1.<h>系列標簽最多只能從<h1>到<h6>。
    2.<h>系列標簽所包含的內容獨占一行。<h1>標題最大，<h6>標題最小。
    3.一個html中只能有一個<h1>。

八.<div>與< p>標簽

  • 格式：
<div>
        <h>這是一個區塊</h>
        <p>這是一個段落</p>
</div>
  • 作用：
    1.<div> 可定義文檔中的分區或節（division/section）。
    2.<p>標簽定義段落。
  • 注意點：
    1.<div>就是普通的塊標簽，多用于布局；<p>是語義化的段落標簽，用于文章分段。
    2.<div>默認沒有邊距，<p>標簽為了表示文章分段，有默認的間距。

九.
與
標簽

  • 格式：
    <hr/> 文本<br/>
  • 作用：
    1.<hr/>標簽在 HTML 頁面中創建一條水平線。可以在視覺上將文檔分隔成各個部分。
    2.<br/> 可插入一個簡單的換行符。
  • 注意點：
    1.<hr/>單獨占據一行表示分際線。
    2.<br/>可以連續使用多個，要換多少行就用都少個<br/>。
    3.在開發中一般文本需要換行都是因為文本所表達的意思已經完成需要另起一行，而<br/>的換行語義是指文本語義未完且要另起一段。所以一般都使用<p>標簽。<br/> 標簽則用在當需要告訴瀏覽器立即停止當前的文本流，并在下一行的左邊，或者在左對齊的內聯圖形或表格的右邊開始繼續輸出文本流的時侯。

十. 注釋標簽

  • 格式：
<!--這是一段注釋。注釋不會在瀏覽器中顯示。-->
<p>這是一段普通的段落。</p>
  • 作用：
    注釋標簽用于在源代碼中插入注釋。
  • 注意點：
    1.注釋不會顯示在瀏覽器中。
    2.在編寫代碼的時候一些關鍵節點段落等重要位置都要加入適當的注釋，方便開發人員理解和維護。

*** 此文章著作權由饑人谷_劉沖和饑人谷(QQ 群: 222459918) 所有。轉載須說明來源。***

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,983評論 6贊 537
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,772評論 3贊 422
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,947評論 0贊 381
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,201評論 1贊 315
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,960評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,350評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,406評論 3贊 444
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,549評論 0贊 289
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,104評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,914評論 3贊 356
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,089評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,647評論 5贊 362
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,340評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,753評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,007評論 1贊 289
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,834評論 3贊 395
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,106評論 2贊 375

推薦閱讀更多精彩內容