常见的标签

1.标题标签 （内容的标题）

在HTML 中一共有六级标题标签 h1 ~h6

<!-- 标题标签 -->
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
复制代码

注意：在显示效果上h1最大，h6 最小，但文字的大小不是我们结构该关心的，之后我们通过css样式完全可以控制这些标题的大小。

使用HTML 标签时，重点是标签的语义，即HTML 标签都是语义化标签

h1 代表 一个页面中的最重要的标题内容，h2~h6 重要性依次降低

对于搜索引擎，h1 的重要性仅次于title ,搜索引擎检索完 title,会立即查看h1 内容，所以它会影响到页面在搜索引擎中的排名，一般页面中只能写一个h1标签

2. 段落标签

用来表示内容中的一个段落 对应英文单词：paragraph 段落

<p>我是段落</p>
复制代码

注意：

  1. p标签中的文字默认会独占一行，并且文字太多时会根据浏览器窗口的大小自动换行
  2. 段落和段落之间会有间隙

3. 换行标签

在HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端才会自动换行，如果希望某段文字强制换行，就需要使用换行标签

br 标签 用来表示强制换行 对应英文单词 break 打断、换行

<br />  表示换行，自结束标签即单标签
复制代码

注意：文本之间写更多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析

4. 水平线标签

<hr />  // 在页面中自动生成一条水平线 
复制代码

实体

1. 说明：

在HTML 中，一些如 < > 这种特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊字符，这些特殊字符我们称为实体（转义字符串）

2. 实体的语法：

实体的名字 用 & 开头，分号” ；“结尾

&lt; <   less than
&gt; >   greater than
&nbsp; 空格
&quot;  引号
&copy; 版权符号
复制代码

浏览器解析到实体时会自动转换为对应的字符

实体有很多，去w3c手册找 HTML —— 实体

a<b<c   浏览器默认以标签形式 
复制代码
1<2<3   <!--数字可以   原因：标签都是字母开头  没有以数字开头的标签-->
复制代码
<p>我后面有个空格        我前面有个空格  happy sad</p>
​
<!--浏览器处理空格方式： 不管有多少空格，浏览器就按一个空格处理-->
复制代码

图片标签

1. 作用：

使用img 标签向网页中引入一个外部图片

img 标签也是一个单标签 自结束标签

<img src="图片路径" title="图片标题" alt="图片描述" />
复制代码

2.属性

src 属性

设置一个外部图片的路径

alt 属性

  1. 可以用来设置在图片不能显示时，对图片的描述，也叫替换文本，图像显示不出来用文本替换
  2. 搜索引擎可根据alt 属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img 图片进行收录

例如：百度 搜索图片

title属性

用来提示图片，也叫提示文本，鼠标放到图像上，即悬停到图像上提示的文字

border 属性

设置图像的边框粗细

width 属性

可以用来修改图片的宽度，一般使用px 作为单位

height 属性

可以用来修改图片的高度，一般使用px 作为单位

width height 属性注意：

  1. width 变小，高度也变小了，
  2. 当宽度和高度俩个属性只设置一个，另一个也会同时等比例调整大小，
  3. 两个值同时指定，则按照指定值来设置
  4. 一般开发中除了自适应页面，不建议同时设置图片的宽高。
  5. 图片本身大所占的内存也会大，如果实际用我们所用的图片比图片本身宽高小，建议去找美工修改图片尺寸

注意：

  1. 图像标签拥有多个属性，这些属性必须写在标签名的后面
  2. 属性之间不分先后顺序，标签名和属性、属性和属性 之间 均以空格分开
  3. 属性采用键值对得到格式，即key="value" 的格式 代表 属性名=”属性值“

问题：

  1. 图像标签中哪个属性是必须要加的？
  2. 图像标签中title 和 alt 属性的区别？

图片路径

1. 说明

src 属性配置的是图片的路径，实际开发中，我们页面的图片会非常多，通常我们都会新建一个文件夹来存放这些图片文件，这时去查找图片，就需要采用"路径"的方式来指定图片文件的位置

路径分为 相对路径和绝对路径，目前我们所要使用的路径全都是相对路径

2. 相对路径

相对路径：相对于当前资源所在目录的位置，即图片相对于html 页面的位置

当前资源：图片路径写在哪个文件 哪个文件就是当前资源

如：

情况一：当前有一个目录 hello hello目录下 有a.png path.html

a.png写在path.html 里， a.png 这个路径相对于当前资源path.html 来说的

那看看path.html 这个文件在哪 在 hello 文件夹里 那我的相对路径是相对于谁 是hello文件夹

所以 我写一个a.png 什么意思 是在当前资源path.html 所在的目录 hello 文件夹里 找 a.png 有 所以能找到

<img src="a.png">   <!-- 当前资源path.html所在的目录hello文件夹里找a.png  -->
复制代码

情况二：当前有一个目录 hello hello目录下 存放abc 目录 和 path.html，abc 目录下有 a.png

当前资源 是path.html 所在目录 hello 去找图片

图片在 abc/a.png 即 当前资源 是path.html 所在目录 hello 去找 abc/a.png

<img src="abc/a.png"> <!--当前资源 是path.html  所在目录  hello  去找 abc目录去找 a.png  -->
复制代码

情况三：当前有一个目录 hello hello目录下 存放abc 目录 和 path.html，abc 目录下有 def 目录 ，def目录下放a.png

当前资源 是path.html 所在目录 hello 去找图片

图片在 abc/def/a.png 即 当前资源 是path.html 所在目录 hello 去找 abc/def/a.png

<img src="abc/def/a.png"> <!--当前资源 是path.html所在目录hello去找 abc目录下的def目录下找 a.png  -->
复制代码

3. 上级目录 ../

用法：../ 代表返回当前文件夹的上一级 ，返回几级目录就写几个../

情况一 、 现有demo目录,demo 目录下 有hello文件夹 和a.png ， hello 文件夹下 path.html

<img src="a.png"> 表示当前资源path.html所在目录 hello目录下找png
复制代码

现在图片是放在 demo 目录里，而不是hello 目录下，显然是找不到的

如果要找 需要 从hello 这个目录 返回到 demo 文件夹下才能找到

<img src="../a.png">  ../代表返回当前所在目录的上一级目录
复制代码

上面路径代表 当前资源所在的目录 hello 的上一级目录 demo 找图片 a.png

情况二 、 现有demo目录,demo 目录下 有hello文件夹 和img 文件夹 ，img 文件夹下有a.png , hello 文件夹下有 path.html

<img src="../img/a.png">  ../代表返回当前所在目录的上一级目录
复制代码

情况三 、图片再放到上一级

<img src="../../a.png">  几个../ 就代表返回几级目录
复制代码

问题：图片放到E盘 页面放到F盘 可以吗 可以

但是实际开发不这样做，并且我们图片和页面尽量离得很近，方便我们去找

总结：

相对路径分类 符号 说明
同一级路径 图像文件位于和HTML文件同一级：如
下一级路径 / 图像文件位于和HTML文件下一级：如
上一级路径 ../ 图像文件位于和HTML文件上一级：如

相对路径是从代码所在的目录出发去寻找目标文件。

我们这里所说的上一级、下一级和同一级就是图片相对于HTML 页面的位置

4. 绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的位置。

例："D:\web\html\img\a.png" 或者 "www.baidu.com/img/logo.pn…"

图片格式

1. 常见得到图片格式

（1）jpeg (jpg)

支持的图片颜色比较多，图片可以压缩（体积小），不支持透明，

一般使用jpeg 来保存图片等颜色丰富的图片，从网上搜的图片 十有八九都是jpeg 因为它不仅可以保留图片的色彩，体积还小

（2）gif

支持的颜色少，只支持简单的透明，支持动态图

图片颜色单一或者动态图可以使用gif

例：网上的gif图片比较模糊，因为它支持的图片颜色少

简单的透明： 只支持直线的透明 正方形 可以透明 圆形就不行，花瓣形状更不行

（3）png

支持的颜色多，并且支持复杂的透明

可以用来显示颜色复杂的透明的图片

2. 图片的使用原则

效果不一致，使用效果好的

效果一致，使用小的

例：图片格式不同，效果一样 ，使用小的

颜色单一 的 gif 十有八九用 gif 小的

透明图 选效果好的 png

\

作者：乖_小孩
链接：https://juejin.cn/post/7109309576247246879
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。