习惯于从熟悉的地方入手的我，每要开始整理学习新东西之前，喜欢把熟悉的相关知识再温习一遍，既是总有所得的缘故，也是如此会将斗志燃到最烈。我总感觉这是病，只是不愿治....
这次的前端整理，便直接从html入手开始：
html作为前端最基础的知识，所有前端工作者都会，但是有相当一部分人对它的重视远远不够。
万里高楼平地起，html作为前端最底层，最基础的元素，是一切“样式”和“脚本”的根源，它是任务（页面）完成度的重要指标。
以服务“样式”和“脚本”为起点出发，我们在学习html的时候，大致应该做到如下几点：
a、合理使用块元素和行元素；
b、语义化结构；
做到上面两点，我们得到的结构会更清晰明了，也更简洁合理，说起来有些官方，举个最简单的例子：
有些人喜欢用div来进行分块从而布局，当我们在写菜单的时候，会在div里面再嵌套ul，但是，往往外层的div只是用来布局，没有实际意义，而ul本身就是块元素，我们可以直接放弃外层div，直接用ul来代替。
甚至有些教程也都喜欢直接用div+css来布局结构，在个人认为，还是有些偏颇的，一方面“网络爬虫”并不识别，另一方面啰嗦臃肿的结构，让维护的工作量倍增。
早期的“前端工作”在我的理解里，就是切图，做网页嘛，虽然事实告诉我并不是，但是“网页”这个词却是前端工作躲不开的，一切都是以“网页”为中心展开的，那么究竟什么是“网页”？
同时，我们要了解的还有如下几个名词：
html、html文档、html标签、html元素、html属性、html注释、html框架
如果这些名词可以张口就来了，我想对于html的理解应该已经有个人的认识了，那希望如果你发现我文中有什么不合理或者不对的地方，留言给我。
html，超文本标记语言，核心词汇：语言，也就是用来沟通的，而且是标记语言，也就是通过描述事物来进行沟通的，白话了说“我把一些想要告诉你的事物，用这种语言描述给浏览器，然后让浏览器展示给你看，让你明白我想表达的事物”；
而这种标记语言的标记方法，是一套标记标签，一般是成对出现，由开始标签（开放标签）和结束标签（闭合标签）组成；
而html元素则是我想表达的具体事物，一般在一对标签之间，通过外层标签来进行描述，是标题，或者是链接，等等；
至于html文档，则就是我们通常所说的“网页”，是由html标签+html元素=html文档=网页；
而具体的html属性、html注释、html框架可谓是语义化很明显，至于“属性”，相信在jquery的学习中，理解的会更深刻点。
前文提到过，网页=html文档，而文档存在众多文档类型，而<!DOCTYPE>就是文档的声明，用来声明用哪一种文档来对下面的描述进行解释。
目前常用的有：
html5：<!DOCTYPE html>
html4.0.1：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html头部元素是对当前html文档的一些设定和描述，是浏览器在描述具体html元素前所做的功课。
主要包括：<title>、<base>、<script>、<link>、<style>、<meta>
<title>是最常见的，一个文档的基本描述，也是打开网页标签页上的内容；
<style>、<link>、<script>在平时应用中是最常见的，对于样式表和脚本代码的引入；
<base>标签设定页面上所有链接的target属性，在新的标签页打开还是其它...
<meta>是head区一个辅助标签，合理的应用有想不到的惊喜。在我一次面试的时候，也曾经两次被问到相关问题，一次是页面不动结构和样式的情况下，兼容移动端，一次是不缓存页面。
其实meta有两个属性，分别为http-equiv属性和name属性，不同属性有不同的参数，从而实现不同的页面功能。但是总体上来说，name属性比较倾向于解释描述，http-equiv属性偏向于设定操作。
name属性常用的参数有：Keywords（关键字）、description（网页描述）、robots（机器人向导）、author（作者）、generator（实现软件）等等
http-equiv属性常用设定参数有：Pragma（cache缓存）、Expries（期限）、Refresh（刷新）、Content-Type（显示字符集的设定）等等；
至于具体应用可以自行百度，这里只简单就我曾碰到的两个面试题目上代码：
前文提到过，曾有教程把网页制作的直接称作div+css，尽管感觉不对，但它存在必然是有其原因的。
在网页发展过程中，最初是用table进行布局，整个页面都是一个大table，然后不断嵌套，不停嵌套，而div的出现则大大减少了冗余的代码，table也恢复了它本身的应用：设计表格的目的是呈现表格化数据。
所以div+css也是当前布局的良方，但是语义化的层面上来看，语义化代码更符合当前的需求。
html块元素：<h1>-<h6>标题、<p>段落、<ul>列表、table表格、<div>等；
html行元素：<img>图片、<a>链接、<td>表格中一个格、<span>等等；
另外，除了布局上语义化之外，合理的应用部分文本格式化标签，也能减少样式表甚至脚本代码的堆砌。
举几个例子：
<b>加粗、<i>斜体、<sub>下标、<sup>上标、<ins>插入字、<del>删除字、<pre>预定义文本等等
html本身是完全可以将你想到的事物展示出来的，所以如果静态页面你无法将其内容展示出来的话，我想肯定还是基础上有漏洞，而事实上我也确实就这些问题返攻过几次html。
“锚链接”我现在通常会用js去实现，只是因为想要更多的滚动效果，而在我工作最初的时候，<a name="">是给了我很大帮助的；
“上线快，高迭代”应该是facebook掀起的风潮，实际工作过程中的图像映射可是起了大作用，<map>和<area>给我带来的好处可是不只一点；
甚至当年为了写个商标还头疼了很久，差点用了图片，直到看到了html实体字符
这次的前端整理，便直接从html入手开始：
1、html学习前的一些话
html作为前端最基础的知识，所有前端工作者都会，但是有相当一部分人对它的重视远远不够。
万里高楼平地起，html作为前端最底层，最基础的元素，是一切“样式”和“脚本”的根源，它是任务（页面）完成度的重要指标。
以服务“样式”和“脚本”为起点出发，我们在学习html的时候，大致应该做到如下几点：
a、合理使用块元素和行元素；
b、语义化结构；
做到上面两点，我们得到的结构会更清晰明了，也更简洁合理，说起来有些官方，举个最简单的例子：
有些人喜欢用div来进行分块从而布局，当我们在写菜单的时候，会在div里面再嵌套ul，但是，往往外层的div只是用来布局，没有实际意义，而ul本身就是块元素，我们可以直接放弃外层div，直接用ul来代替。
甚至有些教程也都喜欢直接用div+css来布局结构，在个人认为，还是有些偏颇的，一方面“网络爬虫”并不识别，另一方面啰嗦臃肿的结构，让维护的工作量倍增。
2、一些基本概念
早期的“前端工作”在我的理解里，就是切图，做网页嘛，虽然事实告诉我并不是，但是“网页”这个词却是前端工作躲不开的，一切都是以“网页”为中心展开的，那么究竟什么是“网页”？
同时，我们要了解的还有如下几个名词：
html、html文档、html标签、html元素、html属性、html注释、html框架
如果这些名词可以张口就来了，我想对于html的理解应该已经有个人的认识了，那希望如果你发现我文中有什么不合理或者不对的地方，留言给我。
html，超文本标记语言，核心词汇：语言，也就是用来沟通的，而且是标记语言，也就是通过描述事物来进行沟通的，白话了说“我把一些想要告诉你的事物，用这种语言描述给浏览器，然后让浏览器展示给你看，让你明白我想表达的事物”；
而这种标记语言的标记方法，是一套标记标签，一般是成对出现，由开始标签（开放标签）和结束标签（闭合标签）组成；
而html元素则是我想表达的具体事物，一般在一对标签之间，通过外层标签来进行描述，是标题，或者是链接，等等；
至于html文档，则就是我们通常所说的“网页”，是由html标签+html元素=html文档=网页；
而具体的html属性、html注释、html框架可谓是语义化很明显，至于“属性”，相信在jquery的学习中，理解的会更深刻点。
3、<!DOCTYPE>声明
前文提到过，网页=html文档，而文档存在众多文档类型，而<!DOCTYPE>就是文档的声明，用来声明用哪一种文档来对下面的描述进行解释。
目前常用的有：
html5：<!DOCTYPE html>
html4.0.1：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
xhtml1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4、html头部元素
html头部元素是对当前html文档的一些设定和描述，是浏览器在描述具体html元素前所做的功课。
主要包括：<title>、<base>、<script>、<link>、<style>、<meta>
<title>是最常见的，一个文档的基本描述，也是打开网页标签页上的内容；
<style>、<link>、<script>在平时应用中是最常见的，对于样式表和脚本代码的引入；
<base>标签设定页面上所有链接的target属性，在新的标签页打开还是其它...
<meta>是head区一个辅助标签，合理的应用有想不到的惊喜。在我一次面试的时候，也曾经两次被问到相关问题，一次是页面不动结构和样式的情况下，兼容移动端，一次是不缓存页面。
其实meta有两个属性，分别为http-equiv属性和name属性，不同属性有不同的参数，从而实现不同的页面功能。但是总体上来说，name属性比较倾向于解释描述，http-equiv属性偏向于设定操作。
name属性常用的参数有：Keywords（关键字）、description（网页描述）、robots（机器人向导）、author（作者）、generator（实现软件）等等
http-equiv属性常用设定参数有：Pragma（cache缓存）、Expries（期限）、Refresh（刷新）、Content-Type（显示字符集的设定）等等；
至于具体应用可以自行百度，这里只简单就我曾碰到的两个面试题目上代码：
a、页面不动结构样式情况下兼容移动端。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>b、不缓存页面的设置
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
5、body部分各司其职
前文提到过，曾有教程把网页制作的直接称作div+css，尽管感觉不对，但它存在必然是有其原因的。
在网页发展过程中，最初是用table进行布局，整个页面都是一个大table，然后不断嵌套，不停嵌套，而div的出现则大大减少了冗余的代码，table也恢复了它本身的应用：设计表格的目的是呈现表格化数据。
所以div+css也是当前布局的良方，但是语义化的层面上来看，语义化代码更符合当前的需求。
html块元素：<h1>-<h6>标题、<p>段落、<ul>列表、table表格、<div>等；
html行元素：<img>图片、<a>链接、<td>表格中一个格、<span>等等；
另外，除了布局上语义化之外，合理的应用部分文本格式化标签，也能减少样式表甚至脚本代码的堆砌。
举几个例子：
<b>加粗、<i>斜体、<sub>下标、<sup>上标、<ins>插入字、<del>删除字、<pre>预定义文本等等
6、一些超实用的html自带效果
html本身是完全可以将你想到的事物展示出来的，所以如果静态页面你无法将其内容展示出来的话，我想肯定还是基础上有漏洞，而事实上我也确实就这些问题返攻过几次html。
“锚链接”我现在通常会用js去实现，只是因为想要更多的滚动效果，而在我工作最初的时候，<a name="">是给了我很大帮助的；
“上线快，高迭代”应该是facebook掀起的风潮，实际工作过程中的图像映射可是起了大作用，<map>和<area>给我带来的好处可是不只一点；
甚至当年为了写个商标还头疼了很久，差点用了图片，直到看到了html实体字符
我始终相信，只有厚实的基础才能让人走的更稳更远，积跬步，聚小流，终能到达那远方，加油2016....
同文还发表在：我的w3cfuns
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
