html关于图片和链接的笔记

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>知识点巩固</title>
</head>
<body>
<p>内联样式</p>
<h2 style="color:red ;background-color:yellow ;" >这是一个标题</h2>
<p style="background: #3b5aff;color:black;font-size: 20px;">这是第一行<br />这是第二行
<img src="../网页图片专用/xinsaisaide.jpg"weight="50" hight="40" alt="心塞塞的" align="middle"/> <!--创建网页图片并设置对齐方式(align)居中-->
</p>
<a href="mypage3.html" target="_self">下一页</a> <!--创建一个打开方式(target)为复制本身框架的网页链接-->
<div style="background-color:black;">
<p>制作图像链接</p>
<a href="mypage.html">
<img src="xinsaisaide.jpg">
</a>
<p>创建图像映射</p> 注释:usemap与下方map中的name或id关联(根据浏览器不同而变化)故id和name均要定义 name定义与链接中第二类关键文本链接“锚”的name定义类似 用法基本相同 (我的总结推测) #关键文字是接在地址查询href后的
<img src="../网页图片专用/eg_planets.jpg"border="100"usemap="#this" alt="planets" />
<map name="this" id="this">
<area shape="rect" coords="100,100,210,326" href="sun.html" target="_blank" alt="太阳"/> 注释:area必须包含在map标签中 shape代表图片中映射部分的形状 coords坐标基于图片左上角为原点
</map>
<p>把鼠标移动到图像上查看坐标变化</p>
<a href="显示图像坐标.html" alt="显示坐标">
<img src="../网页图片专用/eg_planets.jpg" ismap/> 注释:会在链接页面的状态栏(一般网页地址栏)显示点击点的坐标
</a>
</div>



</body>
</html>
连接的语法:
<a  href="目标网址"  title="鼠标滑过显示的文本" target="开启新连接的方式">链接显示的文本</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本" />
posted @ 2016-11-21 20:54  墨鱼七灵  阅读(223)  评论(0编辑  收藏  举报