HTML：超文本标记语言；
1.什么是HTML标记语言：表示网页信息的符号标记语言
特点：
- 可以设置文本的格式；
- 可以创建列表；
- 可以插入图像和媒体；
- 可以建立表格；
- 超链接，可以用鼠标点击超链接实现页面跳转
XHTML：XHTML是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言。实际上XHTML 与 HTML 4.01 标准没有太多的不同。
HTML与XHTML的区别：
- XML 被设计用来传输和存储数据，其焦点是数据的内容。
- HTML 被设计用来显示数据，其焦点是数据的外观。
- HTML 旨在显示信息，而 XML 旨在传输信息。
- XML在定义标记时区分大小写，而HTML标记不区分大小写。
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素
2.HTML的标记和他的属性：
- 文档的保存格式：.html .htm .xhtml;
- 标记和被标记的内容构建出HTML文档；
- 标记的属性：就是用来控制我们的内容如何的显示，格式<标签 属性1=属性值 属性2=属性值>内容</标签>
3.语法不区分大小写不过默认都小写
4.文档注释：<!—注释内容-->
5.代码格式：整洁，易读，合理的排版缩进
6．html的基本结构：
- <html>内容</html> HTML文档的文档标记，也被称为HTML开始/结束标记
- <head>内容</head> HTML文件头标记，用来包含文件的基本信息，比如网页的标题关键字等；在head中标记的内容不会在浏览器中显示
- title HTML文档的标题，title标签里面不可以再包含其他标签
- body HTML的主体标记，页面显示的内容都在它里面
- meta HTML页面的元信息，提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。Meta标签在head里面
- 常见的meta标签
指定字符集
<meta charset="utf-8">
向搜索引擎说明你的网页的关键词
<meta name="keywords" content="">
告诉搜索引擎你的站点的主要内容
<meta name="description" content="">
告诉搜索引擎你的站点的制作的作者
<meta name="author" content="your name">
响应式页面
<meta name="viewport" content="width=device-width, initial-scale=1.0">
定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)
<meta http-equiv="refresh" content="3" url=https://www.mozilla.org">
如果安装了GCF (Google Chrome Frame)，则使用GCF来渲染页面 ("chrome=1"), 如果没有安装GCF，则使用最高版本的IE内核进行渲染 ("IE=edge")。X-UA-Compatible(浏览器采取何种版本渲染当前页面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
浏览器的内核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
7．文档标记
8.图像标记
9.超链接的使用
1.基本语法：
<a href=”url” name=”页面的锚点名称” target=”页面的打开方式”></a>
2.属性： href：链接的地址 target：定义超链接打开的方式（属性：_blank新建窗口;_seif默认；_parent在父窗口中打开页面；_top在顶层窗口中打开文件） name属性：指定页面的锚点名称
10表格：
table表格
thead 表格头
tbody 表格主体
tr 行
td 元素定义表格单元-列
th 元素定义表头
表格样式重置：
单元格间隙合并
Table{border-collapse：collapse}
重置单元格默认填充
Th，td{padding：0}
<td colspan=”2”></td> <!-- 单元格合并 横着的 -->
<td rowspan=”2”></td> <!-- 单元格合并 竖着的 -->
11.. form表单元素：
<form action=”提交到的目标”></form>
<input type=”” name=”” value=”” />
Type:text 文本框； password：密码框； radio单选框； checkbox复选框； submit提交； reset重置； button按钮； image图片； file上传； hidden隐藏； select/option下拉选框（对高度的支持不兼容）<select><option>下拉内容</option></select>； textarea文本域（各个浏览器下的默认滚动条显示不兼容，css3新增resize调整尺寸属性）
表单元素：
Label标签为input定义标注
<input type="" name="" value="" />
<label for=”a”>….<label> //for指向ID
Checked 在页面加载时默认选定的input标签（布尔类型）
<input type=”” name=”” value=”” checked/>
Disabled 属性规定应该禁用input元素
<input type=”” name=”” value=”” disabled />
12框架：
- 什么是框架：框架根据浏览器划分出不同的部分，每一部分加载不同的网页，实现在同一浏览器中加载多个页面的效果
- 语法格式:<frameset></frameset>
- 属性：A。 cols B。rows C。frameborder D。border
- <frame>子窗口标记：<frame>标记是一个单标记，该标记必须放在<frameset>中使用，在<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页
- Src：加载网页文件的URL
- Name：框架名称，是链接target所要的参数
- Noresize：表示调整框架大小
- Scrolling：是否需要滚动条 auto yes no
- Frameborder：是否需要边框
CSS：层叠样式表；
提升css优先级：!important
优先级：
!important>行内>id>class<标签<默认
选择符：# .
颜色:color
背景：background
背景图片比背景颜色层级高
背景图片：background-image：url（）
背景图片重复？：background-repeat：no-repeat；repeat-x；repeat-y；
背景定位：background-position：X,Y; 可以写单词，x轴：left，center，right；Y轴：top，center，bottom；X或者Y默认居中；
CSS样式：行间样式；内联样式，外联样式。
边框：border：粗细，线型，颜色；
边框是一个非矩形的形状。
文字：
Font-weight：文字着重
Font-style：文字倾斜
Font-size：文字大小
Line-height：行高
当行高为奇数时，文字的上方比下方少一个像素
当行高为偶数时，文字的上方和下方一样。
Font-family：字体
Color：文字颜色
Text-align：文本对齐方式
Text-indent：首行缩进
Text-decoration：文本修饰（下划线什么的）
Letter-spacing：字母间距
Word-spacing：单词间距
White-space：强制不换行
盒模型（盒子大小）=border+padding+width/height
盒子宽度=左border+左padding+width+右padding+右border
盒子高度=上border+上padding+height+下padding+下border
Padding：内边距相对于给一个盒子加了填充厚度，会影响盒子大小。
Padding：left，top，right，buttom
Margin：
问题：上下外边距会叠压；父子级包含的时候子级的margin-top会传递给父级。
a标签：超链接/下载/锚点
href：链接目的地。
四个伪类（伪类：就是还不存在的类型，或者说预先定义好的类型）：link（未访问的链接的样式）、visited（访问过后的链接的颜色）、hover（鼠标经过的颜色）、active（鼠标按下时链接的颜色）
行内标签：span：主要是用来区分样式的。
H5常用标签：header（页面头部） nav（导航） footer（页脚） section（板块/划分页面区域） article（用来表示一个独立且完整的区域） aside（侧边栏或者广告什么的）
HTML常用标签：h1-h6标题 p段落 string粗体 em斜体 span区分样式 ul无序列表 ol有序列表 li列表项 dl定义列表 dt定义列表标题 dd定义列表项 mark标记 img图片
样式初始化：reset原则：
Body，h1-h6{margin:0;padding:0;font-size:12px;}
Ul ol Li{list-style:none;margin:0;padding:0;}
选择器：
ID选择器（一个名字只能有一个）；类选择器；标签选择器；群组选择，包含选择器；通配符
选择器优先级：style（行内样式）>id>class>标签>默认
块元素和行内元素：
块的特征：默认独占一行，支持所有css命令
内嵌/行内/内联：同排可以继续跟随同类的标签；内容撑开宽度；不支持宽高；不支持上下的margin；代码换行被解析（换行符被解析成一个空格）
Display：block：显示为块。
Display：inline-block 行内元素；块在一行显示，行内元素支持宽高，没有宽度的时候内容撑开宽度，IE6-7不支持块属性变成行内元素
Float：left；right；none；inherit（继承）；
特征：块在一排显示，内联支持宽高，默认内容撑开宽度，脱离文档流，提升层级半层。
文档流是文档中可显示对象在排列时所占用的位置
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下了。
清除浮动：1、clear：left right both none inherit；元素上的某个方向不能有浮动元素
Clear：both；在左右两侧均不允许浮动元素
2、加高（扩展性不好）
3、父级浮动（页面中所有的元素都加浮动的话，margin左右自动失效）
4、inline-block（margin的左右auto失效）
5、空标签清除浮动（IE6下最小高度19px；解决后IE6下还是有2px的偏差）
6、br清浮动（不符合结构样式行为分离的要求）
7、after伪类清除：.clear:after{content:””;display:block;clear:both;} .clear{zoom:1}
After伪类：元素内部末尾添加内容；IE6，7不兼容
Zoom缩放：触发IE下的haslayout，是元素根据自身计算宽高，火狐不支持
BFC、haslayout
BFC（block formatting context）：标准浏览器下才有的（非IE）
翻译为：块级元素格式化上下文
A,float的值不为none
B，overflow的值不为visible
C，display的值为table-cell，table-caption，inline，inline-block中的任何一个
D，position的值不为relative，static
E，width height min-width min-height：不是自动
Haslayout：IE浏览器
A，writing-mode：tb-rl
B，-ms-writing-mode：tb-rl
C，Zoom：（！normal）
定位position：
relative，相对定位
相对定位的特征：1，不影响元素本身的特性；2，不使元素脱离文档流（元素移动之后原始位置会被保留）；3，如果没有定位偏移，对元素本身没有任何影响；4，提升层级。
absolute，绝对定位
绝对定位的特征：1，使元素完全脱离文档流；2，使内嵌支持宽高；3，块属性标签内容撑开宽度；4，如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；5，相对定位一般都是配合绝对定位使用；6，提升层级
层级 z-index：数字；a定位元素默认后者层级高于前者；b建议在兄弟标签之间比较层级。
绝对定位的元素的子级浮动可以不用写清除浮动
Fixed，固定定位
固定定位的特征：与绝对定位基本上一致，差别是固定定位始终根据document定位，IE6不支持固定定位。固定定位的元素的子级浮动可以不用写清除浮动
透明度：opacity:0~1;
IE6-7滤镜：xx:{filter:alpha(opacity=0~100)};
IE6-7下的兼容性：
1，H5标签兼容
（解决办法：使用一个JS库html5shiv.js；里面创建了所有H5标签，就是用js创建一个新的节点名称为H5新标签的名字）
2，元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，就给它的块元素加上浮动 解决办法：给块级加float:left;
3，第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下会有间隙问题；第二个元素同样float:left
4，IE6下子元素超出父级宽高，会把父级的宽高撑开 （解决办法：不要让子级的宽高大于父级；）
5，P包含块元素嵌套规则（解决办法：P td h 标签不要嵌套块元素）
6，Margin兼容性问题；问题1：margin-top传递；问题2margin上下边距叠压（解决办法：1：触发BFC和haslayout：overflow：hidden；zoom：1； 2：用同一方向的margin！不要用复合元素，分开写margin-top；margin-button）
7，Display：inline-block（IE6不兼容inline-block；解决办法：加两条属性zoom：1触发haslayout；属性为：display:inline;zoom:1;）
8，IE6最小高度问题19px（解决办法：加一个overflow：hidden）
9，IE6-7当元素浮动后再设置margin的时候在IE6下就会产生双边距（解决办法：加一条属性 display:inline）
10，Li里元素都浮动li在IE6-7下方会产生4px间隙问题（解决办法：针对IE6，7添加垂直对齐：vertical-align:top;）
11，浮动元素之间注释，导致多复制一个文字问题（触发条件：两个浮动元素中间有注释或者内联元素并且第二个元素和父级宽度相差不超过3px；解决办法：避免两个浮动元素之间出现注释或者内联元素，宽度大于3px）
12，IE6-7父级元素的overflow:hidden是包不住子级的relative（解决办法：给父级同样添加*position:relative）
13，IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差（解决办法：设置偶数。。。）
14，IE6下绝对定位元素和浮动元素并列绝对定位元素消失（解决办法：给其中一个套一个父级p标签就好。）
15，IE6下input的空隙（解决办法：给input加一个float 加星号）
16，IE6下输入类型表单控件背景问题（解决办法：设置背景固定定位）
理解内容与样式分离的原则：
写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
文档结构与文档样式的分离可以确保网页的平稳退化，也让内容和样式在可以分开独立编辑。
文档声明的作用：
文档声明用来告知浏览器当前文档所使用的类型，让浏览器解析器知道要用什么规范来解析文档
严格模式和混杂模式是什么：
严格模式下，浏览器以其支持的最高标准呈现
混杂模式/怪异模式，浏览器用自己的方式解析代码，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无发工作。
<!DOCUYPE HTML>的作用
它是html5标准网页声明,告诉浏览器用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式。
浏览器乱码的原因：
乱码产生的根本原因是保存的编码格式和浏览器解析时的解码格式不匹配导致的。
解决方式： 写代码的时候在html 的 <head>里添加<meta charset='utf-8'>并且保存的时候仍选择同样的编码方式。
常见的浏览器内核都有什么？
Internet explorer 使用的是Trident
Firefox使用的是Gecko。
opera之前使用的是Presto，后来用Blink
苹果的Safari，谷歌的Chrome使用的是WebKit，还有国产的大部分双核浏览器其中一核就是WebKit。
常用的标签：
html：HTML页面的根元素
body：文档的内容
head：用于定义文档的头部
meta：提供了元数据，元数据也不显示在页面上，被浏览器解析给搜索引擎
title：文档的标题
h1-h6：标题
header：头部
nav：导航
p：段落
a：网页链接
div：块级元素，它可用于组合其他的HTML，元素的容器
span：内联元素，行内元素，文本的容器
ol：有序列表
ul：无序列表
li：列表
img：图片
br：换行
input：定义输入控件
table：表格
tr：行
td：列
th：表格的表头
tbody：表格的主体
tfoot：表格的页脚
hr：水平线
iframe：定义内联框架
button：按钮
form：表单
footer：页脚
