目录
一、列表标签与表格标签要点
二、列表 LIST
(一)有序列表:
(二)无序列表:
(三)自定义(相互嵌套使用)
三、表格标签 TABLE
(一)表格标签
(二)行列标签
(三)合并
(四)示例
一、列表标签与表格标签要点
二、列表 LIST
(一)有序列表:
<ol></ol>
type类型有:
A,B ,C, ......
a,b,c,......
1,2,3,......
按大写罗马数字排序
按 小写罗马数字排序
<strong><font size="50">搜索引擎排名</font></strong>
<ol>
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sogou</li>
</ol>
效果图:
(二)无序列表:
<ul></ul>
type类型:
disc——实心圆
circle——空心圆
square——实心方块
<strong><font size="50">软件编程语言</font></strong>
<ul type="disc">
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
效果图:
(三)自定义(相互嵌套使用)
<strong><font size="50">健康食品</font></strong>
<ol>
<ul>水果</ul>
<ul>
<ul>苹果</ul>
<ul>香蕉</ul>
</ul>
<ul>蔬菜</ul>
<ul>
<ul>西兰花</ul>
<ul>菠菜</ul>
</ul>
</ol>
效果图:
三、表格标签 TABLE
(一)表格标签 <table>
属性:
width:宽
height:高
border:边框
cellspacing:外边距
align:水平对齐方式 "left" "center" "right"
valign:垂直对齐方式 "top" "middle" "bottom"
bgcolor:背景颜色
(二)行列标签
<tr>:行
<td>:列
属性:
align:水平对齐方式——center,left,right
bgcolor:背景色
(三)合并
属性:
colspan:合并列
rowspan:合并行
(四)示例
<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>
<h1 align="center">小说排行榜</h1>
<table align="center" border="1px" width="50%" height="150px" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th colspan="3">相关链接</th>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/up.jpg"/></td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jpg"/></td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/up.jpg"/></td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
</tr>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
<tr align="center">
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="贴吧.html">贴吧</a></td>
<td><a href="图片.html">图片</a></td>
<td><a href="百科.html">百科</a></td>
</table>
</body>
</html>
在表格标签中可以用<img>标签插入图片,以及<a href=" "></a>实现超链接的跳转等。
效果图: