程序 = 算法 + 数据结构
html 结构
css 样式
JavaScript 行为
1.HTML是什么？
htyper text markup language 即超文本标记语言
超文本：是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
标记语言：标记（标签）构成的语言
2.什么是标签
- 是由一对尖括号包裹成的单词构成，比如<head></head>，但是标签中的单词不能以数字开头
- 标签不区分大小写，但是推荐使用小写
- 标签分为两部分，开始标签<head>和结束标签</head>,两个标签之间的部分称为标签体，这种标签称为双标签
- 单标签，例如<br /> <hr />
- 标签之间可以嵌套，但是不能交叉嵌套 <a> <b> </a> </b>
3.标签的属性
- 通常是以键值对的形式出现，例如 name = "nick"
- 属性只能出现在开始标签 或 单标签中
- 属性名必须小写，属性值必须以 单引号 或 双引号 的形式包裹起来
- 如果 属性名 和 属性值 一样，可以直接写一个属性名即可，例如 readonly
4.标签
<html></html> 根标签
<head></head> 编辑给浏览器一种思想类的东西，让人看不到的东西，例如给浏览器展示一些特性
<body></body> 是让人能够看到的东西，例如给用户展示一些信息
5.每个HTML文件里开头都有个DOCTYPE，作用是？
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前，此标签可告知浏览器文档使用哪种模式渲染，HTML或XHTML。不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析，所以doctype是非常关键的。
两种渲染模式：
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE包含6部分：
- 字符串"<!DOCTYPE"
- 根元素通用标识符"HTML"
- 字符串"PUBLIC"
- 被引号括起来的公共标识符（publicId）
- 被引号括起来的系统标识符（systemId）
- 字符串">"
6.HTML 与 XHTML有什么区别？
- 所有的标记都必须要有一个相应的结束标记
- 所有标签的元素和属性的名字都必须使用小写
- 所有的XML标记都必须合理嵌套
- 所有的属性必须用引号 " "括起来
- 把所有 < 和 & 特殊符号用编码表示
- 给所有属性赋一个值
- 不要在注释内容中使用"--"
- 图片必须有说明文字
7.html语义化是什么？
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于所有引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析
8.严格模式和混杂模式
严格模式：页面排版和js解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
9.html常见的兼容性问题
- 双边距BUG float引起的，使用display
- 3像素问题 使用float 引起的，使用display：inline -3px
- 超链接hover点击后失效 使用正确的书写顺序 link visited hover active
- ie z-index问题 给父级添加position:relative
- png 透明 使用js代码改
- Min-height 最小高度 !important解决
- select 在ie6 下遮盖 使用iframe嵌套
10.ie兼容性
- 为什么没有办法定义1px左右的宽度容器：
ie6默认的行高造成的，使用overflow：hidden zoom:0.08 line-height:1px
- ie5-8不支持opacity，解决办法：
.opacity{
opacity:0.4;
filter:alpah(opacity=60);
-ms-filter:"progid:DXImageFransform.Microsoft.Alpah(Opacity=60)";
- ie6不支持png透明背景，解决办法：ie6下使用gif图片
11.行级元素 块级元素
行级元素： inline
内容决定元素所占位置，不可以通过css改变宽高
inline元素不会独占一行，多个相邻的行内元素会排列在同一行中，排满之后才会换行
水平方向设置padding margin会产生边距效果，但是竖直方向设置不会产生边距效果
举例：a b br i span input select
块级元素： block
独占一行，可以通过css改变宽高
block元素会独占一行，多个block元素会各自新起一行，默认情况下，block元素宽度自动填满父元素宽度。
block元素可以设置margin和padding属性
举例：div p h1 h2 h3 form ul
行级块元素： inline-block
内容决定大小，可以改变宽高
【注】低版本的ie不支持inline-block的，使用display：inline-block在ie下会触发layout，会使内联元素拥有了display：inline-block属性的表象 。
12.
