<li> list 标签定义和用法:
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
<ol>标记:ordered list称为有序列表,编号列表标记。其功能是将文字段落向内缩进,
并在段落的每个项目前面加上1,2,3 有顺序的数字。<ol>标记必须搭配<li>标记使用。
<ul>标记:unordered list称为无序列表,其功能是将文字段落向内缩进,并在段落前面加上圆形或空心圆形
或方块等项目符号,以达到醒目的效果。<ul>必须搭配<li>标记使用。
html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。
<dl>:define list---定义列表
<dt>:define list title--用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。
<dd>:define list define--用于生成定义列表各列表项的说明文字段,重复使用可以定义
多个说明文字段。dd是对应dt的简短说明或解释。
1. img (src,alt,title)
列表:
把“1.png“ 放到程序的同级目录,把图片导入。
<img src="1.png">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="1.png"> </body> </html>
运行结果:
2.自己测试跳转的效果吧,把它包在a标签里面。
title="大美女": 把鼠标放到图片上的时候,会显示大美女三个字。
alt="美女":如果找不到图片的话,会显示美女这两个字在图片的位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.oldboyedu.com"> <img src="1.png" title="大美女" style="height:200px;200px" alt="美女"> </a> </body> </html>
3.列表
<ul>:<li>:前面是小黑点
<ol>:<li>:前面是数字
<dl>:表示分层,下面的 <dt>表示标题;下面的<dd>表示内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.oldboyedu.com"> <img src="1.png" title="大美女" style="height:200px;200px" alt="美女"> </a> <ul> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ul> <ol> <li>asdf</li> <li>asdf</li> <li>asdf</li> <li>asdf</li> </ol> <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl> </body> </html>
运行结果:
4. 表格,<tr>表示一行table row,<td>表示一列table data cell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <tr> <td>第1行,第1列</td> <td>第1行,第2列</td> <td>第1行,第3列</td> </tr> <tr> <td>第2行,第1列</td> <td>第2行,第2列</td> <td>第2行,第3列</td> </tr> </table> </body> </html>
运行结果:
5.实例,同上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>1.1.1.1</td> <td>8080</td> <td> <a href="s1.html">查看详细信息</a> </td> </tr> </table> </body> </html>
运行结果:
6. 表头, 规范的格式,建议用这个。个人感觉:“列“才是外国人认为放真正内容的地方。table--->row---->content(thead, table data cell)
<head> 中 <tr> 表示行table row,<th>表示列。table head
<tbody>中<tr>表示行table row,<td>表示列。table data cell
<th>则表示标题,一般用在一列的第一格,里面的内容会自动加粗加黑; <td>表示内容,不会自动加粗加黑。
<head>里面定义有几列,<body>里面定义一行一行的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </tbody> </table> <tr> <td>第1行,第1列</td> <td>第1行,第2列</td> <td>第1行,第3列</td> </tr> <tr> <td>第2行,第1列</td> <td>第2行,第2列</td> <td>第2行,第3列</td> </tr> </table> </body> </html>
运行结果:
插播一个小例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>Lily</td> <td>26</td> </tr> <tr> <td>Jack</td> <td>20</td> </tr> </tbody> </table> </body> </html>
运行结果:
6. 横向合并,一个占两列,同时去掉一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>5</td>
<td colspan="2">6</td>
<td>7</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
<tr>
<td>第1行,第1列</td>
<td>第1行,第2列</td>
<td>第1行,第3列</td>
</tr>
<tr>
<td>第2行,第1列</td>
<td>第2行,第2列</td>
<td>第2行,第3列</td>
</tr>
</table>
</body>
</html>
运行结果:
7.纵向合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>5</td> <td colspan="2">6</td> <td>7</td> </tr> <tr> <td rowspan="2">5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </tbody> </table> <tr> <td>第1行,第1列</td> <td>第1行,第2列</td> <td>第1行,第3列</td> </tr> <tr> <td>第2行,第1列</td> <td>第2行,第2列</td> <td>第2行,第3列</td> </tr> </table> </body> </html>
运行结果: