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

总结一些看到的，学到的一些大佬们更深入的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”>

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”>

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”>

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”>

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">

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”>

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”>

为什么使用 <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，搜索引擎优化）。

效果如下：
在这里插入图片描述

一些常用到的转义字符？

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

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

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

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

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

以上内容借鉴至

百度&菜鸟教程
&gibhub：

https://github.com/smyhvae

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