em和strong
- 這兩個標簽都表示一個強調的內容，
em主要表示語氣上的強調,em在瀏覽器中默認使用斜體顯示
strong表示強調的內容，比em更強烈，默認使用粗體顯示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 今夕何夕兮，搴舟中流。 今日何日兮，得與王子同舟。 蒙羞被好兮，不訾詬恥。 <em>心幾煩而不絕兮，得知王子。</em> <strong> 山有木兮木有枝，心悅君兮君不知。</strong> </p> </body> </html>
顯示效果：
i標簽中的內容會以斜體顯示 b標簽中的內容會以加粗顯示
h5規范中規定，對於不需要着重的內容而是單純的加粗或者是斜體，就可以使用b和i標簽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 今夕何夕兮，搴舟中流。 <i>今日何日兮，得與王子同舟。</i> <b>蒙羞被好兮，不訾詬恥。</b> <em>心幾煩而不絕兮，得知王子。</em> <strong> 山有木兮木有枝，心悅君兮君不知。</strong> </p> </body> </html>
效果：
small標簽中的內容會比他的父元素中的文字要小一些
在h5中使用small標簽來表示一些細則一類的內容
比如：合同中小字，網站的版權聲明都可以放到small
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <small>今夕何夕兮，搴舟中流。</small> <br /> <i>今日何日兮，得與王子同舟。</i> <br /> <b>蒙羞被好兮，不訾詬恥。</b> <br /> <em>心幾煩而不絕兮，得知王子。</em> <br /> <strong> 山有木兮木有枝，心悅君兮君不知。</strong> <br /> </p> </body> </html>
效果：
cite標簽
網頁中所有的加書名號的內容都可以使用cite標簽，表示參考的內容，
比如：書名 歌名 話劇名 電影名 。。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 出自先秦的<cite>越人歌</cite> <br /> <small>今夕何夕兮，搴舟中流。</small> <br /> <i>今日何日兮，得與王子同舟。</i> <br /> <b>蒙羞被好兮，不訾詬恥。</b> <br /> <em>心幾煩而不絕兮，得知王子。</em> <br /> <strong> 山有木兮木有枝，心悅君兮君不知。</strong> <br /> </p> </body> </html>
效果：
行內引用和塊引用
q標簽表示一個短的引用（行內引用）
q標簽引用的內容，瀏覽器會默認加上引號
blockquote標簽表示一個長引用（塊級引用）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <q>折花枝，恨花枝，准擬花開人共卮，開時人去時。</q> <br /> <blockquote> 怕相思，已相思，輪到相思沒處辭，眉間露一絲。 </blockquote> </p> </body> </html>
效果：
sup標簽
使用sup標簽來設置一個上標
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> 2<sup>2</sup> </p> </body> </html>
效果：
sub標簽
sub標簽用來表示一個下標
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> H<sub>2</sub>O </p> </body> </html>
效果：
del標簽
使用del標簽來表示一個刪除的內容
del標簽中的內容，會自動添加刪除線
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <del>17.75</del> <br /> 15.54 <br /> </p> </body> </html>
效果：
ins標簽
ins表示一個插入的內容
ins中的的內容，會自動添加下划線
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <q>折花枝，恨花枝，准擬花開人共卮，開時人去時。</q> <br /> <ins> 怕相思，已相思，輪到相思沒處辭，眉間露一絲。 </ins> </p> </body> </html>
效果：
pre標簽和code標簽
需要頁面中直接編寫一些代碼
pre是一個預格式標簽，會將代碼中的格式保存，不會忽略多個空格
code專門用來表示代碼
我們一般結合使用pre和code來表示一段代碼
pre演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <pre> Instant end = Instant.now(); System.out.println("耗費時間為：" + Duration.between(start, end).toMillis()); </pre> </body> </html>
效果：
code演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <code> Instant end = Instant.now(); System.out.println("耗費時間為：" + Duration.between(start, end).toMillis()); </code> </body> </html>
效果：
同時使用pre和code標簽：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <pre> <code> Instant end = Instant.now(); System.out.println("耗費時間為：" + Duration.between(start, end).toMillis()); </code> </pre> </body> </html>
效果：
