前言
Web前端设计相关的各种技术，内容涵盖HTML基本标签、表格与框架、CSS页面布局、JavaScript基本语法、JavaScript对象、BOM和DOM编程、HTML5、jQuery框架以及自定义插件。
HTML和CSS样式
一 、HTML
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
###1 标签 HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分。 标签分为两种，一种是成对出现**<标签名>< /标签名>**；另一种为自结束标签**<标签名>**；
###2 属性 通过属性可以设置标签的效果，属性需要定义在开始标签中或这自结束标签中。标签名 属性名=”属性值” 属性名=”属性值”
###3 HTML页面的基本结构 <!doctype html> <html> <head>
###4 常用标签
<html>为根标签，有且仅有一个，所有内容都要写在该标签内部.
<head>该标签用于帮助浏览器解析页面，子标签<title>用来设置网页的标题,搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名;子标签<meta>用来设置网页的元数据，比如网页使用的字符集，设置网页的关键字和网页的描述。
<body>网页中所有的可见部分都需要在body中编写。
<h1> ~ <h6>六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3。
<p>段落标签。
<br/>换行标签。
<hr/>水平线标签。
<iframe></iframe>内联框架，可以向一个页面中引入其他的外部页面。
<a></a>超链接，可以使当前页面跳转到其他的页面。
###5 注释
<!-- 注释内容 -->注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。
###6 实体
实体也可以称为转义字符，常用的实体：空格  ；小于< ；大于> ；版权符号©；
###7 图片标签
<img />使用图片标签可以向页面中引入一个外部图片。
###8 文本标签
<strong>表示语气加强
<i>表示斜体
<b>表示加粗
<cite>表示参考的内容，凡是加书名号的都可以使用cite
<q>短引用，行内引用
<blockquote>长引用，块级引用
<sup>上标
<sub>下标
<del>删除的内容
<ins>插入的内容
<pre>预格式标签，可以保留代码中空格换行这些格式
<code>表示程序代码
###9 列表 1.无序列表:使用ul来创建一个无序列表，在列表中使用li来表示一个列表项
2.有序列表;使用ol来创建一个无序列表，在列表中使用li来表示一个列表项
列表相关的元素都是块元素，他们之间可以互相嵌套,去除项目符号list-style:none。
##二、CSS样式
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
###1 编写的位置 ####1.1内联样式：
-
将样式编写到标签的style属性中
<p style="color:red;"></p> -
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用
####1.2内部样式表:
-
将样式表编写到head中的style标签中
<style type="text/css"></style> -
使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护
####1.3外部样式表:
-
将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/> -
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式
###2 基本语法 ####2.1 选择器 通过选择器可以选中页面中的一组元素，然后为其设置样式
-
元素选择器: 语法：标签名{ }
-
id选择器 语法：#id {}
-
类选择器：语法：.class{}
-
通配选择器：语法：*{}
-
并集选择器：语法：选择器1,选择器2,选择器N{}
-
交集选择器: 语法：选择器1选择器2选择器N{}
-
后代元素选择器: 语法：祖先元素 后代元素{}
-
子元素选择器: 语法：父元素 > 子元素 {}
####2.2 声明块 每一个CSS声明都是一个样式，实际上就是一个名值对的结构
###3 元素之间的关系 父元素，子元素，祖先元素，后代元素，兄弟元素
###4 块元素和内联元素 ####4.1 块元素 块元素会独占页面中的一行，无论他的内容的多少,常见的块元素有div，p，h1~h6.
####4.2 内联元素 内联元素只占用自身的大小，不会独占一行，一般内联元素都是用来为文本来设置效果，常见的内联元素有span，a，img.
####4.3 包裹规则
-
一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素
-
a元素可以包含任意元素，除了a本身
-
p元素不能包含任何块元素
###5 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置
-
:link 表示一个普通的链接（未访问过的链接）
-
:visited 表示访问过的链接
-
:hover 鼠标移入的链接，也可以为其他元素设置hover
-
:active 正在被点击的链接，也可以为其他元素设置active
-
:focus 表示元素获取焦点的状态，一般用于文本框
-
::selection 表示内容被选中的状态
-
:first-letter 表示第一个字符
-
:first-line 表示文字的第一行
-
:before 选中元素的最前边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
-
:after 选中元素的最后边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
###6 属性选择器 根据元素的属性选择指定元素
-
[属性名=”属性值”] 选取属性值等于指定值的元素
-
[属性名^=”属性值”] 选取属性值以指定内容开头的元素
-
[属性名$=”属性值”] 选取属性值以指定内容结尾的元素
-
[属性名*=”属性值”] 选取属性值中包含指定内容的元素
###7 兄弟元素选择器
-
选取后一个兄弟元素: 前一个 + 后一个
-
选取后边所有的兄弟元素：前一个 ~ 后边所有
###8 子元素的伪类
-
:first-child 寻找父元素的第一个子元素，在所有的子元素中排序
-
:last-child 寻找父元素的最后一个子元素，在所有的子元素中排序
-
:nth-child 寻找父元素中的指定位置子元素，在所有的子元素中排序，如p:nth-child(3)
-
:first-of-type 寻找指定类型中的第一个子元素
-
:last-of-type 寻找指定类型中的最后一个子元素
-
:nth-of-type 寻找指定类型中的指定子元素
###9 否定伪类
从一组元素中将符合要求的元素剔除出去，语法：:not(选择器)
###10 样式的继承 为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。
###11 选择器的优先级 当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式。优先级计算时，总大小不能超过他的最大的数量级。可以在样式后边添加一个!important，则该样式将会获取最大的优先级。
优先级:
-
内联样式1000
-
id选择器 100
-
类和伪类选择器 10
-
元素选择器 1
-
通配选择器 0
-
继承的样式 没有
###12 选择器的性能 浏览器在解析一组选择器时，是从后边往前一个一个的解析的。如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。
###13 单位
-
长度单位： px % em
-
颜色单位 颜色单词 rgb(红色,绿色,蓝色) #红色绿色蓝色
-
文本样式：
- 字体
-
color 颜色
-
font-size 大小
-
font-family 字体
-
font-style 斜体
-
font-weight 加粗
-
font-variant 小型大写字母
-
font 语法：font: [加粗 斜体 小大字母] 大小[/行高] 字体
-
-
文本样式 - line-height 行高
-
text-transform 大小写
-
text-decoration 文本修饰
-
text-align 文本对齐
-
text-indent 首行缩进
-
letter-spacing 字符间距
-
word-spacing 单词间距
-
- 字体
###14 背景
-
background-color 背景颜色
-
background-image 背景图片
-
background-repeat 设置背景图片重复方式
-
background-position 设置图片位置
-
设置方式一，可以直接通过几个位置的关键字来设置图片的位置top left right bottom center
-
设置方式二，可以直接指定两个值，来设置背景图片的偏移量例子：
background-position : x轴偏移量 y轴偏移量 -
background-attachment 用来设置背景是否随页面滚动
-
scroll 默认值，背景图片会随页面一起滚动
-
fixed 背景图片不随页面滚动，会固定在页面的指定位置
-
-
background 可以通过它来设置所有的背景相关的样式
-opacity 用来设置背景的不透明度，0表示完全透明，1表示完全不透明，0.5半透明。
END
