【前端基础篇】HTML5 + CSS3 入门知识-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端基础篇】HTML5 + CSS3 入门知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、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 层次(关系)选择器

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);