2_31_HTML中超链接、锚链接、图像、表格的学习_190917

最新推荐文章于 2022-04-01 14:29:12 发布
最新推荐文章于 2022-04-01 14:29:12 发布
阅读量492 收藏 3
点赞数
文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XY061120/article/details/102525656
版权

一、超链接

 嵌套标签的使用

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用的门户网站</title>
	</head>
	<body>
	<h3>常用的门户网站有：</h3>
	<ul>
		<li><a href = "self" target="blank">新浪</a> </li>
		<li><a href = "self" target="blank">搜狐</a> </li>
		<li><a href = "self" target="blank">网易</a> </li>
	</ul>
	</body>
</html>

二、锚链接
1、使用情况：
当网页的内容比较长时，有时需要链接到网页的某一个位置上 (当前页面定位)，此时需要使用锚链接。
2、使用条件：
使用锚连接需要先定义锚点，将希望链接到的网页的位置定义为 锚点，并为其取名。然后将锚点前加 “#” 作为超级链接的 href 值即可。
在这里插入图片描述
代码：

<!---定义锚链接--->  
<a name = "head"></a>   ②
<a href = "footer">至页尾</a>  ①
<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>
<a name = "footer"></a>    ①
<a href ="#head">至页首</a>   ②

三、电子邮件链接

<a href = “mailto:ngrdaiwx@163.com”>给XX发邮件</a>

四、图像
在这里插入图片描述

相对路径和绝对路径区别：

绝对路径（冗长）：指目录下的绝对位置，直接达到的目标位置。可以理解为文件的绝对地址（绝对path）

如：
C:\Users\17114\Desktop\戴文鑫—HTML\网页设计\20190917.html

相对路径：指当前文件的路径引起的跟其他文件的路径关系。即相对于当前文件想访问其他文件的路径。

如：
  ../HTML.txt   （“..”——表示访问当前文件路径的前一路径）

注意：

  1. 如果当前文件和其他文件在同一个目录下面。 直接访问其他文件的文件名即可
  2. …/ : 跳到上一目录
  3. 如果其他文件和当前文件不在同一个目录，那么需要 “…/” 跳转到 其他文件的目录下，再来进行访问。

相对路径的好处：
因为我们开发网站的时候，一般在本地电脑上开发，测试完成后，放到服务器上（另一个电脑），如果用绝对路径可能显示不出来（原因是，有可能服务器上根本没有本地电脑上的盘），所以，一般牵扯，当前文件和其他文件的连接时候，我们都用相对路径。这样可以避免文件找不到的问题。

在这里插入图片描述
五、表格
在这里插入图片描述
1、基本语法：

<table>
  <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
  </tr>
</table>

在这里插入图片描述
在这里插入图片描述

4、增加了三个表格的基本标签后：

<table>
	<thead>
		<tr>
		 <th></th>
		</tr>
	</thead>	
	<tbody>
	   <tr>
	    <td></td>
	   </tr>
	</tbody>
    <tfoot>
	    <tr>
	     <td></td>
	    </tr>
	</tfoot>
</table>

注意：

 <table width=”60%”>

% : 表示以浏览器页面的宽度作为基础计算table的宽度， 因
为table标签 外面就是body标签。

 <tr width= 50%>

依据父类标签的宽度，来计算该标签的宽度。
一般用 % 设置宽高，只需要在table标签中设置 width = “50%”

练习：
（1）
在这里插入图片描述
代码：

 <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>这是第三个HTML文档</title>
</head>

<body>
<table  border = "1px" align = "center">
<caption>学生信息表</caption>	
<thead>
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>性别</th>
	</tr>
</thead>
	
<tfoot>
	<tr>      <!--跨列：colspan  跨行：rowspan -->  
		<td colspan = "5" align = "center">这里是表尾</td>     
	</tr>
</tfoot>

<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>
</tbody>

</table>	
</body>
</html>

（2）
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>这是第三个HTML文档</title>
</head>

<body>
<table  border = "1px" align = "center">
<caption>学生信息表</caption>	
<thead>
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>学号</td>
		<td>学院</td>
		<td>联系方式</td>
	</tr>
</thead>
	
<tfoot>
	<tr>
		<td colspan = "5" align = "center">这是表尾</td>
	</tr>
</tfoot>

<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>
</tbody>
</table>	
</body>
</html>

（3）
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>学生信息表</title>
</head>
<body>
<table width: 60%  cellspacing="2" cellpadding="3"border="1px">
     <tr>
    <td rowspan="5" style="background-color: darkorange">学生</td>
    <td colspan="6" style="background-color: aqua;color: red">学生信息</td>
     </tr>

    <tr style="background-color: salmon">
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>电话</td>
        <td>住址</td>
    </tr>
	
    <tr style="background-color: darkgray">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>

    <tr style="background-color: darkgray">
        <td>2</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>
	
    <tr style="background-color: darkgray">
        <td>3</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>
</table>
</body>
</html>

（4）
在这里插入图片描述
要求：

  1. 设置table 宽为 整个页面的一半
  2. 边框只有一条线，字体居中
  3. 设置自己觉得好看 的背景颜色
  4. 合并单元格 语文这一项

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学生信息表</title></head>
<body>
<table  width = "50%" cellspacing="0" cellpadding="0" border = "1px">
	<tr style="background-color:  aqua" align= "center">
        <th>项目</th>
        <th colspan= "5">上课</th>
		<th colspan="2">休息</th>
    </tr>
	
	<tr align= "center">
        <th>星期</th>
        <th>星期一</th>
		<th>星期二</th>
		<th>星期三</th>
		<th>星期四</th>
		<th>星期五</th>
		<th>星期六</th>
		<th>星期日</th>
    </tr>
	<!--跨行一定注意要在第一个变化行内写入，否者上面会向前移进-->
	<tr align= "center">
        <td rowspan="4">上午</td>
        <td rowspan="6">语文</td>
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
		<td rowspan="4">休息</td>
    </tr>
	
	<tr align= "center">
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
    </tr>
	
	<tr align= "center">
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
    </tr>
	
	<tr align= "center">
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
    </tr>
	
	<tr align= "center">
        <td rowspan="4">上午</td>
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
		<td rowspan="4">休息</td>
    </tr>
	
	<tr align= "center">
		<td>数学</td>
		<td>英语</td>
		<td>物理</td>
		<td>化学</td>
		<td>化学</td>
    </tr>
</table>
</body>
</html>

重点总结:

设置样式属性的两种方式：
（1） 直接在标签（默认属性）里面写。
Eg:

      <table width = ”10px”>

（2） 写在 style = “样式”，style里面。
Eg：

 <table style = “background-color : red”>

注意： 第一种方式，属性与值之间是用“ = ”连接
第二种方式，属性与值之间用“ ：”连接。
若方式一没有实现，可能是因为该属性不是该标签的默认属性，就可以将该属性移至到style 里尝试。（注意连接符）
若方式二没有实现，可以尝试一下方式一。

梦想_倩
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
10.HTML超链接练习(含锚点链接)
weixin_42866896的博客
10-10 1747
实现代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;练习&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;center&am
HTML(超链接，建立锚点，建立图像，图像地图)
Steven
08-24 6366
PHP,HTML,常用标签
案例练习-锚点链接，图像标签，段落标签，标题标签
qq_43632490的博客
04-01 812
<!DOCTYPE html> <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>羽生结
超链接，锚点，跳转练习.html
05-27
属于课后练习，做个html网页，在网页里加入锚点，超链接，跳转等课上学习的内容。（网页里的内容纯属于练习所用，无作其他用于）
HTML案例 • 【第2章 图片和超链接练习；锚链接练习；预格式化标签练习】
冯上
11-27 432
Day2学习进度 练习一 <图片属性> <!DOCTYPE html> <html leng="zh-cn"> <head> <meta charset="UTF-8"> <meta name="keywords" content="d"> <meta name="description" content="3"> <title>图片标签</title> <
HTML利用超链接打开链接文件的方法介绍
09-28
本文将详细介绍HTML中超链接的应用方法和相关属性。 一、基本应用 HTML中的超链接使用标签来表示，anchor是其英文名称。标签可以指向任何一个文件源，例如HTML网页、图片、影视文件等。使用方法如下： 链接的显示...
html中超链接样式
01-08
（2）编写css代码，设置超链接的样式，代码如下 li a:link{ color:#E00A0D; } /*未访问的超链接*/ li a:visited { color:#551A99; } /*已访问的超链接*/ li a:hover{ color:#fff; } /*鼠标放在超链接上*/ li
PPT中超链接实际应用创一招设计单共3页.pdf.zip
11-15
PPT中超链接实际应用创一招设计单共3页.pdf.zip
Python提取网页中超链接的方法
09-21
很多人在一开始学习Python，会打算用作爬虫开发。既然要做爬虫，首先就要抓取网页，并且从网页中提取出超链接地址。这篇文章给大家分享一个简单的方法，有需要的可以参考借鉴。
python使用BeautifulSoup分页网页中超链接的方法
09-22
主要介绍了python使用BeautifulSoup分页网页中超链接的方法,涉及Python使用BeautifulSoup模块操作网页链接的技巧,需要的朋友可以参考下
前端HTML（一）—— HTML简介、网页的三要素：文本、图片、超链接
Jsundoku的博客
02-22 3077
文章目录一、HTML简介二、HTML标签三、网页的三要素之文本标签(font)四、网页的三要素之图像标签(img)五、网页的三要素之超链接 一、HTML简介 1、HTML：hyper text markup language （1）HTML概念 html是超文本标记语言，用来描述网页的一种语言，专门用于写前端代码。 html不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup ...
HTML基础
WoNiu_UU的专栏
10-10 2706
HTML语言 作用：用来摆放出页面上所有需要展示的东西的。 html（Hyper Text Markup Language）中文翻译为“超文本标记语言”，顾名思义她是一种语言，这种语言里面定义了N多超文本标记，用这些标记对网页中的文本、图片、视频、音频、输入框等一切内容进行描述。比如input标记就描述的是一个输入框。 html之所以称为超文本标记语言，不仅是因为她通过标记描述了网页上的内容，同时...
标签的嵌套与超链接
ChengMeng11的博客
03-04 1229
4.标签的嵌套 一个标签中嵌套另外一个标签 标签不能乱嵌套，如以下标签的嵌套是错误的 <p style="width:300px;height:300px;background:green"> <div style="width:200px;height:200px;background:blue"> hello </div> </p&g...
HTML学习笔记05--超链接
Bee_Darker的博客
07-12 644
1.超链接 使用超链接可以让我们从一个页面跳转到另一个页面； 使用a标签来创建一个超链接； 属性： href:指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址； target：指定打开链接的位置； 可选值：_self，表示在当前窗口打开（默认值）； _blank，在新的窗口打开链接； 可以设置一个内联框架的n...
HTML中超链接的语法、路径、分类和应用；浮动框架iframe的使用
独树一枝
04-15 6004
超链接语法、路径及分类 超链接是指从一个网页指向一个目标的连接关系。 这个目标可以是：一个网页、图片、一个电子邮件地址、一个文件或是一个应用程序。 网页中超链接的对象是一段文本或者是一个图片。 基本语法 <a href="url" name="" title="" target="">超链接标题</a> 语法说明...
HTML中div和span的用法
zhao1519937848的博客
06-13 3590
1.div的用法 <div id="id名" class="class名"></div> 文档区域，文档布局对象 2.span的用法 <span></span>文本节点，内容可以是一段文字或者一个字。 ...
html中链接的使用方法及介绍
Welkin_qing的博客
04-08 1308
html中链接的使用方法及介绍 html 超链接： HTML使用标签 &lt;a&gt;来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 在标签&lt;a&gt; 中使用了href属性来描...
html中超链接定位
最新发布
07-28
- *1* *2* *3* [2_31_HTML中超链接、锚链接、图像、表格的学习_190917](https://blog.csdn.net/XY061120/article/details/102525656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值