CSS基礎 HTML列表 HTML表格
CSS基礎
連結 a標籤
-
自帶屬性:
href: 連結的路徑
target:
_self 在當前頁跳轉,預設就是
_blank 在新頁面跳轉
-
設定所有連結預設在新頁面開啟
-
<base target="_blank">
-
頭部設定
-
-
區域性連結
-
<!-- 空連結, 加#站位 -->
<a href="#">點選</a>
<!-- #加上要跳轉位置對應的id值 -->
<a href="#a">出師表</a>
<a href="#b">岳陽樓記</a>
<a href="#c">小石潭記</a>
<h3 id="a">出師表</h3>
-
-
巢狀關係
-
a標籤除了不能巢狀a標籤之外,可以巢狀任何其他標籤
-
HTML列表
-
無序列表
-
1.塊級標籤
2.結構ul>li
3.前面預設自帶圓點符號
4.list-style-type: none; 可以去掉圓點符號
-
-
有序列表
-
1.塊級標籤
2.結構ol>li
3.前面自帶1、2、3、4
4.list-style-type: none;可以去掉符號
-
自帶屬性
type
1 A a I i
start
設定起始值
reversed
設定為倒數
-
-
自定義列表
-
1.塊級標籤
2.dl>dt或dd
3.dd自帶外邊距
-
HTML表格
-
表格的基本結構
-
table: 表格最外層大標籤
-
tr: 表格每一行
-
td: 表格每個單元格,預設居左
-
-
表格的完整結構
-
thead: 表格的頭部,通常寫表格每一列的標題
-
tbody: 表格的主體,寫表格的資料
-
tfoot: 表格的底部,寫表格的腳註
-
th: 表格標題的單元格。預設居中
-
caption: 表格的標題
-
-
表格自帶屬性
-
border: 表格的邊框
-
cellpadding: 單元格的內容與邊框之間的空間
-
cellspacing: 單元格與單元格之間的空間
-
align: 單元格的水平對齊方式
-
valign: 單元格的垂直對齊方式
-
-
表格的css屬性
-
border-collapse
-
collapse: 表格設定為單一邊框,cellspacing失效
-
-
-
表格的合併
-
行合併
-
rowspan
-
兩行合併為一行,上下合併
-
-
列合併
-
colspan
-
兩列合併為一列,左右合併
-
-
語義化
-
概念:運用合適的標籤和特定的屬性去格式化文件(合適標籤和屬性要用在合適的場合)
-
優點:
-
易於開發和維護
-
使用者體驗比較好
-
易於seo,易於爬蟲抓取關鍵字,能和搜尋引擎建立良好的溝通。
-
即使在沒有css樣式的情況下,也能呈現良好的效果
-