前言
这段时间工作没那么繁杂，索性就想说来套系统的学习，之前去面试的时候，有被问及些基础的知识，居然回答不上来，也不能说是回答不上吧，回答的不全面。前端群上问了那个机构比较好，选择了慕课网。看了一段时间还是觉得不错的。
HTML
语义化标签
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
文章常用
<p>，添加段落
<hx>，h1、h2、h3、h4、h5、h6，添加标题
<strong>和<em>，但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
<q>，短文本引用，网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
<blockquote>，对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。<q>标签是对简短文本的引用
<cite> ，标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
设置单独样式
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
分行显示文本
<br />，xhtml1.0写法
<br>，html4.01写法
现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范
空格
输入空格，必须写入
水平横线
<hr>标签
地址信息
<address>，为网页加入地址信息，在浏览器上显示的样式为斜体。
编程代码
<code>，加入一行代码
<pre>，为你的网页加入大段代码
<var>，标签表示变量的名称，或者由用户提供的值，通常显示为斜体
列表
<ul>，无序列表，添加新闻信息列表
<ol>，有序列表，添加图书销售排行榜
<dl>，是定义列表，会默认前后层级关系
逻辑划分
<div>，设置div当作一个容器，把一些独立的逻辑部分划分出来
表格
<table>，整个表格以<table>标记开始、</table>标记结束
<tbody>，当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。
<tr>，表格的一行，所以有几对tr 表格就有几行
<td>，表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列
<th>，表格的头部的一个单元格，表格表头
表格中列的个数，取决于一行中数据单元格的个数
<caption>，为表格添加标题和摘要
<table summary="表格简介文本">，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
链接
<a>，链接到另一个页面，title有利于seo。图像可以是GIF，PNG，JPEG格式的图像文件
图片
<img>，为网页插入图片
属性：
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
表单
<form>，为用户输入创建 HTML 表单
<input>，搜集用户信息，类型buttom（可点击按钮），checkbox（复选框），file（文件上传），hidden（隐藏的输入字段），image（图像形式的提交按钮），password（密码字段），radio（单选按钮），reset（重置），submit（提交），text（单行输入框）
<textarea>，文本域，可多行
同一组的单选按钮，name 取值一定要一致，才可以起到单选的作用。
<select>，下拉列表框，设置multiple="multiple"属性，就可以实现多选功能。
<label>，为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
HTML总结
之前面试有被问及：HTML标签可以怎么样分类？这里我简单的按照我的想法分下。
按照标签形态（常用）：
块状元素：<div>，<p><h1>...<h6>，<ol>，<ul>，<dl>，<table>，<address>，<blockquote>，<form>。。。
内联元素：<a>，<span>，<br/>，<i>，<em>，<strong>，<lable>，<q>，<var>，<cite>，<code>。。。
内联块元素：<img>，<input>。。。
tip:为什么table是块元素，原理table的宽度并不是占一行，而是自适应子元素宽度的（但是当然下一个元素会换行，块状元素的特性），相当于一个宽度永远大于子元素的定宽块状元素，因此可以margin:0 auto;设置自己水平居中，子元素随之居中。可以删掉table中的子元素，并加上border试试，宽度随之变化。
按照使用场景（常用）：
文章：<h1>...<h6>，<p>，<strong>，<em>，<q>，<blockquote>，<cite>，<img>。。。
表格：<table>，<tbody>，<tr>，<td>，<th>，<caption>。。。
列表：<ol>，<ul>，<li>，<dl>，<dt>，<dd>。。。
表单：<form>，<input>，<textarea>，<select>，<label>。。
编程代码：<core>，<pre>，<var>。。
标准分类（较详细）：
文档标签：<html>，<head>，<body>，<title>，<meta>，<base>，<style>，<link>，<script>，<noscript>
框架标签：<frame>，<frameset>，<iframe>，<noframes>
布局标签：<div>
表格标签：<table>，<thead>，<tbody>，<tfoot>，<tr>，<td>，<th>，<col>，<colgroup>，<caption>
表单标签：<from>，<input>，<textarea>，<button>，<select>，<optgroup>，<option>，<label>，<fieldest>，<legend>
列表标签：<ul>，<ol>，<li>，<dl>，<dt>，<dd>
链接标签：<a>
多媒体标签：<img>，<map>，<area>，<object>，<param>
文章标签：<h1>...<h6>，<p>，<br/>，<span>，<bdo>，<pre>，<acronym>，<abbr>，<blockquote>，<q>，<ins>，<del>，<ins>，<address>
字体样式标签：<tt>，<i>，<b>，<big>，<small>，<em>，<strong>，<dfn>，<code>，<samp>，<kbd>，<var>，<cite>，<sup>，<sub>
特殊标签：<!DOCTYPE>，<!-- -->，<hr>
CSS
css 样式：由选择符和声明组成，而声明又由属性和值组成
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔
注释语句
/*注释语句*/——Html中使用<!--注释语句-->
CSS 样式代码插入的形式：内联式、嵌入式和外部式
内联式：style=""
嵌入式：写在<style> 标签对中
外部式：也称为外联式，就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
4、层级大小：内联式 > 嵌入式 > 外部式，但是 嵌入式>外部式 有一个前提：嵌入式css样式的位置一定在外部式的后面
ID选择器，类选择符区别
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。（虽然在浏览器还是能体现相同的效果，但是不符合W3C规则）
后代选择器（空格）与子选择器（>）的区别
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。“>”作用于元素的第一代后代，空格作用于元素的所有后代。
伪类选择符
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色——:hover
分组选择符“,”
分组选择符，当你想为html中多个标签元素设置同一个样式时——a,b{color:red}
CSS样式继承
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代，例如：line-height；font-size；color
CSS权值
浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值？
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
!important 优先级
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。
这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。注意：!important要写在分号的前面。
三大标签类型
前面就给标签分了类，下面就在说说特点：
块状元素（block）：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素（inline）：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块元素（inline-block）:
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
三种布局模型
1、流动模型（Flow）
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2、浮动模型 (Float)
3、层模型（Layer）
三种形式：绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)
font属性简写
使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值；在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
长度单位
总结：常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em。就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
3、百分比。p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
W3C倡导结构、样式、行为分离
结构化标准语言（html和xml）
表现标准语言（css）
行为标准语言（dom和ECMAScript）
盒子模型层级
边框 > 内容+内边距 > 背景图片 > 背景颜色 > 外边距
绝对定位 ,如果父元素没有相对定位的话，会一直追溯，最后没有的情况想是根据根元素html定位，不是body。