【无标题】

最新推荐文章于 2023-12-25 15:56:57 发布

m0_73749576

最新推荐文章于 2023-12-25 15:56:57 发布

阅读量134

点赞数

文章标签： servlet

本文链接：https://blog.csdn.net/m0_73749576/article/details/126900931

版权

图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。

(1)语法

```html
<img src="" alt="" width="" height="">
```

(2)标签属性

- src属性

- 作用：用于指定图像文件的路径和文件名
- 注意：是<img>标签的必须属性
- 代码演示

- alt属性

- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验
- 代码演示

- width/height属性

- 作用:指定图片宽度/高度
- 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放
- 代码演示

(3)默认样式

- 多张图片可以交列在一行显示
- 默认产生下间隙

(4)典型应用

作为内容展示的图像：产品图、广告图、详情页、文章页中插图。

**(5)图像路径**

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需
路径的来描述图像文件的位置。
路径可以分成，相对路径和绝对路径。

**相对路径**

概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，
录，下一级目录。

- 当前目录

- 语法

一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。

```HTML
<img src="pic.png" alt="">
<img src="./pic.png" alt=""> 
```

- 上一级目录

- 语法

两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。

```HTML
<img src="../pic2.png" alt="">
```

- 下一级目录

- 语法

一个斜杠，表示图像文件位于HTML文件下一级。

```HTML
<img src="images/pic3.png" alt="">
```

**绝对路径**

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种
从盘符出发的绝对位置。

- 网络绝对位置

- 语法

包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png

- 本地绝对位置

- 语法

D盘下webset文件夹下的image文件夹中的logo.png描述为：

```
D:\webset\images\logo.jpg
```

特点:绝对URL始终指向同一位置，无论在何处使用

**注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝
接。

#### 2.2 超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档
部分。

(1)语法

```html
<a href="">文字或图片</a>
```

(2)语义

超链接

(3)默认样式

- 不独占一行

- 默认当前窗口打开

- 默认带有下划线、文字颜色

![](D:/web/2021/2021一阶段资料/day02/笔记/media/day02_04.png)

(4)超链接属性

- href属性

- 作用：指定链接跳转的地址

```html
<a href="http://www.jd.com">京东商城（文字链接）</a>
<a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">（图片链接）</a>
```

- target属性

- 作用：指定目标地址的打开方式

- 取值

- `_blank`新窗口打开
- `_self`当前窗口打开（默认值）

```html
<a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>
```

![day02_05](images/day02_05.png)

- title属性

- 作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示

![day02_06](images/day02_06.png)

**(5)链接的类型**

- 空链接

- 描述：如果当时没有确定链接的目标时使用空链

```html
<a href="#">商品</a>
```

- 外部链接

- 描述：链接到站外其他网站的链接（绝对地址）

```html
<a href="https://www.baidu.com"> 百度 </a>
```

- 内部链接（相对地址）

- 描述：网站内部页面之间的相互链接。直接链接内部页面的名称

```html
<a href="index.html">首页</a>
```

- 下载链接

- 描述：如果href里面的地址是一个文件或压缩包，会下载这个文件。

- 代码演示

```html
<a href="1.txt">下载文本文件</a>
```

**(6)锚点链接**

描述：当我们点击锚点链接时，可以快速定位到页面中的某个位置。

- 跳转至当前页面指定位置的锚点

- 语法：

```html
定义目标：
定义跳转：<a href="#box"></a>
```

- 跳转至其它页面的锚点

- 语法：

```html
定义目标：a.html页面的 <div id="box"></div>
定义跳转：<a href="a.html#test"></a>
```

**总结：**重点掌握内部链接，外部链接，锚点链接。

效果参考：https://www.tencent.com/zh-cn/about.html#about-con-1 腾讯企业站

### 文本格式化标签

概述：在日常用语中，我们常常会加重某个字的读音，或者用加粗等方式突出某句话的重点。

与此类似，HTML 也提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、删除划线等效果。

#### em标签

(1)语法

```HTML

```

(2)语义

强调，用于标记强调内容。

(3)默认样式

- 斜体显示
- 不独占一行

#### strong 标签

(1)作用

标记重要强调的内容。

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。

(2)语法

```html

```

(3)语义

着重强调

(4)默认样式

- 不独占一行
- 加粗显示

#### del标签

(1)作用

被从文档中删除的文字内容

(2)语法

```HTML
<del></del>
```

(3)语义

删除的内容

(4)默认样式

- 带有中划线
- 不独占一行

(5)应用

- 价格中的原价
- 待办事项中已完成的项

![day02_07](images/day02_07.png)

#### I标签

(1)作用

区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等

(2)语法

```html

```

(3)语义

无

(4)默认样式

- 斜体显示
- 不独占一行

#### b标签

(1)作用

定义粗体文本,用于吸引读者的注意到该元素的内容上。

(2)语法

```HTML

```

(3)语义

没有语义

(4)默认样式

- 加粗
- 不独占一行

#### span标签

(1)作用

作为行内容器包含短语内容，通常用来区分文本样式。

(2)语法

```HTML

```

(3)语义

无

(4)默认样式：无

#### 2.3 换行

常常我们在需要手动换行地方，加入换行标签，即可实现内容强制换行。

(1)语法

```html
 
```

**注意：**

- 不应该只为了实现加粗、斜体效果使用strong，em，可以使用css替代

- br用于处理文本内容换行，不应用于控制元素间距

### 3、HTML 字符实体

概述:HTML中有些字符是保留的。例如，不能直接在文本中输入大于号（>）或小于号（<），因为浏览器会
它们是标记。
希望浏览器如实显示这些字符，那么我们必须在HTML源代码中插入字符实体。

#### 3.1 常用的实体字符

![day02_08](images/day02_08.png)

- 注意：实体名称对大小写敏感！

#### 完整实体字符参考手册

https://www.w3school.com.cn/tags/html_ref_entities.html

具体所需可在使用时查询，无需记忆。

### 4、HTML语义化（谈谈你对HTML语义化理解-从以下两方面阐述）

#### 4.1 什么是语义化

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签
得给图片添加alt属性等）

#### 4.2 语义化的好处（为什么要语义化）

- 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
- 使代码更具【可读性】，便于团队开发和维护。
- 有利于SEO搜索引擎优化（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。爬虫依赖于标签
上下文和各个关键字的权重）。
- 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）