網(wǎng)頁設(shè)計師要懂的前端知識之HTML標簽及規(guī)范
時間：2023-10-03 08:42:01 | 來源：網(wǎng)站運營
時間：2023-10-03 08:42:01 來源：網(wǎng)站運營
網(wǎng)頁設(shè)計師要懂的前端知識之HTML標簽及規(guī)范：
1. HTML介紹
超文本標記語言（英文：HyperText Markup Language，HTML）是為"網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息"設(shè)計的一種標記語言。
1.1 什么是瀏覽器
解釋和執(zhí)行HTML源碼的工具。
五大瀏覽器：Internet Explorer (IE)，F(xiàn)ireFox(火狐)，Chrome（谷歌），Opera（歐朋），Safari（蘋果）
最后，如果大家如果在自學遇到困難，想找一個前端的學習環(huán)境，可以加入我們的前端學習圈，點擊我加入吧
，會節(jié)約很多時間，減少很多在學習中遇到的難題。1.2 瀏覽器內(nèi)核
1. Trident內(nèi)核：代表產(chǎn)品IE,又稱為IE內(nèi)核。是微軟開發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器有:IE，遨游,世界之窗瀏覽器，騰訊TT等等。
1. Gecko內(nèi)核：代表產(chǎn)品Mozilla FirefoxGecko是一套開源的，C++編寫的排版引擎。使用它最著名的瀏覽器有Firefox,Netscape6至9。
1. WebKit內(nèi)核：代表產(chǎn)品有Safari，主要用于Mac OS系統(tǒng)。使用它的瀏覽器是Safari和谷歌瀏覽器Chrome。
1. Presto內(nèi)核：代表產(chǎn)品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎，它是世界公認最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌陣營，棄用了。
1. Blink內(nèi)核：由Google和Opera Software開發(fā)的瀏覽器排版引擎，2013年4月發(fā)布。現(xiàn)在Chrome和Opera內(nèi)核是Blink。
1.3 HTML發(fā)展史
1.3.1 HTML的概念
HTML的概念HTML是Hypertext Markup Language（
超文本標記語言）的縮寫，是一種基于
SGML（標準通用標記語言）的
標記語言，是Web用于編輯網(wǎng)頁的主要工具。在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理解的語言，即所有的計算機都能夠理解的一種用于出版的"母語"。
WWW是環(huán)球信息網(wǎng)的縮寫，所使用的出版語言就是HTML語言。
1.3.2 HTML的功能
· 展示在線的文檔，其中包含了標題、文本、表格、列表以及照片等內(nèi)容。
· 通過超鏈接檢索在線的信息。
· 為獲取遠程服務(wù)而設(shè)計表單，可用于檢索信息、定購產(chǎn)品等。
· 在文檔中直接包含電子表格、視頻剪輯、聲音剪輯以及其他的一些應(yīng)用。
1.3.3 HTML歷次版本
· HTML 1.0——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標準）。
· HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時。
· HTML 3.2——1996年1月14日，W3C推薦標準。
· HTML 4.0——1997年12月18日，W3C推薦標準。
· HTML 4.01——1999年12月24日，是在HTML4.0基礎(chǔ)上的微小改進W3C推薦標準。
· HTML 5——2014年10月28日，W3C推薦標準。
1.4 HTML與互聯(lián)網(wǎng)介紹
· HTML
· HTML超文本標記語言（Hyper Text Mark-up Language）是一種制作萬維網(wǎng)頁面的標準語言，它是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文件是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
· 互聯(lián)網(wǎng)
· 互聯(lián)網(wǎng)（英語：Internet），又稱網(wǎng)際網(wǎng)絡(luò)，或者音譯因特網(wǎng)、英特網(wǎng)，是網(wǎng)絡(luò)與網(wǎng)絡(luò)之間所串連成的龐大網(wǎng)絡(luò)，這些網(wǎng)絡(luò)以一組通用的協(xié)議相連，形成邏輯上的單一巨大國際網(wǎng)絡(luò)。
2. 開發(fā)工具
安裝文件請查看練習案例-1.安裝文件及安裝說明。
2.1 Adobe Dreamweaver
Adobe Dreamweaver簡稱"DW"，中文名稱 "夢想編織者"，是美國Adobe公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器。DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。
圖2-1 Adobe Dreamweaver
2.2 DCloud - Hbuilder
HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的最大優(yōu)勢，就是其擁有完整的語法提示和代碼輸入法，可以在編寫HTML、CSS、JavaScript時更加快速便捷，同時默認添加了emmet語法插件，前端程序員在編寫HTML代碼時可以更加暴力。
圖2-2 DCloud - Hbuilder
2.3 Sublime Text 3
Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。
圖2-3 Sublime Text 3
2.4 Visual Studio Code
Visual Studio Code (簡稱 VS Code / VSC) 是由微軟推出的一款免費開源的現(xiàn)代化輕量級代碼編輯器。支持語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，并且有強大的插件庫，可以針對不同的開發(fā)需求進行對應(yīng)的插件配置。
圖2-4 Visual Studio Code
3.HTML的標簽結(jié)構(gòu)
3.1 HTML文件結(jié)構(gòu)
3.1.1 HTML結(jié)構(gòu)
<html> <head> <meta charset="utf-8"> <title>文檔標題</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="index.js"></script> <style></style> </head> <body>......</body> </html>
3.1.2 解釋
· <html></html>稱為根元素，所有的網(wǎng)頁元素都在<html></html>中
· <head></head>元素用于定義文檔的頭部
· 頭部元素含有有:<meta> <title> <link> <script> <style>
· <title> 標簽定義文檔的標題
· <meta> 標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機器是可讀的 典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù) 元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。 針對搜索引擎的關(guān)鍵詞，一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面
· <meta charset="UTF-8"><!--網(wǎng)頁編碼--><meta name="Generator" content="EditPlus?"><!--用以說明生成工具--><meta name="Author" content="xxx@qq.com"><!--文檔的作者--><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><!--關(guān)鍵字--><meta name="Description" content="辛苦一陣子，幸福一輩子"><!--描述-->
· <link> 元素引入外部樣式
· <!-- 可以通過以下代碼引入圖標 --><link rel="shortcut icon " type="images/x-icon" href="
http://www.jd.com/favicon.ico">
· <script> 元素該元素可以定義頁面的腳本內(nèi)容
· <style>標簽用于為 HTML 文檔定義樣式信息
· <body></body>元素用于定義網(wǎng)頁顯示的內(nèi)容
3.2 基本標簽
· <div>
· div 標簽它是可用于組合其他HTML元素的容器。
· 可用于對大的內(nèi)容塊設(shè)置樣式屬性。
· 文檔布局。它取代了使用表格定義布局的老式方法。
· <hx>
· hx HTML 標題 標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題 html提供的標題有六種分別是h1 h2 h3 h4 h5 h6 。
· <h1> 定義字號最大的標題,代表大標題,一般一個頁面只用一次。
· <h6> 定義字號最小的標題。
· <p>
· p 元素定義段落,會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間。
· <br>
· br 元素會在瀏覽器插入一個簡單的換行符。
· <hr>
· hr 標簽定義 HTML 頁面中的主題變化（比如話題的轉(zhuǎn)移），并顯示為一條水平線。
· <a>
· a標簽簽用來設(shè)置超文本鏈接。 超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。
· href屬性：描述了鏈接的目標URL。
· target屬性：設(shè)置鏈接跳轉(zhuǎn)方式
· <img>
· img 標簽 用來申明圖像的插入。
· src屬性：規(guī)定顯示圖像的 URL。URL為圖片的相對路徑或者絕對路徑均可。
· alt屬性：規(guī)定圖像的替代文本。
· title屬性：定義圖片的標題，鼠標移動到圖片出現(xiàn)。
· <span>
· span 用來組合文檔中的行內(nèi)元素,可用作文本的容器。 span 元素沒有固定的格式表現(xiàn)，當對它應(yīng)用樣式時，它才會產(chǎn)生視覺上的變化。
· <ul>
· ul 標簽作為無序列表，它是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記，無序列表始于 <ul> 標簽。每個列表項始于 <li> 標簽
· <ul> <li>無序列表一</li> <li>無序列表二</li></ul>
· <ol>
· 有序列表也是一列項目，列表項目使用數(shù)字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽
· <ol> <li>有序列表一</li> <li>有序列表二</li></ol>
· <!--注釋-->
· 注釋標簽用于在源代碼中插入注釋。注釋不會顯示在瀏覽器中。 可使用注釋對代碼進行解釋，這樣做有助于在以后的時間對代碼的修改，當編寫了大量代碼時尤其有用
· <!-- 這就是一個p標簽的寫法 --><p>這是一個p標簽</p>
3.3 標簽屬性
HTML 元素可以通過設(shè)置屬性，實現(xiàn)某些特定的效果。
屬性可以在元素中添加附加信息。
屬性一般描述于開始標簽。
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
<p class="container"> 這是一個帶有class屬性且值為container的段落<P>標簽</p>
3.4 文本格式化標簽
· <b>
· b 標簽表示 以粗體字體形式展現(xiàn)內(nèi)容
· <strong>
· strong標簽與b標簽都表示粗體。 但strong表示強調(diào)。例如，一個單詞或短語需要顯示得更高調(diào)，更響亮...總之要比一般文本更加突出。這里我們就使用strong標簽在SEO中的應(yīng)用，告知搜索引擎我們內(nèi)容強調(diào)的是什么。
· <i>
· i 標簽表示 以斜體字體形式展現(xiàn)內(nèi)容
· <em>
· em 標簽告訴瀏覽器把其中的文本表示為強調(diào)的內(nèi)容 并以斜體形式展現(xiàn)
· <pre>
· pre 標簽可定義預(yù)格式化的文本。 被包圍在 pre 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體
· <small>
· small標簽 定義小型文本
· <bdo>
· bdo 標簽指定文本方向，其dir屬性申明文本顯示方向
· ltr 屬性值 默認 從左到右顯示
· rtl 屬性值 從右到左顯示
· <sub>
· sub 標簽定義下標文本。下標文本將會顯示在當前文本流中字符高度的一半為基準線的下方
· <sup>
· sup 標簽定義上標文本。上標文本將會顯示在當前文本流中字符高度的一半為基準線的上方
3.5 HTML 單雙標記的區(qū)別
3.5.1 單標記
單標記指的是由一個標簽組成。
比如：
換行符：<br/>
水平線：<hr/>
圖片標簽:<img/>
文本標簽:<input/>
link標簽：<link/>
元信息標簽： <meta/>
3.5.2 雙標記
由"開始標簽"和"結(jié)束標簽"兩部分構(gòu)成，必須成對使用。
如：
<p></p>段落標簽，其中<p>是開始標簽表示一個段落的開始，</p>是結(jié)束標簽，表示一個段落的結(jié)束。
常見的雙標記標簽的有：
<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。
3.6 HTML 實體轉(zhuǎn)義
在HTML中，內(nèi)容編輯時，如果是通過空格鍵編輯的多個空格，網(wǎng)頁只會顯示成一個，而小于號（<）和大于號（>），網(wǎng)站則會認為是標簽而無法直接顯示在頁面中。而這些都可以通過實體字符來解決。
4. HTML塊狀元素&&行內(nèi)元素
根據(jù)CSS規(guī)范的規(guī)定，每一個網(wǎng)頁元素都有一個
display屬性，用于確定該元素的類型，每一個元素都有默認的
display屬性值，比如div元素，它的默認
display屬性值為
block，成為"塊級"元素(block-level)；而span元素的默認
display屬性值為
inline，稱為"行內(nèi)"元素。
4.1 塊狀元素
塊級元素會獨占一行，其寬度自動填滿其父元素寬度，一般情況下，塊級元素可以設(shè)置
width,
height屬性一般用來搭建網(wǎng)站架構(gòu)、布局、承載內(nèi)容……
它包括以下這些標簽：
address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul4.2 行內(nèi)元素
行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排列在同一行里，知道一行排不下才會換行，其寬度隨元素的內(nèi)容而變化，行內(nèi)元素設(shè)置
width,
height無效。一般用在網(wǎng)站內(nèi)容之中的某些細節(jié)或部位，用以"強調(diào)、區(qū)分樣式、上標、下標、錨點"等等。
下面這些標簽都屬于內(nèi)嵌元素：
a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea5. w3c規(guī)范
5.1 什么是W3C
萬維網(wǎng)聯(lián)盟(
world wide web)。
簡單的說就是一個國際性的中立組織，專門負責統(tǒng)一web相關(guān)的各項標準。
5.2 為什么要統(tǒng)一web標準
試想你用浙江話交流，他用浙江話交流，你們是永遠都無法進行暢通的溝通。
所以這個時候"普通話"就出現(xiàn)了！它能夠促使你們暢通的交流，互相理解彼此的意圖。
這里的不同話種其實就是不同瀏覽器的解析規(guī)則，而你想表達的意思就是瀏覽器的解析結(jié)果。
因此，不同的瀏覽器想要解析出相同的內(nèi)容呈現(xiàn)給用戶，就需要有一個統(tǒng)一標準的解析規(guī)則。
這就是W3C出現(xiàn)的緣由。
5.3 標簽嵌套規(guī)則
1. 塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素
· <div><h1></h1><p></p></div> —— 對<a href="#"><span></span></a> —— 對<span><div></div></span> —— 錯
1. 塊級元素不能放在<p>里面
· <p><ol><li></li></ol></p> —— 錯<p><div></div></p> —— 錯
1. 有幾個特殊的塊級元素只能包含內(nèi)嵌元素，不能再包含塊級元素，這幾個特殊的標簽是
· h1、h2、h3、h4、h5、h6、p、dt
1. 塊級元素與塊級元素并列、內(nèi)嵌元素與內(nèi)嵌元素并列
· <div><h2></h2><p></p></div> —— 對<div><a href="#"></a><span></span></div> —— 對<div><h2></h2><span></span></div> —— 錯
5.4 HTML語義化標簽
1. 什么是語義化標簽 那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下我可以使用這個標簽才合理）比如： 網(wǎng)頁上的文章的 標題 就可以用h1~h6，網(wǎng)頁上的各個欄目的 欄目名稱 也可以使`h1~h6。 文章中內(nèi)容的段落就得放在 段落標簽p 中，在文章中有想強調(diào)的文本，就可以使用em標簽表示強調(diào)等等
1. 為啥使用語義化標簽
10. 更容易被搜索引擎收錄
10. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容
10. 能夠更好的體現(xiàn)頁面的主題
10. 兼容性更好，支持更多的網(wǎng)絡(luò)設(shè)備
1. HTML語義化標簽
11. <a>標簽：實現(xiàn)超鏈接 強調(diào):title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內(nèi)容。這個屬性在實際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）
11. <p>標簽：文章段落放到<p>標簽中
11. <hx>標簽：文章標題，欄目標題用<hx>表示 標題標簽一共有6個， h1、h2、h3、h4、h5、h6 分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據(jù)重要性遞減。 <h1> 是最高的等級
11. <strong>和<em>標簽：特別強調(diào)某幾個文字 但兩者在強調(diào)的語氣上有區(qū)別:<em> 表示強調(diào)，<strong> 表示更強烈的強調(diào)。并且在瀏覽器中<em> 默認用
斜體 表示，<strong>用
粗體 表示。 兩個標簽相比，目前國內(nèi)前端程序員更喜歡使用<strong>表示強調(diào)
11. <q>標簽：短文本引用 注意要引用的文本不用加 雙引號 ，瀏覽器會對q標簽自動添加雙引號
11. <blockquote>標簽：長文本引用 注意瀏覽器對 <blockquote>標簽的解析是 縮進樣式
11. <address>標簽：為網(wǎng)頁加入地址信息
11. <ul>標簽：無序列表
11. <ol>標簽：有序列表
11. <caption>標簽：為表格添加標題和摘要 摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容 語法： <table summary="表格簡介文本"> 標題用以描述表格內(nèi)容，標題的顯示位置：表格上方。 語法：<caption>標題文本</caption>
6. 企業(yè)官網(wǎng)命名規(guī)范
頁面命名規(guī)范
首頁：index.html
公司介紹：about.html
新聞列表： news.html
新聞詳情頁：news_details.html
產(chǎn)品列表：product.html
產(chǎn)品詳情頁：pro_details.html
聯(lián)系我們：contact.html
7. 總結(jié)
通過本篇文章，你可以學到以下幾點
· HTML介紹
· 開發(fā)工具
· HTML結(jié)構(gòu)、標簽
· HTML塊狀元素&&行內(nèi)元素
· w3c規(guī)范
· 企業(yè)官網(wǎng)命名規(guī)范
知識就是力量，學習改變命運；感謝您的關(guān)注，點擊我的頭像，進入主頁，查看全部內(nèi)容；我將持續(xù)為您分享互聯(lián)網(wǎng)設(shè)計干貨；
關(guān)鍵詞：知識,標簽,規(guī)范,設(shè)計
在線咨詢