一、从“上网”说开去
- 上网就是请求数据
- 上网就是一个请求数据的过程。当我们输入一个网址http://www.baidu.com/aaa/1.html的时候,我们的计算机将对远程服务器发出一个HTTP请求。我要请求你的aaa文件夹中的1.html文件。服务器响应了这个请求，将1.html这个网页文件，通过HTTP请求，传输到用户的计算机中。用户的浏览器，对这个文件进行渲染。
- 上网就是一个请求文件、回馈文件的过程，没有持久连接。
- 我们平时输入网址，都是http://www.baidu.com，实际上等价于访问了http://www.baidu.com/index.html文件。 index是默认的首页文件。
2. HTTP协议
- HTTP的全称叫做Hypertext Transfer Protocal，超文本传输协议。
- 用于浏览器和服务器之间传输文件。
- HTTP是有两部分，请求request、响应response。当你输入网址的时候，此时浏览器会发出一个HTTP请求，请求服务器上的响应页面。服务器收到请求之后，会再次通过HTTP将页面传输回来。
- 访问一个网页的时候，并不一定只有一次HTTP请求发出！如果页面上有图片、视频、音频，那么将产生更多的HTTP请求。
- 不光输入网址能够产生HTTP请求，我们点击超级链接的时候，也能够产生HTTP请求。
3. 服务器
- 服务器server就是计算机，也有CPU、硬盘、内存，也安装软件。可能没有显示器、鼠标、键盘（用普通计算机远程管理它）。
- 服务器上存放文件的，服务器要24小时开机，不能断点，一旦断点，就无法访问网站了。
- 我们可以通过管理软件，来远程管理服务器，比如8U-FTP。
4. 浏览器
- 浏览器browser，就是渲染网页的一个软件，安装在客户的电脑里面。
- HTTP请求的发起、接收，都是由浏览器来完成的。
- 浏览器都有临时文件夹，你请求的所有网页文件，都是存放在这个临时文件夹中的。所有的网页都是在计算机本地进行渲染的。所以，有些时候，第一次打开网页速度慢，第二次打开网页速度快，这是因为第一次已经把文件传输过来了，就不用传输了。（IE：工具->Internet选项->常规->设置->查看文件）
二、HTML初步
- 纯文本
HTML的全称叫做Hypertext Markup Language。超文本标记语言，是网页的文件格式。网页的格式还有PHP、JSP、ASP等等，而HTML是最最基本的网页文件格式。
- 设置扩展名：组织--文件夹和搜索选项--查看
- HTML文件是纯文本文件，所以任何的纯文本编辑器，都能够制作网页；相反的，任何的能够制作网页的软件，吹破天了，本质上都是纯文本编辑器。
- 纯文本就是不带有任何格式的一种文本形式。
- 将.txt这个扩展名更改为.html就变为了一个网页文件。
2. HTML是负责描述文本语义的语言
- html就是通过一对一对的标签来给文本增加语义的语言。
- 页面渲染的时候，<h1>这些标签，是不会显示在页面上的，这就是“超”字的含义。一些文本就是文本，而一些文本（标签），是描述别的文本语义的文本，不会照搬显示在页面上， 这种文件就是超文本文件。也解释了什么是“标记”，就是一对儿一对儿的标签对儿。
- 任何HTML标签，都和样式无关的，只能表达语义。
- 面试的时候，人家问h1什么意思啊？ 错误的答案：让字变得大、黑、粗。 正确的答案：让文字加上1级标题的语义。
三、Sublime安装和使用方法
- 安装
- 安装包为sublime傻瓜版
- 直接解压就能用
2. 使用
- sublime能够编辑很多很多语言！所以，在新建了一个文件之后，一定要记得先保存，保存的时候，要刻意地加上.html后缀。
- Ctrl+N 新建文件 ===Ctrl+S 保存功能（Sublime不怕突然掉电。它不是实时保存，而是实时缓存）===Ctrl+F 查找===Ctrl+Z 撤销（Sublime提供无限次的撤销）===输入标签名，然后按tab键（或回车）能自动生成标签对儿===Ctrl+Shift+D 复制当前行===Ctrl+X 删除当前行（和剪切是一个快捷键）===Ctrl+鼠标滚轮 放大缩小字体===按住鼠标滚轮，拖拽，就可以产生多行光标===支持快速输入法（p*10 然后按tab键，就能生成10个p标签）
四、HTML的基本骨架
- HTML的基本骨架自动展开：直接在sublime中，输入html:xt 然后再按tab键，如果按tab键不管用，那么就按ctrl+E键，就会自动展开。
- 文档声明头DTD
- DTD即为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 所谓的DTD就是DocType Definition 文档类型定义, 也有人翻译为DocType Declartion 文档类型声明
- HTML文件的第一行都为DTD，干什么用的？这一行语句，告诉浏览器我是什么版本的HTML文件。
- HTML最新的版本为HTML5。但不是所有的版本都兼容。
- HTML的发展过程？
刚开始HTML4.01有三个版本：
HTML4.01 Strict 严格版：不能使用font、b、u、i 等等的废弃标签，不能使用框架集，结构和样式分离。
HTML4.01 Transitional 过渡版（通用版）：没有那么多限制，可以使用font等废弃标签，不能使用框架集。
HTML4.01 Frameset：框架集版：可以使用框架集。
随着发展font标签已经被废弃了，改用css来描述页面的样式。但w3c发现html还不够严格，比如标签到底是大写字母还是小写字母，属性可不可以用单引号。所以w3c为了解决这个问题，推出了 XHTML版本，X代表extensional，严格规定了标签必须是小写，所有属性都必须用双引号封闭，必须有结尾反斜杠……
XHTML1.0版本延续了HTML4.01的三个版本：
XHTML1.0 Strict 严格版：不能使用font、b、u、i 等等的废弃标签，不能使用框架集，结构和样式分离。
XHTML1.0 Transitional 过渡版（通用版）：没有那么多限制，可以使用font等废弃标签，不能使用框架集。
XHTML1.0 Frameset：框架集版：可以使用框架集。
但是HTML5是新的版本，不在设立3个小版本了。
总结一下，一共有6种DTD。HTML4.01有3种，XHTML1.0有3种。6种版本，就有六种DTD。
按严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitional > HTML4.01 transitional
- Sublime生成DTD，只需要更改冒号后面的词语，xs就能生成XHTML1.0 Strict版本。
- 严格版本中，font、b、u、i标签都是废弃的。而这些标签我们将来要使用它做一些“小心思”、“小创意”，所以不能一棒子打死。
2.命名空间（固定写法，没有别的值）
在DTD下面一行，就是html标签对儿：<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"></html>
- html是一个标签，xmlns是它的一个属性， xml:lang也是它的一个属性
- 键值对儿，键就是属性的名字，值就是属性的值。简称K-V对儿， k就是key键， v就是value值的意思。
- xmlns的全称为XML NameSpace，HTML是XML中的一种。NameSpace叫做命名空间，很简单，就是你的文章里面的h1表示的是1级标题的，别人的是不是也是1级标题？所以就需要有人统一一下标准，使用的就是一个固定的网址。
- xml:lang="en" 表示所有的标签的语言都是英语，language
3.字符集
- 简体中文可以使用的字符集就两个，分别叫做GBK、UTF-8。
- GBK是国标的一个意思，也称为“gb2312”，中国人制定的。
- UTF-8是国际的一个字符集标准。
- 都是同一个汉字，GBK 每一个汉字2字节，UTF-8 每一个汉字3字节。
- GBK中只有汉字简体（不包括少数民族文字）、绝大部分繁体字、少量片甲名、少量符号UTF-8中有世界上所有国家中的所有文字和符号。
- 在HTML网页中，用meta设置字符集，这个meta是一个单标签，没有成对儿 。
- HTML中，有两种字符集设置：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
- 工作的时候用哪种？ （1） 如果公司的网页中，没有出现怪异符号、没有出现其他国家文字（除了英语），那么要使用gb2312。因为文件尺寸小，每一个字就少1个字节。1000字就是1kb，5000字就是5kb。 （2）如果公司的网页中，有少数民族文字、韩语、阿拉伯语，那么要使用UTF-8。因为文字全。
- 点破了一道面试题：怎么样让网页打开速度变快？ 方法1：就是让网页的字符集变为gb2312，能够显著降低页面尺寸。
4.关键字和页面描述
- <meta name=”description” content=”页面描述” > 这个东西显著提升SEO， SEO就是Search Engine Optimization，搜索引擎优化。就是少花钱，让搜索引擎能带来更多的流量，让更多人点击。
- <meta name="keywords" content="手机,电脑,冰箱,彩电">可以设置页面关键字，搜索引擎会抓取这些关键字，搜索引擎就知道我们的网站是干什么的了，就能相应的排名提升。
5.title
- <title>页面标题</title>
HTML基本骨架如下（注意：关键字之间的逗号为英文的）
五、HTML页面的特点
1、HTML对换行、tab缩进、空格不敏感
<body><h1>我是一个主标题</h1><p>我是一个段落</p></body>
等价于<body>
<h1>我是一个主标题</h1>
<p>我是一个段落</p>
</body>
- HTML不仅仅负责描述语义，还描述了页面的层次。
- 面试题：怎么样让网页打开速度变快？ 方法1：就是让网页的字符集变为gb2312，能够显著降低页面尺寸。 方法2：压缩代码，将HTML压缩为1行。
2、空白折叠现象
- HTML中的文字，不管有多少个空格，多少个换行，多少个缩进，都会被压缩为一个空格。
六、h 和 p
- h系列标签
- 一共有6个，从h1到h6，有不同的语义。
- 一般来说，页面上只能有一个h1标签，其他标签个数不定。实际上这个不是W3C的规则，而是搜索引擎的规则。h1标签中的内容，权重非常高，搜索引擎会特别注意抓取里面的文字。搜索引擎如果看见页面有多个h1，视为作弊，降低你的权重。
- h标签是个文本级标签。
2. p标签
- <p>文字</p> 这个就是一个段落。
- p里面只能放文字、图片、表单元素，不能放其他东西。p是一个文本级标签。
- 这里实际上揭示了一个事情，就是标签的级别。我们HTML将所有的标签都进行了分类，只有两类：1） 容器级标签 ： 里面谁都可以装，甚至可以包裹和自己一样的标签。2） 文本级标签 ： 里面只能放文字、图片、表单元素，和其他的文本级标签。
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
