元素的四種屬性

1. 通用屬性(幾乎所有的元素都有)

id用來表示頁面中的唯一元素
class用來表示同類元素
style用來自定義某個(gè)元素的樣式

2. 預(yù)置屬性（通用屬性的一個(gè)子集）

<a href=""></a>
<img src="" alt="">

a標(biāo)簽和img標(biāo)簽中的href/src/alt都屬于預(yù)置屬性

3. 事件屬性（有一個(gè)通用前綴：on+事件名稱）

4. 自定義屬性（有一個(gè)通用前綴：data-）

常用的布局標(biāo)簽

header頭部
main主體
footer頁腳
hr水平分割線

“圖片”是外部資源，通過標(biāo)簽引入到html中，通常使用單標(biāo)簽
<img src="圖片地址" alt="文字說明">

“鏈接”
<a href="鏈接">文字說明</a>
<a href="../文件地址">文字說明</a>

“列表”
無序列表ul

<ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
</ul>

有序列表ol

<ol>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
</ol>

自定義列表dl
dt標(biāo)題
dd說明

<dl>
    <dt>地址:</dt>
    <dd>xx省xx市xx區(qū)</dd>
</dl>

案例

<ul>
    <li><a href="https://baike.baidu.com/item/%E9%99%88%E8%8A%8B%E6%B1%90/22894783?fr=aladdin">陳芋汐<img src="https://img2.baidu.com/it/u=3619764950,178442798&fm=253&fmt=auto&app=138&f=JPEG?w=854&h=500" alt="" width="200"></a></li>
    <li><a href="https://baike.baidu.com/item/%E5%85%A8%E7%BA%A2%E5%A9%B5/53943633">全紅嬋<img src="https://img0.baidu.com/it/u=3871256462,664378978&fm=253&fmt=auto&app=138&f=PNG?w=652&h=450" alt="" width="200"></a></li>
</ul>

表格元素

用“組合元素”表示,表格中的數(shù)據(jù)必須放在“單元格”中
colspan水平合并
rowspan垂直合并

案例

<table width="600" border="1">
    <caption>課程表</caption>
    <thead>
        <tr bgcolor="lightgreen">
            <th bgcolor="lightblue"></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <th rowspan="4" bgcolor="cyan">上午</th>
            <th bgcolor="yellow">校本</th>
            <th bgcolor="yellow">語文</th>
            <th bgcolor="yellow">語文</th>
            <th bgcolor="yellow">語文</th>
            <th bgcolor="yellow">英語</th>
        </tr>
        <tr bgcolor="lightgreen">
           <th bgcolor="yellow">英語</th>
           <th bgcolor="yellow">英語</th>
           <th bgcolor="yellow">數(shù)學(xué)</th>
           <th bgcolor="yellow">品生</th>
           <th bgcolor="yellow">語文</th>
        </tr>
        <tr bgcolor="lightgreen">
           <th bgcolor="yellow">語文</th>
           <th bgcolor="yellow">數(shù)學(xué)綜</th>
           <th bgcolor="yellow">書法</th>
           <th bgcolor="yellow">數(shù)學(xué)</th>
           <th bgcolor="yellow">美術(shù)</th>
        </tr>
        <tr bgcolor="lightgreen">
            <th bgcolor="yellow">數(shù)學(xué)</th>
            <th bgcolor="yellow">形體</th>
            <th bgcolor="yellow">英語</th>
            <th bgcolor="yellow">體育</th>
            <th bgcolor="yellow">體育</th>
        </tr>
        <tr bgcolor="lightgreen">
            <th rowspan="4" bgcolor="cyan">下午</th>
            <th bgcolor="yellow">活動(dòng)</th>
            <th bgcolor="yellow">科學(xué)</th>
            <th bgcolor="yellow">音樂</th>
            <th bgcolor="yellow">觀影</th>
            <th bgcolor="yellow">數(shù)學(xué)</th>
        </tr>
        <tr bgcolor="lightgreen">
           <th bgcolor="yellow">活動(dòng)</th>
           <th bgcolor="yellow">音樂</th>
           <th bgcolor="yellow">英語</th>
           <th bgcolor="yellow">品生</th>
           <th bgcolor="yellow">語文</th>
        </tr>
        <tr bgcolor="lightgreen">
            <th bgcolor="yellow">計(jì)算機(jī)</th>
            <th bgcolor="yellow">體育</th>
            <th bgcolor="yellow">興趣</th>
            <th bgcolor="yellow">興趣</th>
            <th bgcolor="yellow">班會(huì)</th>
        </tr>
        <tr bgcolor="lightgreen">
            <th bgcolor="yellow">美術(shù)</th>
            <th bgcolor="yellow">數(shù)學(xué)</th>
            <th bgcolor="yellow">興趣</th>
            <th bgcolor="yellow">興趣</th>
            <th bgcolor="yellow"></th>
        </tr>
    </tbody>
<tfoot>
    <tr bgcolor="pink">
        <td colspan="6">注意：每天僅帶需要上課的書本就行，不允許帶水果、玩具進(jìn)教室！</td>
    </tr>
</tfoot>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：css用的熟了，直接用選擇器，關(guān)于表格那就能少寫不少代碼