小君 HTML5文档的文本控制标记 图像标记 超链接标记
HTML5文本控制标记
在一个网页中文字往往占有很大的篇幅，为了让文字能够排版整齐，结构清晰，HTML5提供了一些文本控制标记，通常有以下几种：
- 标题标记
<h1>~<h6> - 段落标记
<p>
为了使网页更具有语义化，我们经常会在页面中用到标题标记。HTML5提供了6个等级的标题标记：<h1>~<h6>，它的基本语法格式为：<hn align="对齐方式">标题文本</hn>，n取值为1~6。
使用<h1>~<h6>标记设置6中不同级别的标题。一个页面中只能使用一个<h1>标记，常常被用在网站的LOGO部分，h元素具有确切的语义，所以谨慎选择恰当的标记来构建文档结构。鳄鱼君提请大家，不要仅仅为了加粗或更改文字大小而使用h标记！
为了让网页展示的文字更加有条理，就离不开段落标记<p>，它是HTML5文档中最常见的标记，基本语法格式为：<p align="对齐方式">段落文本</p>。语法中align属性为<p>标记的可选属性，和标题标记<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。基本用法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>段落标记演示</title>
</head>
<body>
<p>欢迎访问鳄鱼教程！这里有最详细的教程资源</p>
<p align="left">这段文本的显示方式为左对齐</p>
<p align="center">这段文本的显示方式为居中对齐</p>
<p align="right">这段文本的显示方式为右对齐</p>
</body>
</html>水平线
水平线将段落与段落之间隔开，使文档结构清晰，层次分明。水平线的基本语法格式为：<hr 属性="属性值"/>，<hr/>是单标记，在网页中输入一个<hr/>,就添加了一条默认样式的水平线。<hr/>标记常用的属性：
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 设置水平线的对齐方式 | 可选择left.right.center三种值，默认为center，居中对齐 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| color | 设置水平线的颜色 | 可是颜色名称.十六进制#RGB.rgb(r,g,b) |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% |
换行标记
在HTML中，一个段落从左边开始到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望段落文本强制换行，可以使用换行标记<br/>。在浏览器中使用回车键并不会使段落换行，而是使用换行标记<br/>。
文本格式化标记
在网页中，有时需要为文字设置粗体、斜体、下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示。常用的文本格式标记有以下几种：
| 标记 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体方式显示（b定义文本粗体.strong定义强调文本) |
| <i></i>和<em></em> | 文字以斜体方式显示(i定义斜体字，em定义强调文本) |
| <s></s>和<del></del> |
文字以加删除线方式显示(HTML5不赞成使用s) |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（HTML5不赞成使用u） |
特殊字符标记
如何在网页上显示一些包含特殊字符的文本呢？你在这个页面上看到的< >，这就是特殊字符，如果不经过处理，浏览器会解析掉它的。下表是一些常见的特殊字符标记：
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2(上标2) | ² |
| ³ | 平方3(上标3) | ³ |
HTML5图像标记
网页中图像过大，会造成网页打开缓慢，太小又会影响图像的质量，，那么哪一种图像的格式可以解决这个问题呢？目前网页上常用的图像格式有GIF、PNG、JPG三种，我们来分别看一下。
GIF
GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片的质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很合适在互联网上使用。GIF格式常用LOGO，小图标以及其他色彩相对单一的图像。
PNG
PNG格式包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡平滑，但PNG不支持动画。
JPG
JPG格式所能显示的颜色比GIF和PNG要多得多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。
浏览网页时，我们经常会看到一些精美的图片，在网页中使用图像就需要使用图像标记，它的基本语法格式为：<img src="图像URL"/>，其中src属性用于指定图像文件的路径和文件名。图像标记中其他常见的属性：
- title属性，使用title属性设置提示文字，当鼠标移动到图像上时就会出现提示文本。
- align属性，图像的对齐属性align，用于调整图像的位置。
- alt属性，图像的替换文本属性，在图像无法显示时告诉用户该图像的内容。
- width、height属性，用力啊定义图像的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。
- border属性，为图像添加边框，设置边框的宽度，但边框的颜色的调整仅仅通过HTML属性是不能够实现的。
- vspace、hspace属性，HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。
通常创建一个文件夹专门用于存放图像文件，这时候插入图像就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。这涉及到相对路径和绝对路径，你必须要搞清楚！
绝对路径
绝对路径就是网页上的文件或目录在硬盘上真正的路径。网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器
相对路径
相对路径就是相当于当时文件的路径，通过层级的关系描述图像的位置。相对路径不带有盘符，通常是以HTML网页文件为起点。
我们重点来看一下相对路径的用法，这也是我们以后需要经常使用的我们来看一下具体的使用方法（由于样式污染，会存在alt和title属性）：
/*图像文件和html文件位于同一文件夹*/
<图像标签img src="logo.png"/> /*只需输入图像文件的名字即可*/
/*图像文件位于html文件的下一级文件夹*/
<图像标签img src="img/logo.png"/> /*输入文件夹名和文件名，之间用"/"隔开*/
/*图像文件位于html文件的上一级文件夹*/
<图像标签img src="../logo.png"/> /*在文件名之前加入"../"，如果是上两级，则需要使用"../../"，以此类推..*/HTML5超链接标记
在HTML中创建超链接非常简单，只需要用<a> <a/>环绕需要被链接的对象即可。它的基本语法格式为：
<a href="跳转目标" target="目标窗口的弹出方式" rel="noopener noreferrer">对超链接标记常用的属性解释如下：
- href属性，用于指定链接目标的url地址，当为
<a>标记应用href属性时，它就具有了超链接的功能。 - target属性，用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。
HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。我们来看一个案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>锚点链接演示</title>
</head>
<body>
<strong>鳄鱼教程介绍</strong>
<ul>
<li><a href="#one">跳转到id为one的位置</a></li>
<li><a href="#two"></a></li>
<li><a href="#three"></a></li>
</ul>
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
</body>
</html>通常锚链接用于文档目录，便于用户快速的减速内容，那么跳转的位置就应该是h标记，这里由于样式污染，不再演示，可行编写长篇文档测试一下效果。创建锚点链接分为两步：
- 使用“< a href=”#id名”>链接文本</a>”创建连接文本。
- 使用相应的id名称标注跳转目标的位置。
模板君 » HTML5文档的文本控制标记 图像标记 超链接标记
