html元素属性及常用布局标签的介绍，附案例！

元素的四种属性

1. 通用属性(几乎所有的元素都有)

id用来表示页面中的唯一元素
class用来表示同类元素
style用来自定义某个元素的样式

2. 预置属性（通用属性的一个子集）

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

a标签和img标签中的href/src/alt都属于预置属性

3. 事件属性（有一个通用前缀：on+事件名称）

4. 自定义属性（有一个通用前缀：data-）

常用的布局标签

header头部
main主体
footer页脚
hr水平分割线

“图片”是外部资源，通过标签引入到html中，通常使用单标签
<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标题
dd说明

<dl>
    <dt>地址:</dt>
    <dd>xx省xx市xx区</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>

表格元素

用“组合元素”表示,表格中的数据必须放在“单元格”中
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">数学</th>
           <th bgcolor="yellow">品生</th>
           <th bgcolor="yellow">语文</th>
        </tr>
        <tr bgcolor="lightgreen">
           <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">英语</th>
            <th bgcolor="yellow">体育</th>
            <th bgcolor="yellow">体育</th>
        </tr>
        <tr bgcolor="lightgreen">
            <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">英语</th>
           <th bgcolor="yellow">品生</th>
           <th bgcolor="yellow">语文</th>
        </tr>
        <tr bgcolor="lightgreen">
            <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">兴趣</th>
            <th bgcolor="yellow">兴趣</th>
            <th bgcolor="yellow"></th>
        </tr>
    </tbody>
<tfoot>
    <tr bgcolor="pink">
        <td colspan="6">注意：每天仅带需要上课的书本就行，不允许带水果、玩具进教室！</td>
    </tr>
</tfoot>