目录
一、段落、标题与格式化文本
1.段落标签
- <p>标签用来包装段落文本
如果要在网页中显示一段文字，可以用<p>标签包围，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>2016年12月，皇族电竞俱乐部（上饶乐游网络科技有限公司）在江西上饶投资3亿元建设的上饶市电竞产业总部基地项目正式开工，
该项目位于上饶高铁经济试验区，占地约41亩，规划建设电子竞技场馆、电竞企业总部、电竞主题公寓、品牌研发中心、
培训基地和电竞体验馆等，采用开放式建筑结构，通过不同主题店面给玩家提供集交流、练习和体验为一体的平台，弘扬积极、健康的电竞理念。
同时该项目从专业电竞人员的培训、比赛、日常生活配套到普通群众观赛、体验、相关商业服务，再到电竞企业总部办公、电竞专业研发等，
打造一座全方位的主题电竞产业园。</p>
<p>2016年7月20日，皇族电子竞技俱乐部出品的节目《皇话》正式上线，节目以问答的方式，展现选手们真实的一面。</p>
</body>
</html>网页显示效果：
- 可以看到，段落之间有一个空行隔开。这时因为<p>标签是典型的块元素标签，独占一行显示。总是从新的一行开始，默认独占一行。
2.标题标签
- 网页标题是通过<h>标签表示；
- 有<h1>~<h6>六个级别，数字越大字号越小；
- 一般网页常用前三个级别，因为过多的标题级别对搜索引擎来说极不友好；
- 一般一个网页中只有一个<h1>标签，其余一般用<h2>或<h3>来表示。
下面这段代码演示六个级别的标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>山东大学</h1>
<h2>山东大学</h2>
<h3>山东大学</h3>
<h4>山东大学</h4>
<h5>山东大学</h5>
<h6>山东大学</h6>
</body>
</html>
网页显示效果：
为之前的段落文本加上标题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>团队主场</h2>
<p>2016年12月，皇族电竞俱乐部（上饶乐游网络科技有限公司）在江西上饶投资3亿元建设的上饶市电竞产业总部基地项目正式开工，
该项目位于上饶高铁经济试验区，占地约41亩，规划建设电子竞技场馆、电竞企业总部、电竞主题公寓、品牌研发中心、
培训基地和电竞体验馆等，采用开放式建筑结构，通过不同主题店面给玩家提供集交流、练习和体验为一体的平台，弘扬积极、健康的电竞理念。
同时该项目从专业电竞人员的培训、比赛、日常生活配套到普通群众观赛、体验、相关商业服务，再到电竞企业总部办公、电竞专业研发等，
打造一座全方位的主题电竞产业园。</p>
<h2>团队文化</h2>
<p>2016年7月20日，皇族电子竞技俱乐部出品的节目《皇话》正式上线，节目以问答的方式，展现选手们真实的一面。</p>
</body>
</html>
网页显示效果：
3.格式化标签
- 将HTML文档中的内容原样输出特别适合代码等，需要格式化输出的数据，用<pre>标签实现。
比如格式化输出辛弃疾的这首词：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<pre>
青玉案·元夕
【作者】辛弃疾 【朝代】宋 译文对照
东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。
</pre>
</body>
</html>
网页显示效果(原样输出):
二、行内文本标签详解
- 时间标签<time>用于包装文本中的时间，突出不同
- 地点标签<address>用于包装文本中的地点，突出不同，被包装内容会斜体独占一行显示在网页中
- 如果想对文本中的部分内容添加删除线效果，可以使用<del>或者<s>包装，二者的显示效果相同，语义不同。<del>有强调含义，<s>仅仅就是添加一个删除线。
- 如果想对文本中的部分内容添加下滑线效果，可以使用<ins>或者<u>包装，二者的显示效果相同，语义不同。<ins>有强调含义，<u>仅仅就是添加一个下滑线。
- 如果想对文本中的部分内容加黑加粗，可以使用<strong>或者<b>包装，二者的显示效果相同，语义不同。<strong>有强调含义，<b>仅仅对文本加黑加粗。
- 如果想对文本中的部分内容添加斜体效果，可以使用<em>或者<i>包装，二者的显示效果相同，语义不同。<em>有强调含义，<i>仅仅就是添加斜体效果。
- 如果想将文本中的部分内容高亮显示，可以使用<mark>包装。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>今天下午<time>4点到6点</time>，在<address>小会议室</address>开会。</p>
<hr>
<p>苹果MacBook Pro原价：<del>13999元</del>，现价：9999元。</p>
<p>苹果MacBook Pro原价：<s>13999元</s>，现价：9999元。</p>
<hr>
<p>PHP中文网是一个<ins>永久免费</ins>的学习平台。</p>
<p>PHP中文网是一个<u>永久免费</u>的学习平台。</p>
<hr>
<p>中国强烈<strong>反对韩国部署萨德</strong>反导系统。</p>
<p>中国强烈<b>反对韩国部署萨德</b>反导系统。</p>
<hr>
<p>中国强烈<em>反对韩国部署萨德</em>反导系统。</p>
<p>中国强烈<i>反对韩国部署萨德</i>反导系统。</p>
<hr>
<p>PHP中文网是一个<mark>永久免费</mark>的学习平台。</p>
</body>
</html>
网页显示效果：
- 用<code>标签包装文本的一段代码。代码的特点是用等宽字体表示。一般与<pre>配对使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
int i;
for(i=0;i<100;i++)
printf("%d\n",i);
</p>
<pre>
<code>
int i;
for(i=0;i<100;i++)
printf("%d\n",i);
</code>
</pre>
</body>
</html>
网页显示效果：
三、数据展示利器--表格
- 表格用<table>标签包围
- <table>标签主要有三个常用的属性。border属性(设置表格边框宽度),cellspacing属性(设置单元格之间的间隙大小），cellpadding属性(设置单元格中的内容与单元格边框的距离）
- 表格实例：
由上图可见，表格标题被<caption>包围，头部用<thead>包围，主体用<tbody>包围，主体中的行用<tr>包围，行中的单元格用<td>包围。底部用<tfoot>包围(可有可无)。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<caption>江湖精英班成绩表</caption>
<thead>
<td>姓名</td>
<td>PHP</td>
<td>Python</td>
<td>Java</td>
</thead>
<tr>
<td>郭靖</td>
<td>90</td>
<td>84</td>
<td>89</td>
</tr>
<tr>
<td>洪七</td>
<td>76</td>
<td>69</td>
<td>93</td>
</tr>
<tr>
<td>杨康</td>
<td>68</td>
<td>79</td>
<td>43</td>
</tr>
<tr>
<td>黄蓉</td>
<td>99</td>
<td>98</td>
<td>95</td>
</tr>
<tr>
<td>欧阳锋</td>
<td>87</td>
<td>74</td>
<td>96</td>
</tr>
<tfoot>
<td>平均成绩</td>
<td>84</td>
<td>80</td>
<td>83</td>
</tfoot>
</table>
</body>
</html>
网页显示效果:
- 表格的跨行和跨列合并(不规则表格）
首先找到需要跨行或跨列显示的单元格，在其<td>中添加rowspan或colspan属性实现该单元格的跨行或跨列显示。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<caption>江湖精英班成绩表</caption>
<thead>
<td>姓名</td>
<td>PHP</td>
<td>Python</td>
<td>Java</td>
</thead>
<tr>
<!-- 该单元格跨两行两列进行合并，并覆盖的单元格失效，删除 -->
<td colspan="2" rowspan="2">郭靖</td>
<td>84</td>
<td>89</td>
</tr>
<tr>
<td>69</td>
<td>93</td>
</tr>
<tr>
<td>杨康</td>
<td>68</td>
<td>79</td>
<td>43</td>
</tr>
<tr>
<td colspan="2">黄蓉</td>
<td>98</td>
<td>95</td>
</tr>
<tr>
<td>欧阳锋</td>
<td>87</td>
<td>74</td>
<td>96</td>
</tr>
<tfoot>
<td>平均成绩</td>
<td>84</td>
<td>80</td>
<td>83</td>
</tfoot>
</table>
</body>
</html>
网页显示效果：
四、生动网页之源--图片元素
- 网页中显示的图片用<img>包装。<img>主要有以下几个属性：src属性用于指定要显示的图片地址(可以是本地的也可以是网络上的);height,width属性用于设置图片的高度和宽度(一般设置一个，另一个等比缩放);alt属性添加图片的说明(一般要设置，便于用户和浏览器知道图片内容)
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539334216729&di=3e3bff13069449dbb5f8eff0b52a1721&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F19%2F20150419H0208_RfBSL.jpeg" alt="柯南" height="500">
</body>
</html>
网页显示效果：
五、有序列表与无序列表
1.有序列表
- 有序列表用<ol>包装，其中的每一个列表项用<li>包装，每个列表项前有一个序号，默认从1开始。
- <ol>主要有reversed和start两个属性。reversed逆序排列；start设置第一个列表项从序号几开始。
- <li>有value属性，设置该列表项以及之后从序号几开始。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ol>
<li>学机器学习</li>
<li>做实习工作</li>
<li>学PHP</li>
<li>整理笔记</li>
<li>写博客</li>
</ol>
<hr>
<ol reversed>
<li>学机器学习</li>
<li>做实习工作</li>
<li>学PHP</li>
<li>整理笔记</li>
<li>写博客</li>
</ol>
<hr>
<ol start="3">
<li>学机器学习</li>
<li>做实习工作</li>
<li>学PHP</li>
<li>整理笔记</li>
<li>写博客</li>
</ol>
<hr>
<ol>
<li>学机器学习</li>
<li>做实习工作</li>
<li value="10">学PHP</li>
<li>整理笔记</li>
<li>写博客</li>
</ol>
</body>
</html>
网页显示效果：
2.无序列表
- 无序列表常做导航或标题列表
- 无序列表用<ul>包装，每个列表项用<li>包装，每一个列表项前有一个小黑点。
- 有序列表和无序列表可互相嵌套
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ol>
<li>学机器学习</li>
<li>做实习工作</li>
<li value="10">学PHP</li>
<li>整理笔记</li>
<li>写博客</li>
<li>
<ul>
<li>鸡蛋20kg</li>
<li>苹果3kg</li>
<li>香蕉5kg</li>
<li>西瓜10kg</li>
</ul>
</li>
</ol>
<hr>
<ul>
<li>鸡蛋20kg</li>
<li>苹果3kg</li>
<li>香蕉5kg</li>
<li>西瓜10kg</li>
</ul>
</body>
</html>
网页显示效果：
3.描述列表
- 有三对标签<dl>,<dt>,<dd>
- 描述列表用<dl>包装；描述对象用<dt>包装；具体内容用<dd>包装
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>PHP中文网</h2>
<dl>
<dt>服务对象：</dt>
<dd>web开发新人。</dd>
<dt>服务宗旨：</dt>
<dd>打造国内领先的一站式永久免费的学习平台。</dd>
</dl>
</body>
</html>
网页显示效果：
