002-文本、图像和超链接
一.添加文本
网页中的文本可以分为两大类：普通文本和特殊字符文本
普通文本是指汉字或者在键盘上可以输出的字符。如果其他窗口中有现有的文本，可以使用复制的方法把需要的文本复制过来
如数学、物理和化学都有特殊的符号，这些就是特殊字符文本
在HTML中，特殊字符以"&"开头，以";"结尾，中间为相关字符编码
例如，大括号和小括号被用与声名标签，因此如果在HTML代码中出现“<”和">"符号，就不能直接输入了，需要当作特殊字符处理
常用特殊字符如下表所示：
| 字符 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 双引号 | " | " |
| ' | 单引号 | ' | ' |
| 空格 | |   | |
| © | 版权符号 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标符号 | ™ | ™ |
| € | 欧元符号 | € | € |
| £ | 英镑符号 | £ | £ |
| ¥ | 日元符号 | ¥ | ¥ |
| § | 节符号 | § | § |
| ¶ | 段落符号 | ¶ | ¶ |
| ° | 度符号 | ° | ° |
| ± | 正负号 | ± | ± |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
| ½ | 二分之一 | ½ | ½ |
| ¼ | 四分之一 | ¼ | ¼ |
| ¾ | 四分之三 | ¾ | ¾ |
| ← | 左箭头 | ← | ← |
| ↑ | 上箭头 | ↑ | ↑ |
| → | 右箭头 | → | → |
| ↓ | 下箭头 | ↓ | ↓ |
| ↔ | 左右箭头 | ↔ | ↔ |
在编辑化学公式或物理公式时，使用特殊字符的频率非常高。如果每次输入时都去查询或者记忆这些特殊符号的编码，工作量相当大，因此可以使用电脑自带的输入法中的数学符号功能
二.文本排版
1.上下标标签
在HTML中用<sup>标签实现上标文字，<sub>标签实现下标文字，这两个标签都是双标签
superscript subscript 上标 下标
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p><p>H<sub>2</sub>+O→H<sub>2</sub>O</p></body>
</html>效果：
2.换行标签
浏览器在显示网页时，完全按照HTML标签来解释HTML代码，忽略多余的空格和换行，在HTML中，不管输入多少个空格（按空格键）都将被视为一个空格；换行（按Enter键）也是无效的
在HTML中，换行使用<br/>标签，换段使用<p>标签
换行标签<br/>是一个单标签，没有结束标签
元日<br/>爆竹声中一岁除<br/>春风送暖入屠苏<br/>千门万户曈曈日<br/>总把新桃换旧符效果：
3.段落标签
双标签<p></p>
paragraph段落的首字母
用于定义网页中的一段文本，文本在一个段落中会自动换行
<body><!--<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p><p>H<sub>2</sub>+O→H<sub>2</sub>O</p>--><!--元日<br/>爆竹声中一岁除<br/>春风送暖入屠苏<br/>千门万户曈曈日<br/>总把新桃换旧符--><p>洛阳城里见秋风，欲做家书意万重。</p><p>复恐匆匆说不尽，行人临发又开封。</p></body>效果：
4.标题标签
双标签
<h1></h1>
有六级标题标签，<h1>是一级，级别最高；<h6>是六级，级别最低
headline标题行的简称
三.文字列表
文字列表可以有效地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便于浏览者能更加快捷地获取相应信息
1.无序列表<ul>
unordered list
无序列表相当于Word中由项目符号引导的选项，项目排列没有顺序，只是以符号作为分项标识；
无序列表使用一对<ul<</ul>标签，其中每一个列表项使用一对<li></li>标签，结构如下：
<ul><li>无序列表项</li><li>无序列表项</li>
</ul>
2.有序列表<ol>
ordered list
每个项目都有前后顺序之分
3.自定义列表
一个完整的定义列表包含三个标签：
-
<dl>(Description List) - 定义列表容器 -
<dt>(Description Term) - 被描述的术语/名称 -
<dd>(Description Details) - 术语的描述/定义
<body><dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系方式</dd></dl></body>
四.网页中的图片
1.使用路径
HTML文档支持文字、图片、声音、视频等媒体格式，但是在这些格式中，除了文本是写在HTML中的，其他都是嵌入式的，HTML文档只记录这些文件的路径。这些媒体信息能否正确显示，路径至关重要。
路径的作用是定位一个文件的位置。文件的位置可以由两种表述方法：以当前文档为参照物表示文件的位置，即相对路径；以根目录为参照物表示文件的位置，即绝对路径。
1.绝对路径
在这张图片中，E盘下的webs目录下的images下有一个tp.jpg图片，那么它的路径就是：E:\webs\images\tp.jpg
像这种完整地描述文件位置的路径就是绝对路径
如果使用了绝对路径进行图片链接，那么在本地电脑上将一切正常，因为在上述路径中的E:\webs\images下的确存在tp.jpg这张图片。但是如果将HTML文档上传到网站服务器后就不会正常显示了，因为服务器给你划分的存放空间可能在E盘其他目录下，或者也可能在D盘其他目录下。为了确保图片能够正常显示，必须从webs文件夹开始，放到服务器或者其他电脑的E盘根目录下
可见，当链接本站点内的资源时，使用绝对路径对位置要求非常严格，因此链接本站点内的资源不建议使用绝对路径。如果链接其他站点的资源，就必须使用绝对路径
2.相对路径
例如，在index.html中链接tp.jpg就可以使用相对路径。
index.html和images属于同一级目录，路径是通的，从index.html定位到tp.jpg是可行的，因为会从index.html同级目录出发，先在同级目录下定位tp.jpg这个文件，若没有定位到，则会往这些同级文件的下级依次去定位。而tp.jpg恰好位于images文件夹的下一级
因此在index.html文档中使用相对路径链接tp.jpg图片的语句为：images/tp.jpg
使用相对路径，无论将这些文件放到哪里，只要tp.jpg和index.html文件的相对关系没有变，就不会出错
在相对路径中，“..”表示上一级目录，“../..”表示上级目录的上级目录，以此类推
例如，将tp.jpg文件插入到a.html文件中，使用相对路径表示为：../images/tp.jpg
细心观察会发现，路径分隔符使用了“/”和“\”两种，其中“\”（反斜杠）表示本地分隔符，“/”（斜杠）表示网络分隔符。因为网站制作好了之后肯定是在网络上运行的，所以要用“/”作为路径分隔符
2.在网页中插入图像标签<img>
图像可以美化网页，插入图像使用单标签<img>
1.src属性
source来源，源头，源文件
src属性用于指定图片源文件的路径，是<img>标签必不可少的属性
语法格式如下：
<img src="图片路径">
2.width和height属性
分别用于设置插入图片的显示大小（宽度和高度），默认是按原尺寸显示，但可以任意设置显示尺寸
当只为图片设置一个尺寸属性时，另外一个尺寸就以图片原始长宽比例来显示。
图片的尺寸单位可以选择百分比或者数值，百分比是相对尺寸，数值是绝对尺寸
-
像素值：可以直接使用数字，这会被解释为像素值。例如：
width="100"表示100像素。 -
百分比：可以使用百分比，这表示相对于包含块的百分比。例如：
width="50%"表示包含块宽度的50%。
注意：因为网页中插入的图像都是位图，因此在放大尺寸时，图像会出现马赛克，变得模糊
五.URL的概念
URL为“Uniform Resource Locator”的缩写，翻译为“统一资源定位器”，也就是人们常说的“网站”，它用于指定Internet上的资源位置
1.URL的格式
网络中的计算机是通过IP地址划分的，如果需要访问网络中某台计算机中的资源，首先要定位到这台计算机。IP地址由32位二进制代码组成（32个0或1），数字之间没有意义，且不容易记忆。为了方便记忆，现在计算机一般采用域名的方式来寻址，即在网络上使用一组有意义的字符组成的地址来代替IP地址来访问网络资源。
URL由4个部分组成，即“协议” “主机名” “文件夹名” “文件名”
互联网中有各种各样的应用，如Web服务，FTP服务等。每种服务应用都要有对应的协议。通常通过浏览器浏览网页的协议都是HTTP（超文本传输协议），因此网页的地址都以“http://”开投
如下面的URL：
http://www.webDesign.com/pages/computer.html'
其中http为协议部分
www.webDesign.com为主机名，表示文件存在于哪台服务器，主机名可以通过IP地址或者域名来表示
确定到主机后，还需要说明文件存在于这台服务器的哪个文件夹中，这里的文件夹可以分为多个层级
确定到文件夹后，就要定位到文件，即要显示哪个文件，网页通常是以“.html”或".htm"为扩展名
2.URL的类型
超链接的URL可以分为两种类型：绝对URL和相对URL
- 绝对URL一般用于访问非同一台服务器上的资源
- 相对URL是指访问同一台服务器上相同文件夹或不同文件夹中的资源。如果访问相同文件夹中的文件，只需要写文件名；如果访问不同的文件夹的资源，URL以服务器的根目录为起点，指明文件的相对关系，由文件夹和文件名两部分组成
六.超链接标签<a>
anchor 锚
超链接是指当单击一些文字、图片或其他网页元素时，浏览器会根据指示载入一个新的页面或跳转到页面的其他位置。
建立超链接所使用的HTML标签为一对<a></a>
超链接有两个最重要的要素：超链接指向的目标地址、设置为超链接的网页元素
属性href指向链接的目标（可以是各种类型的文件）
-
href：Hypertext Reference -
中文：超文本引用
1.链接到各种类型的文件
<!--链接到一个Word文件中-->
<a href="2.doc">链接到word文档</a><!--链接到一个新的页面，需要点击这个图片-->
<a href="new.html"><img src="picture.png"></a>2.链接到其他网站或FTP服务器
<a href="http://www.baidu.com">链接到百度</a><a href="ftp://172.16.1.254">链接到FTP服务器</a>3.设置电子邮箱链接
<a href="mailto:电子邮箱地址">电子邮箱</a>4.空链接#
<body><h4>外部链接</h4><a href="https://www.qq.com" target="_blank">腾讯</a><h4>内部链接：网站内部页面之间的相互链接</h4><a href="gongsijianjie.html">公司简介</a><h4>空链接</h4><a href="#">公司地址</a><h4>下载链接</h4><a href="BB1msKSi.zip">点我下载</a><h4>网页元素链接</h4><a href="https://www.baidu.com"><img src="images/BB1msyOb.jpg" /></a>
</body>5.设置超链接的目标窗口（target属性）
在创建网页的过程中，有时候并不希望超链接的目标窗口将原来的窗口覆盖，例如在打开新窗口时，主页面的窗口仍保留在原处。这时可以通过target属性设置目标窗口的打开方式，语法格式如下：
<a href="链接地址" target="目标窗口的打开方式">链接元素</a>
其中，target属性的取值如下：
| target值 | 目标窗口的打开方式 |
| _parent | 在上一级窗口打开，常在分帧的框架页面中使用 |
| _blank | 新建一个窗口打开 |
| _self | 在同一窗口打开，默认设置 |
| _top | 在浏览器的整个窗口打开，将会忽略所有的框架结构 |