HTML常用标签三
2024-09-05 03:47:56
表格标签
表格的作用
表格主要用于显示、展示数据,因为他们可以让数据显示的非常规整,可读性非常好,特别是后台展示数据的时候,能够熟练运用表格就先的很重要,一个清爽简约的表格能够把繁杂的数据表现的很有条理。
表格的基本语法
<table>
<tr>
<td></td> </tr>
</table>
- <table></table> 用于定义表格的标签
- <tr></tr> 标签用于定义表格中的行,必须嵌套在<table></table> 标签中
- <td></td> 用于定义表格中的单元格,必须嵌套在<tr></tr> 标签中
表头单元格
- <th></th> 标签表示HTML表格的表头部分
表格属性
- 表格标签的属性在实际开发中不常用,后面通过CSS来设置
属性名 | 属性值 | 描述 |
---|---|---|
align | left\center\right | 规定表格相对周围的对齐方式 |
border | 1或者”“ | 桂东表格单元是否拥有边框,默认为”“,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其他内容之间的空白,默认1px |
cellspacinng | 像素值 | 规定单元格之间的空白,默认为2px |
width | 像素值或百分比 | 规定表格宽度 |
表格的结构标签
在表格标签中,分别用:<thead>标签表示表格的头部区域,<tbody> 表示表格的主体区域
合并单元格
- 确定是跨行还是跨列
- 找到目标单元,写上合并方式=合并的单元数量,比如;<td colspan="2"></td>
- 删除多余单元格
列表
列表分类
无序列表
- <ul> 标签定义无序列表,一般会以项目符号呈现表项,而列表项使用<li> 标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
- 无序列表的各项列表之间没有顺序级别之分,是并列的
- <ul> </ul> 中只能嵌套<li> </li> ,直接在<ul> </ul> 标签中输入其他标签或者文字的做法是不允许的
- <li> </li> 之间相当于一个容器,可以容纳所有元素
- 无序列表会带有自己的样式属性,但实际使用中,我们会使用CSS来设置
有序列表
- <ol> 标签定义有序列表,列表排序以数字来显示,而列表项使用<li> 标签定义
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- <ol> </ol> 中只能嵌套<li> </li> ,直接在<ol> </ol> 标签中输入其他标签或者文字的做法是不允许的
- <li> </li> 之间相当于一个容器,可以容纳所有元素
- 有序列表会带有自己的样式属性,但实际使用中,我们会使用CSS来设置
自定义列表
- 自定义列表常用于对术语或名词进行解释和描述,定义列表的列标前没有任何项目符号
- <dl> 标签用于自定义描述列表(或定义列表),该标签会与<dt> (定义项目/名字)和<dd> (描述每一个项目/名字)一起使用
<dl>
<dt>名词1</dt>
<dd>名词一解释1</dd>
<dd>名词一解释2</dd>
</dl>
- <dl> </dl> 中只能嵌套<dt> <dd>
- <dt> <dd>没有各数限制,经常一个<dt>对应多个<dd>
最新文章
- 信息中心网络 ,Information-centric networking, ICN
- 使用mutt+msmtp在Linux命令行界面下发邮件(续)
- C学习笔记
- 纯CSS下拉导航菜单
- 虚拟机安卓APK
- C#在图片上添加文字代码
- atitit.mp4&#160;视频文件多媒体格式结构详解
- ASP.NET MVC 3和Razor中的@helper 语法
- win下Maven安装和基本设置
- 【JavsScript】关于javascript的路线
- w3chtml页面和css书写规范
- Codeforces 126B. Password (KMP)
- inner join on (程序测试验证结果。) _学习贴
- SQLI DUMB SERIES-20
- BOM下的属性和方法---上
- Unity3d for beginners
- PLSQL_Oracle Exception异常分类、异常抛出、异常处理、异常传播(概念)
- Vue 获取数据、事件对象、todolist
- Java之RandomAccessFile小结
- Python导入模块-Import
热门文章
- Can not find the tag library descriptor for “http://java.sun.com/jstl/core";
- Elasticsearch核心技术与实战-简介
- 工作总结汇报公司介绍产品宣传品牌展示企业文化PPT模
- 转战物联网&#183;基础篇08-例说MQTT协议各控制报文
- docker实用命令
- android binder 进程间通信机制2 - Binder进程间通信库实现原理
- Linux 打开端口方法
- 反卷积(Transposed Convolution)
- LeetCode 1245 树的直径
- LeetCode 5127. 删除被覆盖区间 Remove Covered Intervals