base標(biāo)簽

• base標(biāo)簽
  • 作用:統(tǒng)一指定當(dāng)前網(wǎng)頁中所有超鏈接(a標(biāo)簽)如何打開
  • 注意點(diǎn):
    • 必須寫在head標(biāo)簽中
    • base標(biāo)簽和a標(biāo)簽都有target,則a標(biāo)簽target有效

假鏈接

• 存在意義: 開發(fā)前期不知道要跳轉(zhuǎn)到什么地方
• 格式:
  • #符號(hào)
  • javascript:
  • 區(qū)別: #會(huì)回到頂部,javascript:不會(huì)

錨點(diǎn)

• 作用: 在頁面內(nèi)跳轉(zhuǎn)到指定位置(在假鏈接的基礎(chǔ)上發(fā)展而來)
• 用法: 給跳轉(zhuǎn)目標(biāo)標(biāo)簽添加唯一的id,設(shè)置a標(biāo)簽href屬性為此id
  <a href="#目標(biāo)標(biāo)簽id">跳轉(zhuǎn)文本</a>
• 注意點(diǎn):
  • 跳轉(zhuǎn)時(shí)沒有過渡動(dòng)畫
  • 還可以跳轉(zhuǎn)到其它頁面的指定位置
    例: <a href="其它頁面.html#目標(biāo)標(biāo)簽id">跳轉(zhuǎn)到其它頁面的指定位置</a>

列表標(biāo)簽

無序列表

• 意義: 給一堆數(shù)據(jù)添加列表主義,表示是一個(gè)整體
• 列表標(biāo)簽分類
  1. 無序列表(最多)(unorderde list)
  2. 有序列表(最少)(ordered list)
  3. 定義列表(其次)(definition list)
• 無序列表的作用: 給一堆數(shù)據(jù)添加列表主義,并且沒有先后之分
• 格式: li=list item

<ul>
  <li>需要顯示的條目</li>
  <li>需要顯示的條目</li>
  <li>需要顯示的條目</li>
</ul

• 注意點(diǎn):
  • ul標(biāo)簽是給一堆數(shù)據(jù)添加列表語義的,不是用來添加小圓點(diǎn)的
  • ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn)的,不可能單獨(dú)使用
  • ul標(biāo)簽中只能有l(wèi)i標(biāo)簽,不推薦包含其它標(biāo)簽
  • 但是li標(biāo)簽可以放其它標(biāo)簽
• 應(yīng)用場景:
  1. 新聞列表
  2. 商品列表
  3. 導(dǎo)航條
• 無序列表練習(xí)
  • 雖然通過標(biāo)簽屬性也能修改樣式,但是不推薦
  • ul標(biāo)簽中只能有l(wèi)i標(biāo)簽,不推薦包含其它標(biāo)簽,但是li標(biāo)簽可以放其它標(biāo)簽
  • li標(biāo)簽中可以再放ul標(biāo)簽
  • webstorm中的簡化寫法: ul>li*3 含義為ul標(biāo)簽下包含三個(gè)li標(biāo)簽

有序列表

• 作用: 給一堆數(shù)據(jù)添加列表語義,但是有先后之分
• 格式: ol=ordered list 僅把ul換成ol

<ol>
  <li>需要顯示的條目</li>
  <li>需要顯示的條目</li>
  <li>需要顯示的條目</li>
</ol>

• 其它跟ul標(biāo)簽一樣

定義列表

• 格式: dt是definition title 定義標(biāo)題 | dd是definition description 定義描述

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

• 定義列表應(yīng)用場景
  1. 網(wǎng)站尾部相關(guān)信息
  2. 圖文混排（圖是標(biāo)題，文字是對(duì)圖的描述）
• 注意點(diǎn):
  • 和ul/ol一樣,dl和dt/dd是一個(gè)整體,都是一起出現(xiàn)
  • dl中只放dt和dd
  • 一個(gè)dt可以沒有對(duì)應(yīng)dd也可有多個(gè)對(duì)應(yīng)dd,但推薦一個(gè)dt對(duì)應(yīng)一個(gè)dd
  • 和li一樣,需要豐富界面時(shí),可以在dt和dd中添加其它標(biāo)簽

表格標(biāo)簽

• 歷史:表格標(biāo)簽是一個(gè)時(shí)代的代表
• 作用:給一堆數(shù)據(jù)添加表格語義.
  表格是一種數(shù)據(jù)展現(xiàn)形式,當(dāng)數(shù)據(jù)量非常大時(shí),表格是最清晰的展現(xiàn)形式
• 格式: table=表格 | tr=一行 | td=單元格

<table>
    <tr>
        <td></td>
    </tr>
</table>

• 注意點(diǎn):
  • 表格邊框?qū)傩阅J(rèn)是0,所以看不到邊框
  • 表格標(biāo)簽和列表標(biāo)簽一樣,是一個(gè)組合標(biāo)簽,所以table/tr/td要一起出現(xiàn)

表格屬性

• 寬度和高度屬性:
  • 只對(duì)應(yīng)table和td
  • 默認(rèn)按內(nèi)容調(diào)整尺寸,也可給table設(shè)置width/height屬性手動(dòng)設(shè)置寬高
  • 如果給td設(shè)width/height屬性,會(huì)修改當(dāng)前單元格寬高,不會(huì)影響表格的寬高
• 水平和垂直對(duì)齊屬性:
  • 水平對(duì)齊可給table/tr/td用
    • 給table加align屬性控制表格在頁面水平方向?qū)R
    • 給tr加align屬性,控制內(nèi)容在單元格水平對(duì)齊
    • 給td加align,控制單無格
    • tr和td的align沖突,td優(yōu)先
  • 垂直對(duì)齊只能給tr/td用
    • 垂直屬性: valign
    • 用法類似水平的align
• 外邊距和內(nèi)邊距屬性:
  • 只能給table用
  • 單元格之間的距離叫外邊距 cellspacing
  • 默認(rèn)外邊距是2px
  • 文字和單元格的距離叫內(nèi)邊距 cellpadding
  • 默認(rèn)的內(nèi)邊距是1px
  • 以上內(nèi)容僅僅了解,開發(fā)中控制距離和邊距(就是外觀樣式),統(tǒng)一用css
• 細(xì)線表格
  • 探索: 將外邊距設(shè)為0不行,因?yàn)閱卧襁吙驎?huì)和表格邊框連在一起變成粗線
  • 實(shí)現(xiàn)原理:表格背景為黑,行背景為白,外邊距為1px

<table  cellspacing="1px" bgcolor="black" >
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
<table>

• 還有一種方法江哥沒講,背景式要好.使用border-collapse屬性

<table border="1" cellspacing="0" bordercolor="#000000" " style="border-collapse:collapse;">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
<table>

• table/tr/td標(biāo)簽都支持bgcolor屬性,但僅作了解,以后樣式都有css控制

表格標(biāo)題

• table專門提供了標(biāo)題標(biāo)簽,自動(dòng)相對(duì)表格居中,caption寫在table內(nèi) <caption></caption>
• 注意點(diǎn):
  • caption一定要寫在table內(nèi),否則無效
  • caption一定要緊跟在table后

列標(biāo)題

• 定義每一列的標(biāo)題<th></th>(把第一行的td都換成th),其中文字自動(dòng)居中+粗體
• 即行tr中有兩種單元格 td和th

表格結(jié)構(gòu)

• 由于表格中存儲(chǔ)的數(shù)據(jù)非常復(fù)雜,為方便管理和定義語義,對(duì)表格中數(shù)據(jù)予以分類
• 分為四類
  • 標(biāo)題 <caption>
  • 表頭 <thead>
  • 主體 <tbody>
  • 頁尾 <tfoot>
• 表格完整結(jié)構(gòu)應(yīng)該是

<table>
    <caption>表格的標(biāo)題</caption>
    <thead>
        <tr>
            <th>每一列的標(biāo)題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tfoot>
</table>

• 注意點(diǎn):
  • 系統(tǒng)會(huì)自動(dòng)添加tbody
  • 如果指定了thead和tfoot,在修改表格width時(shí),他們不會(huì)隨著變化
  • 僅做為了解,開發(fā)中不會(huì)這樣寫

單元格合并

1. 水平方面單元格合并

• 給td加colspan屬性,把一個(gè)單元格當(dāng)多個(gè)單元格看待<td colspan="2">/td>
• 注意點(diǎn):
  • 由于把一個(gè)單元格當(dāng)多個(gè)看待,必須刪除多余的單元格
  • 單元格合并永遠(yuǎn)是向后或向下合并

2. 垂直合并單元格
   • <td rowspan="2"></td>
   • 注意點(diǎn)同上

WebStorm快捷鍵

• 快速移動(dòng)選中代碼
  • 向上移動(dòng) Ctrl+Shift+↑
  • 向下移動(dòng) Ctrl+Shift+↓
• 快速折疊展開代碼(當(dāng)前單標(biāo)簽)
  • 快速折疊 Ctrl+ -
  • 快速展開 Ctrl+ +
• 快速折疊展開代碼(選中多標(biāo)簽)
  • 折疊多標(biāo)簽 Ctrl + Shift + -
  • 展開多標(biāo)簽 Ctrl + Shift + +
• 快速新啟一行:
  • Shift + 回車

43