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>