前端学习笔记＜3＞

前端学习笔记<3>

---

一、文本格式化标签

1. 加粗标签

<strong></strong>
<b></b>

2.倾斜标签

<em></em>
<i></i>

3.删除线标签

<del></del>
<s></s>

4.下划线标签

<ins></ins>
<u></u>

5.“盒子”标签

<div>和<span>这两个标签是没有语义的，它们相当于一个盒子，用来装内容的

<div>标签:
div是division的缩写，表示分割
特点：<div>标签用来布局，一个div单独占一行

<span>标签:
span以为跨度、跨距，一个span使
特点：<span>标签用来布局，一行可以有多个<span>

在VS-Code上使用这两个标签：

网页效果如下：

对比发现，<div>可以理解为是大盒子，<span>是小盒子,都是用来规范文本格式的。

二、图像标签和路径

1.图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像

<img src="图像URL"/>

img是单词image的缩写，意为图像

2.如何在网页中插入图像？

(1) 把图片文件和网页文件放在同一个文件夹中

(2) 在代码中写<img src="图片文件名"/>,表示将此文件名的照片放进网页中

(3) 在网页中打开，文件名为“照片.png”图片就放进了该网页中

src是<img>标签的必须属性。它用于指定图像文件的路径和文件名
所谓属性，可以简单理解为属于这个图像标签的特性

以下是图像标签的其他属性：

1）alt属性：替换文本

当图片无法显示时用文字替代

比如我们将代码中的图片文件名改为“照片1.png”，文件夹中并没有名为“照片1.png”的图片文件，因此在网页中无法显示该图片

那么网页中会出现一个裂开的图标，旁边显示替换的文字

2）title属性：提示文本

鼠标放到图像上提示的文字

当鼠标经过该图片上时，就会有文字提示

3) width属性

给图像设定宽度

注意这里的宽度单位是像素

修改后发现明显比原图小了很多

4）height属性

给图片设定高度
与宽度width同理，一般而言只用修改宽度或者高度其中之一即可另一个会等比例缩放

5）border属性

给图像设定边框

图片多了一个像素为10的边框

---

总结

图像标签属性注意点：

1.图像标签可以有多个属性，必须写在标签名的后面；
2.属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；
3.属性采取键值对的格式，即key="value"的格式，属性=“属性值”。