怎么在DIV里面的图片上添加超链接

Posted 2023-04-15

参考技术A 在图片上加超链接是这样的：
首先你得给图片加<a>标签，图片标签是<img>，所以框架是这样子的
<div><a href="#" target="_blank" title=""><img src="images/20.jpg" width="200" height="500"></a></div>
<a>标签里面的（href="#"）是跳转链接的意思，#是空链接，#可以更改你想跳转的链接。
（target="_blank"）这个呢是点击会单独创建一个页面的意思，就是你在这个页面点击就会再创建一个页面浏览。如果不加，点击他就会在你所点击的页面浏览。
（title=""）这个的用处是简单介绍你所点击的东西是什么，是方便别人网速不好，没有加载出来图片，就会有个文字介绍，这上面说的文字就是你写的文字。（建议文字不要太多）
<img>标签里面的很简单，有点英文基础都知道就不说了。

img,a,锚链接,超链接

1.图片标签：img,单标签

图片属性：
src(source): 图片的来源（路径）,可以放置本地图片，也可以放网上的图片的url地址

title: 当鼠标停留在图片上的时候，显示提示的文字

alt:当文件找不到的时候，显示提示文字

width:宽度

height: 高度

2.路径：
绝对路径(一般不用)：指的是文件在计算机里面的位置

相对路径(使用)：用户工作目录开始的路径(路径的拼接使用/)

./:当前目录
../:跳出当前目录，到上一目录

3.超链接：点击跳转，a
超链接的属性：href=url地址

url地址：在浏览器地址栏的信息就是url地址

在输入网址的时候，应该加上http或者是https，如果不写，则把地址当成本地文件.

超链接除了可以跳转网址外，还可以跳到本地文件，如果是跳到本地文件，那么文件路径和img标签里面的src属性值是一样的（相对路径）

title: 鼠标移动到链接上显示的文字

target:
_self(默认值): 在本窗口显示跳转的文件
_blank:新开一个窗口显示跳转的文件

<base target="_blank" href="https://www.baidu.com" />

base:基础标签,写在head标签里面

base标签里面的属性：
href:当跳转的是空链接（href="#"）默认跳转的地址，如果在base标签设置href属性，会把当前路径改为href的值

如果a标签里面的值是网址的话，则直接跳到网址上去；

target:所有的超链接跳转的时候，是否开启新窗口显示

跳转到空链接,将href属性值设置为#

404:代表路径错误

4.锚链接（回到顶部）：
一般用来做跳转到页面的某个位置
1.在需要跳转位置的标签里面写上id属性或者name属性
（id和name属性是每个标签都有的属性，name的属性值可以重复写，id的属性值不能重复写）

2.设置锚链接：还是a标签，href属性值变为#+需要跳转位置的标签id值或者是name值

3.注意：如果使用name的话，则跳转的位置的标签必须是a标签

快速生成骨架：html+tab

跨页面的锚链接：在原来href属性值的基础上，拼接#+需要跳转位置的标签id值或者是name值

5.表格：table,双标签，类似于word或者Excel里面的表格

<table border="1" cellspacing="0" cellpadding="0" width="300" height="300" align="center" bgcolor="magenta">
<caption><h2>人员信息表</h2></caption>
<tr align="center" bgcolor="purple">
<td>姓名</td>
<td>性别</td>
<td>籍贯</td>
<td>职业</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>山东</td>
<td>挖掘机</td>
</tr>
<tr align="center">
<td>小红</td>
<td>女</td>
<td>云南</td>
<td>六脉神剑</td>
</tr>
<tr align="center">
<td>李华</td>
<td>男</td>
<td>湖南</td>
<td>赶尸</td>
</tr>
</table>

行：tr(table row),双标签
列：td，双标签
tr和td的关系：tr是td的父标签.
一行四列
<tr>
<td></td>第一列
<td></td>第二列
<td></td>第三列
<td></td>第四列
</tr>

表格的属性：
border:设置表格线的宽度，默认为0;
cellspacing:单元格间的距离
cellpadding:单元格的内边距，一般设置为0就行了（单元格内容距离四边的大小）
align:表格的显示方式（center,left,right）

tr，td的属性：
align：单元格的内容的排列方式,默认值是left（center,left,right）

caption:表格的标题，写在table标签里面

bgcolor:设置背景颜色

表格的结构：
表头（thead）：表格的最上面
tbody:表格的主题部分
页尾(tfoot)：表格的最下面,一般不用

浏览器加载表格的顺序：先加载表头，页尾，tbody

th标签:使每列的文本内容有标题的样式

单元格合并：
colspan: 列之间的合并
rowspan: 行之间的合并

6.列表：
1).无序列表：
ul(unordered list)双标签
ul的属性：
type:
disc(默认值)：实心小圆圈
circle:空心小圆圈
square:正方形
none:没有图形

<ul type="none">
<li>香蕉</li>
<li>牛奶</li>
<li>苹果</li>
</ul>

2).有序列表：
ol(ordered list)
双标签

ol的属性：
type:以什么类型来进行排序（a,1）,属性值为i或者是I的时候，是罗马数字

start:从第几个开始排序

列表项：li,显示列表里面的每一条信息

<ol type="I" start="3">
<li>张三</li>
<li>李四</li>
<li>隔壁老王</li>
</ol>

3).自定义列表：
dl
双标签
dt:列表项的标题
dd:相当于li(列表项)

<dl>
<dt>购物指南</dt>
<dd>会员指南</dd>
<dd>会员指南</dd>
<dd>会员指南</dd>
<dd>会员指南</dd>
</dl>

7.meta标签：
<!-- 设置文档的作者 -->
<meta name="author" content="华杨海">

<!-- 设置网页的描述信息 -->
<meta name="description" content="这是一些列表的展示">

<!-- 可以让搜索引擎搜索到网址的 -->
<meta name="keywords" content="js培训，it培训">

8.SEO：搜索引擎优化：就是让搜索引擎（百度，搜狗）更好的搜索到你写的网站。
1.标签语义化（使你写的文档结构清晰，搜索引擎越容易搜索到你写的网址）
2.最好给每个图片设置title属性，alt属性

3.给每个a标签设置title

<!-- 网址重定向:http-equiv的属性值是refresh content:第一个是隔几秒进行网址的跳转，；url=需要跳转的网址 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

 

<!-- 设置字符集 -->
<meta charset="utf-8">
<!-- 设置文档的作者 -->
<meta name="author" content="HelloKitty">

<!-- 设置网页的描述信息 -->
<meta name="description" content="这是一些列表的展示">

<!-- 可以让搜索引擎搜索到网址的 -->
<meta name="keywords" content="js培训，it培训">

<!-- 网址重定向:http-equiv的属性值是refresh content:第一个是隔几秒进行网址的跳转，；url=需要跳转的网址 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<title>列表</title>