網頁設計師要懂的前端知識之HTML標籤及規範

時間 2019-11-11

原文原文鏈接

HTML介紹

超文本標記語言（英文：HyperText Markup Language，HTML）是爲"網頁建立和其它可在網頁瀏覽器中看到的信息"設計的一種標記語言。javascript

1.1 什麼是瀏覽器css

解釋和執行HTML源碼的工具。html

五大瀏覽器：Internet Explorer (IE)，FireFox(火狐)，Chrome（谷歌），Opera（歐朋），Safari（蘋果）
最後，若是你們若是在自學遇到困難，想找一個前端的學習環境，能夠加入咱們的前端學習圈，點擊我加入吧，會節約不少時間，減小不少在學習中遇到的難題。
前端

1.2 瀏覽器內核java

Trident內核：表明產品IE,又稱爲IE內核。是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器有:IE，遨遊,世界之窗瀏覽器，騰訊TT等等。
Gecko內核：表明產品Mozilla FirefoxGecko是一套開源的，C++編寫的排版引擎。使用它最著名的瀏覽器有Firefox,Netscape6至9。
WebKit內核：表明產品有Safari，主要用於Mac OS系統。使用它的瀏覽器是Safari和谷歌瀏覽器Chrome。
Presto內核：表明產品OperaPresto是由Opera Software開發的瀏覽器排版引擎，它是世界公認最快的渲染速度的引擎。在13年以後，Opera宣佈加入谷歌陣營，棄用了。
Blink內核：由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發佈。如今Chrome和Opera內核是Blink。

1.3 HTML發展史程序員

1.3.1 HTML的概念web

HTML的概念HTML是Hypertext Markup Language（超文本標記語言）的縮寫，是一種基於SGML（標準通用標記語言）的標記語言，是Web用於編輯網頁的主要工具。在網上，若是要向全球範圍內出版和發佈信息，須要有一種可以被普遍理解的語言，即全部的計算機都可以理解的一種用於出版的"母語"。WWW是環球信息網的縮寫，所使用的出版語言就是HTML語言。瀏覽器

1.3.2 HTML的功能網絡

· 展現在線的文檔，其中包含了標題、文本、表格、列表以及照片等內容。架構

· 經過超連接檢索在線的信息。

· 爲獲取遠程服務而設計表單，可用於檢索信息、定購產品等。

· 在文檔中直接包含電子表格、視頻剪輯、聲音剪輯以及其餘的一些應用。

1.3.3 HTML歷次版本

· HTML 1.0——在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準）。

· HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時。

· HTML 3.2——1996年1月14日，W3C推薦標準。

· HTML 4.0——1997年12月18日，W3C推薦標準。

· HTML 4.01——1999年12月24日，是在HTML4.0基礎上的微小改進W3C推薦標準。

· HTML 5——2014年10月28日，W3C推薦標準。

1.4 HTML與互聯網介紹

· HTML

· HTML超文本標記語言（Hyper Text Mark-up Language）是一種製做萬維網頁面的標準語言，它是目前網絡上應用最爲普遍的語言，也是構成網頁文檔的主要語言。HTML文件是由HTML命令組成的描述性文本，HTML命令能夠說明文字、圖形、動畫、聲音、表格、連接等。

· 互聯網

· 互聯網（英語：Internet），又稱網際網絡，或者音譯因特網、英特網，是網絡與網絡之間所串連成的龐大網絡，這些網絡以一組通用的協議相連，造成邏輯上的單一巨大國際網絡。

開發工具

安裝文件請查看練習案例-1.安裝文件及安裝說明。

2.1 Adobe Dreamweaverweaver簡稱"DW"，中文名稱 "夢想編織者"，是美國Adobe公司開發的集網頁製做和管理網站於一身的所見即所得網頁編輯器。DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它能夠垂手可得地製做出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

網頁設計師要懂的前端知識之HTML標籤及規範
圖2-1 Adobe Dreamweaver

2.2 DCloud - Hbuilder

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的最大優點，就是其擁有完整的語法提示和代碼輸入法，能夠在編寫HTML、CSS、JavaScript時更加快速便捷，同時默認添加了emmet語法插件，前端程序員在編寫HTML代碼時能夠更加暴力。

網頁設計師要懂的前端知識之HTML標籤及規範
圖2-2 DCloud - Hbuilder

2.3 Sublime Text 3

Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。徹底可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書籤，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。

網頁設計師要懂的前端知識之HTML標籤及規範
圖2-3 Sublime Text 3

2.4 Visual Studio Code

Visual Studio Code (簡稱 VS Code / VSC) 是由微軟推出的一款免費開源的現代化輕量級代碼編輯器。支持語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片斷、代碼對比 Diff、GIT 等特性，而且有強大的插件庫，能夠針對不一樣的開發需求進行對應的插件配置。

網頁設計師要懂的前端知識之HTML標籤及規範
圖2-4 Visual Studio Code

3.HTML的標籤結構

3.1 HTML文件結構

3.1.1 HTML結構

3.1.2 解釋

· <html></html>稱爲根元素，全部的網頁元素都在<html></html>中

· <head></head>元素用於定義文檔的頭部

· 頭部元素含有有:<meta> <title> <link> <script> <style>

· <title> 標籤訂義文檔的標題

· <meta> 標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，可是對於機器是可讀的典型的狀況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。針對搜索引擎的關鍵詞，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面

· <meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="xxx@qq.com"><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><meta name="Description" content="辛苦一陣子，幸福一生">

· <link> 元素引入外部樣式

· <link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico...;>

· <script> 元素該元素能夠定義頁面的腳本內容

· <style>標籤用於爲 HTML 文檔定義樣式信息

· <body></body>元素用於定義網頁顯示的內容

3.2 基本標籤

· <div>

· div 標籤它是可用於組合其餘HTML元素的容器。

· 可用於對大的內容塊設置樣式屬性。

· 文檔佈局。它取代了使用表格定義佈局的老式方法。

· <hx>

· hx HTML 標題標籤只用於標題。不要僅僅是爲了生成粗體或大號的文本而使用標題 html提供的標題有六種分別是h1 h2 h3 h4 h5 h6 。

· <h1> 定義字號最大的標題,表明大標題,通常一個頁面只用一次。

· <h6> 定義字號最小的標題。

· <p>

· p 元素定義段落,會自動在其先後建立一些空白。瀏覽器會自動添加這些空間。

· br 元素會在瀏覽器插入一個簡單的換行符。

· hr 標籤訂義 HTML 頁面中的主題變化（好比話題的轉移），並顯示爲一條水平線。

· a標籤籤用來設置超文本連接。超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像，您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

· href屬性：描述了連接的目標URL。

· target屬性：設置連接跳轉方式

· <img>

· img 標籤用來申明圖像的插入。

· src屬性：規定顯示圖像的 URL。URL爲圖片的相對路徑或者絕對路徑都可。

· alt屬性：規定圖像的替代文本。

· title屬性：定義圖片的標題，鼠標移動到圖片出現。

· <span>

· span 用來組合文檔中的行內元素,可用做文本的容器。 span 元素沒有固定的格式表現，當對它應用樣式時，它纔會產生視覺上的變化。

· <ul>

· ul 標籤做爲無序列表，它是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記，無序列表始於 <ul> 標籤。每一個列表項始於 <li> 標籤

· <ul> <li>無序列表一</li> <li>無序列表二</li></ul>

· <ol>

· 有序列表也是一列項目，列表項目使用數字進行標記。有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤

· <ol> <li>有序列表一</li> <li>有序列表二</li></ol>

·

· 註釋標籤用於在源代碼中插入註釋。註釋不會顯示在瀏覽器中。可以使用註釋對代碼進行解釋，這樣作有助於在之後的時間對代碼的修改，當編寫了大量代碼時尤爲有用

· <p>這是一個p標籤</p>

3.3 標籤屬性

HTML 元素能夠經過設置屬性，實現某些特定的效果。

屬性能夠在元素中添加附加信息。

屬性通常描述於開始標籤。

屬性老是以名稱/值對的形式出現，好比：name="value"。

<p class="container"> 這是一個帶有class屬性且值爲container的段落<P>標籤</p>

3.4 文本格式化標籤

· b 標籤表示以粗體字體形式展示內容

· strong標籤與b標籤都表示粗體。但strong表示強調。例如，一個單詞或短語須要顯示得更高調，更響亮...總之要比通常文本更加突出。這裏咱們就使用strong標籤在SEO中的應用，告知搜索引擎咱們內容強調的是什麼。

· i 標籤表示以斜體字體形式展示內容

· em 標籤告訴瀏覽器把其中的文本表示爲強調的內容並以斜體形式展示

· <pre>

· pre 標籤可定義預格式化的文本。被包圍在 pre 標籤元素中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體

· small標籤定義小型文本

· <bdo>

· bdo 標籤指定文本方向，其dir屬性申明文本顯示方向

· ltr 屬性值默認從左到右顯示

· rtl 屬性值從右到左顯示

· sub 標籤訂義下標文本。下標文本將會顯示在當前文本流中字符高度的一半爲基準線的下方

· sup 標籤訂義上標文本。上標文本將會顯示在當前文本流中字符高度的一半爲基準線的上方

3.5 HTML 單雙標記的區別

3.5.1 單標記

單標記指的是由一個標籤組成。

好比：

換行符：<br/>

水平線：<hr/>

圖片標籤:<img/>

文本標籤:<input/>

link標籤：<link/>

元信息標籤： <meta/>

3.5.2 雙標記

由"開始標籤"和"結束標籤"兩部分構成，必須成對使用。

如：

<p></p>段落標籤，其中<p>是開始標籤表示一個段落的開始，</p>是結束標籤，表示一個段落的結束。

常見的雙標記標籤的有：

<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。

3.6 HTML 實體轉義

在HTML中，內容編輯時，若是是經過空格鍵編輯的多個空格，網頁只會顯示成一個，而小於號（<）和大於號（>），網站則會認爲是標籤而沒法直接顯示在頁面中。而這些均可以經過實體字符來解決。

HTML塊狀元素&&行內元素

根據CSS規範的規定，每個網頁元素都有一個display屬性，用於肯定該元素的類型，每個元素都有默認的display屬性值，好比div元素，它的默認display屬性值爲block，成爲"塊級"元素(block-level)；而span元素的默認display屬性值爲inline，稱爲"行內"元素。

4.1 塊狀元素

塊級元素會獨佔一行，其寬度自動填滿其父元素寬度，通常狀況下，塊級元素能夠設置 width, height屬性通常用來搭建網站架構、佈局、承載內容……

它包括如下這些標籤： address、dir、div、dl、dt、dd、fieldset、form、h1~h六、hr、menu、noframes、ol、p、pre、table、ul

4.2 行內元素

行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，知道一行排不下才會換行，其寬度隨元素的內容而變化，行內元素設置width, height無效。通常用在網站內容之中的某些細節或部位，用以"強調、區分樣式、上標、下標、錨點"等等。

下面這些標籤都屬於內嵌元素： a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea

w3c規範

5.1 什麼是W3C

萬維網聯盟(world wide web)。

簡單的說就是一個國際性的中立組織，專門負責統一web相關的各項標準。

5.2 爲何要統一web標準

試想你用湖北話交流，他用廣東話交流，大家是永遠都沒法進行暢通的溝通。

因此這個時候"普通話"就出現了！它可以促使大家暢通的交流，互相理解彼此的意圖。

這裏的不一樣話種其實就是不一樣瀏覽器的解析規則，而你想表達的意思就是瀏覽器的解析結果。

所以，不一樣的瀏覽器想要解析出相同的內容呈現給用戶，就須要有一個統一標準的解析規則。

這就是W3C出現的原因。

5.3 標籤嵌套規則

塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素

· <div><h1></h1><p></p></div> —— 對<span></span> —— 對<span><div></div></span> —— 錯

塊級元素不能放在<p>裏面

· <p><ol><li></li></ol></p> —— 錯<p><div></div></p> —— 錯

有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是

· h一、h二、h三、h四、h五、h六、p、dt

塊級元素與塊級元素並列、內嵌元素與內嵌元素並列

· <div><h2></h2><p></p></div> —— 對<div><span></span></div> —— 對<div><h2></h2><span></span></div> —— 錯

5.4 HTML語義化標籤

什麼是語義化標籤那麼什麼叫作語義化呢，說的通俗點就是：明白每一個標籤的用途（在什麼狀況下我可使用這個標籤才合理）好比：網頁上的文章的標題就能夠用h1~h6，網頁上的各個欄目的欄目名稱也可使`h1~h6。文章中內容的段落就得放在段落標籤p 中，在文章中有想強調的文本，就可使用em標籤表示強調等等
爲啥使用語義化標籤
更容易被搜索引擎收錄
更容易讓屏幕閱讀器讀出網頁內容
可以更好的體現頁面的主題
兼容性更好，支持更多的網絡設備
HTML語義化標籤
標籤：實現超連接強調:title屬性的做用，鼠標滑過連接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中做用很大，主要方便搜索引擎瞭解連接地址的內容（語義化更友好）
<p>標籤：文章段落放到<p>標籤中
<hx>標籤：文章標題，欄目標題用<hx>表示標題標籤一共有6個， h一、h二、h三、h四、h五、h6 分別爲一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。而且依據重要性遞減。 <h1> 是最高的等級
和標籤：特別強調某幾個文字但二者在強調的語氣上有區別: 表示強調，表示更強烈的強調。而且在瀏覽器中默認用斜體表示，用粗體表示。兩個標籤相比，目前國內前端程序員更喜歡使用表示強調
<q>標籤：短文本引用注意要引用的文本不用加雙引號，瀏覽器會對q標籤自動添加雙引號
<blockquote>標籤：長文本引用注意瀏覽器對 <blockquote>標籤的解析是縮進樣式
<address>標籤：爲網頁加入地址信息
<ul>標籤：無序列表
<ol>標籤：有序列表
<caption>標籤：爲表格添加標題和摘要摘要的內容是不會在瀏覽器中顯示出來的。它的做用是增長表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可使屏幕閱讀器更好的幫助特殊用戶讀取表格內容語法： <table summary="表格簡介文本"> 標題用以描述表格內容，標題的顯示位置：表格上方。語法：<caption>標題文本</caption>
企業官網命名規範