HTML常用标签及应用场景
一个页面就是一个HTML文档,CSS、JS都是寄生在HTML中的,是以标签的方式嵌入到HTML页面的。
1.属性类型
1.1 通用属性(id/class/style)
通用属性几乎所有元素都拥有。
id:用于表示页面中的唯一元素, 唯一性开发者自己保证,权重过大,尽量少用或不用,主要用在表单元素,锚点。
class:用于表示同类(相同特征)元素,具备样式复用的特征,推荐使用。
style:自定义某个元素的样式,权重大于外部样式。
1.2 预置属性
是通用属性的子集,id/class/style也是预置的属性,元素的默认属性。
比如:a标签中的href属性,img中的src/alt属性等。
1.3 事件属性
有一个通用的前缀:On+事件名称:事件属性。例如:onclick点击事件等。
1.4 自定义属性
有一个通用前缀: “data-”。
vue框架中有使用到大量的自定义属性:v-model,v-for,v-bind等,这些属性都是Vue框架开发者自定的属性。
2.布局标签
2.1 经典布局方式
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
2.2 语义化布局元素
<header>header</header>
<main>main</main>
<footer>footer</footer>
备注:
为什么还是有大量的开发者, 喜欢用 div + class 模式, 不用语义化布局标签?
1.目前项目90%以上是基于移动端的, 不依赖搜索引擎优化。
2.语义化标签还是数量太少了, 不如用class来描述更精准。
3. 图片/链接/列表
3.1 图片(img)
图片是外部资源,是通过标签引入到当前HTMl中的;
引入外部标签,通常使用“单标签”。
<img src="https://img.php.cn/upload/aroundimg/000/000/001/62b28bed0afe0115.png" alt="20期" width="200">
效果如下:
3.1 链接(a)
<a href="https://php.cn" target="_blank">php.cn</a> 20期开班啦
效果如下:
3.3 列表(ul/ol/dl)
ul:无序列表
ol:有序列表
dl:自定义列表
<!-- 自定义列表: 类似名词解释 -->
<dl>
<!-- 标题 -->
<dt>地址:</dt>
<!-- 内容:解释 -->
<dd>贵阳市观山湖</dd>
</dl>
效果如下:
3.4 图片/链接/列表 组合使用
图片,链接,通常不会单独使用,而是与其它元素组合使用。
<style>
/* 去掉li的小圆点 */
ul,li{list-style:none;}
</style>
<ul>
<li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220622/fff6ec91ec83a015333dfa45d0999d6b.jpeg" alt="" width="200"></a></li>
<li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220630/50b5233d9fb6d04960b50a6eacc6f689.jpeg" alt="" width="200"></a></li>
<li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220702/4da9bd93a115fa046ccaed3be13308c4.jpeg" alt="" width="200"></a></li>
</ul>
效果如下:
4.表格元素
table:表格标签。
caption:表格标题。
thead:表头,可选。
tbody:表内容,必选。
tfoot:表尾,可选。
tr:行,必须先画行, 然后再一行中划分列(单元格)。
th/td:划分列(单元格)。
其中th内置了【style=”text-align:center;font-weight:bold”】的td标签。
rowspan:跨行(垂直)合并。
colspan:跨列(水平)合并。
应用场景-使用表格制作课程表
代码块:
<style>
td {
/* 文字居中 */
text-align: center;
}
caption {
/* 设置标题大小、标题与表的间距 */
font-size: 25px;
margin-bottom: 5px;
}
th{
/* 表头背景颜色 */
background-color: antiquewhite;
}
</style>
<table border="1" width="600" cellpadding="0" cellspacing="0">
<caption>
学生信息表
</caption>
<thead>
<tr>
<th colspan="2">时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">课件操8:00~8:30</td>
</tr>
<tr>
<td rowspan="5" bgcolor="lightgreen">上午</td>
<td>第一节<br />8:30~9:10</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>第二节<br />9:20~10:00</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="6">眼操 10:00~10:05</td>
</tr>
<tr>
<td>第三节<br />10:15~10:55</td>
<td>数学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>第四节<br />11:05~11:45</td>
<td>体育</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td colspan="7">午休时间</td>
</tr>
<tr>
<td rowspan="8" bgcolor="lightgreen">下午</td>
<td colspan="7">到校时间 13:50</td>
</tr>
<tr>
<td colspan="7">午写 13:55~14:10</td>
</tr>
<tr>
<td>第五节<br />14:15~14:555</td>
<td>思品</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
<td>体育</td>
</tr>
<tr>
<td colspan="6">眼操 14:55~15:00</td>
</tr>
<tr>
<td>第六节<br />15:10~15:50</td>
<td>音乐</td>
<td>英语</td>
<td>思品</td>
<td>形体</td>
<td>美术</td>
</tr>
<tr>
<td>第七节<br />16:00~16:40</td>
<td>班会</td>
<td>围棋</td>
<td>象棋</td>
<td>书法</td>
<td>例会</td>
</tr>
<tr>
<td colspan="6">放学时间 16:40</td>
</tr>
</tbody>
</table>
效果预览: