HTML · Golang/Python/Linux/前端

[TOC] ## 1.基本格式 ### 1.1.文檔結構 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documet</title> </head> <body> </body> </html> ``` ### 1.2.文檔結構解析 1. `Doctype`文檔類型聲明（Document Type Declaration，也稱Doctype）。 ``` <!DOCTYPE html> //不區分大小寫 ``` 2. `html`元素就是標簽的意思。包含開始標簽和結束標簽。 ``` <html lang="en"> // 如果是中文則為zh-cn </html> ``` 3. `head`包含元數據內容，包括`<link>`、`<meta>`、`<noscript>`、`<script>`、`<style>`、`<title>`，這些是向瀏覽器提供信息。 4. `meta`用來提供關于文檔的信息。`charset="utf8"`，表示告訴瀏覽器采用什么編碼。 5. `title`設置瀏覽器左上角的標題。 ``` <title>標題</title> ``` 6. `body`用來包含文檔內容的元素 ## 2.文本元素 | 元素名稱 | 說明 | | --- | --- | | a | 超鏈接 | | br | 強制換行 | | wbr | 可安全換行 | | b | 標記一段文字但不強調 | | strong | 表示重要 | | i | 表示外文或科學術語 | | em | 表示強調 | | code | 表示計算機代碼 | | var | 表示程序輸出 | | samp | 表示變量 | | kbd | 表示用戶輸入 | | abbr | 表示縮寫 | | cite | 表示其他作品的標題 | | del | 表示被刪除的文字 | | s | 表示文字已不再確認 | | dfn | 表示術語定義 | | mark| 表示與另一段上下文有關的內容 | | q | 表示引自他處的內容 | | rp | 與ruby元素結合使用，標記括號 | | rt | 與ruby元素結合使用，標記括號 | | tuby | 表示位于表意文字上方或右方的注音符號 | | bdo | 控制文字的方向 | | small | 表示小號字體內容 | | sub | 表示下標字體 | | sup | 表示上標字體 | | time | 表示時間或日期 | | u | 標記一段文字但不強調 | | span | 通用元素，沒有任何語義。一般配合 CSS 修飾。 | ## 3.超鏈接和路徑 ### 3.1.超鏈接的屬性 | 屬性名稱 | 說明 | | --- | --- | | href | 指定元素所指資源的 URL | | hreflang | 指向的鏈接資源所使用的語言 | | media | 說明所鏈接資源用于哪種設備 | | rel |說明文檔與所鏈接資源的關系類型 | | target | 指定用以打開所鏈接資源的瀏覽環境 | | type | 說明所鏈接資源的 MIME 類型（比如 text/html） | #### target屬性 target屬性告訴瀏覽器希望將所鏈接的資源顯示在哪里。 | 屬性名稱 | 說明 | | --- | --- | | _blank | 在新窗口或標簽頁中打開文檔 | | _parent | 在父窗框組（frameset）中打開文檔 | | _self | 在當前窗口打開文檔（默認） | | _top | 在頂層窗口打開文檔 | ### 3.2.相對路徑和絕對路徑絕對路徑就是從盤符開始的完整路徑。相對路徑就是相對當前路徑所在的路徑。 ## 4.分組元素分組元素為了頁面的排版需要。 | 元素名稱 | 說明 | | --- | --- | | p | 表示段落 | | div | 一個沒有任何語義的通用元素，和 span 是對應元素 | | blockquote | 表示引自他處的大段內容 | | pre | 表示其格式應被保留的內容 | | hr | 表示段落級別的主題轉換，即水平線 | | ul,ol | 表示無序列表，有序列表 | | li | 用于 ul,ol 元素中的列表項 | |dl,dt,dd | 表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示術語，一般充當標題；dd 在 dl 內部表示定義，一般是內容。 | | figure | 表示圖片 | | figcaption | 表示 figure 元素的標題 | ## 5.表格元素表格的基本構成最少需要三個元素：`<table>`、`<tr>`、`<td>`，其他的一些作為可選輔助存在。 | 元素說明 | 名稱 | | --- | --- | | table | 表示表格 | | thead | 表示標題行 | | tbody | 表示表格主體 | | tfoot | 表示表腳 | | tr | 表示一行單元格 | | th | 表示標題行單元格 | | td | 表示單元格 | | col | 表示一列 | | colgroup | 表示一組列 | | caption | 表示表格標題 | ## 6.文檔元素文檔元素的主要作用是劃分各個不同的內容，讓整個布局清晰明快。讓整個布局元素具有語義，進一步替代 div。 | 元素說明 | 名稱 | | --- | --- | | h1~h6 |表示標題 | | header | 表示首部 | | footer | 表示尾部 | | nav | 表示有意集中在一起的導航元素 | | section | 表示重要概念或主題 | | article | 表示一段獨立的內容 | | address | 表示文檔或 article 的聯系信息 | | aside| 表示與周邊內容少有牽涉的內容 | | hgroup | 將一組標題組織在一起 | | details | 生成一個區域，用戶將其展開可以獲得更多細節 | | summary | 用在 details 元素中，表示該元素內容的標題或說明 |