文章目录
- 一、概念
- 二、链接
- 三、图像
一、概念
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它被用来描述网页的结构和内容，并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本，增加了许多新的元素和功能，以适应现代网页开发的需求。
HTML5 提供了许多新的元素和 API，使得开发者可以创建更丰富、更交互式的网页和应用。例如，HTML5 引入了视频和音频元素，使得在网页上直接播放多媒体内容变得简单；还引入了 Canvas 和 SVG 元素，用于绘制图形和动画；另外，HTML5 还提供了地理位置 API、文件 API、Web Storage API 等，使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。
除了新增的元素和 API，HTML5 还改进了一些现有的元素和功能。例如，HTML5 改进了表单元素，提供了更多的输入类型（如 email、number、range 等），使得表单的验证和输入更加方便；还改进了语义元素（如 header、footer、article 等），使得网页的结构更加清晰和易于理解。
二、链接
HTML链接是用于在网页间建立链接的元素。链接可以指向其他网页、其他部分的同一网页、外部资源或电子邮件地址。
一个HTML链接的基本语法如下：
<a href="URL">链接文本</a>
其中，<a>是链接元素的起始标签，</a>是链接元素的结束标签。href属性定义了链接的目标，可以是一个URL、一个文件路径或一个锚点。链接文本是在页面上显示的链接文字。
以下是一些常见的HTML链接的示例：
- 链接到其他网页：
<a href="https://www.example.com">进入示例网站</a>
这个链接将会打开一个新的浏览器窗口，并跳转到https://www.example.com网页。
- 在同一网页内部建立链接：
<a href="#section1">跳转到第一部分</a>...<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>
这个链接将会在同一个页面内部跳转到id为section1的部分。
- 链接到外部资源：
<a href="images/example.jpg">查看示例图片</a>
这个链接将会打开images文件夹中的example.jpg图片。
- 链接到电子邮件地址：
<a href="mailto:example@example.com">给我发送电子邮件</a>
这个链接将会在用户点击时打开默认的邮件客户端，并预填写收件人为example@example.com。
HTML链接还可以通过target属性来指定链接的打开方式。示例如下：
<a href="https://www.example.com" target="_blank">在新标签页打开示例网站</a>
这个链接将会在新的浏览器标签页中打开https://www.example.com网页。
| 属性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持。规定目标 URL 的字符编码。 |
| coords | coordinates | HTML5 不支持。规定链接的坐标。 |
| download | filename | 指定下载链接 |
| href | UR | L 规定链接的目标 URL。 |
| hreflang | language_code | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 |
| media | media_query | 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。 |
| name | section_name | HTML5 不支持。规定锚的名称。 |
| rel | alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 |
| rev | text | HTML5 不支持。规定目标 URL 与当前文档之间的关系。 |
| shape | default、rect、circle、poly | HTML5 不支持。规定链接的形状。 |
| target | _blank、_parent、_self、_top、framename | 规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。 |
| type | MIME_type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。 |
三、图像
在HTML中，使用<img>标签来插入图像。<img>标签是一个自封闭标签，不需要结束标签。以下是插入图像的基本语法：
<img src="image.jpg" alt="图像描述">
其中，src属性指定了图像的文件路径或URL。alt属性用于提供图像的替代文本，当图像无法加载时，替代文本会显示给用户。
以下是一些常见的图像插入的示例：
- 插入本地图像：
<img src="images/image.jpg" alt="示例图像">
这个示例将会在images文件夹中查找image.jpg图像，并在页面中显示。
- 插入远程图像：
<img src="https://www.example.com/image.jpg" alt="示例图像">
这个示例将会从https://www.example.com地址加载image.jpg图像，并在页面中显示。
- 添加图像宽度和高度：
<img src="image.jpg" alt="示例图像" width="200" height="150">
这个示例将会以200像素的宽度和150像素的高度显示图像。
- 图像链接：
<a href="https://www.example.com"><img src="image.jpg" alt="示例图像">
</a>
这个示例将会在点击图像时跳转到https://www.example.com网页。
需要注意的是，建议为每个图像都提供一个有意义的alt属性，以提高可访问性，并为全部图像添加适当的宽度和高度属性，以避免页面加载时的布局问题。
另外，在使用图像时应尽量优化图像大小和格式，以提高页面加载速度。
| 属性 | 值 | 描述 |
|---|---|---|
| align | top、bottom、middle、left、right | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
| loading | eager：立即加载，lazy：延迟加载 | 指定浏览器是应立即加载图像还是延迟加载图像。 |
| alt | text | 规定图像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 |
| crossorigin | anonymous、use-credentials | 设置图像的跨域属性 |
| height | pixels | 规定图像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 |
| ismap | ismap | 将图像规定为服务器端图像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 |
| src | URL | 规定显示图像的 URL。 |
| usemap | #mapname | 将图像定义为客户器端图像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 |
| width | pixels | 规定图像的宽度。 |
)
