整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb前端技術由html、css和 javascript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低于任何一門后端語言。而我們在學習它的時候往往是先從某一個點切入，然后不斷地接觸和學習新的知識點，因此對于初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的縮寫，即瀏覽器對象模型，當一個瀏覽器頁面初始化時，會在內存創建一個全局的對象，用以描述當前窗口的屬性和狀態，這個全局對象被稱為瀏覽器對象模型，即BOM。BOM的核心對象就是window，window
對象也是BOM的頂級對象，其中包含了瀏覽器的 6個核心模塊：
document -
即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應的DOM對象，由于元素之間有層級關系，因此整個HTML代碼解析完以后，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document
用于描述DOM樹的狀態和屬性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在瀏覽器里嵌入另一個窗口，父框架和子框架擁有獨立的作用域和上下文。
history - 以棧(FIFO)的形式保存著頁面被訪問的歷史記錄，頁面前進即入棧，頁面返回即出棧。
location - 提供了當前窗口中加載的文檔相關信息以及一些導航功能。
navigator - 用來描述瀏覽器本身，包括瀏覽器的名稱、版本、語言、系統平臺、用戶特性字符串等信息。
screen - 提供了瀏覽器顯示屏幕的相關屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。
2、DOM 系統
DOM 是 Document Object Model 的縮寫，即 文檔對象模型，是所有瀏覽器公共遵守的標準，DOM
將HTML和XML文檔映射成一個由不同節點組成的樹型結構，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀態和屬性，并提供對應的DOM操作API。隨著歷史的發展，DOM
被劃分為1級、2級、3級，共3個級別：
1級DOM - 在1998年10月份成為W3C的提議，由DOM核心與DOM
HTML兩個模塊組成。DOM核心能映射以XML為基礎的文檔結構，允許獲取和操作文檔的任意部分。DOM
HTML通過添加HTML專用的對象與函數對DOM核心進行了擴展。
2級DOM - 鑒于1級DOM僅以映射文檔結構為目標，DOM
2級面向更為寬廣。通過對原有DOM的擴展，2級DOM通過對象接口增加了對鼠標和用戶界面事件（DHTML長期支持鼠標與用戶界面事件）、范圍、遍歷（重復執行DOM文檔）和層疊樣式表（CSS）的支持。同時也對DOM
1的核心進行了擴展，從而可支持XML命名空間。
3級DOM -
通過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名為“DOM載入與保存”的新模塊，DOM核心擴展后可支持XML1.0的所有內容，包括XML
Infoset、 XPath、和XML Base。
瀏覽器對不同級別DOM的支持情況如下所示：
從圖中可以看出，移動端常用的 webkit 內核瀏覽器目前只支持DOM2，而不支持DOM3 。
新手福利獲取方式：
1.在你手機的右上角有【關注】選項，或點擊我的頭像，點擊關注！（關注我）
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信發我：html
其實作為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要這里請私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長。小編會在里面不定期分享干貨源碼，包括我精心整理的一份零基礎教程。歡迎各位感興趣的的小伙伴。
學習思路：
3、事件系統
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發展到了 移動端的 觸摸事件(touch) 和
手勢事件(guesture)，touch事件描述了手指在屏幕操作的每一個細節，guesture 則是描述多手指操作時更為復雜的情況，總結如下：
第一根手指放下，觸發 touchstart，除此之外什么都不會發生
手指滑動時，觸發touchmove
第二根手指放下，觸發 gesturestart
觸發第二根手指的 touchstart
立即觸發 gesturechange
任意手指移動，持續觸發 gesturechange
第二根手指彈起時，觸發 gestureend，以后將不會再觸發 gesturechange
觸發第二根手指的 touchend
觸發touchstart (多根手指在屏幕上，提起一根，會刷新一次全局touch) _ ___
彈起第一根手指，觸發 touchend
更多關于手勢事件的介紹請參考：
gesture事件處理復雜手勢
DOM2.0 模型將事件處理流程分為三個階段，即 事件捕獲階段 、 事件處理階段 、 事件冒泡階段， 如圖所示：
事件捕獲 ：當用戶觸發點擊事件后，頂層對象document 就會發出一個事件流，從最外層的DOM節點向目標元素節點傳遞，最終到達目標元素。
事件處理 ：當到達目標元素之后，執行目標元素綁定的處理函數。如果沒有綁定監聽函數，則不做任何處理。
事件冒泡 ：事件流從目標元素開始，向最外層DOM節點傳遞，途中如果有節點綁定了事件處理函數，這些函數就會被執行。
利用事件冒泡原理可以實現 事件委托
，所謂事件委托，就是在父元素上添加事件監聽器，用以監聽和處理子元素的事件，避免重復為子元素綁定相同的事件。當目標元素的事件被觸發以后，這個事件就從目標元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過event.target
獲取到這個目標元素，這樣做的好處是，父元素只需綁定一個事件監聽，就可以對所有子元素的事件進行處理了，從而減少了不必要的事件綁定，對頁面性能有一定的提升。
4、HTML解析過程
瀏覽器加載 html 文件以后，渲染引擎會從上往下，一步步來解析HTML標簽，大致過程如下：
用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件；
渲染引擎開始解析 html 標簽，并將標簽轉化為DOM節點，生成 DOM樹；
如果head 標簽中引用了外部css文件，則發出css文件請求，服務器返回該文件，該過程會阻塞后面的解析；
如果引用了外部 js 文件，則發出 js 文件請求，服務器返回后立即執行該腳本，這個過程也會阻塞html的解析；
引擎開始解析 body 里面的內容，如果標簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來設置標簽的樣式屬性，并生成渲染樹；
如果 body 中的 img 標簽引用了圖片資源，則立即向服務器發出請求，此時引擎不會等待圖片下載完畢，而是繼續解析后面的標簽；
服務器返回圖片文件，由于圖片需要占用一定的空間，會影響到后面元素的排版，因此引擎需要重新渲染這部分內容；
如果此時 js 腳本中運行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；
直到 html 結束標簽為止，頁面解析完畢。
5、重繪 和 回流
當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如 background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。會引起重繪和回流的操作如下：
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動元素，比如改變top,left的值，或者移動元素到另外一個父元素中。(重繪+回流)
對style的操作(對不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)
另外，transform
操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進行transition/animation
動畫時將會創建一個合成層，這使得動畫元素在一個獨立的層中進行渲染，當元素的內容沒有發生改變，就沒必要進行重繪，瀏覽器會通過重新復合來創建動畫幀。
6、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。 但是 cookie
不適合大量數據的存儲，因為每請求一次頁面，cookie 都會發送給服務器，這使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
Firefox和Safari允許cookie多達4097個字節，包括名(name)、值(value) 和 等號。
Opera允許cookie多達4096個字節，包括：名(name)、值(value) 和 等號。
Internet Explorer允許cookie多達4095個字節，包括：名(name)、值(value) 和 等號。
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。
html5 提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value
的形式來存儲數據，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session)，即當瀏覽器窗口關閉后，sessionStorage中的數據被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當于一個5M大小的前端數據庫，相比于cookie，可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage
的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和
indexedDB，允許前端以關系型數據庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。
7、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段來控制文件緩存的機制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務器回包：Cache-Control:max-age=600
表示文件在本地應該緩存，且有效時長是600秒 (從發出請求算起)。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP
請求，而是直接使用本地緩存的文件。
Last-Modified 是標識文件在服務器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since
字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標準中的字段，Cache-Control 是 HTTP1.1
標準中新加的字段，功能一樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control 是高優化級的。
Etag 也是和 Last-Modified 一樣，對文件進行標識的字段。不同的是，Etag
的取值是一個對文件進行標識的特征字串。在向服務器查詢文件是否有更新時，瀏覽器通過 If-None-Match
字段把特征字串發送給服務器，由服務器和文件最新特征字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和
Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務重新拉取文件。
8、History
用戶訪問網頁的歷史記錄通常會被保存在一個類似于棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和后退：
window.history.back( ) 返回到上一個頁面
window.history.forward( ) 進入到下一個頁面
window.history.go( [delta] ) 跳轉到指定頁面
HTML5 對History Api 進行了增強，新增了兩個Api 和一個事件，分別是pushState、replaceState 和
onpopstate：
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史記錄。
當點擊瀏覽器后退按鈕或 js調用history.back 都會觸發 onpopstate 事件。
與其類似的還有一個事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來是用來監聽hash變化的，但可以被利用來做客戶端前進和后退事件的監聽，而onpopstate是專門用來監聽瀏覽器前進后退的，不僅可以支持hash，非hash的同源
url 也支持。
9、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
10、Web語義化 和 SEO
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。
搜索引擎通過爬蟲技術獲取的頁面就是由一堆 html 標簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。
但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，并予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
年以來，隨著疫情方面的數據逐漸增多，一些互聯網公司也紛紛發布一些可視化的數據產品服務，讓用戶可以實時并直觀了解最新情況，可謂一個便民利器。而本文，則通過丁香醫生、以及騰訊新聞推出的“疫情實時動態”可視化服務，總結分享其中運用到的一些常見的數據可視化經驗。
閱讀指南：
（1）受眾人群：初級產品經理
（2）閱讀收獲
首先，需要先簡單澄清下數據可視化的基本概念。數據可視化，實質上是把一些概要信息（數據、關鍵內容），并結合動靜態的圖像視頻等形式進行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達。
所以我們需要在數據之中挖掘一些重要的價值信息，并以一個可觀的方式呈現。而“重要”的定義是十分明顯的，核心數據、用戶感興趣、有決策意義，都可稱之為重要。
根據馬斯洛五層次需求理論，那么數據可視化在其中屬于什么層次的需求？
受疫情影響，生命安全成了最重要的社會需求。那么滿足大眾對這方面的廣泛需求，推出這樣的數據可視化產品是十分有必要，滿足用戶對疫情情況、資訊信息、醫療信息等方面的獲取，從而保障自己基本的需求。
（1）脈絡
初始，丁香醫生率先推出一個H5的可視化頁面，匯總披露病例數據。隨后，一些大廠也開始陸續推出，包括頭條、騰訊等等。
而為什么大家都紛紛推出這樣的數據服務，從戰略層來說：一是做好企業責任，滿足用戶的知情需求；其二是滿足自己的平臺用戶，并吸引流量，這都是拉新、促活的寶貴方式。
而展示的信息，主要包括每日的新增、累計病例數，各地區的病例分布，以及疫情新聞、醫學知識等方面的內容。
（2）價值
而接下來，也將依據用戶體驗五要素中的范圍層、框架層、表現層，分別對這個疫情數據可視化的產品服務進行分析。
范圍層的定義是決定這樣的產品服務需要提供什么范圍內的功能服務，什么是不做的。以及要做的數據指標，哪些是關鍵的，哪些是次要的。所以我們可以羅列一下這樣數據可視化產品，基于用戶的需求是需要準備什么樣的數據指標。
上圖摘自國家衛健委某日的全日數據，在制作可視化的時候，需要考慮數據源的出處以及能提供什么樣的指標及口徑。
從中可以看出，大致可以劃分兩類關鍵數據：一個是病例的數據，一個是輔助性的數據。我們需要從中挑出其適合展示同時也是用戶需要關心的數據。
通常做這種可視化產品，總結性的數據是十分關鍵的。而基于用戶的關注點，每日新增、累計，就是其中的關鍵。
另外，基于“時間”和“地區”，代表了數據的“屬性”。而屬性則反應了這個數據可以以什么樣的特點進行展現。而“時間”和“地區”是，最適合以數據趨勢和數據分布的兩種主要數據可視化表達形式。
從下表可以看出，3家平臺的數據指標在展示上是比較一致的，核心指標都一一羅列展示。
其中在時間的“小時”級別，以及“解除醫學觀察”等細分指標都不做展示，我認為主要出于以下目的：
框架層的定義是指根據要做的功能范圍，應該確定如何正確布局和設計，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現這些元素。
首先，我們需要先看看上文提及到的幾類數據指標，重新分類一下,并標記相應的優先級。
顯然按照合理的布局應該是：
大致的布局是已經清晰了，那么接下來就需要基于數據類型采用合理的可視化展示形式。
前面也提過，由于是時間和地區下的各類數據，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規的類報表方式等。
其中，由于時間跨度較長和地區明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。
（Echarts部分地圖特性截圖）
所以在這里，更傾向于采用粗一些的2D省級行政地圖形式，開發周期短，且滿足最基本需求。
（1）匯總數據
相同點：
差異點：
評價：正常應遵循“標題+具體數值+較昨日變化”這樣的排列比較合適，上下順序先從標題了解該指標的含義，居中放大具體數值，突出關鍵信息，其次顯示較昨日變化對比，感知變化情況。
（2）各指標趨勢
相同點：
差異點：
（3）國內各省市分布
相同點：統一以常規列表分布展示國內各省市的疫情數據情況，并集中以地區、確診、死亡、治愈等字段。
差異點：
評價：
（4）海外各國分布
展示方式如國內疫情一致，這里不多說。而唯一不同的是，丁香醫生在全球各國的基礎做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個范圍內的地區更有顯著性。
表現層所關注的，是頁面各個元素組件的形狀、色彩和大小比例搭配。同時數據可視化十分重視圖形色彩的表達，一個好的視覺設計，能夠為數據的信息傳遞起到十分重要的作用。
從上圖可以看出，3家平臺都展示了4個關鍵指標“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。
地圖分布通常是以顏色深淺代表數據的“密集程度”，那么就要確定2個關鍵的地方，1個是色系，另外1個是合理的刻度比例。前者根據數據內涵確定合適的色系進行表達，后者是做色系的層次區分。
以上就是此次疫情數據下，在可視化應用上的一些體驗總結，3家都遵循了一些基本原則，同時也有各自的一些風格。而數據可視化的應用需要兼顧不同的因素，達到最佳效果。
一個理想的可視化設計流程，需要經歷“數據指標的范圍篩選、頁面的布局抉擇、可視化的視覺設計“等關鍵步驟。
3家平臺地址：
丁香醫生：https://ncov.dxy.cn/ncovh5/view/pneumonia
：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1
騰訊新聞：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7
作者：A.D，數據產品一枚；公眾號：吾某
本文由 @A.D. 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽，th標簽和td標簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。
textarea標簽，設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
