? HTML(HyperText Markup Language , HTML5標準)超文本標記語言!
HTML是一種基礎(chǔ)技術(shù)续室，常與CSS另萤、JavaScript一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面象踊。 ---維基百科"HTML"
HTML（超文本標記語言——HyperText Markup Language）是構(gòu)成 Web 世界的一磚一瓦赞辩。
它描述并定義了一個網(wǎng)頁的內(nèi)容和基本布局嚷辅。
除 HTML 以外的其它技術(shù)則通常用來描述一個網(wǎng)頁的表現(xiàn)與展示效果（如 CSS）哟楷，或功能與行為（如 JavaScript）溶推。 ---MDN web docs
本文將主要介紹HTML中的一些常用標簽,默認位閱讀本文章的讀者是具有一定基礎(chǔ)的開發(fā)者或者是愛好者,下面我就簡單講講HTML中的常常用到的標簽元素!
? Tips:再看此文時,你可能會疑問,不是每一個標簽都有對應(yīng)的結(jié)尾的標簽嗎,對的HTML中的每一個標簽都是有一個對應(yīng)的反斜杠+對應(yīng)單詞結(jié)尾的標簽(少數(shù)標簽除外)!
? 因此我在介紹常用的HTML標簽時,在表格中的元素沒有對對應(yīng)的元素標簽進行補齊,大家不要覺得意外!
01|根元素
| 元素 | 描述 |
|---|---|
| <html> | HTML<html>元素是一個HTML文檔的根元素,所有的元素必須是此元素的后代! |
02|文檔元數(shù)據(jù)
元數(shù)據(jù)（Metadata）含有頁面的相關(guān)信息爱沟，包括樣式帅霜、腳本及數(shù)據(jù)，能幫助一些軟件 (如搜索引擎呼伸， 瀏覽器等等）更好地運用和渲染頁面身冀。對于樣式和腳本的元數(shù)據(jù)钝尸，可以直接在網(wǎng)頁里定義，也可以鏈接到包含相關(guān)信息的外部文件搂根。
| 元素 | 描述 |
|---|---|
| <link> | HTML 中<link>元素規(guī)定了外部資源與當前文檔的關(guān)系珍促。 這個元素可用來為導(dǎo)航定義一個關(guān)系框架。這個元素最常于鏈接樣式表剩愧。 |
| <meta> |
HTML <meta> 元素表示那些不能由其它HTML元相關(guān)元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數(shù)據(jù)信息. |
| <style> | HTML的<style>元素包含文檔的樣式信息或者文檔的部分內(nèi)容猪叙。默認情況下，該標簽的樣式信息通常是CSS的格式仁卷。 |
| <title> | HTML <title> 元素 定義文檔的標題穴翩，顯示在瀏覽器的標題欄或標簽頁上。它只可以包含文本锦积，若是包含有標簽芒帕，則包含的任何標簽都不會被解釋。 |
03|內(nèi)容分區(qū)
內(nèi)容分區(qū)元素允許你將文檔內(nèi)容從邏輯上進行組織劃分丰介。使用包括頁眉(header)背蟆、頁腳(footer)、導(dǎo)航(nav)和標題(h1~h6)等分區(qū)元素哮幢，來為頁面內(nèi)容創(chuàng)建明確的大綱带膀，以便區(qū)分各個章節(jié)的內(nèi)容。
| 元素 | 描述 |
|---|---|
| <footer> | HTML <footer> 元素表示最近一個章節(jié)內(nèi)容或者根節(jié)點（sectioning root ）元素的頁腳家浇。一個頁腳通常包含該章節(jié)作者本砰、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。 |
| <header> |
<header>元素表示一組引導(dǎo)性的幫助钢悲，可能包含標題元素点额，也可以包含其他元素，像logo莺琳、分節(jié)頭部还棱、搜索表單等。 |
| <h1>~<h6> |
HTML <h1>–<h6> 標題(Heading)元素呈現(xiàn)了六個不同的級別的標題惭等，<h1> 級別最高珍手，而 <h6> 級別最低。一個標題元素能簡要描述該節(jié)的主題辞做。標題信息可以由用戶代理可以使用琳要，例如，自動構(gòu)造某個文檔中的內(nèi)容表（就像本文檔右邊浮動欄一樣）秤茅。 |
| <main> | HTML <main>元素呈現(xiàn)了文檔``或應(yīng)用的主體部分稚补。主體部分由與文檔直接相關(guān)，或者擴展于文檔的中心主題框喳、應(yīng)用的主要功能部分的內(nèi)容組成课幕。這部分內(nèi)容在文檔中應(yīng)當是獨一無二的厦坛，不包含任何在一系列文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄乍惊，導(dǎo)航欄鏈接杜秸，版權(quán)信息，網(wǎng)站logo润绎，搜索框（除非搜索框作為文檔的主要功能）撬碟。 |
| <nav> |
HTML導(dǎo)航欄 (<nav>) 描繪一個含有多個超鏈接的區(qū)域，這個區(qū)域包含轉(zhuǎn)到其他頁面凡橱，或者頁面內(nèi)部其他部分的鏈接列表. |
| <section> |
HTML Section 元素 (<section>) 表示文檔中的一個區(qū)域（或節(jié)）小作，比如，內(nèi)容中的一個專題組稼钩，一般來說會有包含一個標題（heading）顾稀。一般通過是否包含一個標題 (<h1>-<h6> element) 作為子節(jié)點 來 辨識每一個<section>。 |
04|文本內(nèi)容
使用 HTML 文本內(nèi)容元素來組織在開標簽 <body> 和閉標簽 </body> 里的塊或章節(jié)的內(nèi)容坝撑。這些元素能標識內(nèi)容的宗旨或結(jié)構(gòu)静秆，而這對于 accessibility 和 SEO 很重要。
| 元素 | 描述 |
|---|---|
| <dir> |
HTML 目錄元素 (<dir>) 表示一個目錄巡李，也就是文件名稱的集合抚笔。 |
| <div> |
HTML <div> 元素 (或 HTML 文檔分區(qū)元素) 是一個通用型的流內(nèi)容容器，它在語義上不代表任何特定類型的內(nèi)容侨拦，它可以被用來對其它元素進行分組殊橙，一般用于樣式化相關(guān)的需求（使用 class 或 id 特性) 或者對具有相同特性的一組元素進行分組 (比如 lang)，它應(yīng)該在沒有任何其它語義元素可用時才使用 (比如 <article> 或 <nav>) 狱从。 |
| <dl> | HTML <dl> 元素 （或 HTML 描述列表元素）是一個包含術(shù)語定義以及描述的列表膨蛮，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對列表)。 |
| <dt> |
HTML <dt> 元素 （或 HTML 術(shù)語定義元素）用于在一個定義列表中聲明一個術(shù)語季研。該元素僅能作為 <dl> 的子元素出現(xiàn)敞葛。通常在該元素后面會跟著 <dd> 元素， 然而与涡，多個連續(xù)出現(xiàn)的 <dt> 元素都將由出現(xiàn)在它們后面的第一個 <dd> 元素定義惹谐。 |
|
HTML 元素表示段落級元素之間的主題轉(zhuǎn)換（例如，一個故事中的場景的改變驼卖，或一個章節(jié)的主題的改變）氨肌。在HTML的早期版本中，它是一個水平線∽眯螅現(xiàn)在它仍能在可視化瀏覽器中表現(xiàn)為水平線儒飒，但目前被定義為語義上的，而不是表現(xiàn)層面上檩奠。 |
|
| <li> |
HTML <li> 元素 (或者 HTML 列表條目元素) 用于表示列表里的條目桩了。它必須被包含在一個父元素里：一個有順序的列表(<ol>)，一個無順序的列表(<ul>)埠戳，或者一個菜單 (<menu>)井誉。在菜單或者無順序的列表里，列表條目通常用點排列顯示整胃。在有順序的列表里颗圣，列表條目通常是在左邊有按升序排列計數(shù)的顯示，例如數(shù)字或者字母屁使。 |
| <main> | HTML <main>元素呈現(xiàn)了文檔``或應(yīng)用的主體部分在岂。主體部分由與文檔直接相關(guān)，或者擴展于文檔的中心主題蛮寂、應(yīng)用的主要功能部分的內(nèi)容組成蔽午。這部分內(nèi)容在文檔中應(yīng)當是獨一無二的，不包含任何在一系列文檔中重復(fù)的內(nèi)容酬蹋，比如側(cè)邊欄及老，導(dǎo)航欄鏈接，版權(quán)信息范抓，網(wǎng)站logo骄恶，搜索框（除非搜索框作為文檔的主要功能）。 |
| <ol> | HTML <ol> 元素 表示多個有序列表項匕垫，通常渲染為有帶編號的列表僧鲁。 |
| <p> | HTML <p>元素（或者說 HTML 段落元素）表示文本的一個段落。該元素通常表現(xiàn)為一整塊與相鄰文本分離的文本象泵，或以垂直的空白隔離或以首行縮進寞秃。另外，<p> 是塊級元素单芜。 |
| <pre> | HTML <pre> 元素表示預(yù)定義格式文本蜕该。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現(xiàn)出來洲鸠，文本中的空白符（比如空格和換行符）都會顯示出來堂淡。(緊跟在 <pre> 開始標簽后的換行符也會被省略) |
| <ul> | The HTML <ul> 元素 ( 或 HTML 無序列表元素） 代表多項的無序列表，即無數(shù)值排序項的集合扒腕，且它們在列表中的順序是沒有意義的绢淀。通常情況下，無序列表項的頭部可以是幾種形式瘾腰，如一個點皆的，一個圓形或方形。頭部的風(fēng)格并不是在頁面的HTML描述定義, 但在其相關(guān)的CSS 可以用 list-style-type 屬性蹋盆。 |
05|內(nèi)聯(lián)文本語義
使用 HTML 內(nèi)聯(lián)文本語義(Inline text semantics)定義語句费薄，結(jié)構(gòu)硝全，可以是一個詞，一段楞抡，或任意風(fēng)格的文字伟众。
| 元素 | 描述 |
|---|---|
| <a> | HTML <a> 元素 (或錨元素) 可以創(chuàng)建一個到其他網(wǎng)頁、文件召廷、同一頁面內(nèi)的位置凳厢、電子郵件地址或任何其他URL的超鏈接。 |
<br> |
HTML 元素在文本中生成一個換行（回車）符號竞慢。此元素在寫詩和地址時很有用先紫，這些地方的換行都非常重要。 |
| <em> |
HTML 著重元素 (<em>) 標記出需要用戶著重閱讀的內(nèi)容筹煮， <em> 元素是可以嵌套的遮精，嵌套層次越深，則其包含的內(nèi)容被認定為越需要著重閱讀寺谤。 |
| <kbd> | HTML鍵盤輸入元素(<kbd>) 用于表示用戶輸入仑鸥，它將產(chǎn)生一個行內(nèi)元素，以瀏覽器的默認monospace字體顯示变屁。 |
| <span> |
HTML <span> 元素是短語內(nèi)容的通用行內(nèi)容器眼俊，并沒有任何特殊語義∷诠兀可以使用它來編組元素以達到某種樣式意圖（通過使用類或者Id屬性）疮胖，或者這些元素有著共同的屬性，比如lang闷板。應(yīng)該在沒有其他合適的語義元素時才使用它澎灸。<span> 與 <div> 元素很相似，但 <div> 是一個 塊元素 而 <span> 則是 行內(nèi)元素 . |
| <strong> | Strong 元素 (<strong>)表示文本十分重要遮晚，一般用粗體顯示性昭。 |
06|圖片和多媒體
HTML 支持各種多媒體資源，例如圖像县遣，音頻和視頻糜颠。
| 元素 | 描述 |
|---|---|
| <audio> |
HTML <audio> 元素用于在文檔中表示音頻內(nèi)容。 <audio> 元素可以包含多個音頻資源萧求， 這些音頻資源可以使用 src 屬性或者<source> 元素來進行描述其兴； 瀏覽器將會選擇最合適的一個來使用。對于不支持<audio>元素的瀏覽器夸政，<audio>元素也可以作為瀏覽器不識別的內(nèi)容加入到文檔中元旬。 |
| <img> |
HTML Image 元素（ <img> ）代表文檔中的一個圖像。 |
| <vedio> | HTML <video> 元素 用于在HTML或者XHTML文檔中嵌入視頻內(nèi)容。 |
07|腳本
為了創(chuàng)建動態(tài)內(nèi)容和 Web 應(yīng)用程序匀归，HTML 支持使用腳本語言坑资，最突出的就是 JavaScript。某些元素支持此功能穆端。
| 元素 | 描述 |
|---|---|
| <canvas> | <canvas>元素可被用來通過腳本（通常是JavaScript）繪制圖形盐茎。比如,它可以被用來繪制圖形,制作圖片集合,甚至用來實現(xiàn)動畫效果。你可以(也應(yīng)該)在元素標簽內(nèi)寫入可提供替代的的代碼內(nèi)容徙赢，這些內(nèi)容將會在在舊的、不支持<canvas>元素的瀏覽器或是禁用了JavaScript的瀏覽器內(nèi)渲染并展現(xiàn)探越。 |
| <noscript> | 如果頁面上的腳本類型不受支持或者當前在瀏覽器中關(guān)閉了腳本狡赐，則在HTML <noscript> 元素中定義腳本未被執(zhí)行時的替代內(nèi)容。</noscript> |
| <script> | HTML <script> 元素用于嵌入或引用可執(zhí)行腳本钦幔。 |
08|表格內(nèi)容
這里的元素用于創(chuàng)建和處理表格數(shù)據(jù)枕屉。元素在一個 元素中可以出現(xiàn)一個或者更多。
| 元素 | 描述 |
|---|---|
| <col> | HTML <col> 元素 定義表格中的列鲤氢，并用于定義所有公共單元格上的公共語義搀擂。它通常位于元素內(nèi)。 |
| <colgroup> | HTML 中的 表格列組（Column Group <colgroup>） 標簽用來定義表中的一組列表卷玉。 |
| <table> | HTML的 table 元素表示表格數(shù)據(jù) — 即通過二維數(shù)據(jù)表表示的信息哨颂。 |
| <tbody> | 這個 HTML 標簽 |
| <td> | The Table cell HTML element (<td>) defines a cell of a table that contains data. It participates in the table model. |
| <tfoot> | HTML 元素<tfoot> 定義了一組計算表格中各列總和的行。 |
| <th> |
HTML <th> 元素 scope and headers 屬性 |
| <thead> | HTML的<thead>元素定義了一組定義表格的列頭的行相种。 |
| <tr> | HTML <tr> 元素定義表格中的行威恼。 Those can be a mix of <td> and <th>elements. |
09|表單
HTML 提供了許多可一起使用的元素，這些元素能用來創(chuàng)建一個用戶可以填寫并提交到網(wǎng)站或應(yīng)用程序的表單寝并。詳情請參閱 HTML forms guide箫措。
| 元素 | 描述 |
|---|---|
| <button> | HTML <button> 元素表示一個可點擊的按鈕，可以用在表單或文檔其它需要使用簡單標準按鈕的地方衬潦。 |
| <form> | HTML <form> 元素 表示了文檔中的一個區(qū)域斤蔓，這個區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息镀岛。 |
| <input> | HTML <input> 元素用于為基于Web的表單創(chuàng)建交互式控件弦牡，以便接受來自用戶的數(shù)據(jù)。 |
| <label> | HTML 元素表示用戶界面中項目的標題哎媚。 |
| <option> | 在web表單中, HTML元素 <option> 用于定義在select, optgroup 或datalist 元素中包含的項喇伯。<option> 可以在彈出窗口和 html 文檔中的其他項目列表中表示菜單項。 |
| <select> | HTML select (<select>) 元素是一種表單控件拨与，可創(chuàng)建選項菜單稻据。菜單內(nèi)的選項為<option> , 可以由 <optgroup> 元素分組。選項可以被用戶預(yù)先選擇。 |
| <textarea> |
HTML <textarea> 元素表示一個多行純文本編輯控件捻悯。 |
其中以上就是一些常用的標簽,當然我自己也差不多用到了前面所介紹的標簽,這些常用的標簽在描述中都有簡單介紹!
其中的一些詳細信息可以點擊描述中的一些鏈接可以看到具體用法!
1.其中在前端領(lǐng)域比較好的教程網(wǎng)站比如:MDN 其中不僅僅是HTML的一些標簽之類的 當然還包括:HTML介紹,HTML教程,HTML參考
2.因為本人的只是水品有限,其中的一些標簽怕因為個人的不成熟的見解誤導(dǎo)別人,因此其中讀者所看到的標簽描述以及元素介紹都是從MDN(Mozilla Developer Network ,Mozilla 開發(fā)者網(wǎng)絡(luò)) 經(jīng)過自己在開發(fā)中(主要是學(xué)習(xí)和實踐中)主要用到的標簽提煉出來,當然還有許多地方?jīng)]有做到位! 如果您看到這篇Blog對你有幫助的話(當然我也很樂意這樣做)或者是你覺得還有很多地方需要改進的地方的話還請聯(lián)系我:Gump1016@163.com
