day03 - 文本效果、图片、路径1. 站点建立 1.1. 为什么建立站点网页通常由图片、视频、音频等多种元素组成，

1. 站点建立

1.1. 为什么建立站点

网页通常由图片、视频、音频等多种元素组成，而一个成熟的网站又由多到数不胜数的网页所组成

那么问题来了，我们怎么管理这些文件呢？

生活中，我们将物品进行分类处理

工作中，我们建立站点存放文件

站点的本质是一个文件夹
一个站点由若干文件组成
文件根据格式分类存放，便于统筹管理

html文件夹（存放html文件）
css文件夹（存放css文件） 
images文件夹（存放图片文件）
js文件夹（存放JavaScript文件）

1.2. 站点命名规范

网站首页命名一般是是index 或 home

其他文件或文件夹的命名规则：

只能是字母，数字，下划线、中划线
不能是中文
不能以数字开头
见名知义(以最少的字母达到最容易理解的意义)

1.3. 换行标签

用法

哪里需要换行哪里就插入换行标签

语法

<br /> 
单标签

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    正常的文本：最编程，创未来！你好，程序员！<br />
    加粗的文本：<strong>最编程，创未来！你好，程序员</strong>
  </body>
</html>

效果

2. 文本效果

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

标签语义: 突出重要性，比普通文字更重要

用在这里

语法

语义	标签	说明
加粗	或	推荐使用strong，语义更强烈SEO更为良好
倾斜	或	推荐`em`表达要素对SEO更加友好， `i`视觉要素没有意义
删除线**	或	推荐del语义更强烈
下划线**	或	推荐ins语义更强烈
上角标**
下角标**

搜索引擎优化，又称为SEO，即Search Engine Optimization，它是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。百度搜索、bing搜索、搜狗搜索、360搜索等等等等很多很多，这些我们称之为“搜索引擎”

什么叫做SEO，大白话版：我们经常在百度搜东西，比如说你在百度搜索“铁军儿”，为什么不是咱们班级的铁军儿呢？，原因有这么几个：

铁军儿没有在互联网上留下过自己的痕迹
没有使用“铁军儿”这个关键字
互联网上有铁军儿的信息而且用的是也是铁军儿的关键字但是为什么没有排在第一？

因为铁军儿可能在互联网上没有那么的活跃

小美做了一个网站，名字叫做“小美的日常生活”，你在百度上面搜索“小美的日常生活”，你会搜不到

小美做完这个网站以后没有提交给百度，百度压根不知道有这么一个网站存在
小美的日常生活这个网站不够活跃因此排不到最前面

要想让小美的日常生活这个网站排在百度的前面怎么做？

每天更新一篇博客
每天更新的博客不要抄袭
争取让更多的用户留言讨论点赞转发

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    正常的文本：最编程，创未来！你好，程序员！<br />
    加粗的文本strong标签：<strong>最编程，创未来！你好，程序员</strong> <br />
    加粗的文本b标签：<b>最编程，创未来！你好，程序员！</b><br />
    倾斜的文本em标签：<em>最编程，创未来！你好，程序员！</em><br />
    倾斜的文本i标签：<i>最编程，创未来！你好，程序员！</i><br />
    删除线的文本del标签：<del>最编程，创未来！你好，程序员！</del><br />
    删除线的文本s标签：<s>最编程，创未来！你好，程序员！</s><br />
    下划线的文本ins标签：<ins>最编程，创未来！你好，程序员！</ins><br />
    下划线的文本u标签：<u>最编程，创未来！你好，程序员！</u><br />
    上角标标签sup标签：3<sup>2</sup>=9<br />
    下角标标签sub标签：H<sub>2</sub>O
  </body>
</html>

效果

特点：这些标签都有一个共同点，一行可以放多个标签

课堂互动

加粗的效果用什么标签实现?

- A：div
- B：p
- C：span
- D：b
- E：ins
- F：i
- G：u

倾斜的效果用什么标签实现？

- A：div
- B：p
- C：del
- D：b
- E：ins
- F：em
- G：u

下划线效果用什么标签实现？

- A：div
- B：p
- C：span
- D：b
- E：ins
- F：i
- G：u

删除线效果用什么标签实现？

- A：div
- B：p
- C：span
- D：b
- E：ins
- F：i
- G：u

2.1. div和span

div和span是没有语义的，它们就是一个盒子，用来装内容的，不像我们的标题标签或者是加粗标签，他们对于SEO都很友好，而div和span对SEO无感，他们就是一个盒子（就是用来装东西的，没有其他任何的意义，所以对SEO无感）

div大家可以理解为是网页中最大的盒子，span可以理解为最小的盒子

用在这里

语法

<div>内容</div>
<span>内容</span>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    正常的文本：最编程，创未来！你好，程序员！<br />
    div标签包起来的文本：<div align="right">最编程，创未来！</div>
    <span>span标签包起来的内容：最编程，创未来！</span>
    <span>span标签包起来的内容：你好，程序员！</span>

  </body>
</html>

效果

div属性

align

语法

<div align="位置">内容</div>

align取值：left（默认）/center/right

代码

<!-- 
最编程，创未来！
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    正常的文本：最编程，创未来！你好，程序员！<br />
    div标签包起来的文本：<div align="right">最编程，创未来！</div>
  </body>
</html>

效果

特点

div

独占一行
就是一个大盒子
没有任何的语义（正因为没有任何的语义所以可以高频次使用）

Span

不是独占一行
是一个小盒子
没有任何的语义（可以高频次的使用）

2.2. font标签

font标签可以规定文本的大小和颜色、包含字体

语法

<font>文本</font>

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <font>你好</font>
</body>
</html>

效果

2.2.1. 属性

2.2.1.1. color

语法

<font color="颜色单词/16进制/rgb">文本</font>
<!-- 
  颜色单词：red blue等
  16进制：#ff0000
  rgb：rgb(255,123,0)
-->

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <font color="orange">你好</font>
</body>
</html>

效果

2.2.1.2. size

语法

<font size="1 - 7"></font>

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <font color="rgb(255,123,0)" size="7">你好</font>
</body>
</html>

效果

2.2.1.3. face

语法

<font face="字体"></font>

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <font face="宋体" color="rgb(255,123,0)" size="7">你好</font>
</body>
</html>

效果

2.3. 特殊字符

转义字符串是字符组合，用来解决无法在网页中正常显示的字符

用在这里

语法

&字母组合;

在英文状态下：
以“&”号开头（按住shift不要松，然后按7）
以“;” 结尾

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <p>最编程，创未来！版权&copy; ©</p>

    <!-- 

    版权符号几种方式：
    1. &copy;
    2. 搜狗输入法
    3. 可以找个有版权符号的网站复制一个

    -->
  </body>
</html>

效果

参照表

teshuzifu.cn/html

2.4. 注释

注释用于解释说明代码的用途

注释里面的内容，浏览器不执行、不解析、不显示

HTML中的注释以""结束

用在这里

用在以.html或.htm为后缀的网页文件中

语法

<!-- 对于代码的说明或描述内容 -->

快捷键：Ctrl + /你也可以手动去写<!-- -->
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <!-- 这是标题 -->
    <h1>最编程，创未来！你好，程序员！</h1>
  </body>
</html>

效果

注意：注释标签不能嵌套

3. 图片标签及属性

用在这里

3.1. 图片标签

语法

<!-- 截止到目前为止我们学习的单标签一共几个了？
1. 水平线标签：<hr />
2. 换行标签：<br />
3. 图片标签：<img />
-->
<img src="" /> <!-- 单标签（单身狗） -->

src（图片的路径地址，通过src属性就可以把网上、本地的图片加载到网页当中）: '图片路径'
src属性是img标签必须要有的，意思就是说如果你使用了img标签那么src属性就一定要有东西不能为空

代码

<!-- 
素材：https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <img src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h" />
  </body>
</html>

效果

3.2. 图片标签的属性

3.2.1. 属性列表

属性	属性值	说明
src	图片路径	相对路径或绝对路径
width	数值	图片的宽度
height	数值	图片的高度
alt	当图片无法正常显示的时候会把alt属性里面的内容显示在网页上	好处：对SEO（搜索引擎）友好，可以让搜索引擎的蜘蛛知道这张没有显示的图片大概是什么内容对用户友好（可以知道这张没有显示的图片大致是什么内容）
title	鼠标悬浮于图片之上就可以把title的内容显示出来了
border	数值

3.2.1.1. width（宽度）

语法

<img src="图片路径" width="数值" />

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <img 
      src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
      width="200"
      />
  </body>
</html>

效果

3.2.1.2. height（高度）

语法

<img src="图片路径" width="数值" height="数值" />

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图片标签的讲解</title>
</head>
<body>
	<img 
		src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
		width="200"
		height="200"
		 />
</body>
</html>

效果

问题（图片变形了怎么办？）

width和height你设置一个值就可以了，就不会变形了

如果设置了width那么height会以width的宽度为比例进行高度的自适应
如果设置了height那么width会以height的高度为比例进行宽度的自适应

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签的讲解</title>
  </head>
  <body>
    <img 
      src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
      height="300"
      />
    <!-- 

    图片变形了怎么办？
    1. width和height设置的时候要成比例（很麻烦）
    2. 我们只需要设置宽度，高度不用设置让他自适应就可以了（高度自适应会按照宽度的比例自动缩放）
    3. 我们只需要设置高度，宽度不用设置让他自适应就可以了（宽度自适应会按照高度的比例自动缩放）
    -->
  </body>
</html>

效果

3.2.1.3. alt

当图片不能正常显示的时候会把alt里面的内容显示在网页上

语法

<img alt="当图片无法正常行显示的时候会把alt里面的内容显示到网页上" />

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签的讲解</title>
  </head>
  <body>
    <img 
      src="https://i0.hdslb.com/bfs/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
      height="300"
      alt="最编程，创未来！你好程序员！"
      />
  </body>
</html>

效果

3.2.1.4. title

当图片正常/不正常显示的时候鼠标悬浮于图片之上就会把title里面的内容显示出来

语法

<img title="当图片可以正常显示的时候，鼠标悬浮于图片之上就会把title里面把的内容显示出来" />

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签的讲解</title>
  </head>
  <body>
    <img 
      src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
      height="300"
      title="最编程，创未来！加油，程序员们！"
      />
  </body>
</html>

效果

3.2.1.5. border

可以给图片添加边框

语法

<img border="数值" />

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签的讲解</title>
  </head>
  <body>
    <img 
      src="https://i0.hdslb.com/bfs/archive/0dc35d935b2da55e461185fc650662948a8ec885.png@320w_200h"
      height="300"
      title="最编程，创未来！加油，程序员们！"
      border="5"
      />
  </body>
</html>

效果

课堂互动

按照上图新建站点，把imgs文件夹里面的logo.png插入到index.html网页中
设置图片大小、border、title，注意图片不能变形

4. 相对路径和绝对路径

4.1. 什么是路径？

路径就是磁盘上查找文件所历经文件夹的路线

斜线（/）和冒号（:） => D:/img/logo.png

要找到图片的路径两种方法：

4.2. 相对路径

相对路径是指目标相对于当前文件的路径

代码	行为
./	当前位置同级
/	下一级
../	返回当前位置的上级目录

相对路径中./可以忽略不写，在NodeJS中./必须写

相对路径依赖的是当前位置，如果修改了文件的位置那么文件中的路径可能也需要修改

4.3. 绝对路径

绝对路径是完整的描述文件位置的路径，分为两类

本地绝对路径：以根位置（盘符）为起点 D:/img/myPhoto.png（很少使用）

访问我们本地网页的两种方式（协议）：

file协议，如何触发file协议呢？

1. 直接在你电脑的硬盘找到你要打开的网页，双击鼠标左键打开的就是file协议
2. 用VSCode的open in default browser这个插件打开的网页也是file协议

http，如何触发http协议呢？

http://localhost:52330/html/yemian/index.html

1. 用你的VSCode的服务器方式打开，live server和“在浏览器中打开”就是基于http协议打开的网页

网络绝对路径：网址 www.baidu.com/search/sear…

绝对路径弊端：

本地绝对路径迁移性比较差，比如只要更换了电脑或设备那么被引用的资源就找不到了
网络绝对路径，有的站点做了资源防盗链，你是引用不过来的，比如微信公众号对资源防盗链要求比较严格因此无法引入到你的站点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
  <!-- 微信公众号的图片 -->
	<img src="https://mmbiz.qpic.cn/mmbiz_png/36iaLN6jZib0gbSXqTgBR8l4EA1zqrMfSEVky3KvvMVCeoPiboiabyvKiaW2SQuic8uvqSJC8bUY4kScMCvOzFz9vvBw/640?wx_fmt=png&from=appmsg&wxfrom=13&tp=wxpic" alt="">
</body>
</html>

4.4. 总结

常用的是相对路径

迁移性好
更加简洁

课堂练习

图片标签的练习

挑几张自己喜欢的照片、图片，加载到网页

图1要求：用相对路径，alt属性，title属性，width，height，border都要用

图2要求：用绝对路径，alt属性，title属性，width，height，border都要用

如图：

5. 常见图片格式

5.1. jpg

概述：扩展名为.jpg或.jpeg，是一种有损压缩格式，既然jpg是“有损的”图像，也就是说使用此格式时，若减小文件大小，在一定程度上也会降低图像质量，往往会把肉眼不容易察觉出来的细节丢弃掉

特点：

不支持动图
不支持透明

优缺点：

优点-更小文件的体积，通用浏览器和操作系统广泛支持
缺点-有损图像压缩可能导致较差的文本可读性

应用场景：

博客和文章图像（如用户头像，产品图片等）的不错选择，比如京东商品详情页图片
大多数社交媒体平台会自动将上传的图像文件转换为JPG
对细节要求不高的场景

注意：

不要将JPG格式用于信息图表（拥有很多小文本）或教程截图，因为图像里面的文字至关重要

5.2. png

概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片

特点：

质量高
占用空间大
支持透明背景
不支持动图

优缺点：

优点-高质量（无损）图像和清晰可见的文本
缺点-如果文件过多（特别是高分辨率图像），可能会严重影响网站加载速度

应用场景：

背景需要有透明的背景，比如百度logo、京东logo
高质量呈现的场景，重要的产品配图，希望图片上的文字能够清晰地展示，比如比亚迪官网汽车商品图

注意：

尽量在网站上少使用png，因为体积太大会导致网站图片加载过慢，影响用户的体验

5.3. bmp

概述：扩展名为.bmp，过期的一种无压缩图片格式，最大程度上保留了图片的更多细节

特点：

占用空间大不利于存储和处理
不支持透明背景
不支持动图

优缺点：

优点质量高
缺点体积太大了

应用场景：对图片细节要求极高的场景，例如大型游戏中的图片，比如流星蝴蝶剑安装后的图片格式

你可以截图jpg、png、bmp一样的内容试试看哪种格式的最大，一定是bmp格式的（实测通过微信截图bmp并没有体现出体积最大，下去看看问题在哪里）

5.4. gif

概述：扩展名为.gif，该格式也使用了无损压缩，且将图像“约束”为8bits/每个像素（JPG可支持24-bit），并限制为256色调色板，色彩呈现不是很完整

特点：

支持的颜色较少
支持简单的透明背景，无法呈现复杂的透明背景，复杂的透明背景还得使用png呈现
支持动图

优缺点：

优点-更小的文件体积和动画支持
缺点-8-bit限制代表图像质量受限

使用场景：

网页中的动图，比如天猫分类旁边的“双11”天猫Tmall.com - 买正品上天猫就购了
表情包

二进制数系统中，每个0或1就是一个位(bit)，位是数据存储的最小单位。其中8bit就称为一个字节(Byte)

5.5. webp

概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片，是jpg、png的最佳替代者

特点：

具备上述几种图片格式的优点
兼容性不太好

优缺点

优点-较小的文件即可获得相同或更好的图像质量
缺点-并非所有浏览器和图像编辑器都支持

兼容情况

Google Chrome浏览器（电脑设备为17+版本，移动设备为25+版本），Firefox (65+)，Edge(18+) 和 Opera(11.0+) 都支持WebP。Safari计划版本14也将支持WebP
大多数计算器系统自带的图像编辑器仍不支持该格式，但Photoshop等专业软件均支持WebP

使用场景

JPG和PNG文件最佳替代格式，可节省带宽并提升网站加载速度而且能够高质量的呈现，一旦使用一定要注意兼容性的问题，小米商城、百度图库大量使用了webp格式

兼容性一般这么处理，通过JS判断你的浏览器是否支持webp格式，如果支持那么就加载webp格式的图片，如果判断浏览器不支持webp格式那么就加载jpg图片

5.6. base64

概述：准确地说，Base64并不是一种图像文件格式，而是一种用于传输8位字节码的编码方式，它通过将代表图像的编码直接写入HTML或CSS中来实现图像的展示要通过浏览器打开传统的看图工具通常无法查看

特点：

不受位置的限制

如何生成base64：可以借助于一些网站工具

如果使用：

<img src="base64编码" />

使用场景：一般较小的图片会采用base64编码的方式，减少http请求（一般经过Base64编码后的图像大小，会增大1/3，所以，只有对于小图(公司规范要求不超过8KB)，Base64才能体现出真正的性能优势

5.7. 总结

常用就是jpg，如果需要透明可以使png和gif（高质量透明png，低质量的透明可以是gif），webp和avif也一定是当下和未来的趋势