# Html 基础（非语法，对初学者挺有用的一些总结）

小灰灰 2022-04-05 17:19 185阅读 0赞

## 总结一些看到的，学到的一些大佬们更深入的html理解，方便日后所用 ##

ps：对初学者挺有用的总结

### web标准 ###

web标准介绍：

*  w3c：万维网联盟组织，用来制定web标准的机构（组织）
 *  web标准：制作网页要遵循的规范。
 *  web标准规范的分类：结构标准、表现标准、行为标准。
 *  结构：html。表现：css。行为：JavaScript。

web标准总结：

*  结构标准：html就是用来制作网页的。
 *  表现标准：css就是对网页进行美化的。
 *  行为标准：js就是让网页动起来，具有生命力的。

### Html 相关 ###

##### html标签是分等级的，分为几种呢？ #####

两种：

**文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）

**容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

（从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。）

##### 为什么使用 **<!Doctype html>** ? #####

**<!doctype html>说明是采用html5文档类型编写网页的标准声明,原先很长,现在是这个简洁形式,主流浏览器现在都认识这个声明。**  
（这一行一般位于起始，是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。）

*以下版本声明仅供了解（用的少了，目前主流浏览器都支持html5）*

> **HTML 4.01 Strict**  
> 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。  
> <!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “[http://www.w3.org/TR/html4/strict.dtd][http_www.w3.org_TR_html4_strict.dtd]”>

> **HTML 4.01 Transitional**  
> 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。  
> <!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”  
> “[http://www.w3.org/TR/html4/loose.dtd][http_www.w3.org_TR_html4_loose.dtd]”>

> **HTML 4.01 Frameset**  
> 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。  
> <!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”  
> “[http://www.w3.org/TR/html4/frameset.dtd][http_www.w3.org_TR_html4_frameset.dtd]”>

> XHTML 1.0 Strict  
> 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。  
> <!doctype html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”  
> “[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-strict.dtd]”>

> XHTML 1.0 Transitional  
> 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。  
> <!doctype html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "  
> [http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">

> XHTML 1.0 Frameset  
> 该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。  
> <!doctype html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”  
> “[http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-frameset.dtd]”>

> XHTML 1.1  
> 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。  
> <!doctype html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “[http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd][http_www.w3.org_TR_xhtml11_DTD_xhtml11.dtd]”>

##### 为什么使用 <**meta charset=“UTF-8”**> ? #####

**是为了用meta提供网页所使用的字符集编码信息**（不理解请看下面）

要回答这个问题我们先了解一下计算机的编码：  
计算机，不能直接存储文字，存储的是编码。  
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。

> **ASCII码：**  
> 美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。  
> 美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。

> **ANSI编码：**  
> 每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：  
> 中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。  
> 日本的ANSI编码是JIS编码。 台湾的ANSI编码是BIG5编码（繁体）。

> **GBK：**  
> 对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

> **Unicode编码(统一编码)：**  
> 用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000  
> 0000 0000 0000 0000 0000 0100 0000

> **UTF-8(Unicode Transform Format)编码：**  
> 根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。

所以开发中，都用UTF-8编码，准没错。

> 中文能够使用的字符集两种：  
> 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……  
> 第二种：GBK（对GB2312进行了扩展）。gb2312  
> 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。  
> 字库规模： UTF-8（字全） > gb2312（只有汉字）

> **重点1：避免乱码**  
> 我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。  
> 当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型：  
> 文件→ set File Encoding to → Chinese Simplified(GBK)。

> **重点2：UTF-8和gb2312的比较**  
> 保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）

> 总结：  
> UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿； gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。  
> **列出2个使用情形：**  
> \*\*1）你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。  
> 2）你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。  
> 一些大佬亲测：  
> qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。 新华网藏语频道，使用的是UTF-8，保证字符集的数量。  
> 因为浏览器是通过meta来看网页是使用什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。

##### 那么mate标签还有什么用处？ #####

1.定义使用哪种字符集（上面已经说过了）  
**2.定义“关键词”**  
例子：

> <**meta name=“Keywords” content=“网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信” /**>

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

**3.定义“页面描述”**  
例子：

> <**meta name=“Description” content=“网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。” /**>

name即“名字”，content即“内容”。  
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

**效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]

##### 一些常用到的转义字符？ #####

常用到的特殊字符有：空格（&nbsp；）、小于（&lt；）、大于（&gt；）、版权（&copy；）。

来一张表格，方便需要的时候查询：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]

#### 看到的一些面试题，很基础但很有意义： ####

**h1标签有什么作用？**  
正确答案：给文本增加主标题的语义。  
错误答案：给文字加粗、加黑、变大。

**网页的head标签里面，表示的是页面的配置，有什么配置？**  
答：字符集、关键词、页面描述、页面标题。（今后我们还能看见一些其他的配置：IE适配、视口、iPhone小图标等等）

### 以上内容借鉴至 ###

百度&菜鸟教程  
&gibhub：

> [https://github.com/smyhvae][https_github.com_smyhvae]

ps：此篇博持续更新！有我觉得有用的东西就记录在此。

[http_www.w3.org_TR_html4_strict.dtd]: http://www.w3.org/TR/html4/strict.dtd
[http_www.w3.org_TR_html4_loose.dtd]: http://www.w3.org/TR/html4/loose.dtd
[http_www.w3.org_TR_html4_frameset.dtd]: http://www.w3.org/TR/html4/frameset.dtd
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-strict.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-frameset.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd
[http_www.w3.org_TR_xhtml11_DTD_xhtml11.dtd]: http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70]: /images/20220405/da1abbcfa0a74c0e922dbf5222aa95af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM4ODg0NA_size_16_color_FFFFFF_t_70 1]: /images/20220405/a2fa92bd8a184c4db02c07f74b8a5188.png
[https_github.com_smyhvae]: https://github.com/smyhvae