HTML5+CSS——03乱码、标签、实体、图片

复习上章最基本HTML页面格式：

网页基本格式

---

一.进制的简介

进制：几进制就是满几进一

常用：二进制、十进制、十六进制、八进制

进制

二.乱码的问题

乱码出现原因：1.计算机非常笨，他只认识两个东西0 1 。2.计算机保存任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。3.产生乱码的根本原因是，编码和乱码采用的字符集不同。

因此 ，需要编码和解码。

编码：依据一定的规则，将字符转换为二进制编码的过程。

解码：依据一定的规定，将二进制编码转换为字符的过程。

字符集：编码和解码所采用的规则，称为字符集。

常见字符集：ASCII 、ISO-8859-1 、GBK 、GB2312（中文系统的默认编码） 、UTF-8（万国码）、ANSI（自动以系统的默认编码来保存文件）

在中文系统的浏览器，默认都是使用GB2312进行解码的。

以此需要在代码工具中告诉浏览器所采用的编码字符集，加入元数据标签

元数据标签格式：

meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介

meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个 /

网页全套格式：基本格式+属性+文档说明+元数据

三.常用标签

标题标签 :

; 在html中，一共有六级标题标签。在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心。使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签。因此，在六级标签中，h1最重要，是网页中主要内容，h2-h6重要性依次降低。

对于搜索引擎来说，h1的重要性仅次于title，索索引擎检索完title，会立即查看h1中的内容。h1标签非常重要，它会影响页面在搜索引擎中的排名，但多了也不可以引擎会无效处理，所以，页面中只能写一个h1。一般页面中标题标签只是用h1 h2 h3 以后基本不使用

段落标签：

; 段落标签用于标示内容中的一个自然段，使用p标签来表示一个段落。p标签中的文字，默认会独占一行，并且段与段之间会有一个间距。

换行标签：
；是一个自结束标签

水平线标签：

---

; 是一个自结束标签

段落标签&换行标签&水平线标签

结果展示

四、实体

在html中，一些如< >这种特殊字符是不能直接使用，需要使用一些特殊的字符来表示这些特殊字符，这些字符称为实体（转义字符串）。浏览器解析到实体时，会自动将实体转换为其对应的字符。

实体的语法：&实体的名字；

"< >"  :  <； >；

 空格 ： ；  

版权符号 ： ©；

更多实体符号在W3School的字符实体里查看更多实体

所有实体标签

例如：”<”  <；“>” %gt;

若，ac  则，a<b>a

< > 的例子代码+展示

例如，我很          快乐

则，我很 ； ； ；快乐

空格 例子代码+展示

五.图片标签

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

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

img里的属性： 

src ： 设置一个外部图片的路径

alt :    可以用来设置在图片不能显示时，对图片的描述，搜索引擎可以通过alt识别不同的图片。如果不写alt属性，则搜索引擎不会对img中的图片进行收录

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

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

当宽度和高度两个属性如果指设置一个，另一个也会同时等比调整大小

如果两个值同时制定，则按照你制定的值来设置，但一般开发中除了自适应页面，建议设置width和height

img的路径：

src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。

相对路径，指相对于当前资源所在目录的的位置。

可以使用../来返回一级目录，返回几级目录就写几个../

例如，图片（1.jpg）和html（demo02）一起保存在同一个文件夹（abc）里

则，

注意！！“1.jpg”的意思是：相对于demo02文件下的1.jpg。

例如，图片和html（demo02）一起保存在一个文档（abc）里，且图片（1.jpg）子文档（ddd）中

则，

1图片展示

img的格式的

常见图片格式：

jpeg ：图片支持的颜色比较多，图片可以压缩，但是不支持透明。一般使用jpeg来保存照片等颜色丰富的图片。

gif ： 支持颜色少，只支持简单的透明，支持动态图。在图片颜色单一或者是动态图时可以使用gif。

png ：支持颜色多，并且支持复杂的透明，可以用来显示颜色复杂的透明图片

图片的使用原则：

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

效果一致，使用小的

六.总结

首先了解了基本的进制概念，然后补充了代码基本框架里乱码的问题，需要在代码中加入元数据标签让浏览器识别代码的字符节，还有学习了常用标签：标题标签

、段落标签

、换行标签
、水平线标签

---

。接着是针对特殊符号的实体，实体是：&实体名字；的结构，例如 “<” 和 ">" 分别为 <； 和 >； 空格： ；。最后是图片，里面有4个基本属性：arc、alt、width和height。其中图片路径是相对于html文件位置的相对路径，因此在写路径的时候一定不要写错了！不然图片不显示。

代码总结