前端复习：html

1 认识什么是纯文本文件txt

• windows中自带有一个软件，叫做记事本。记事本保存的文档格式就是txt格式，就是英语text的缩写。术语上称这个文件叫做"纯文本文件"。
• txt文件，只能够保存文本内容，是无法记录文本样式的。（相对于doc文件而言，doc文件是可以存储文本的内容和样式，所以doc和txt存储同样的内容，doc比txt要大）
• 纯文本文件具有如下特点：1、只有文本，没有样式；2、用记事本等纯文本编辑器可读，不是乱码。
• html、css、js都是纯文本文件。

  2 HTML是负责描述文档语义的语言

• html是英语HyperText Markup Language的缩写，即超文本标记语言。.html就是网页的格式。
• 纯文本txt文件是不能够描述文档的语义的，如文档中不知道谁是主标题，谁是副标题，谁是段落。所以html应运而生。即通过html标签对，来给文本增加语义。
• 现在业界的标准，网页技术严格的三层分离：html就是负责描述页面的语义；css负责描述页面的样式；js负责描述页面的动态效果的。
• 所以，html不能够让文字居中，不能够更改文字字号、字体、颜色。因为这些都是属于css样式范畴；html不能够让盒子运动起来，这些属性属于js行为范畴。

  3 html中，除了语义，其他什么都没有

• html是一个纯文本文件（可以由txt文件更改后缀名而来），用一些标签来描述文字的语义，这些标签在浏览器页面中是看不到的，所以称之为"超文本"。
• html只能做一件事，即通过标签对，给文本增加语义，这是html唯一能做的。

  4 sublime

• 任何的纯文本编辑器都能够编辑html，比如说记事本、editplus、notepad++。
• 比较有名的专门制作网页的工具有：
  1、DreamWeaver (Adobe公司的产品，这个东西已经过时)；2、Sublime （高效率的程序书写工具）；3、WebStorm （更高级的项目级别编程工具）。
• sublime的中文意思是"华丽的"，是2011年开始流行的代码编译器，可以编辑java、c、php等多门语言。对html、css、js支持非常好，界面也非常漂亮，安装简单、小巧、插件多。
• • sublime3已集成常用插件网盘下载：https://pan.baidu.com/s/1sugysbl7Wpm1mTpcE6JzJg
• sublime中的常用快捷键：
• ctrl+滚轮：放大缩小文字；ctrl+shift+d：复制当前行；ctrl+shift+k：删除当前行；ctrl+shift+↑：上移当前行；ctrl+shift+↓：下移当前行；
• 1、键入u，后加上tab键可生成标签；
• 2、键入html:xt，后按ctrl+E，然后按下enter键，sublime可生成一个标准版本的html格式的骨架。

• 3、按住ctrl键，点击所要编辑的多行，可同时进行编辑。
• 4、li*10，后按tab键可生成多行li标签。（需要注意的是，在编辑页面的时候需要先保存页面）

  5 html骨架

  5.1 文档声明头

• 任何一个标准的HTML页面，第一行一定是一个以开头的语句，这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用的是哪种HTML或者是XHTML规范。
• 使用sublime的快捷键html:xt生成的html骨架是HTML4.01这个版本，这个版本是IE6开始兼容的。而HTML5是IE9开始兼容的。但IE6/7/8这些浏览器还不能够过早的淘汰，所以这几年网页还是应该使用HTML4.01来制作。而手机、移动端的网页开发，就可以使用HTML5了。
• HTML4.01里面有两大规范，每大规范里面又各有3种小规范，所以一共有6种规范。（为什么定义两大规范，其原因是因为HTML觉得有些规定不够严谨，比如说标签是否可以使用大写字母等，所以HTML把一些规范严格的标准，有制定了一个XHTML1.0.在XHTML中的字母X，就表示"严格的"。

• strict表示"严格的"，这种严格体现在有一些标签不能够使用。比如说u标签，就是可以让一个文本加上下划线，但是这和HTML的本质有冲突，即HTML只能够负责语义，不能够负责样式，而u这个下划线就是样式，所以在strict中是不能够使用u标签的。
• 一般页面中偶尔要使用一些类似u这种标签（当做css钩子使用），所以选择XHTML1.0中的transitional版本最为合适。

  5.2 字符集

• 字符集用meta标签定义，meta表示"元配置"，就是表示基本的配置项目。charset就是charactor set"字符集"的意思。
• 中文能够使用的字符集有两种：
• 第一种：UTF-8，即；
• 第二种：gb2312，即，第二种也可以写成gbk，即。
• UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、韩文等；而gb2312是国标，是中国的字库，里面仅仅涵盖了汉字和一些常用外文，以及一些常用的符号。
• 在字库规模方面，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多，即UTF-8里面存储了一个汉字3个字节，而gb2312中存储一个汉字2个字节。保存大小：UTF-8（更臃肿、加载更慢） > gb2312（更小巧、加载更快）。
• 需要注意，浏览器就是通过meta配置来看网页是属于什么字符集的，比如你保存时候的meta配置，和保存时编码格式不一致，那么浏览器就会出现乱码现象。
  

  5.3 关键字和页面描述

• meta除了可以设置字符集，还可以设置关键字和页面描述。
• 设置页面描述：

• 只要设置Description页面配置，那么百度搜索结果中就能够显示这些语句，这个技术叫做SEO，即search engine optimization，搜索引擎优化。
  
• 定义关键字：

• 这些关键字，就是告诉搜索引擎，这个网页是干什么的，能够提高搜索命中率。

  6 HTML的基本语法特性

  6.1 HTML对换行不敏感，对tab不敏感

• HTML只在乎标签的嵌套结构，嵌套的关系，即谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
• HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系，但是，有良好的缩进，代码更易读。
• 空格、tab和换行都会占据字节，百度为了追求极致的显示速度，所以HTML标签都没有换行、也没有缩进，HTML和换不换行没有关系，标签的层次依然清晰，只不过程序员不可读而已。

  6.2 空白折叠现象

• HTML中所有的文字之间，如果有空格、换行或者是tab都将被折叠为一个空格显示。
• 即如下代码：

  热热                             爱爱

• 显示的是后被折叠了：
  

  6.3 标签必须要求严格封闭

• 标签不封闭是灾难性的结果：