Commonly used tags
1, a hyperlink tag
<a href="链接地址" target="xx">xx</a>
a label is the most important attribute href attribute that indicates the target of the link.
In all browsers, the default appearance of links are:
Link (1) have not been accessed underlined and is blue
(2) links have been visited is underlined and purple
(3) with active links underlined and red
target attribute specifies a label to open the linked document where they are.
There are four reserved target name as a special document redirection:
| value | description |
|---|---|
| _blank | The browser always open in a new, unnamed window into the destination document. |
| _self | The target value for all of a tag without specifying a destination is the default destination, so that the target document is loaded and displayed as the source document in the same frame or window. The goal is redundant and unnecessary, unless used with the target attribute and the document title tag. |
| _parent | This goal makes the document into the parent window or frameset that contains hyperlinks to referenced frame. If the reference is in a window or in the top frame, then it is equivalent to the target _self. |
| _top | This makes the goal of this document loads contain hyperlinks window, _top target will erase all be included in the framework document and load the entire browser window. |
<!--实例一：创建超级链接,在 HTML 文档中创建链接。-->
<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
<!--实例二：将图片作为链接-->
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
<!--实例三：链接到同一个页面的不同位置,使用链接跳转至文档的另一个部分-->
<p>
<a href="#C4">查看 Chapter 4</a>
</p>
<h2>Chapter 1</h2>
<p>朝辞白帝彩云间</p>
<h2>Chapter 2</h2>
<p>千里江陵一日还</p>
<h2>Chapter 3</h2>
<p>两岸猿声啼不住</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>轻舟已过万重山</p>
<h2>Chapter 5</h2>
<p>未完待续</p>
<!--实例四：在新的浏览器窗口打开链接,在新窗口打开一个页面，这样的话访问者就无需离开你的站点了-->
<!--如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开-->
<a href="http://www.w3school.com.cn/" target="_blank">W3School</a>
<!--实例五：跳出框架，如果页面被固定在框架之内，_top会让其跳出框架之外-->
<p>被锁在框架中了吗？</p>
<a href="/index.html"
target="_top">请点击这里！</a>
Note : target 的所有 4 个属性值都是以下划线开始的.
2, img tag pictures
<img src="images/flower.jpg" alt="绽放的白玫瑰"
title="花语：尊敬与崇高，纯洁与天真" height = "200px" width = "200px"/>
| Attributes | description |
|---|---|
| alt | Message is displayed when the picture has not been loaded out. |
| src | Display load path of the picture. Can write absolute or relative path, if the reference network resources, giving the referring URL |
| title | Move the mouse to display the picture message |
| height | Height of the image in pixels |
| width | Pictures of width in pixels |
Examples are as follows:
<!--实例一:插入图片，如何在网页中显示图片-->
<p>
一幅图像：<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅动画图像：<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<!--实例二：从不同的位置插入图片，如何将其他文件夹或服务器的图片显示到网页中-->
<p>
来自另一个文件夹的图像：<img src="/i/ct_netscape.jpg" />
</p>
<p>
来自 W3School.com.cn 的图像：<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>
<!--实例三：添加背景图片，如何添加背景图片到HTML页面。-->
<body background="/i/eg_background.jpg">
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
<!--实例四：图片对齐方式，如何在文字中排列图像-->
<!--注意，bottom 对齐方式是默认的对齐方式-->
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本下</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本上</p>
<!--实例五：图片浮动，使图片浮动至段落的左边或右边。-->
<p>
<img src ="/i/eg_cute.gif" align ="left">
<!--带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧-->
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right">
<!--带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧-->
</p>
<!--实例六：调整图像尺寸,如何将图片调整到不同的尺寸-->
<!--通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像-->
<img src="/i/eg_mouse.jpg" width="50" height="50">
<br />
<img src="/i/eg_mouse.jpg" width="100" height="100">
<!--实例七：为图片显示替换文本,在浏览器无法载入图片或图片尚未加载出来时，给用户提示性的信息-->
<img src="/i/eg_goleft.gif" alt="向左转" />
<p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
<img src="/i/eg_goleft123.gif" alt="向左转" />
<!--实例八：图片作为连接使用-->
<a href="/example/first.html">
<img border="0"src="/image/pic_but.jpg" />
</a>
<!--实例九：创建图像地图,创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接-->
<!--img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性-->
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="/example/html/venus.html"
target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="/example/html/mercur.html"
target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html"
target ="_blank" alt="Sun" />
</map>
HTML can be included in the text document image, the image may be used as internal object (inline image) of the document, which may be used as a single document can be downloaded via a hyperlink, or as a background document.
Note :
(1) reasonably added to the document content of an image (static or animated icons, photos,
description, painting, etc.), the document will become more lively, more attractive, and
looks more professional, more informative and easy to navigate. You can also make a special image becomes
hyperlink FIG visual guide.
(2) If the excessive use of images, documents will become fragmented, chaotic, and can not read,
users download and view the page, but will add a lot of unnecessary waiting time.
