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>