HTML5+CSS3+JS(第二課).HTML5保留的常用元素(一)

html5+css3+jacascript


第二章:HTML5常用元素與屬性


一:HTML5保留的常用元素


  1. 基本元素.差不多都留下了。


    <!--xx-->:註釋
    <html>   :html頁面根元素。html5可以省略
    <head>   :html頁面頭部分。html5可以省略
    <title>  :html頁面標題。
    <body>   :html頁面內容。
    <style>  :樣式定義。
    <h1>~<h6>:標題1-6。
    <p>      :段落定義。
    <br>     :換行。
    <hr>     :畫水平線。
    <div>    :塊級元素。容器作用。
    <span>   :小型塊級元素。也是容器作用。
     寫一個例子吧。

 

<html>
<head>
 <title>這個是標題</title>
</head>
<body>
 <!--標題塊-->
 <div>
  <h1>一級標題</h1>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h4>四級標題</h4>
  <h5>五級標題</h5>
  <h6>六級標題</h6>
 </div>
 <!--華麗的水平線-->
 </hr>
 
 <!--內容塊-->
 <div>
  <p>這是個段落</p>
  <p>這也是個段落</br>第二行</p>
 </div>
</body>
</html>



 

2. 文本格式化元素


 <b>  :加粗。
 <i>  :斜體。
 <em> :強調,效果與斜體差不多。
 <strong>:還是粗體。HTML5說是重要的文本,不知道有多重要。
 <small> :小號字體文本。比普通的小點。HTML5說做免責聲明、注意事項、法律規定、版權等事。
 <sup> :定義上標文本(難道是n的平方)。
 <sub> :定義下標文本(難道是n幾n幾的)。
 <bdo> :定義文本方向。可以正着寫,也可以反着寫。
 再來個例子:

 

<html>
<head>
 <title>文本格式化元素</title>
</head>
<body>
 <span><b>加粗加粗</b></span><br />
 <span><i>斜體斜體</i></span><br />
 <span><em>被強調了</em></span><br />
 <span><strong>強壯的粗體</strong><br />
 <span><small>好小的小號呢</small><br />
 <span>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sub></span><br />
 <span>a<sub>1</sub> = a<sub>2</sub> + a<sub>3</sub></span><br />
 <span><bdo dir="ltr">從左至右</bdo></span><br />
 <span><bdo dir="rtl">從右至左</bdo></span><br />
</body>
</html>



 

3. 語義相關元素


 <abbr> :用於表示一個縮寫。通常什麼世界衛生組織啊什麼都都喜歡用縮寫
 <address>: 地址。通常會斜體表示
 <blockquote>:定義一段長的引用字段。會被縮進。
 <q>    :短的引用字段。瀏覽器會添加引號。
 <cite> :表示作品(書、電影、歌曲)之類的。通常斜體表示。
 <code> :代碼段。
 <dfn>  :定義專業術語。通常會加粗或斜體。
 <del>  :表示要刪除的字。會加刪除線。
 <ins>  :表示插入的字。會加下劃線。
 <pre>  :表示元素包含的文字已經進行了預格式化。回車、空格、tab之類會被保存下來。
 <samp> :定義示範文本。
 <kdb>  :定義鍵盤文本。使用說明書等等會使用到。
 <var>  :表示一個變量。通常會斜體表示。
 哎,又一個例子。

<html>
<head>
 <title>語義相關元素</title>
</head>
<body>
 <!--這裏面的<br />都用<br>吧,省事-->
 <div>
  <abbr>WTO</abbr>
  <address>大美利堅</address><br>
  
  <!--用瘋狂裏面的詩吧-->
  <blockquote>
   錦瑟無端五十弦,一弦一柱思華年。<br>
   莊生曉夢迷蝴蝶,望帝春心託杜鵑。<br>
   滄海月明珠有淚,藍田日暖玉生煙。<br>
   此情可待成追憶,只是當時已惘然。<br>
  </blockquote>
  <!--這讓我想到了-->
  <p>
   <q>曾經滄海難爲水,除卻巫山不是雲。</q>
  </p>
  <code>
   <!--很熟悉吧-->
   <pre>
    int main(void)
    {
     printf("Hello World!");
     return 0;
    }
   </pre>
  </code>
  <!--哎下面不想寫了,困。-->
 </div>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章