HTML语言基础（三）

13、引用 `<blockquote>` 和 `<q>`

长引用：<blockquote>，浏览器呈现为一段缩进文本。
短引用：<q>，`浏览器呈现为引号。
例：

<p>
网页设计要学习的内容为：
<blockquote>HTML、CSS、Javascript... </blockquote>
</p>
<p>
网页设计要学习的内容为：
<q>HTML、CSS、Javascript... </q>
</p>

图片说明

14、特殊字符

空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& and符号 &amp;
" 双引号 &quot;
' 撇号 &apos;
¥ 元 &yen;
© 版权 &copy;
× 乘号 &times;
÷ 除号 &divide;
∫ 积分号 &int;
π pi &pi;
‰ 千分号 &permil;
½ 1/2 &frac12;
♠ spade &spades;
♣ club &clubs;
♥ heart &hearts;
♦ diamond &diams;

15、属性 title

规定元素的额外信息（可在工具提示中显示）
如：<p title="这是一个诗人，最近很忙">杜甫</p>

图片说明

16、HTML 链接 `<a>`

<a> 标签定义超链接。

href属性，表示链接的目标 URL。
target属性，表示打开链接的窗口，值为_blank时表示打开新窗口。
name 属性，创建文档内的书签
如：
百度

16.1 链接-name 属性

name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
如：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
</head>

<body>
<p><a href="#C10">查看 Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p><br>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p><br>
<h2><a name="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p><br>
</body>
</html>

图片说明
点击“查看Chapter 10”即可跳转到有Chapter 10的页面。

17、图像 `<img>`

<img> 标签定义 HTML 页面中的图像。
图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。

<img> 的属性：

src：说明图像的 URL，
alt：规定图像的替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。
width：图像的宽度
height：图像的高度

不要通过 height 和 width 属性来缩放图像。

例：
需要将图片提前放在image文件包里且路径正确（一般可以将image文件包放在和.html文件放在同目录下，就可以直接用例子中的写法），否则不能正常显示。

<img  src="image/图片.jpg" 
    width="500" height="500" 
    alt="替换文本" 
    title="图片标题" />

图像可做为链接：

<a href="http://www.baidu.com" target="_blank"><img src="image/图片.jpg" /></a>

18、图像映射`<map>` `<area>`

<map> 定义图像映射。
<area> 定义图像映射中的区域。

例：

<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<img src="images/navi.png" width="400" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="303,22,377,52" href="04-08-01.htm" target ="_blank">
  <area shape="rect" coords="242,76,321,105" href="04-08-02.htm" target ="_blank">
  <area shape="rect" coords="141,126,216,157" href="04-08-03.htm" target ="_blank">
  <area shape="rect" coords="15,152,92,183" href="04-08-04.htm" target ="_blank">
  <area shape ="circle" coords ="55,60,40" href ="04-08-05.htm" target ="_blank">
</map>
</body>
</html>

点击框区域即可跳转。
图片说明

HTML语言基础（三）

13、引用 <blockquote> 和 <q>