<h2 style="color:#4abcde" id="catalog">阅读目录</h2>
- 介绍 <u>网页标题、文章标题、文章段落</u>
- 介绍 <u>字体大小、字体颜色、字体类型、字体位置、背景颜色</u>
- 介绍 <u>插入图片</u>
- 介绍 <u>网页内的超链接、网页间的超链接</u>
- 介绍 <u>有序列表、无序列表</u>
- 介绍 <u>表格制作</u>
- 介绍 <u>其他一些常用元素</u>
<h2 style="color:#4abcde" id="1">一、网页标题、文章标题、文章段落</h2>
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h1>这是文章标题</h1>
<h3>这是文章的标题</h3>
<p>这是一个段落</p>
</body>
</html>
运行结果为：
这是文章标题
这是文章的标题
这是一个段落
<font color="red"> 注意：
- 这里看不到网页标题，网页标题会显示在浏览器的网页标签上
- 文章的标题有 h1-h6 一共6种不同的表示，上面只演示了其中的两种
</font>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="2">二、字体大小、字体颜色、字体类型、字体位置、背景颜色</h2>
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p style="font-size:50px">改变字体的大小</p>
<p style="color:green">改变字体的颜色</p>
<p style="font-family:楷体">改变字体的类型</p>
<p style="text-align:right">改变字体的位置</p>
<p style="background-color:yellow">改变这段文字的背景颜色</p>
<p style="font-size:30px; color:#008000">改变字体的大小和字体的颜色</p>
</body>
</html>
运行结果为：
<p style="font-size:50px">改变字体的大小</p> <font color="green">改变字体的颜色</font> <font face="楷体">改变字体的类型</font> <p style="text-align:right">改变字体的位置</p> <p style="background:yellow">改变这段文字的背景颜色</p> <p style="font-size:30px; color:#008000">改变字体的大小和字体的颜色</p>
<font color="red"> 注意：
- 颜色可以用英文字母表示，也可以用十六进制码表示
- style 属性也可以用于标题，例如：< h1 style="color:blue" > 改变文章标题的颜色 < /h1 >
</font>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="3">三、插入图片</h2>
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245px" height="185px"/>
</body>
</html>
运行结果为：
<img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" title="名称探柯南" width="245px" height="185px"/>
<font color="red"> 注意：
- < img > 是一个空元素，没有关闭标签
- title 属性：当你把鼠标放在图片上方时，会出现提示信息
- 如何获得图片：在网络上找到一张图片，鼠标右键图片，选择复制图片地址，然后粘贴到 src 属性中即可
</font>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="4">四、网页内的超链接、网页间的超链接</h2>
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<a href="#head1">点击跳转到大标题</a>
<a href="#head3">点解跳转到小标题</a>
<h1 id="head1">这是网页内的超链接</h1>
<h3 id="head3">这是网页内的超链接</h3>
</body>
</html>
运行结果为：
<a href="#head1">点击跳转到大标题</a>
<a href="#head3">点解跳转到小标题</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1 id="head1">这是网页内的超链接</h1> <h3 id="head3">这是网页内的超链接</h3>
<font color="red"> 注意：
- 注意 href 属性的值和 id 属性的值，除了 # 这个符号外，其他要相匹配
</font>
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<h3>这是文字链接-点击文字跳转到百度</h3>
<a href="http://www.baidu.com">百度</a>
<h3>这是图片链接-点击图片跳转到百度</h3>
<a href="http://www.baidu.com"><img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245" height="185"/></a>
</body>
</html>
运行结果为：
<h3>这是文字链接-点击文字跳转到百度</h3> <a href="http://www.baidu.com">百度</a> <h3>这是图片链接-点击图片跳转到百度</h3> <a href="http://www.baidu.com"><img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245" height="185"/></a>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="5">五、有序列表、无序列表</h2>
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是有序列表：</p>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<p>这是无序列表：</p>
<ul>
<li>狗</li>
<li>猫</li>
<li>老鼠</li>
</ul>
</body>
</html>
运行结果为：
<p>这是有序列表：</p> <ol> <li>苹果</li><li>香蕉</li><li>梨</li> </ol>
<p>这是无序列表：</p> <ul> <li>狗</li><li>猫</li><li>老鼠</li> </ul>
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<p>这是嵌套列表：</p>
<ol>
<li>
<p>花</P>
<ul>
<li>玫瑰</li>
<li>百合</li>
</ul>
</li>
<li>
<p>树木</p>
<ul>
<li>柳树</li>
<li>榕树</li>
</ul>
</li>
</ol>
</body>
</html>
运行结果为：
<p>这是嵌套列表：</p> <ol> <li><p>花</P><ul><li>玫瑰</li><li>百合</li></ul></li> <li><p>树木</p><ul><li>柳树</li><li>榕树</li></ul></li> </ol>
<font color="red"> 注意：
- ol 的全称为 order list(有序列表)
- ul 的全称为 unorder list(无序列表)
- li 的全称为 list(列表)
</font>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="6">六、表格制作</h2>
代码1：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead style="color:red">
<tr>
<td>头部</td>
<td>头部</td>
<td>头部</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot style="color:green">
<tr>
<td>脚注</td>
<td>脚注</td>
<td>脚注</td>
</tr>
</tfoot>
</table>
</body>
</html>
运行结果为：
<table border="1px" width="50%"><thead style="color:red"><tr><td>头部</td><td>头部</td><td>头部</td></tr></thead><tbody style="color:blue"> <tr><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td></tr> <tr><td>内容</td><td>内容</td><td>内容</td></tr></tbody><tfoot style="color:green"><tr><td>脚注</td><td>脚注</td><td>脚注</td></tr></tfoot></table>
<font color="red"> 注意：
- thead 的全称为 table head(表格头部)
- tbody 的全称为 table body(表格内容)
- tfoot 的全称为 table foot(表格脚注)
- tr 的全称为 table row(表格行)
- td 的全称为 table data(表格数据)
- table 标签里面有三个部分，头部(thead)、身体(tbody)、脚部(tfoot)，而这三个部分里面都可以有 表格行(tr)，表格行里面有 表格数据(td)
- 我们可以注意到，table 标签里面只有规定行的元素，没有规定列的元素，列只能由 表格数据(td) 规定
</font>
代码2：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>性别</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>男</td>
<td>张三</td>
</tr>
<tr>
<td>102</td>
<td>男</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>男</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
<table border="1px" width="50%"><thead><tr><td>学号</td><td>性别</td><td>姓名</td></tr></thead><tbody><tr><td>101</td><td>男</td><td>张三</td></tr> <tr><td>102</td><td>男</td><td>李四</td></tr><tr><td>103</td><td>男</td><td>王五</td></tr></tbody></table>
<font color="red"> 注意：
- width 属性表示表格占比屏幕宽度的 50%
</font>
代码3：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<!--这里是新添加的代码-->
<tr>
<td colspan="3" style="text-align:center">学生档案</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
<table border="1px" width="50%"><thead><td style="text-align:center" colspan="3">学生档案</td><tr><td>学号</td><td>性别</td><td>姓名</td></tr></thead><tbody><tr><td>101</td><td>男</td><td>张三</td></tr> <tr><td>102</td><td>男</td><td>李四</td></tr><tr><td>103</td><td>男</td><td>王五</td></tr></tbody></table>
<font color="red"> 注意：
- colspan 的全称为 column span(跨列)
- colspan 的属性表示让表格中 “学生档案” 这一行的内容横跨3列
</font>
代码4：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>张三</td>
<td rowspan="3">男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果为：
<table border="1px" width="50%"> <thead><tr><td>学号</td><td>姓名</td><td>性别</td></tr></thead> <tbody><tr><td>101</td><td>张三</td><td rowspan="3">男</td></tr><tr><td>102</td><td>李四</td></tr><tr><td>103</td><td>王五</td></tr></tbody></table>
<font color="red"> 注意：
- rowspan 属性表示让表格中的内容跨3行
</font>
<a href="#catalog"><u>返回顶部</u></a>
<h2 style="color:#4abcde" id="7">七、其他一些常用元素</h2>
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
<!--这里是注释，不会显示在文章中-->
<p><b>这里显示粗体</b></p>
<p><i>这里显示斜体</i></p>
<p><u>这里显示下划线</u></p>
<p>这里可以<br/>换行</p>
<p>这里是水平线</p>
<hr/>
</body>
</html>
运行结果为：
<b>这里显示粗体</b>
<i>这里显示斜体</i>
<u>这里显示下划线</u>
这里可以<br/>换行
这里是水平线
<hr/>
<a href="#catalog"><u>返回顶部</u></a>
