TML5 元素有多種維度展示方式，常見以下：

• 1.按照類別分類
• 2.按照是否Block元素

按照類別分：

根元素

• - html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
• 文檔元數據
• head 代表關于文檔元數據的一個集合，包括腳本或樣式表的鏈接或內容。
• title 定義文檔的標題，將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本，包含的標簽不會被解釋。
• base 定義頁面上相對 URL 的基準 URL。
• link 用于鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• style 用于內聯 CSS。
• -
• 腳本
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
• template 這個元素在 HTML5 中加入 通過 JavaScript 在運行時實例化內容的容器。
• -
• 章節
• body 代表 HTML 文檔的內容。在文檔中只能有一個 元素。
• section 這個元素在 HTML5 中加入 定義文檔中的一個章節。
• nav 這個元素在 HTML5 中加入 定義只包含導航鏈接的章節。
• article 這個元素在 HTML5 中加入 定義可以獨立于內容其余部分的完整獨立內容塊。
• aside 這個元素在 HTML5 中加入 定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
• h1~ h6 標題元素實現了六層文檔標題，h1 是最大的標題，h6 是最小的標題。標題元素簡要地描述章節的主題。
• header 這個元素在 HTML5 中加入 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
• footer 這個元素在 HTML5 中加入 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
• address 定義包含聯系信息的一個章節。
• main 這個元素在 HTML5 中加入 定義文檔中主要或重要的內容。
• -
• 內容組織
• p 定義一個段落。
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• pre 代表其內容已經預先排版過，格式應當保留 。
• blockquote 代表引用自其他來源的內容。
• ol 定義一個有序列表。
• ul 定義一個無序列表。
• li 定義列表中的一個列表項。
• dl 定義一個定義列表（一系列術語和其定義）。
• dt 代表一個由下一個
• 定義的術語。
• dd 代表出現在它之前術語的定義。
• figure 這個元素在 HTML5 中加入 代表一個和文檔有關的圖例。
• figcaption 這個元素在 HTML5 中加入 代表一個圖例的說明。
• div 代表一個通用的容器，沒有特殊含義。
• -
• 文字展示
• a 代表一個鏈接到其他資源的超鏈接 。
• em 代表強調 文字。
• strong 代表特別重要 文字。
• small 代表注釋 ，如免責聲明、版權聲明等，對理解文檔不重要。
• s 代表不準確或不相關 的內容。
• cite 代表作品標題 。
• q 代表內聯的引用 。
• dfn 代表一個術語包含在其最近祖先內容中的定義 。
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中。
• data 這個元素在 HTML5 中加入 關聯一個內容的機器可讀的等價形式 （該元素只在 WHATWG 版本的 HTML 標準中，不在 W3C 版本的 HTML5 標準中）。
• time 這個元素在 HTML5 中加入 代表日期 和時間 值；機器可讀的等價形式通過 datetime 屬性指定。
• code 代表計算機代碼 。
• var 代表代碼中的變量 。
• samp 代表程序或電腦的輸出 。
• kbd 代表用戶輸入 ，一般從鍵盤輸出，但也可以代表其他輸入，如語音輸入。
• sub,- sup 分別代表下標 和上標 。
• i 代表一段不同性質 的文字，如技術術語、外文短語等。
• b 代表一段需要被關注 的文字。
• u 代表一段需要下劃線呈現的文本注釋，如標記出拼寫錯誤的文字等。
• mark 這個元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
• ruby 這個元素在 HTML5 中加入 代表被ruby 注釋 標記的文本，如中文漢字和它的拼音。
• rt 這個元素在 HTML5 中加入 代表ruby 注釋 ，如中文拼音。
• rp 這個元素在 HTML5 中加入 代表 ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
• bdi 這個元素在 HTML5 中加入 代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向。
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素。
• br 代表換行 。
• wbr 這個元素在 HTML5 中加入 代表建議換行 (Word Break Opportunity) ，當文本太長需要換行時將會在此處添加換行符。
• -
• 文字編輯
• ins 定義增加 到文檔的內容。
• del 定義從文檔移除 的內容。
• -
• 圖片等資源展示
• img 代表一張圖片 。
• iframe 代表一個內聯的框架 。
• embed 這個元素在 HTML5 中加入 代表一個嵌入 的外部資源，如應用程序或交互內容。
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等。
• param 代表 - object 元素所指定的插件的參數 。
• video 這個元素在 HTML5 中加入 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶界面。
• audio 這個元素在 HTML5 中加入 代表一段聲音 ，或音頻流 。
• source 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定媒體源 。
• track 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定文本軌道（字幕） 。
• canvas 這個元素在 HTML5 中加入 代表位圖區域 ，可以通過腳本在它上面實時呈現圖形，如圖表、游戲繪圖等。
• map 與 - area 元素共同定義圖像映射 區域。
• area 與 - map 元素共同定義圖像映射 區域。
• svg 這個元素在 HTML5 中加入 定義一個嵌入式矢量圖 。
• math 這個元素在 HTML5 中加入 定義一段數學公式 。
• -
• 表格
• table 定義多維數據 。
• caption 代表表格的標題 。
• colgroup 代表表格中一組單列或多列 。
• col 代表表格中的列 。
• tbody 代表表格中一塊具體數據 （表格主體）。
• thead 代表表格中一塊列標簽 （表頭）。
• tfoot 代表表格中一塊列摘要 （表尾）。
• tr 代表表格中的行 。
• td 代表表格中的單元格 。
• th 代表表格中的頭部單元格 。
• -
• 表單
• form 代表一個表單 ，由控件組成。
• fieldset 代表控件組 。
• legend 代表 - fieldset 控件組的標題 。
• label 代表表單控件的標題 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）。
• button 代表按鈕 。
• select 代表下拉框 。
• datalist 這個元素在 HTML5 中加入 代表提供給其他控件的一組預定義選項 。
• optgroup 代表一個選項分組 。
• option 代表一個 - select 元素或 - datalist 元素中的一個選項
• textarea 代表多行文本框 。
• keygen 這個元素在 HTML5 中加入 代表一個密鑰對生成器 控件。
• output 這個元素在 HTML5 中加入 代表計算值 。
• progress 這個元素在 HTML5 中加入 代表進度條 。
• meter 這個元素在 HTML5 中加入 代表滑動條 。
• -
• 導航等交互元素
• details 這個元素在 HTML5 中加入 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
• summary 這個元素在 HTML5 中加入 代表 - details 元素的綜述 或標題 。
• menuitem 這個元素在 HTML5 中加入 代表一個用戶可以點擊的菜單項。
• menu 這個元素在 HTML5 中加入 代表菜單。

按照是否Block元素分：

• 1.Empty Elements
• area 與 map 元素共同定義圖像映射 區域。
• base 定義頁面上相對 URL 的基準 URL。
• basefont 4.0種標簽，目前已廢棄
• br 代表換行 。
• col 代表表格中的列 。
• frame 4.0種標簽，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符。
• img 代表一張圖片 。
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）。
• isindex 4.0種標簽，目前已廢棄
• link 用于鏈接外部的 CSS 到該文檔。
• meta 定義其他 HTML 元素無法描述的元數據。
• param 代表 object 元素所指定的插件的參數
• embed 代表一個嵌入 的外部資源，如應用程序或交互內容
• -
• 2.Block Elements
• address 定義包含聯系信息的一個章節
• applet 4.0種標簽，目前已廢棄
• blockquote 代表引用自其他來源的內容。
• button 代表按鈕
• center 4.0種標簽，目前已廢棄
• dd 代表出現在它之前術語的定義
• del 定義從文檔移除 的內容。
• dir 4.0種標簽，目前已廢棄
• div 代表一個通用的容器，沒有特殊含義
• dl 定義一個定義列表（一系列術語和其定義）
• dt 代表一個由下一個 dd 定義的術語
• fieldset 代表控件組
• form 代表一個表單 ，由控件組成
• frameset 4.0種標簽，目前已廢棄
• hr 代表章節、文章或其他長內容中段落之間的分隔符
• iframe 代表一個內聯的框架
• ins 定義增加 到文檔的內容
• isindex 4.0種標簽，目前已廢棄
• li 定義列表中的一個列表項
• map 與 area 元素共同定義圖像映射 區域
• menu 代表菜單
• noframes
• noscript 定義當瀏覽器不支持腳本時顯示的替代文字
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• ol 定義一個有序列表
• p 定義一個段落
• pre 代表其內容已經預先排版過，格式應當保留
• script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
• table 定義多維數據
• tbody 代表表格中一塊具體數據 （表格主體）
• td 代表表格中的單元格
• tfoot 代表表格中一塊列摘要 （表尾）
• th 代表表格中的頭部單元格
• thead 代表表格中一塊列標簽 （表頭）
• tr 代表表格中的行
• ul 定義一個無序列表
• -
• 3.Inline Elements
• a 代表一個鏈接到其他資源的超鏈接
• abbr 代表省略 或縮寫 ，其完整內容在 title 屬性中
• acronym 4.0種標簽，目前已廢棄
• applet 4.0種標簽，目前已廢棄
• b 代表一段需要被關注 的文字
• basefont 4.0種標簽，目前已廢棄
• bdo 指定子元素的文本方向 ，顯式地覆蓋默認的文本方向
• big 4.0種標簽，目前已廢棄
• br 代表換行
• button 代表按鈕
• cite 代表作品標題
• code 代表計算機代碼
• del 定義從文檔移除 的內容
• dfn 代表一個術語包含在其最近祖先內容中的定義
• em 代表強調 文字
• font 4.0種標簽，目前已廢棄
• i 代表一段不同性質 的文字，如技術術語、外文短語等
• iframe 代表一個內聯的框架
• img 代表一張圖片
• input 代表允許用戶編輯數據的數據區 （文本框、單選框、復選框等）
• ins 定義增加 到文檔的內容
• kbd 4.0種標簽，目前已廢棄
• label 代表表單控件的標題
• map 與 area 元素共同定義圖像映射 區域
• object 代表一個外部資源 ，如圖片、HTML 子文檔、插件等
• q 代表內聯的引用
• s 代表不準確或不相關 的內容
• samp 代表程序或電腦的輸出
• script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
• select 代表下拉框
• small 代表注釋 ，如免責聲明、版權聲明等，對理解文檔不重要
• span 代表一段沒有特殊含義的文本，當其他語義元素都不適合文本時候可以使用該元素
• strike 4.0種標簽，目前已廢棄
• strong 代表特別重要 文字
• sub 代表下標
• sup 代表上標
• textarea 代表多行文本框
• tt 4.0種標簽，目前已廢棄
• u 4.0種標簽，目前已廢棄
• var 代表代碼中的變量
• -

參考文獻：

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
• 本文作者：前端首席體驗師(CheongHu)
• 聯系郵箱：simple2012hcz@126.com
• 版權聲明： 本文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協議。轉載請注明出處！

，介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去；

2，CSS選擇符有哪些？哪些屬性可以繼承？

* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover, li:nth-child）
* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
* 不可繼承的樣式：border padding margin width height ;

3，CSS優先級算法如何計算？

* 優先級就近原則，同權重情況下樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag
important 比 內聯優先級高

4，CSS3新增偽類有那些？

舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之后添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。

5，如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

給div設置一個寬度，然后添加margin:0 auto屬性

居中一個浮動元素

確定容器的寬高 寬500 高 300 的層

設置層的外邊距

讓絕對定位的div居中

6，display有哪些值？說明他們的作用。

block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值

7，position的值relative和absolute定位原點是？

absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對于其正常位置進行定位。
static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規定從父元素繼承 position 屬性的值。

8，CSS3有哪些新特性？

新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

9，用純CSS創建一個三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設為 transparent）

10，一個滿屏 品 字布局 如何設計?

簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然后用float或者inline使其不換行即可

11，li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。

12，為什么要初始化CSS樣式。

- 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
淘寶的樣式初始化代碼：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

13，absolute的containing block(容器塊)計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

14，對BFC規范(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
創建規則：
根元素
浮動元素（float不是none）
絕對定位元素（position取值為absolute或fixed）
display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin折疊

15，css定義的權重

以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
/*權重為1*/ div{}
/*權重為10*/ .class1{}
/*權重為100*/ #id1{}
/*權重為100+1=101*/ #id1 div{}
/*權重為10+1=11*/ .class1 div{}
/*權重為10+10+1=21*/ .class1 .class2 div{}
如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現

16，移動端的布局用過媒體查詢嗎？

css的媒體查詢允許通過@media標簽為特定媒體的瀏覽器設定樣式，其中包含眾多篩選，功能強大。

17，使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)

18，CSS優化、提高性能的方法有哪些？

將樣式表放到頁面頂部
不使用CSS表達式
不使用@import
不使用IE的Filter

19，在網頁中的應該使用奇數還是偶數的字體？為什么呢？

應該是用偶數字體。原因：

像谷歌一些比較流行的瀏覽器一般會有個默認的最小字體，而且對奇數字體渲染的不太好看

20，元素豎向的百分比設定是相對于容器的高度嗎？

是的，元素的百分比設置一般是根據父級元素的寬高決定的，如果父級元素沒有寬高百分比是不起作用的

lt;!doctype html>

<html>

<!--

常見問題答疑

Question 1：HTML標簽可以大寫嗎？

大小寫都可以，比如<P> 和 <p> 都一樣，但是推薦小寫，XHTML強制小寫（小寫肯定對，大寫……看情況）

Question 2：有<h7>、<h8>、<h9>……嗎？

沒有。<h1>最大，<h6>最小.

Question 3：所有HTML標簽都需要<></>嗎？

不是。有特例，比如<img>是自閉合的，沒有</img>;<br>是空元素，需要在開始標簽閉合<br/>;<hr> <link> <base>不需要閉合，等等。

Question 4：標簽里的屬性有先后順序嗎？

沒有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一樣的。

-->

<head>

<!--

<meta>元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。

!元數據也不顯示在頁面上，但會被瀏覽器解析。

-->

<meta charset="utf-8">

<!-- <title>標簽定義HTML文檔的標題 -->

<title>HTML復習 2019-2-3</title>

<!--

<base>定義了所有鏈接的URL（地址） URL->Uniform Resource Locator（全球資源定位器）

<base > 所有鏈接都指向www.baidu.com

-->

<!--

<link>標簽定義文檔和外部資源的關系，鏈接到另一個文件，把另一個文件的東西拿過來用

通常引用 css文件 和 js文件

調用樣式的優先級：<link>外部文件 < 文件內<style> < 標簽內style屬性

-->

<link rel="stylesheet" type="text/css" href="filename.css">

<link rel="stylesheet" type="text/javascript" href="filename.js">

<!--

<style>標簽定義標簽的樣式 CSS -> Cascading Style Sheets（層疊樣式表）

1.直接定義標簽樣式 標簽名{ 屬性1:值; 屬性2:值; }

2.定義具有某一ID的標簽樣式 #id名{ 屬性1:值; 屬性2:值; }

3.定義某一類（class）的標簽樣式 .類名{ 屬性1:值; 屬性2:值; }

#多個元素用 , 隔開

-->

<style>

td,p{

text-align:center;

}

#top{

font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";

}

.show{

background-color: aqua;

}

</style>

<!-- <script>標簽用于定義腳本文件（一般就是JavaScript） -->

<script>

alert("lycute!"); //彈出一個消息框

</script>

</head>

<body>

<!--

常用HTML屬性：

class 定義一個或多個類名(classname)；相當于把不同的標簽分到一個組，屬于同一類

id 定義元素的唯一id；id是唯一的，不能兩個標簽用一個，相當于學號，不能重復

style 定義元素的行內樣式(inline style)；只能修改該標簽的樣式（大小、顏色、位置等）

-->

<!-- <h1> ~ <h6> 標簽定義了六個等級的標題 h->head/headline(標題) -->

<h1 id="top">This is a title level 1</h1>

<h2 class="show">This is a title level 2</h2>

<h3 class="show">This is a title level 3</h3>

<h4 class="show">This is a title level 4</h4>

<h5>This is a title level 5</h5>

<h6>This is a title level 6</h6>

<!--

<p>標簽定義段落 p->paragragh（段落）

HTML文檔中不能直接敲回車，需要使用 <br/> 標簽 br->break(打斷？……可能是這個吧)

HTML文檔中不能直接打空格，需要使用 nbsp->Non-breaking Space(不間斷空格)

！！上兩條在<pre>標簽內不受影響

<hr>標簽用于創建水平線,用于分隔內容 hr->horizontal line(水平線)

<b>和<strong>都可以加粗文字

<i>和<em>都可以定義斜體文字

通常使用<strong>和<em>，因為它們有強調的含義

-->

<p>

This is a paragragh.<br/>

And this is the second line.

</p>

<hr>

<p>

This is another paragragh<br/>

<!--常用文本格式化屬性：

<b> 定義粗體文本 b->bold(粗體)

<em> 定義著重文字 em->emphasize(強調)

<i> 定義斜體字 i->italic(斜體)

<small> 定義小號字

<strong>定義加重語氣

<sub> 定義下標字 sub->subscript(下標)

<sup> 定義上標字 sup->superscript(上標)

<ins> 定義插入字 ins->insert(插入)

<del> 定義刪除字 del->delete(刪除)

-->

<strong>I am bold</strong><br/>

<em>I am italic</em><br/>

<small>I am small</small><br/>

_{I am subscript}

^{I am superscript}<br/>

<ins>I am ins</ins><br/>

<del>I am del</del>

</p>

<!--

段落中“計算機”輸出標簽（一般不用，了解就行）

<code> 定義計算機代碼

<kbd> 定義鍵盤碼 kbd->keyboard(鍵盤)

<samp> 定義計算機代碼樣本 samp->sample(樣例)

<var> 定義變量 var->variate(變量)

<pre> 定義預格式文本 pre->preposition(前置？……這個，應該吧)

-->

<p>

<pre>

<code>

#include"stdio.h"

int main()

{

printf("Hello World!");

}

</code>

</pre>

<kbd>Shift鍵 VK_SHIFT</kbd><br/>

<samp>system.out.print("hello world");</samp><br/>

</p>

<!--

HTML引文、引用和標簽定義

<abbr> 定義縮寫 abbr->abbreviation（縮寫）

<address> 定義地址

<bdo> 定義文字方向 bdo->Bi-Directional Override

<blockquote> 定義長的引用

<q> 定義短的引用語 q->quote（引用）

<cite> 定義引用、引證

<dfn> 定義一個定義項目 dfn->definition（定義）

-->

<p>

<abbr title="abbreviation">abbr</abbr><br/>

<address>Hebei,Shijiazhuang</address><br/>

<bdo dir="rtl">text direction from right to left</bdo>

<bdo dir="ltr">text direction from left to right</bdo>

<blockqoute cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockqoute><br/>

<q>This is a short qoute</q><br/>

<cite>This is cite</cite><br/>

<dfn>This is dfn</dfn>

</p>

<!--

<a>標簽定義鏈接 a->anchor(錨點)

href屬性定義鏈接地址 href->hypertext reference（超文本引用）

target屬性定義被鏈接的文檔在何處顯示

1.可以用來鏈接到外部地址實現頁面跳轉功能

2.可以鏈接到當前頁面的某部分實現內部導航功能

3.鏈接不一定是文本，也可以是圖片或者其他HTML元素

-->

<a href="#">This is a null link</a><br/>

<a href="#top">This is a link to h1.</a><br/>

<a target="_blank">This is a link to baidu</a><br/>

<!--

<img>標簽定義圖像、圖片 img->image(圖像)

<img>是一個自閉合標簽，不需要也不存在</img>.

src屬性指向圖像的地址 src->source(來源)

alt屬性定義如果圖片加載不出來時的替換文字 alt->alter(變更)

height、width屬性分別定義圖片的 高度 和 寬度,值可以是數字（單位px：像素）或者百分比（相對于源文件） px->pixel(像素)

-->

<img src="http://m.jungjaehyung.com/uploadfile/2024/0807/20240807024119207.jpg" alt="kirito" height="50%" width="50%">

<!-- HTML 可以通過 <div> 和 <span> 將元素組合起來 -->

<div style="background:skyblue;">

<p>This is a paragragh in a div</p>

<a >www.nelzh.cn</a>

</div>

<p>

Ly <span style="background:pink;">cute</span>

</p>

<!--

HTML表格 <table> (table有表格的意思)

<th> 定義表格的標題欄 th -> table headline(我jiao著應該是……)

<tr> 定義表格的行 tr -> table row

<td> 定義表格的列 td -> table ???

<caption> 定義表格標題

<colgroup> 定義表格列的組

<col> 定義用于表格列的屬性

<thead> 定義表格的頁眉

<tbody> 定義表格的主體

<tfoot> 定義表格的頁腳

-->

<table border="1">

<caption>LYCUTE</caption>

<colgroup>

<col span="2" style="background-color:skyblue;">

</colgroup>

<thead>

<tr>

<th>L</th>

<th>Y</th>

</tr>

</thead>

<tbody>

<tr>

<td>LY</td>

<td>CUTE</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>CUTE</td>

<td>LY</td>

</tr>

</tfoot>

</table>

<!--

有序列表<ol> & 無序列表<ul> & 自定義列表<dl>

ol -> ordered list

ul -> unordered list

dl -> ??? list

-->

<ol>

<li>lycute</li>

<li>lycute</li>

<li>lycute</li>

</ol>

<ul>

<li>lycute</li>

<li>lycute</li>

<li>lycute</li>

</ul>

<dl>

<dt>ly</dt>

<dd>-cute</dd>

<dt>cute</dt>

<dd>-ly</dd>

</dl>

<!-- HTML表單<form> 和 輸入<input> -->

<form>

<!-- 文本域（Text Fields）-->

Username:<input type="text" name="username"><br/>

<!-- 密碼（Password）-->

Password:<input type="password" name="pwd"><br/>

<!-- 多行輸入（Textarea）-->

<textarea></textarea><br/>

<!--

下拉列表（select）

<select> 定義了下拉選項列表

<optgroup> 定義選項組

<option> 定義下拉列表中的選項

-->

<select>

<optgroup label="program">

<option value="c">C</option>

<option value="java">Java</option>

<option value="python">python</option>

</optgroup>

<optgroup label="cute or not">

<option value="cute">lycute</option>

<option value="verycute">lyverycute</option>

</optgroup>

</select><br/>

<!-- 單選按鈕（Radio Buttons）-->

<input type="radio" name="sex" value="male">Male<br/>

<input type="radio" name="sex" value="female">Female<br/>

<!-- 復選框（Checkboxes）-->

<input type="checkbox" name="program" value="c">C<br/>

<input type="checkbox" name="program" value="java">Java<br/>

<input type="checkbox" name="program" value="python">python<br/>

<!-- 提交按鈕（Submit Button）-->

<input type="submit" value="submit">

<!-- 按鈕（Button）-->

<input type="button" value="找回密碼">

</form>

<!-- <iframe> 標簽規定一個內聯框架 過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。-->

<center>

<iframe src="http://www.baidu.com/" width="1200" height="400"></iframe>

</center>

</body>

</html>