下面这是基本Html骨架结构
1 <html>
2 <head>
3
4 </head>
5 <body>
6
7 </body>
8 </html>
完整骨架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>哈哈哈</title>
6 </head>
7 <body>
8 <h1>我是一个主标题</h1>
9 <p>我是一个小段落</p>
10 </body>
11 </html>
第1行，就是网页的声明头。
术语叫做Document Type Definition，文档类型定义，简称DTD。这行语句非常的复杂，里面暗含了一个网址，W3C是出web规范的组织机构，html、css、js的规范都是由W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器，这是一个什么标准的页面。
如上面代码所示这是一个 以XHTML 1.0 为标准的页面。
第2行，是最大的html标签所有的网页内容，都要包裹在这个标签对里面。
我们发现，html标签中，有两个属性：
xmlns="http://www.w3.org/1999/xhtml" 命名空间，就是一个规范，是在XHTML 标准内的特定写法，H5中不存在；
xml:lang="en" 语言是英语。
第4行，
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集的配置
字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。
中文能够使用的字符集两种：
第一种：UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=**UTF-8**">
第二种：gb2312
<meta http-equiv="Content-Type" content="text/html;charset=**gb2312**">
2 <meta http-equiv="Content-Type" content="text/html;charset=gbk">
什么是字符集？活字印刷术，所有的汉字都有一个个小印章，需要哪个字，就取哪个字。
但是，有两个人都发明了字库。老王发明了一个，老李也发明了一个。
比如同一个汉字，“传”字在老王的字库里面是第2个大盘子第4行第43列的。
而这个汉字“传”在老李的字库里面是第5个大盘子第6行第13列的。
计算机，不能直接存储汉字，而是存储的是编码，所以，计算机记录“传”这个字，就是这么记录的：
老王：
20443
老李
50613
有两个字库UTF-8和gb2312。
UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、其他……
gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模：UTF-8 （字全）> gb2312（只有汉字）
我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)
注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。
UTF-8****里面存储一个汉字3****个字节。而gb2312****中存储一个汉字2****个字节。
保存大小： UTF-8****（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我亲测：
● qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
● 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。
关键字和页面描述
meta除了可以设置字符集，还可以设置关键字和页面描述。
设置页面描述：
<meta name="**Description**" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。
抽象一下：
1 <meta name=”” content=”” />
name就是“名字”的意思，content是“内容”的意思。
也就是说，我们定义了一个名字是“Description”（描述）的meta。内容是网易是中国领先……
定义关键词：
1 <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
Keywords就是“关键词”的意思。
所以，一个比较完整的骨架是这样：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;**charset**=UTF-8">
5 <meta name="**Keywords**" content="牛逼，很牛逼，特别牛逼" />
6 <meta name="**Description**" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
7 <title>Document</title>
8 </head>
9 <body>
10
11 </body>
12 </html>
作者：新海
前端小白
网友评论