HTML学习5

1、图片链接和超链接

<img src="F:work_htmlch1imghtml.jpg" alt="html图片">
<img src="imgjs1.jpg" alt="html图片" alt="html图片" height="50" width="50">
<img src="imgjs2.jpg" alt="html图片" alt="html图片" height="10%" width="50%">

如果用%表示则图片会随着浏览器的大小而改变;

显示效果如下:

/

2、超链接既可以是文字也可以是图片,超链接内容可以是内部链接和外部链接外部的需要加HTTP;

<a href="hello.html">打开这个刺激的连接吧!</a>
<a href="http://www.baidu.com"><img src="imgjs2.jpg" alt="html图片" alt="html图片"></a>

显示效果如下:

3、超链接在新页面中打开还是在当前页面中打开可以用target这个参数来实现;

<a href="http://www.baidu.com" target="_blank" title="baidu">blank</a>
<a href="http://www.baidu.com" target="_self">self</a>

4、超链接里面的锚:

首先定义锚的位置和名称:

<img src="imgjs2.jpg" alt="html图片">
<a name="js2"></a>

其次设置寻找锚的连接:

<a href="#html">HTML</a>
<a href="#js1">JavaScript初级</a>
<a href="#js2">Javascript进阶</a>

5、第四点的示例如下:

<html>
<head>
<meta charset="UTF-8">
<title>超级链接</title>
</head>
<body>
<a name="backtop">这里是顶部</a><br />
<!--设置水果锚点链接-->
<a href="#fruit">水果</a>
<br>
<!--设置蔬菜锚点链接-->
<a href="#vegetable">蔬菜</a>
<br>
<!--设置运动锚点链接-->
<a href="#exercise">运动</a>
<br>
<!--设置水果标题-->
<a name="fruit"><h2>水果</h2></a>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
<li>梨</li>
<li>西瓜</li>
<li>樱桃</li>
</ul>
<!--设置返回顶部链接-->
<a href="#backtop">返回顶部</a>
<br>
<!--设置蔬菜标题-->
<a name="vegetable"><h2>蔬菜</h2></a>
<ul>
<li>西红柿</li>
<li>黄瓜</li>
<li>土豆</li>
<li>芹菜</li>
<li>蒜薹</li>
<li>西葫芦</li>
<li>香菇</li>
<li>菠菜</li>
</ul>
<!--设置返回顶部链接-->
<a href="#backtop">返回顶部</a>
<br>
<!--设置运动标题-->
<a name="exercise"><h2>运动</h2></a>
<ul>
<li>篮球</li>
<li>黄瓜</li>
<li>土豆</li>
<li>芹菜</li>
</ul>
<!--设置返回顶部链接-->
<a href="#backtop">返回顶部</a>
</body>
</html>

 显示效果如下:

 6.注意当href属性值为空时,点击链接会自动刷新页面;

7.如果是要链接到另外一个页面的锚点的话,可以是用户如下格式:

<a href="chaolianjie.html#vegetable">打开这个刺激的连接吧!</a>

8.在HTML5中name不再适用而适用ID来作为锚点属性;

原文地址:https://www.cnblogs.com/annjk/p/13251403.html