一、HTML5

简介
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG）的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
特性
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

二、常用标签

meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的
$\color{#FF0000}{charset}$ 指定网页的字符集。比如： $\color{blue}{UTF-8 }$
$\color{#FF0000}{name}$ 指定的数据的名称
$\color{#FF0000}{content }$ 指定的数据的内容
$\color{#FF0000} {keywords}$ 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。
比如： $\color{blue}{ <meta name="keywords"}$
$\color{#FF0000}{content=}$ "网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
$\color{#FF0000}{description}$ 用于指定网站的描述，
比如： $\color{blue}{<meta name="description"}$
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
$\color{#FF0000}{ <title>}$ 标签的内容会作为搜索结果的超链接上的文字显示，就是网页名称。

2.基础标签

<!DOCTYPE>定义文档类型
<html>定义HTML文档
<title>定义标题
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题。
<p> 定义段落。

格式标签

<acronym>定义只取首字母的缩写
<abbr>定义缩写
<b>定义粗体文体
<cite>定义引用
<font>定义字体尺寸和颜色
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

特殊符号

在HTML中有些时候，我们不能直接书写一些特殊符号，比如：多个连续的空格（大概率会被自动解析为一个空格），比如字母两侧的大于和小于号，那么，我们就需要在网页中使用转义字符：
&nbsp:空格 &gt: 大于号 &lt: 小于号 &copy: 版权符号

5.语义化HTML标签

在页面中独占一行的元素称为块元素（block element）块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
在页面中不会独占一行的元素称为行内元素（inline element）
行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

6.列表

在html列表一共有三种： 1、有序列表 2、无序列表 3、定义列表
有序列表，使用ol标签来创建无序列表
使用li表示列表项
无序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明

7.超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径 :

值可以是一个外部网站的地址

也可以写一个内部页面的地址
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.或..开头
例如： ./，../
./可以省略不写，如果不写./也不写../则就相当于写了./
./ 表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录
target属性，用来指定超链接打开的位置
可选值： self 默认值在当前页面中打开超链接
blank 在一个新的要么中打开超链接

8.表格和表单

text 用于没有任何限制的文本和字符 password用于输入密码 email 用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。 url 用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 number 用于应该包含数值的输入域。
range 用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。属性同 number Date pickers (date, month, week, time, datetime, datetime-local) HTML5 拥有多个可供选取日期和时间的新输入类型： date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间（小时和分钟） datetime - 选取时间、日、月、年（UTC 时间） datetime-local - 选取时间、日、月、年（本地时间） search 用于搜索域 color 用于选择颜色 submit 定义提交按钮（提交表单）

CSS基础知识

一、简介

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、语法基础

1.属性值

整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313，实数:12.20、1415、-12.03。

长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。
相对长度单位有:em--当前字体的高度，也就是font.size属性的值;ex--当前字体中小写字母x的高度;Dx--一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。
另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
百分数量(percentages)

百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

2.选择器
元素选择器

作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{
}
h1{
}
div{
}

id选择器

ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是，ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。
语法：#id属性值{}

类选择器

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。
语法：.class属性值

通配选择器

作用：选中页面中的所有元素
语法: *{}
例子：
*{
color: red;
}

复合选择器

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。

first-child 伪类

first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明<!DOCTYPE> ，这样 :first-child 才能生效。

lang 伪类

lang 伪类使你有能力为不同的语言定义特殊的规则
注意：IE8必须声明<!DOCTYPE>才能支持;lang伪类。

伪元素

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用

CSS长度

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。
长度有一个数字和单位组成如 10px, 2em, 等。
数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。
对于一些 CSS 属性，长度可以是负数。
有两种类型的长度单位：相对和绝对

选择器的权重

样式的冲突 - 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式没有优先级可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎

HTML基础知识