HTML+CSS学习笔记（三）

一、创建文本链接

1.页面内部链接

①使用锚标识网页中的位置（通俗点讲就是，标记点击链接后要返回到的地方）

<a id="end"></a>

id必须在页面内唯一，并且必须以字母开头

②链接到锚点位置（即点击链接，页面将返回到相应的位置）

<a href="#end">Go to end</a>

当然这个页面有滚动条时，并且锚点和链接点超过一个页面时，你才能明显看到页面跳动

 

2.链接另一个页面特定部分

前提是知道另一个页面的那个锚的id

<a href="page2.html#end">Go to page2 end</a>

 

3.链接到邮箱

<a href="mailto:邮箱地址?subject=主题&amp;body=正文">给我发送邮件</a>

mailto后面跟邮箱地址，subject是邮件主题，body是邮件正文，邮箱地址与属性subject之间用?隔开，属性subject与body中间用“&”隔开，这里用“&amp;”代码表示。为了防止某些人通过软件识别mailto来获取邮箱地址，从而发送大量垃圾邮件，我们用ASCII码表示一些字母或符号，如下面我用“&#109;”表示字母“m”

<a href="mailto:&#109;&#106;&#104;qq2012@qq.&#99;om?subject=HTML 学习&amp;body=Hello 小可！">给我发送邮件</a>

 

4.链接到QQ

<a target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=QQ号码&Site=小可&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:QQ号码:1 alt="点击这里给我发消息"></a>

 第一个QQ号码表示要对话的号码，第二个QQ号码表示要验证其在不在线的号码，当然这两处号码要一致

二、网页中插入图片

1.插入图片
<img / src="cat.jpg" alt="" />
复杂的方法
<img src=“带图片类型的图片地址，也可以是网络中的图片” alt="图片不能显示时，其位置显示的文字" title="鼠标放在图片上显示的文字" width=“指定图像的宽度” height=“指定图像的高度” />

2.图片链接
<a href="boy.jpg"><img src="boy_sm.jpg" alt="图片不能正常显示" title="点击放大"  /></a>
一般为了加快网页显示速度，网页中使用的都是小图片，如果想看更清楚的图片，点击小图片就会打开大图。上例中的boy_sm.jpg就是小图，boy.jpg是大图

3.图像对齐
除了可以使用<p></p>或者<div></div>中的style="text-align:center"操作，还可以在<img />标签内添加
环绕对齐：style="float:left"，style="float:right"，图片在右，文字在左。注意没有居中环绕
垂直对齐：style="vertical-align:top"，style="vertical-align:bottom"，style="vertical-align:middle"，style="vertical-align:baseline"

最终示例http://mjh.35free.net/wblj.html

小提示：上一篇讲到的列表标签，我们可以将小型图片作为项目符号，那样更漂亮，直接把图片代码放到列表标签当中就行，O(∩_∩)O~