目录
列表标签
列表标签分为有序列表和无序列表
无序列表
格式如下
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
然后它的type属性有四种情况：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
这里来测试一下默认的情况，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul id="a">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</body>
</html>
结果如下
然后再来实现剩下的三个
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--type=disc的情况-->
<ul type="disc">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<!--type=circle的情况-->
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--type=square的情况-->
<ul type="square">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--type=none的情况-->
<ul type="none">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
结果如下图
注意点
上面无序列表标签的属性已经被弃用了，目前采用css的形式来使用
格式如下
<ul style="list-style-type: 还是以前那些属性名">
<li></li>
<li></li>
<li></li>
</ul>
然后代码修改如下
<!--无序标签的新情况-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--type=disc的情况-->
<ul style="list-style-type: disc">
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<!--type=circle的情况-->
<ul style="list-style-type:circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--type=square的情况-->
<ul style="list-style-type:square">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!--type=none的情况-->
<ul style="list-style-type:none">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
结果如图
效果还是没有什么变化，就是格式修改了。
有序列表标签
基本的格式如下
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
带属性的格式如下
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
start属性：数字是几就会从几开始推，这里是1它就从1开始
下面来实现带属性的情况
代码如下
<!--有序列表标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序标签</title>
</head>
<!--type是1的情况-->
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
<!--type是A的情况-->
<ol type="A" start="1">
<li>1</li>
<li>2</li>
</ol>
<!--type是a的情况-->
<ol type="a" start="1">
<li>3</li>
<li>4</li>
</ol>
<!--type是I的情况-->
<ol type="I" start="1">
<li>5</li>
<li>6</li>
</ol>
<!--type是i的情况-->
<ol type="i" start="1">
<li>7</li>
<li>8</li>
</ol>
<body></body>
</html>
结果如图
标题标签
格式如下
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
然后这里就以格式为例子演示结果
表格标签
首先表格标签不止一个标签，它是多个标签的总和
数据单元格快捷方式
table>tr*2>td{}
表头单元格快捷方式
table>tr*2>th{}
1.定义表格（table标签）
定义表格，所有其他表格标签都必须包含在 <table> 标签内。
<table>
<!-- 表格内容 -->
</table>
2.行（tr标签）
定义表格的行（行），必须包含在 <table> 内。通常包含一个或多个 <td> 或 <th> 元素。
<table>
<tr>
<!-- 行内容 -->
</tr>
</table>
3.表头单元格（th标签）
定义表头单元格，用于标识表格列的标题。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
4.数据单元格（td标签）
定义数据单元格，用于存储表格中的数据。
<table>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
5.表格标题（caption标签）
定义表格标题，通常放在 <table> 标签之内，但在 <thead> 之前。
<table>
<caption>学生信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
6.头部部分（thead标签）
定义表格的头部部分，包含表头行（<tr>），通常包含在 <table> 标签内。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
7.主体部分（tbody标签）
定义表格的主体部分，包含数据行（<tr>），通常包含在 <table> 标签内。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</tbody>
</table>
8.表格页脚（tfoot标签）
定义表格的页脚部分，通常包含在 <table> 标签内。通常用于显示汇总信息。
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>55</td>
</tr>
</tfoot>
</table>
这里将上面的八个内容融合在一起使用代码如下
<!--表格标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
</head>
<body>
<table>
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td>韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
效果如图
然后就是table标签属性的用法
属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
1.border属性：
格式
<table broder="添加数字">
<!-- 表格内容 -->
</table>
这里添加数字的大小会影响外边框最后的效果
代码
<!--表格标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td>韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
结果如图
2.cellpadding属性：
格式
<table cellpadding="添加数字">
<!-- 表格内容 -->
</table>
这里添加数字影响的是内边距的效果
代码(与border一起来显示效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10" cellpadding="20">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td>韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
效果如图
3.cellspacing属性：
格式
<table cellspacing="添加数字">
<!-- 表格内容 -->
</table>
这里添加数字影响的是外边距的效果，一般不用效果不好看
例子代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="20">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td>韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
结果如图
width属性
格式
<table width="添加数字还有px">
<!-- 表格内容 -->
</table>
要按照css来设置长度所以最后要有px这个元素，尽量在css里面来设计。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="10" width="10px">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td>韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
结果如图
5.rowspan属性
格式如下
<table>
<tr>
<td rowspan="数字">
内容
</td>
</tr>
</table>
里面的数字是几就会合并多少行的单元格
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="10" width="10px">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td rowspan="3">韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
效果如图
6.colspan属性
格式如下
<table>
<tr>
<td colspan="数字">
内容
</td>
</tr>
</table>
里面的数字是几就会合并多少列的单元格
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
#td1 {
background-color: chocolate;
}
</style>
</head>
<body>
<table border="10" cellpadding="10" cellspacing="10" width="10px">
<!--表格标题-->
<caption>学生信息</caption>
<!--头部部分-->
<thead>
<!--行-->
<tr>
<!--表头单元格-->
<th>姓名</th>
<th>学校</th>
<th>年龄</th>
</tr>
</thead>
<!--主体部分-->
<tbody>
<tr>
<!--数据单元格-->
<td colspan="3">韩</td>
<td>xxxx学校</td>
<td>16</td>
</tr>
<tr>
<td>君</td>
<td>xxxx学校</td>
<td>17</td>
</tr>
<tr>
<td id="td1">
<a href="https://i.cnblogs.com/posts/edit">后台</a>
</td>
</tr>
</tbody>
<!--表格页脚-->
<tfoot>
<td>年龄</td>
<td>总和33</td>
</tfoot>
</table>
</body>
</html>
效果如图
还有一个特别的属性就是高度和宽度
就是在th和td标签里面定义
格式如下
<table>
<tr>
<td height="数字+px" width="数字+px">
内容
</td>
</tr>
</table>
这里面的格式td也是th的格式
测试代码为修改前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>666</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>君</td>
<td>17</td>
</tr>
</table>
</body>
</html>
效果图
修改代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>666</title>
</head>
<body>
<table border="1">
<tr>
<th height="100px" width="100px">姓名</th>
<th height="100px" width="100px">年龄</th>
</tr>
<tr>
<td height="100px" width="100px">君</td>
<td height="100px" width="100px">17</td>
</tr>
</table>
</body>
</html>
效果如图
基本标签
如图
代码
<!--基本标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<b>加粗</b>
<i>斜体字</i>
<u>下划线</u>
<s>删除符</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<br>换行符
<hr>
</body>
</html>
效果如图
块级标签
div标签通常情况下就是一种容器
例子如下
<!--块级标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h3 style="color: lightpink">标题3</h3>
<p>这是段落</p>
</div>
</body>
</html>
结果如图
特殊符号如何在html实现的方法
如图
然后代码如下
<!--特殊字符的实现-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
空 格 <br>
大于号><br>
小于号<<br>
特别符号&<br>
人民币¥<br>
版权©<br>
注册®<br>
</body>
</html>
效果如图
上面的特殊字符主要需要记忆的是空格的用法。
标签：11,块级,xxxx,表格,标签,年龄,特殊符号,如图,属性 From： https://www.cnblogs.com/slzjb/p/17813730.html