文章目录
- 一、HTML5概述
- 二、HTML5新增特性概况介绍
- 2.1 HTML5 中新增一些有趣的特性：
- 2.2 HTML新特性
- 2.3 HTML5语法规则（更加人性化）
- 2.4 HTML5 <!DOCTYPE>及基本结构
- 2.5 新增结构化语义
- 2.6 非结构化语义标签
- 2.7 行内语义性标签
- 2.8 新增表单相关内容(input元素)
- 2.9 其它新增h5标签元素
- 三、CSS3选择器
- 3.1 基本选择器
- 3.2 层次(关系)选择器
- 3.3 动态伪类选择器
- 3.4 UI 元素状态伪类选择器（跟form表单相关的伪类）
- 3.5 结构伪类选择器
- 3.6 否定伪类(了解)
- 3.7 属性(attribute)选择器
- 3.8 伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的
- 3.9 边框属性
- 3.10 阴影
- 3.11 背景属性
- 3.12 渐变(Gradients)属性(IE9及之前的版本不支持渐变)
- 3.13 文字阴影
- 3.14 颜色属性(透明度)
一、HTML5概述
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation）
- HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
- HTML5的设计目的是为了在移动设备上支持多媒体。
- HTML5 简单易学。
从2010年开始，HTML5和CSS3就一直是互联网技术中最受关注的两个话题。2010年，MIX10大会上微软的工程师在介绍ie9时，从前端技术的角度把互联网的发展分为三个阶段：
- 第一阶段是以web 1.0为主的网络阶段，前端主流技术是HTML 和CSS。
- 第二阶段是web 2.0 的ajax应用阶段，热门技术是javascript/DOM/异步数据请求。
- 第三阶段是html5 + css3 阶段，这两者相辅相成，使互联网又进入一个崭新的时代。
小贴士：
HTML5是W3C与WHATWG合作的结果,WHATWG指Web Hypertext Application Technology [tek’nɒlədʒɪ] Working Group。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。它以HTML4为基础，对HTML4进行了大量的修改。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持
HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目
二、HTML5新增特性概况介绍
2.1 HTML5 中新增一些有趣的特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新增了一些语义化标签，比如 article(文章，例如一篇博客)、footer、header、nav、section(区域划分)
- 新的表单控件，比如date、time、email、url、search等等
- 新的表单属性，比如placeholder requared等等
- 新增布尔值属性(简写)，如：reversed autofocus multiple属性值可以省略
2.2 HTML新特性
HTML5 是 HTML 标准的最新演进版本。 这个术语代表了两个不同的概念：
- 它是一个新的 HTML 语言版本包含了新的元素，属性和行为
- 同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术
- 语义：能够让你更恰当地描述你的内容是什么。
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
- 样式设计: 让作者们来创作更加复杂的主题吧！
HTML5的改变，涵盖了CSS3和JS的一些新特性，这些东西统称HTML5技术。
我们之前学习的是HTML4.01（XHTML1.0）。2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
2.3 HTML5语法规则（更加人性化）
- DOCTYPE及字符编码
- 大小写都可以
- 布尔值 checked reversed
- 省略引号 align=center
- 可以进行省略的标签
- 不允许写结束符的标签(即单标签)：
hr、img、input、link、meta、area、basebr col command embed kegen param source track wbr - 可以省略结束符的标签：
li dt dd p rt optgroup option colgroup thead tbody tr td th - 可以完全省略的标签：
html head body colgroup tbody
- 不允许写结束符的标签(即单标签)：
2.4 HTML5 <!DOCTYPE>及基本结构
<!DOCTYPE html>
<html lang="zh-CH">
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
小贴士：
1. <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
2. 对于中文网页需要使用 声明编码，否则会出现乱码。
3. 给文档指定语言
2.5 新增结构化语义
语义就是有意义的标签(结构标签（块状元素）— 可以理解为有意义的div)：主要负责web上下文结构的定义，确保html文档的完整性
<header>定义一个页面或者一个区域的头部<nav>定义导航链接部分<section>定义文档中的节（section、区段）<footer>定义一个页面或者一个区域的底部<article>定义页面独立的内容区域- 可能的 article 实例：论坛帖子、报纸文章、博客条目、用户评论
2.6 非结构化语义标签
主要完成web页面区域的划分，确保内容的有效分隔
<aside>定义页面的侧边栏内容<hgroup>用于对网页或区段（section）的标题进行组合<figure>规定独立的流内容（图像、图表、照片、代码等等）<figcaption>定义元素的标题
2.7 行内语义性标签
主要完成web页面具体内容的引用和表述，是丰富内容展示的基础
- progress 用于表示进度条，可以用来显示下载的进度，属性有max(定义需要完成的值)和value(定义进程的当前值)。举例：
<progress max="100" value="50">调整</progress> - audio 定义音频，比如音乐或其他音频流
- video 定义视频，比如电影片段或其他视频流(考虑浏览器兼容性)
注意：当前video元素支持三种视频格式：
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(.mp4) --> type = video/mp4
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件(.mkv) --> type = video/webm
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件(.ogg) --> type = video/ogg
2.8 新增表单相关内容(input元素)
email
tel
search
number
range
date
month
time
datetime-local
color
url
2.9 其它新增h5标签元素
- 新增绘图：canvas
- 新增本地存储（离线存储、web存储、localstorage、sessionstroge）
- 新增拖拽功能API
- 支持实现响应式布局
三、CSS3选择器
3.1 基本选择器
*通配(全局)选择器- E 元素(标签)选择器
- #id ID选择器
- class 类选择器
- selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并
3.2 层次(关系)选择器
- E F
- E>F
- E+F
- E~F
3.3 动态伪类选择器
- E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
- E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
- E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
- E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
3.4 UI 元素状态伪类选择器（跟form表单相关的伪类）
- E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
- E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
- E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素(配合disabled使用)
3.5 结构伪类选择器
- E:fisrt-child
- E:last-child
- E F:nth-child(n)
- E F:nth-last-child(n)
3.6 否定伪类(了解)
- E:not(F) 匹配所有除元素F外的E元素
3.7 属性(attribute)选择器
- E[att]{att:value;} 匹配含有att属性的E元素
- E[att=value] 匹配属性att值为value的E元素
- E[att~=value] 匹配属性att值包含value的E元素
- E[att|=value] 匹配属性att值以value开头的E元素
- E[att^=value] 匹配属性att值以value开头的E元素
- E[att$=value] 匹配属性att值以value结尾的E元素
3.8 伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的
- :first-line
- :first-letter
- :before
- :after
3.9 边框属性
- border-color:设置边框的颜色
- border-radius:设置边框圆角
3.10 阴影
box-shadow:向框添加一个或多个阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
小贴士：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、
3.11 背景属性
- background-size:规定背景图片的尺寸
3.12 渐变(Gradients)属性(IE9及之前的版本不支持渐变)
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡；以前，你必须使用图像来实现这些效果。但是，通过使用CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变(Linear Gradients）
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...); - 径向渐变（Radial Gradients）- 由它们的中心定义
语法：background: radial-gradient(center, shape size, start-color, ..., last-color);
3.13 文字阴影
text-shadow 规定添加到文本的阴影效果
语法：text-shadow: h-shadow v-shadow blur color;
3.14 颜色属性(透明度)
- opacity [ə(ʊ)'pæsɪtɪ]属性：规定元素的不透明级别;属性值value规定不透明度,从 0.0 （完全透明）到 1.0（完全不透明）
- rgba：设置颜色的透明度
