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 经典布局方式

  1. <div class="header">header</div>
  2. <div class="main">main</div>
  3. <div class="footer">footer</div>

2.2 语义化布局元素

  1. <header>header</header>
  2. <main>main</main>
  3. <footer>footer</footer>

备注：
为什么还是有大量的开发者, 喜欢用 div + class 模式, 不用语义化布局标签?
1.目前项目90%以上是基于移动端的, 不依赖搜索引擎优化。
2.语义化标签还是数量太少了, 不如用class来描述更精准。

3. 图片/链接/列表

3.1 图片(img)

图片是外部资源，是通过标签引入到当前HTMl中的；
引入外部标签，通常使用“单标签”。

  1. <img src="https://img.php.cn/upload/aroundimg/000/000/001/62b28bed0afe0115.png" alt="20期" width="200">

效果如下：

20期

3.1 链接(a)

  1. <a href="https://php.cn" target="_blank">php.cn</a> 20期开班啦

效果如下：

3.3 列表（ul/ol/dl）

ul:无序列表
ol:有序列表
dl:自定义列表

  1. <!-- 自定义列表: 类似名词解释 -->
  2. <dl>
  3.     <!-- 标题 -->
  4.     <dt>地址:</dt>
  5.     <!-- 内容:解释 -->
  6.     <dd>贵阳市观山湖</dd>
  7. </dl>

效果如下：

3.4 图片/链接/列表 组合使用

图片，链接，通常不会单独使用,而是与其它元素组合使用。

  1. <style>
  2.    /* 去掉li的小圆点 */
  3.    ul,li{list-style:none;}
  4. </style>
  5. <ul>
  6.     <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220622/fff6ec91ec83a015333dfa45d0999d6b.jpeg" alt="" width="200"></a></li>
  7.     <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220630/50b5233d9fb6d04960b50a6eacc6f689.jpeg" alt="" width="200"></a></li>
  8.     <li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/977/20220702/4da9bd93a115fa046ccaed3be13308c4.jpeg" alt="" width="200"></a></li>
  9. </ul>

效果如下：

4.表格元素

table：表格标签。
caption：表格标题。
thead：表头，可选。
tbody：表内容，必选。
tfoot：表尾，可选。
tr：行，必须先画行, 然后再一行中划分列(单元格)。
th/td：划分列（单元格）。
其中th内置了【style=”text-align:center;font-weight:bold”】的td标签。
rowspan：跨行（垂直）合并。
colspan：跨列（水平）合并。

应用场景-使用表格制作课程表

代码块：

  1. <style>
  2.       td {
  3.         /* 文字居中 */
  4.         text-align: center;
  5.       }
  6.       caption {
  7.         /* 设置标题大小、标题与表的间距 */
  8.         font-size: 25px;
  9.         margin-bottom: 5px;
  10.       }
  11.       th{
  12.        /* 表头背景颜色 */
  13.         background-color: antiquewhite;
  14.       }
  15. </style>
  16. <table border="1" width="600" cellpadding="0" cellspacing="0">
  17.       <caption>
  18.         学生信息表
  19.       </caption>
  20.       <thead>
  21.         <tr>
  22.           <th colspan="2">时间</th>
  23.           <th>星期一</th>
  24.           <th>星期二</th>
  25.           <th>星期三</th>
  26.           <th>星期四</th>
  27.           <th>星期五</th>
  28.         </tr>
  29.       </thead>
  30.       <tbody>
  31.         <tr>
  32.           <td colspan="7">课件操8:00~8:30</td>
  33.         </tr>
  34.         <tr>
  35.           <td rowspan="5" bgcolor="lightgreen">上午</td>
  36.           <td>第一节<br />8:30~9:10</td>
  37.           <td>语文</td>
  38.           <td>语文</td>
  39.           <td>语文</td>
  40.           <td>语文</td>
  41.           <td>数学</td>
  42.         </tr>
  43.         <tr>
  44.           <td>第二节<br />9:20~10:00</td>
  45.           <td>语文</td>
  46.           <td>语文</td>
  47.           <td>语文</td>
  48.           <td>语文</td>
  49.           <td>语文</td>
  50.         </tr>
  51.         <tr>
  52.           <td colspan="6">眼操 10:00~10:05</td>
  53.         </tr>
  54.         <tr>
  55.           <td>第三节<br />10:15~10:55</td>
  56.           <td>数学</td>
  57.           <td>数学</td>
  58.           <td>语文</td>
  59.           <td>英语</td>
  60.           <td>英语</td>
  61.         </tr>
  62.         <tr>
  63.           <td>第四节<br />11:05~11:45</td>
  64.           <td>体育</td>
  65.           <td>数学</td>
  66.           <td>语文</td>
  67.           <td>数学</td>
  68.           <td>数学</td>
  69.         </tr>
  71.         <tr>
  72.           <td colspan="7">午休时间</td>
  73.         </tr>
  74.         <tr>
  75.           <td rowspan="8" bgcolor="lightgreen">下午</td>
  76.           <td colspan="7">到校时间 13:50</td>
  77.         </tr>
  78.         <tr>
  79.           <td colspan="7">午写 13:55~14:10</td>
  80.         </tr>
  81.         <tr>
  82.           <td>第五节<br />14:15~14:555</td>
  83.           <td>思品</td>
  84.           <td>美术</td>
  85.           <td>体育</td>
  86.           <td>音乐</td>
  87.           <td>体育</td>
  88.         </tr>
  89.         <tr>
  90.           <td colspan="6">眼操 14:55~15:00</td>
  91.         </tr>
  92.         <tr>
  93.           <td>第六节<br />15:10~15:50</td>
  94.           <td>音乐</td>
  95.           <td>英语</td>
  96.           <td>思品</td>
  97.           <td>形体</td>
  98.           <td>美术</td>
  99.         </tr>
  100.         <tr>
  101.           <td>第七节<br />16:00~16:40</td>
  102.           <td>班会</td>
  103.           <td>围棋</td>
  104.           <td>象棋</td>
  105.           <td>书法</td>
  106.           <td>例会</td>
  107.         </tr>
  108.         <tr>
  109.           <td colspan="6">放学时间 16:40</td>
  110.         </tr>
  111.       </tbody>
  112. </table>

效果预览：

更多相关文章

  1. 使用HTML标签制作简单的导航和课程表
  2. HTML常用标签属性以及应用场景/怎么用表格做一个课程表
  3. HTML课堂笔记-0704
  4. Android简单自定义布局介绍
  5. Android(安卓)自定义属性时TypedArray的使用方法
  6. Android(安卓)View动画——Alpha、scale等属性用法
  7. Android(安卓)属性动画（Property Animation） 完全解析 （上）
  8. android:name 的秘密
  9. android RelativeLayout常用属性

随机推荐

  1. Android 允许权限
  2. android中文字跑马灯效果
  3. Android日期时间格式国际化
  4. android 颜色值 xml
  5. Android Property System
  6. 【Android UI】色板
  7. AndroidщАЪш┐ЗViewPagerхоЮчО
  8. 在eclipse中查看Android(安卓)SDK源代码
  9. 2013.10.14 “？android ”
  10. 默认的Android(安卓)Dialog 样式