HTML基本語法
阿新 • • 發佈:2021-07-13
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. < <
e. > >
f. © 圈C 版權符號
g. ® 圈R 商標
h. ™ ™商標
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) 注意:一般不刪除單元格,把單元格註釋掉,防止混亂
越努力,越幸運