1. 程式人生 > >HTML網頁設計常用標籤及屬性

HTML網頁設計常用標籤及屬性

在認識標籤前,我們先了解了解標籤的結構,標籤分兩大類,一種是單標籤,另一種是雙標籤。 標籤的基本結構:

1.單標籤:

			1.結構格式:
				<標籤名 屬性名='屬性值' 屬性名='屬性值' .../>
			2.注意;
				單標籤在最後有一個正斜槓 '/'

2.雙標籤:

			1.結構格式:
				<標籤名 屬性名='屬性值'...>內容</標籤名>
			2.注意:
				雙標籤會分兩個部分,左邊叫開始標籤,右邊叫結束標籤,結束標籤必須有正斜槓'/'

常用的標籤介紹:

1.標題標籤:
	<h1>標題1[字號最大]</h1>
	<h2>標題2</h2>
	<h3>標題3</h3>
	...
	<h6>標題6</h6>
		標題標籤一共有6個級別,即h1~h6,字號從大到小

2.段落標籤:
	<p>內容</p>
		代表文章的一個段落

3.換行標籤:
	<br/>

4.圖片標籤:
	<img src="" alt>
		src表示圖片路徑,可寫相對路徑,也可以寫絕對路徑
		alt表示當圖片沒有時,也就是裂圖時描述圖片的資訊或者替代的文字

5.超連結標籤:
	<a href="連結網址">連結的文字或者圖片</a>
	注意:
		<a href="url" target= "_blank" title="新建
		的網頁的標題">內容</a>

		#target 表示使用者點選連結,開啟的方式,他的值是固定的
			_self 表示在當前頁面開啟新的頁面,也就覆蓋當前的頁面[預設值]
			_blank 表示在新建的瀏覽器視窗中開啟一個新的視窗

6.列表標籤:
列表一般應用在佈局中的新聞標題列表和文章標題列表以及選單,它是含有語義的,標籤結構如下
	1.有序列表:
	    <ol>
	        <li> </li>
	    </ol>

	2.無序列表:
	    <ul>
	        <li> </li>
	    </ul>

		3.自定義列表:
		    <dl>
		        <dt> </dt>
		    </dl>
		列表之間可以進行巢狀使用

7.表格標籤
	表格元素及相關樣式
		1、<table>標籤:宣告一個表格

		2、<tr>標籤:定義表格中的一行

		3、<td>和<th>標籤:定義一行中的一個單元格,td代表普通單元格,th表示表頭單元格

	表格相關樣式屬性
	border-collapse 設定表格的邊線合併,如:border-collapse:collapse;

標籤的屬性:

		1.屬性格式:
			<標籤名 屬性名='屬性值'...>內容</標籤>
		2.屬性有什麼作用?
			描述標籤的作用,給使用者進行標籤的提示或者增加標籤的功能

		3.實體字元(具有特性功能的字元)
			1.&nbsp :表示空白字元,即一個空格
			2.&lt :小於號
			3.&gt :大於號

		4.無意義標籤div和span
			1.div常用於包含其他的標籤,用於表示網頁的一整部分內容,一般用於網頁的佈局
			2.span常用於包含其他的標籤或者普通的文字內容,也是用於網頁佈局的一種,本身沒有任何其他的獨特屬性