元素的四种属性
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>