列表标签
1.有序列表(ol)
使用数字进行标记 开始标签: <ol> 列表项标签: <li>, <ol>是 ordered lists 的缩写 <li>是 list item 的缩写。
例如:<h2>搜索引擎排名</h2>
<ol type="1">
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sougou</li>
</ol>
效果如下
列表类型type取值
1(默认) | 使用数字作为项目符号 |
A/a | 使用大写/小写字母作为项目符号 |
I/i | 使用大写/小写罗马数字作为项目符号 |
2.无序列表(ul)
<ul>是 unordered lists 的缩写 <li>是使用圆点进行标记 开始标签: <ul> 列表项标签: <li> list item 的缩写。
例如:
<h2>软件编程语言</h2>
<ul type="disc">
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
效果如下:
列表类型type取之值
(默认) | 项目符号显示为实体圆心 |
square | 项目符号显示为实体方心 |
circle | 项目符号显示为空心圆 |
3.自定义列表 开始标签(dd)
<dl> 列表项标签: <dt> 列表定义标签: <dd>,<dl>是definition lists 的缩写 <dt>是 definition term 的缩写 <dd>是 definition description 的缩写。
例如:
<h2>健康食品</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>西兰花</dd>
<dd>菠菜</dd>
</dl>
效果如下:
表格标签
表格以“行”与“列”的方式展现数据。
- HTML 表格由 <table> 标签来定义
- 每个表格包含若干行,由 <tr> 标签定义 每行被分割为若干单元格,由 <td> 标签定义
- 数据单元格可以包含文本、图片、列表、表单、表格等
- 对表格进行更精确分组<caption> 表格标题 <thead> 表格头 <tbody> 表格体 <tfoot> 表格尾
表格合并列属性 colspan 将多列合并成一列,表格合并行属性 rowspan 将多行合并成一行。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" width="30%">
<caption>
<h4>小说排行榜</h4>
</caption>
<thead font-weight:bold;>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日 </th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下: