你須要知道的HTML知識

時間 2019-12-31

標籤須要知道 html 知識欄目 HTML 简体版

原文原文鏈接

前端三大件：HTML+CSS+JScss

今天咱們就來講一說HTML，可能不少人以爲這個太簡單了，就是日常寫網頁的一堆元素。然而越是基礎的東西人們越容易忽略，因此特地梳理了下相關知識，但願加深對它的理解。html

若是你以爲本文對你有所幫助，歡迎猛戳Github(梳理前端知識體系全集)前端

是什麼

HTML（HyperText Markup Language）超文本標記語言。顧名思義，它是一門語言，用來標記文檔結構的語言。就像你寫 word 同樣，有各類格式和大綱，HTML描述了網頁文檔的結構，標記各類區塊。git

版本

若是你很早之前就接觸過 html,那你確定知道下面的寫法：github

<!-- HTML4.01 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
複製代碼

上面分別是 HTML4 和 XHTML 的聲明部分，其中的DTD規定了可用的元素和屬性，這樣瀏覽器才能正確地渲染網頁。HTML4/4.01(SGML)時代，語法較爲隨意，好比標籤能夠不閉合/大寫/屬性可爲空等，因此各大瀏覽器會有語法容錯機制，自動補全標籤閉合等。到了後來，你們以爲這並非瀏覽器該作的事情，因此有更爲嚴格的XHTML（xml）：必須小寫/閉合/屬性帶引號等等。可是XHTML越發嚴格繁瑣的語法讓人不耐煩了，因此 HTML4 的下一個版本也即HTML5橫空出世，輕鬆的語法，更多語義化的元素以及表單加強等等。瀏覽器

<!-- HTML 5 聲明 -->
<!DOCTYPE html>
複製代碼

注：HTML5是主流和將來，因此下文內容均是以 HTML5 爲參考。網絡

元素

HTML 文檔由各類元素和屬性組成，描述了網頁的結構。dom

常見元素

HTML文檔元素從上至下包括：ide

doctype:文檔聲明
head部分：包含頁面設定，標題，引用資源等
- meta
- title
- style
- link
- script
- base
body部分：網頁呈現出來的部分
- div/section/article/aside/header/main/footer
- p
- span/em/strong/i
- table/thead/tbody/th/tr/td
- a
- form/input/select/button/textarea

元素分類

按照默認樣式分類

塊級 block: 獨佔一行或多行,能夠設置寬高及對齊等屬性
行內 inline：不佔獨立區域，靠自身內容支撐結構，和相鄰元素和氣相處，寬高無效，但水平方向能夠設置padding和margin
內聯塊級 inline-block：和其它inline元素同行顯示，同時也能夠設置寬高/margin/padding（水平和垂直）

block	inline	inline-block
獨佔一行，自上而下的排列	自左向右排序，寬度不夠的時候換行	和其餘inline元素同行顯示
可設置寬度，默認是auto（margin+border+padding+content=父級元素的寬度）	設定具體的寬度是不起做用的，由文字內容決定	能夠設置寬度，未指定時靠內容撐開
可設置高度，默認是0，靠內容撐開	不生效	能夠設置高度，未指定時靠內容撐開
padding/margin兩個方向都可改變元素位置	水平方向padding/margin可改變元素位置	padding/margin兩個方向都可改變元素位置

按照元素類別

HTML5中的每一個元素均可以歸爲零個或多個類別，這些類別將具備類似特徵的元素分組在一塊兒。w3c中使用的主要類別以下:測試

Metadata content（元數據元素）是能夠被用於說明其餘內容的表現或行爲，或在當前文檔和其餘文檔之間創建聯繫的元素。
Flow content（流元素）是在應用程序和文檔的主體部分中使用的大部分元素。
Sectioning content（區塊型元素）是用於定義標題及頁腳範圍的元素。
Heading content（標題型元素）定義一個區塊/章節的標題。
Phrasing content（語句型元素）用於標記段落級文本的元素。
Embedded content（嵌入型元素）引用或插入到文檔中其餘資源的元素。
Interactive content（交互型元素）專門用於與用戶交互的元素。

元素的嵌套

你可能據說過如下常見的元素的規則：

<!-- 塊級元素能夠包含內聯元素 -->
<div><span></span></div>
<!-- 塊級元素能夠包含某些塊級元素 -->
<section><div></div></section> <!--正確-->
<p><div></div></p> <!--錯誤-->
<!-- form/a 不能再嵌套自身 -->
<a><a></a></a>
<!-- 內聯元素通常不能嵌套塊級元素 -->
<body><a><div></div></a><body> <!--HTML4中不合法（但瀏覽器支持）/但HTML5中是合法的-->
複製代碼

其中關於HTML4的嵌套規則能夠參考這裏, 而HTML5中對元素從新作了分類，嵌套關係根據元素的content model進行合法肯定。好比上面的a>div在HTML5中就是合法的。參考HTML5中的a定義,它的內容模型定義爲transparent(透明),透明的意思就是在計算合法性的時候，會忽略a自己，嵌套關係須要根據a的父標籤來決定。請看下面嵌套：

<!--第一種嵌套-->
<div>
    <a>
        <div></div>
    </a>
</div>

<!--第二種嵌套-->
<p>
    <a>
        <div></div>
    </a>
</p>
複製代碼

第一種是合法嵌套，由於至關於div嵌套div，而第二種則不合法，由於至關於p嵌套div,瀏覽器會進行猜想解析，不妨在瀏覽器測試一下哦。

語義化

先來看兩段html代碼:

<!--使用萬能div-->
<div class="header"></div>
<div class="left"></div>
<div class="container">
  <div class="content"></div>
</div>
<div class="footer"></div>

<!--不使用div-->
<header></header>
<nav></nav>
<main>
  <article></article>
  <aside></aside>
</main>
<footer></footer>
複製代碼

對於上面兩種寫法，第二種就是HTML語義化。可能有人以爲這兩種寫法沒什麼太大區別呀，結構都很清晰，可是若是脫了css這層外衣，你以爲哪一種寫法更容易理解呢？所謂HTML語義化，就是用最恰當的元素標籤標記內容結構。

爲何須要語義化呢？

在沒有CSS樣式的條件下，也能很好地呈現出內容結構、代碼結構；
語義化HTML會使HTML結構變的清晰，有利於維護代碼和添加樣式；
方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
提高搜索引擎優化(SEO)的效果。和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。
一般語義化HTML會使代碼變的更少，使頁面加載更快。

那怎麼寫語義化的HTML呢？

儘量少的使用無語義的萬能標籤div和span；
在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設置。
須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

瀏覽器默認樣式

現代瀏覽器對於HTML元素都提供了了默認的樣式，好比body默認有必定的padding,下拉框/按鈕等都有默認的外觀。然而，這些默認的樣式某些狀況下會帶來問題，好比咱們想要定製下拉框的外觀，那就須要花費精力去處理默認樣式，提升了定製成本。

解決的方向大概有兩個：

幹掉默認樣式：覆蓋重置（css reset）
統一默認樣式：修改統一

css reset的話，能夠在網絡上找到一些簡單的代碼或者簡單的經過如下來重置樣式：

html *{
    margin:0;
    padding:0
    ...
}
複製代碼

又或者經過統一的樣式來處理，好比normalize.css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。