HTML5和CSS3

HTML5和CSS3

HTML5

一、前言

1.1认识HTML5

HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏，同时结合CSS3的过渡、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。

我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

1.12 语法规范

随着Web技术的更新，HTML也先后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本，在版本的演变过程中新增或废弃了一些属性，同时对语法规范也做了一些调整，为了能够保证浏览器可以兼容不同版本语法规范的，我们可以使用<!DOCTYPE>指示浏览器应该如何处理我们的HTML。

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

通过以上的比较我们可以总结得出HTML5在语法规范上的特点：

1、更简洁

2、更宽松

但是我们在实际开发中应规范书写，不建议太随意 ！并且现在基本所有网站都采用了HTML5的语法规范。

W3C验证地址

The W3C Markup Validation Service

二、语义化

所谓语义化是要使HTML标签具备很好的可读性，可以清晰传达每个标签所要表达的意义，以方便其被友好的处理和解析。

2.1语义化标签

对于语义化标签我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的做法我们通过添加类名如class="header"、class="footer"，使HTML页面具有语义性的，但是不具有通用性（如class="header"也可能被写成class="head"）。

HTML5则是通过增加语义化标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以保证其具有通用性。

此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。

2.1.1常用语义标签

标签	*语义*
<nav>	导航
<header>	页眉
<footer>	页脚
<section>	区块
<article>	文章
<aside>	侧边栏
<progress>	进度条

本质上新语义标签与<div>、<span>没有区别，只是其具有语义性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！

尽量避免全局使用header、footer、aside等语义标签。

三、表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理变的更加高效。

3.1输入类型

类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块

color	<input type="color">	拾色器
time	<input type="time">
date	<input type="date">
datetime	<input type="datetime">
month	<input type="month">
week	<input type="week">

3.2表单元素

元素	含义
<datalist>	数据列表
<keygen>	生成加密字符串
<output>	输出结果
<meter>	度量器

3.3表单属性

属性	用法	含义
placeholder	<input type="text" placeholder="请输入用户名">	占位符
autofocus	<input type="text" autofocus>	自动获得焦点
multiple	<input type="file" multiple>	多文件上传
autocomplete	<input type="text" autocomplete="off">	自动完成
form	<input type="text" form="某表单ID">
novalidate	<form novalidate></form>	关闭验证
required	<input type="text" required>	必填项
pattern	<input type="text" pattern="\d">	自定义验证

四、多媒体

4.1音频

HTML5通过<audio>标签来解决音频播放的问题。

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放

4.2视频

HTML5通过<video>标签来解决音频播放的问题。

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度

五、DOM扩展

5.1获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在。

2、document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。

5.2类名操作

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

Node指一个有效的DOM节点，是一个通称。

5.3自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""，例如

data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素

  <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、读取 demo.dataset['name'] 或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

注：当我们如下格式设置时，则需要以驼峰格式才能正确获取

 <div data-my-name="itcast"> 这样获取Node.dataset['myName']

CSS3

一、CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.1 CSS3的现状

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

1.2 如何对待

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

二、基础知识

2.1选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

2.1.1属性

其特点是通过属性来选择元素，具体有以下5种形式：

选择器	示例	含义
E[attr]		存在attr属性即可
E[attr=val]		属性值完全等于val
E[attr*=val]		属性值里包含val字符并且在“任意”位置
E[attr^=val]		属性值里包含val字符并且在“开始”位置
E[attr$=val]		属性值里包含val字符并且在“结束”位置

2.2.2伪类

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

1、结构(位置)伪类

以某元素（E）相对于其父元素或兄弟元素的位置来获取无素；

选择器	示例	含义
E:first-child		其父元素的第1个子元素
E:last-child		其父元素的最后1个子元素
E:nth-child(n)		其父元素的第n个子元素
E:nth-last-child(n)		其父元素的第n个子元素（倒着数）

2、空伪类

E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）

3、目标伪类

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

4、排除伪类

E:not(selector) 除selector（任意选择器）外的元素会被选中；

2.2.3伪元素

1、E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2、E::first-line 文本第一行；

3、E::selection 可改变选中文本的样式；

4、E::before和E::after

2.2颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即HSLA

不同的颜色表示方法其取值也不相同，具体如下：

R、G、B 取值范围0~255

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色

S 饱和度 取值范围0%~100%

L 亮度 取值范围0%~100%

A 透明度 取值范围0~1

RGBA、HSLA可应用于所有使用颜色的地方。

关于CSS透明度：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

2 、transparent 不可调节透明度，始终完全透明

2.3文本

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

如：text-shadow: 2px 2px 2px #CCC;

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

3、模糊度是不能为负值；

2.4盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: border-box 盒子大小为 width

2、box-sizing: content-box 盒子大小为 width + padding + border

注：上面的标注的**width指的是CSS属性里设置的width: length，content的值是会自动调整的.

2.5边框

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

2.5.1边框圆角

圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。

为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。

分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。

支持简写模式，具体如下：

1、border-radius: 10px; 表示四个角的横纵轴半径都为10px；

2、border-radius: 10px 5px; 表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；

3、border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；

4、border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；

2.5.2边框阴影

box-shadow

与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

如box-shadow: 5px 5px 5px #CCC

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

3、模糊度是不能为负值；

4、inset可以设置内阴影；

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。

2.5.3边框图片

border-image

设置的图片将会被“切割”成九宫格形式，然后进行设置。

这时我们将一个盒子想象是由9部分组成的，分别是左上角、上边框、右上角、右边框、右下角、下边框、左下角、左边框、中间，那么浏览器会将切割好的9张虚拟图片分别对应到盒子的各个部分上。

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺或拉伸

参数详解

1、border-image-source

指定图片路径

2、border-image-repeat

指定裁切好的虚拟图片的平铺方式

a) round会自动调整尺寸，完整显示边框图片

b) repeat 单纯平铺,多余部分，会被“裁切”而不能完整显示。

3、border-image-slice

4、border-image-width

设置边框背景区域的大小，这个值的大小不会影响到盒子的大小。

2.6背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

1、 background-size

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

2、background-origin

通过background-origin可以设置背景图片定位(background-position)的参照原点。

其参数设置如下：

border-box以边框做为参考原点；

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

3、background-clip

通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。

其参数设置如下：

border-box裁切边框以内为背景区域；

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

4、多背景

以逗号分隔可以设置多背景，可用于自适应布局

2.7渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

2.7.1线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

1、必要的元素：

借助Photoshop总结得出线性渐变的必要元素

a、方向

b、起始色

c、终止色

d、渐变距离

2、关于方向

设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时

注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置background-size时，是相对于盒子大小的，当设置了background-size时则是相对于background-size的

2.7.2径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

1、必要的元素：

a) 辐射范围即圆半径

b) 中心点 即圆的中心

c) 渐变起始色

d) 渐变终止色

e) 渐变范围

2、关于中心点

中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。

3、关于辐射范围

其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。

写在最后

关于渐变不同浏览器有不同的版本，即语法格式不一样，我们以最新语法为准，可自行查找资料了解即可。

再说CSS3渐变——线性渐变_gradient, 会员专栏 教程_W3cplus

2.8过渡

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

可以通过all设置所有属性的过渡效果，也可以分别设置某一属性的过渡效果

可以将过渡属性transition设置在A或B状态，但是会有一些细节的差异

transition属性拆解如下表：

属性	示例	含义
transition-property		设置过渡属性
transition-duration		设置过渡时间
transition-timing-function		设置过渡速度
transition-delay		设置过渡延时

2.9 2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

a) 移动位置相当于自身原来位置

b) y轴正方向朝下

c) 除了可以像素值，也可以是百分比，相对于自身的宽度或高度

2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；

3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

a) 当元素旋转以后，坐标轴也跟着发生的转变

b) 调整顺序可以解决，把旋转放到最后

4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

5、矩阵matrix() 把所有的2D转换组合到一起，需要6个参数（了解）。

关于矩阵的学习资料

6、transform-origin可以调整元素转换的原点

我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影响转换的效果。

2.10 3D转换

1、左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

2、CSS中的3D坐标系

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度

3、左手法则

左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方向。

4、透视（perspective）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有3D转换的子元素

b) 作为transform属性的一个值，做用于元素自身

5、理解透视距离

透视会产生“近大远小”的效果

6、3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

7、backface-visibility

设置元素背面是否可见

参考文档

CSS3动画库

animate.css

2.11动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、必要元素：

a、通过@keyframes指定动画序列；

b、通过百分比将动画序列分割成多个节点；

c、在各节点中分别定义各属性

d、通过animation将动画应用于相应元素；

2、关键属性

a、animation-name设置动画序列名称

b、animation-duration动画持续时间

c、animation-delay动画延时时间

d、animation-timing-function动画执行速度，linear、ease等

e、animation-play-state动画播放状态，running、paused等

f、animation-direction动画逆播，alternate等

g、animation-fill-mode动画执行完毕后状态，forwards、backwards等

h、animation-iteration-count动画执行次数，inifinate等

i、steps(60) 表示动画分成60步完成

参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

2.12伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

1、必要元素：

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

2、各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

2.13多列布局

类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。

了解即可，实际意义不大。

三、字体图标

其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？

答案是肯定的。

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。

优点：

1、将所有图标打包成字体库，减少请求；

2、具有矢量性，可保证清晰度；

3、使用灵活，便于维护；

Font Awesome 使用介绍

Font Awesome，一套绝佳的图标字体库和CSS框架