简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Web 前端 - HTML - 列表、表格和内联框架以及其他一些常用的元素
Blogger Information
Blog 33
fans 0
comment 0
visits 27666
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Web 前端 - HTML - 列表、表格和内联框架以及其他一些常用的元素
郴
Original
1059 people have browsed it

Web 前端 - HTML - 列表、表格和内联框架以及其他一些常用的元素

一、列表

1. 源码

  1. <ul>
  2.   <li>列表1</li>
  3.   <li>列表2</li>
  4.   <li>列表3</li>
  5.   <li>列表4</li>
  6. </ul>
  7. <ol>
  8.   <li>列表1</li>
  9.   <li>列表2</li>
  10.   <li>列表3</li>
  11.   <li>列表4</li>
  12. </ol>

2. 分析

序号 标签 描述
1 <ul> 定义无序列表
2 <ol> 定义有序列表
3 <li> 定义列表项
  • 列表分为无序列表和有序列表
  • 无序列表无排列顺序可言，而有序列表根据排列顺序排列
  • 无序列表在编排内容块时很常用
  • 列表是前端三大重要元素中的其中一个，其他两个分别为表格和表单

二、表格

  • 表格用来展示并列出详细数据时极其方便
  • 表格是前端三大重要元素中的其中一个，其他两个分别为列表和表单

1. 标签

序号 标签 描述
1 <table> 定义表格
2 <colgroup> 对表格中的列进行格式化
3 <col> 对表格中的列应用样式
4 <caption> 定义表格的标题
5 <thead> 定义表格的表头内容
6 <tbody> 定义表格的主体内容
7 <tfoot> 定义表格的底部内容
8 <tr> 定义行
9 <th> 定义表头单元格
10 td 定义单元格

2. 属性

序号 属性 描述 适用元素
1 border 添加表格框 <table>
2 cellspacing 设置单元格边框间隙 <table>
3 cellpadding 设置单元格内边距 <table>
4 span 设置横跨的列的数量 <col>
5 colspan 设置整合行的单元格的数量 <td>
6 rowspan 设置整合列的单元格的数量 <td>
7 align 设置单元格内容水平居中 所有元素
8 bgcolor 设置背景色 所有元素
9 width 设置宽度 所有元素
10 height 设置高度 所有元素

3. 实例

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>表格</title>
  8. </head>
  10. <body>
  11.   <table border="1" cellspacing="0" align="center" width="400px">
  12.     <colgroup>
  13.       <col bgcolor="lightgreen" />
  14.       <col span="3" bgcolor="lightpink" />
  15.     </colgroup>
  16.     <caption style="font-size: larger; font-weight: bold; margin-bottom: 5px;">员工信息表</caption>
  17.     <thead align="center">
  18.       <tr>
  19.         <th>所属部门</th>
  20.         <th>姓名</th>
  21.         <th>性别</th>
  22.         <th>手机号码</th>
  23.       </tr>
  24.     </thead>
  25.     <tbody align="center">
  26.       <tr>
  27.         <td rowspan="2">开发部</td>
  28.         <td>贾皓轩</td>
  29.         <td>男</td>
  30.         <td>1351685****</td>
  31.       </tr>
  32.       <tr>
  33.         <!--<td>开发部</td>-->
  34.         <td>戴建明</td>
  35.         <td>男</td>
  36.         <td>1558494****</td>
  37.       </tr>
  38.     </tbody>
  39.     <tbody align="center">
  40.       <tr>
  41.         <td rowspan="2">测试部</td>
  42.         <td>徐滨海</td>
  43.         <td>男</td>
  44.         <td>1583131****</td>
  45.       </tr>
  46.       <tr>
  47.         <!--<td>测试部</td>-->
  48.         <td>沈婉</td>
  49.         <td>女</td>
  50.         <td>1769782****</td>
  51.       </tr>
  52.     </tbody>
  53.     <tfoot align="center">
  54.       <tr>
  55.         <td>备注</td>
  56.         <td colspan="3">离职需要提前30天申请</td>
  57.         <!--<td></td>-->
  58.         <!--<td></td>-->
  59.       </tr>
  60.     </tfoot>
  61.   </table>
  62. </body>
  64. </html>

三、内联框架

  • html5 中只保留了内联框架元素<iframe>
  • 常用属性
属性 描述
src 框架中加载的页面 URL
srcdoc 直接赋值 html 代码
name 框架名称,与<a target=""配合
scrolling 是否显示滚动条, yes/no/auto
width 框架宽度
height 框架高度
frameborder 是否显示框架边框
marginheight 设置框架上下外边距
marginwidth 设置框架左右外边距

四、其他元素

1. 结构元素

序号 标签 描述
1 <div> 定义一个区块
2 <span> 定义一个行内区块

2. 语义化结构元素

序号 标签 描述
1 <header> 定义头部部分
2 <main> 定义主体部分
3 <section> 定义某区域部分
4 <aside> 定义侧边栏内容部分
5 <footer> 定义底部部分

3. 文本元素

序号 标签 描述
1 <h1>-<h6> 定义标题，数字越小标题尺寸越大
2 <p> 定义段落
3 <pre> 定义预格式化文本
4 <code> 定义代码
5 <strong> 定义头部部分

4. 链接、图像和音视频

序号 标签 描述
1 <link> 定义文档与外部资源的关系
2 <a> 定义超链接
3 <img> 定义图像
4 <audio> 定义音频
5 <video> 定义视频
6 <source> 定义音视频的资源

五、课程总结

  • 今天学习了HTML中常用的标签，通过上课认真听讲和认真完成老师布置的作业，使得我对HTML的理解和运用更加深入和熟悉。最主要的知识点是明白了列表、表格和表单在网页制作和网站开发中的重要性，以及了解并熟悉了列表、表格和其他一些常用标签的用法。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：标签是基础
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！