1. 程式人生 > 其它 >HTML基本語法

HTML基本語法

1. 基本語法:

a. 標籤的分類:
	i. 雙標籤
		1) 含義:成對兒出現的標籤,有開始,有結束
		2) 特點:
			a) 有開始有結束
			b) 標籤名字需要放在尖角號裡面
			c) 雙標籤結束標記必須帶/
			d) 所有的屬性和屬性值都必須放在開始標籤裡面
			e) 標籤名字和屬性之間必須帶空格
			f) 每一組屬性和屬性值結束後,也需要使用空格
			g) 標籤裡面的屬性和屬性值需要使用=連結
			h) 所有的屬性都需要帶引號
	ii. 單標籤
		1) 含義:自己獨立出現,沒有結束標記
		2) 特點:
			a) 獨立出現,沒有結束
			b) 標籤名字和屬性之間需要帶空格
			c) 屬性和屬性值之間使用等號連結
			d) 屬性值需要帶引號
			e) 單標籤也放在尖角號裡面

2. 特殊字元:

a. lorem:隨機生成一段英文文字
b.    半形空格
c.    全形空格;這個空格能夠代替一個文字的位置
d. <              &lt;
e. >              &gt;
f. &copy;     圈C   版權符號
g. &reg;        圈R   商標
h. &trade;     ™商標

3. img

a. src路徑:
	i. 相對路徑;
		1) 相對於某一個資料夾之間的關係,查詢對應的圖片/檔案
		2) ./img/pic.png                ./=當前目錄
		3) ../==返回上一級
	ii. 絕對路徑
		1) 從某一個碟符地址開始,從網際網路地址,網盤地址訪問對應的圖片
b. alt圖片的描述:只有圖片是破損檔案時才會顯示出來,會佔頁面空間
c. title="當滑鼠放在對應的文字或者圖片上面的時候提示文字",不佔頁面空間

4. 超連結標籤:a

a. 作用
	i. 跳轉:不同頁面之間的跳轉;相同頁面中的,不同區域的跳轉(錨點)
		1) 不同頁面之間的跳轉
		跳轉地址想要訪問網際網路地址的話則需要攜帶網際網路http協議,
		預設的跳轉開啟方式是在本頁面中開啟。
			a) target="目標連結開啟方式"
			_self=====在本頁面中開啟
			_blank===在新的空白頁面開啟
			_parent==在父級框架開啟
			_top=====頂部框架開啟
		2) 相同頁面之間的不同區域的跳轉
			a) 使用a標籤實現錨點效果
			b) 基本語法:
			<a href="#錨點的名字">文字</a>
			<div id="錨點的名字"></div>

5. 表格標籤:

a. 表格的作用:用來展示資料資訊的。後臺管理系統經常使用
b. 表格的基本格式:
	<table width="value" height="value" border="value">
		<tr>
			<td></td>
			<td></td>
		</tr>
	</table>
	注:一個tr表示一行,一個td表示一列,一個單元格
	i. table的屬性:
		1) border
		2) width:
			a) 取值可以是%為單位的數值,佔螢幕的百分比
			b) 寬和高的單位如果為px為單位的數值,px單位可以省略
		3) height:
			a) 一般不可取%,因為body沒有高度,是自適應的高度。不能直接設定高度,需要根據父元素是否有高決定。
		4) 背景顏色==整個表格的背景顏色
			a) bgcolor="red"
		5) 邊框顏色
			a) bordercolor="顏色"
		6) 表格的水平對齊方式
			a) align="left/center/right"
		7) 調整單元格和單元格之間的間距
			a) cellspacing="0px"   是貼在一起,不是合併了,邊框畫素為2
		8) 調整單元格和內容之間的間距
			a) cellpadding="0px"
		• 表格特點:如果沒有設定對應的單元格的寬度的話,裡面文字數量一致,則會均分,但凡裡面內容多一點都會被撐大
		9) 表格的外邊框修飾
			a) frame:
				i) above:上邊線
				ii) below:下邊線
				iii) box/border:一圈的邊框線
				iv) hsides:上下邊框線   使用頻率較高
				v) vsides:左右邊框線
				vi) lhs:左邊框線
				vii) rhs:右邊框線
		10) 表格內部的邊線修飾:
			a) rules
				i) cols====縱向的線
				ii) rows===橫向的線                           經常使用
				iii) all=====所有的線(合併後的)         經常使用
				iv) none===取消裡面的邊線
	ii. tr的屬性
		1) bgcolor: 設定一整行單元格的背景顏色
		2) height:   設定一整行單元格的高度
		3) align:      設定一整行單元格里面內容的水平對齊方式
		4) valign:     設定一整行單元格里面內容的垂直對齊方式
			top/bottom/middle
			預設情況下單元格內容是左側垂直居中顯示的
	iii. td的屬性: 單元格的屬性,主要是對單元格的修飾
		1) width:會影響單元格所在的一整行的寬度
		2) height:會影響單元格所在的一整行的高度
		3) bgcolor:只設置這一個單元格的背景顏色
		4) align:只設置這一個單元格里面的內容的水平對齊方式
		5) valign:只設置這一個單元格的垂直對齊方式
		6) 合併單元格
			a) 水平合併單元格:colspan="數值"
			b) 垂直合併單元格:rowspan="數值"
			c) 注意:一般不刪除單元格,把單元格註釋掉,防止混亂
越努力,越幸運