HTML_2——插入图片、超链接和注释、提供页面元信息
1、img标签（插入图像）
定义
标签用于向网页中嵌入一幅图像。
从技术上讲，<img src=""> 标签并不会在网页中插入图像，而是从网页上链接图像。<img src=""> 标签创建的是被引用图像的占位空间。
注意
标签有两个必需的属性：src 属性 和 alt 属性。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 指定图像的替代文本。 |
| src | URL | 指定显示图像的 URL。 |
| width | px(pixels)、% | 设置图像的宽度（像素或百分比）。 |
| height | px(pixels)、% | 定义图像的高度（像素或百分比）。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指定包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
实例
<title>第二个程序</title>
<h1>使用img标签显示logo</h1>
<p>picture</p>
<img src="https://img95.699pic.com/photo/50046/5562.jpg_wh300.jpg" alt="爱您">
2、a标签（超链接）
定义
<a>标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页。
<a>标签最重要的属性是 href 属性，它指定了链接目标的 URL。
在浏览器中，通常超链接的默认外观是：
属性
| 属性 | 值 | 描述 |
|---|---|---|
| download | filename | 指定被下载的超链接目标。 |
| href | URL | 指定链接指向页面的 URL。 |
| hreflang | language_code | 指定被链接文档的语言。 |
| media | media_query | 指定被链接文档是为何种媒介/设备优化的。 |
| rel | text | 规定当前文档与被链接文档之间的关系。 |
| target | _blank、_parent、_self、_top、framename | 指定在何处打开超链接。 _blank：在新窗口中打开 _parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同 _self：当前窗口打开（默认） _top：在整个窗口中打开 framename：在指定的框架中打开 |
| type | MIME type | 指定被链接文档的的 MIME 类型。 |
实例
<title>第二个程序</title>
<h1>使用a标签显示超链接跳转</h1>
</a><p><a></a><a href="https://www.cnblogs.com/Nadir-Echo/">Mr_61的博客园</a></p>
3、meta标签
定义
标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。
标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。
元信息可以被浏览器（指导它如何加载和显示页面）所使用，也可以有利于搜索引擎收录页面（指定关键词）。
HTML5 通过 标签引入一个新的方法，让网页尺寸实现自适应。
比如同一个页面用浏览器和手机加载可以自适应屏幕的大小展示合适的网页屏幕
注意
标签永远位于 标签内部。
content 属性必须和 name 或 http-equiv 属性共存亡。
为了让网页尺寸实现自适应，你应该在 HTML 文档中加入下面代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
属性
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 指定 HTML 文档的编码。 |
| content | text | 指定与 http-equiv 或 name 属性相关的值。 |
| http-equiv | content-type、default-style、refresh | content-type：另一种声明 HTML 文档作用字符编码的方法（<meta http-equiv="content-type" content="text/html charset=UTF-8">）。 default-style：指定页面优先使用的样式表。 refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个 URL 让浏览器载入。 |
| name | application-name、author、description、generator、keywords、viewport | application-name：当前页所属 Web 应用系统的名称。 author：当前页的作者名。 description：当前页的内容描述。 generator：用来生成 HTML 的软件名称。 keywords：当前页的关键词。 viewport：网页尺寸自适应。 |
实例
实例一：指定网页编码
<meta charset="UTF-8">
实例二：为搜索引擎提供关键词
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
实例三：描述网页内容
<meta name="description" content="《零基础入门学习Web开发》案例演示">
实例四：定义网页的作者
<meta name="author" content="小甲鱼">
实例五：设置网页尺寸自适应
<meta name="viewport" content="width=device-width, initial-scale=1.0">
实例六：每 5 秒刷新一下浏览器并跳转到指定页面
<meta http-equiv="refresh" content="5;http://bbs.fishc.com">
4、注释
定义
<!--...-->用来在源文档中插入注释。注释不会在浏览器中显示。
实例
HTML 中注释:
添加注释文字:
<!-- 在此处写注释 -->
也可以将一句或者一段代码注释:
<!-- 此刻不显示此段落：<p>这是一个被注释了的段落。</p>-->
<title>第二个程序</title> <h1>使用img和a标签显示logo和超链接跳转</h1> <p>八月正午的阳光都没你耀眼</p> <!--暗号：super idol的笑容都没你的甜-->
5、疑问
1、img标签中alt属性的作用：
表格中说alt属性是 指定图像的替代文本，最开始不是很懂是什么意思
看了相关的资料：
如果无法显示图像，浏览器将显示替代文本，就像这样：
显然这是不符合我们的需求的，不能完整显示也要有所提示。那么alt就是来解决这样的事情的。
标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
浙公网安备 33010602011771号