1. 嵌套标签的使用
代码示例
<ul>
<li><a href="www.xinlang.com">新浪</a></li>
<li><a href="www.souhu.com">搜狐</a></li>
<li><a href="www.wangyi.com">网易</a></li>
</ul>
2.锚链接的使用
a.当网页的内容比较长时，有时需要链接到网页的某一个位置上(当前页面定位)，此时需要使用锚链接。
b.使用锚连接需要先定义锚点，将希望链接到的网页的位置定义为锚点，并为其取名。然后将锚点前加“#”作为超级链接的href值即可，
练习
代码如下：
（包含以下练习：锚链接，图片超文本链接，表格）
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset=UTF-8">
<title>常用的门户网站</title>
</head>
<body>
<a name="footer"></a>
<h1>常用的门户网站</h1>
<a href="#head">至尾页<a/>
<ul>
<li><a href="https://www.sohu.com/" target=“_blank"><img src="d:/Users/Desktop/souhu.jpg" alt="搜狐" height="50px" width="50px"/></a></li>
<li><a href="https://www.sina.com.cn/" target=“_blank"><img src="../sina.jpg" alt="新浪" height="50px" width="60px"/></a></li>
<li><a href="https://www.163.com/" target=“_blank"><img src="../netset.jpg" alt="网易" height="50px" width="80px"/></a></li>
<table border="1px" height="500" width="500" align="center" cellspacing="10px" cellpadding="50">
<caption><b>标题</b></caption>
<thead>
<tr>
<th colspan="5">表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">表尾</th>
</tr>
</tfoot>
</table>
<hr/>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
</ul>
<a name="head"></a>
<a href="#footer">至首页<a/>
</body>
</html>
2.图像
图像也是网页的重要组成元素之一，可以使用标签在网页中嵌入图像，并设置图像的属性。其格式如下：
<imgsrc=“…” alt=“…” height=“…” width=“…” />
其中，src属性和alt属性是必需的。
src属性指的是引用图像的URL，一般使用相对路径；
alt指的是图像的替代文本；
height指的是图像的高度；
width指的是图像的宽度
相对路径和绝对路径区别：
绝对路径：指目录下的绝对位置，直接达到的目标位置。
Eg：D:\user\Dasktop\netset.jpg
相对路径：指当前文件的路径引起的跟其他文件的路径关系。
1. 如果当前文件和其他文件在同一个目录下面。 直接访问其他文件的文件名即可
2. …/ : 跳到上一目录
3. 如果其他文件和当前文件不在同一个目录，那么需要 “…/” 跳转到 其他文件的目录下，再来进行访问。
相对路径的好处：
因为我们开发网站的时候，一般在本地电脑上开发，测试完成后，放到服务器上（另一个电脑），如果用绝对路径可能显示不出来（原因是，有可能服务器上根本没有本地电脑上的盘），所以，一般牵扯，当前文件和其他文件的连接时候，我们都用相对路径。这样可以避免文件找不到的问题
小结：
Web主要包括超文本传输协议（HTTP）、统一资源定位符（URL）以及超文本标记语言（HTML）。
HTTP是客户端和服务器端信息交互的网络协议；URL是网络上的资源的唯一的标识符，即俗称的网址；
HTML是用于描述网页文档的标记语言。HTML文档即普通的静态网页，它由head和body两部分组成。
HTML包含许多标签元素，主要有
<font>、<p>、<br>、<ul>、<ol>、<a>、<img>等。通过设置标签的相关属性可以控制元素在网页中的显示样式。
文本、图像、超级链接是网页的三类基本元素。
3.表格
表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局
一个完整的表格由一对<table>标签来定义。
每个表格均有若干个单元行（由一对<tr>标签定义）
组成。 (行 row)
每个单元行由若干个单元格（由一对<td>标签定义）组成。
表格内的具体信息放置在单元格中。
单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。
语法：
<table>
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
…
</tr>
…
</table>
<table>标签的常用属性
属性 说明
border 表格的边框的宽度，一般由CSS实现
width 以百分比或像素指定表格的宽度
height 以百分比或像素指定表格的高度
cellspacing 表格中相邻单元格的间距以及单元格外边沿与表格边沿之间的间距。
cellpadding 单元格的边沿和它的内容的间距，一般由CSS实现
<thead>、<tbody>、<tfoot>标签
从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用<thead>、<tbody>、<tfoot>标签来表示。
表头和表尾一张表格只能有一个，而一张表格可以有多个主体。
对于大型的表格来说，应该使<tfoot>出现在<tbody>的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外，<thead>、<tbody>、<tfoot>标签内部都必须使用<tr>标签。
使用<thead>、<tbody>、<tfoot>对表格进行结构划分的好处是可以先显示<tbody>的内容，而不必等整个表格下载完成后才能显示。
无论<thead>、<tbody>、<tfoot>的顺序如何改变，<thead>的内容总是在表的最前面，<tfoot>的内容总是在表的最后面。
练习：
代码实现
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset=UTF-8">
<title>列表练习</title>
</head>
<body>
<table border="1px" align="center">
<caption><b>学生信息表</b></caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>王明明</td>
<td>男</td>
</tr>
<tr>
<td>0002</td>
<td>李梅</td>
<td>女</td>
</tr>
<tr>
<td>0003</td>
<td>张晓莉</td>
<td>女</td>
</tr>
<tfoot>
<tr>
<th colspan="3">这里是表尾</th>
</tr>
</tfoot>
</tbody>
</table>
</body>
<hr/>
<body>
<table border="1px" align="center" cellspacing="0px">
<caption>学生信息表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>学院</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>0001</td>
<td>信息学院</td>
<td>110</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>0002</td>
<td>数码科技学院</td>
<td>112</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>0003</td>
<td>体育学院</td>
<td>114</td>
</tr>
<tfoot>
<tr>
<td colspan="5" align="center">这里是表尾</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
<hr/>
<body>
<table border="1px" align="center" cellspacing="0px">
<caption>学生信息表</caption>
<tbody>
<tr>
<td rowspan="5" style="background-color:red">学生</td>
<th colspan="6" style="background-color:yellow">学生信息表</th>
</tr>
<tr style="background-color:blue">
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>电话</td>
<td>住址</td>
</tr>
<tr style="background-color:green">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr style="background-color:purple">
<td>2</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
<tr style="background-color:orange">
<td>3</td>
<td>张三</td>
<td>男</td>
<td>23</td>
<td>110</td>
<td>雁塔</td>
</tr>
</tbody>
</table>
</body>
<hr/>
</html>
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
