HTML5和CSS样式知识汇总,HTML5和CSS3重点知识汇总

HTML5

1、什么是H5：

HTML5是HTML最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。设计目的是为了在移动设备上支持多媒体。

2、新增特性：

绘画；多媒体播放；本地离线存储；特殊内容元素；表单控件等

3、最小的HTML5文档

文档标题

文档内容......

4、支持：

最新版Safari,Chrome,Firefox,Opera支持，IE9支持

5、自定义标签：

首先在html标签通过xmlns:命名空间名来指定；其次可以使用这个标签写内容(通常命名采用-连接方式)；最后，在样式里使用

命名空间名\:标签名{}定义

Document

//2、这里如果有多个标签，都是从ownhtml创建的，那么对其设置样式主要是冒号后面的部分，也就是命名空间部分

ownhtml\:customdiv{

font-size: .36rem;

font-weight: bold;

color:red;

}

p{

color: green;

}

this is a custom element!

this is normal text

6、canvas

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。默认情况下 元素没有边框和内容。

//首先找到canvas元素

var c=document.getElementById("myCanvas");

//创建 context 对象：是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

var ctx=c.getContext("2d");

//fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000(黑色)

ctx.fillStyle="#FF0000";

//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

ctx.fillRect(0,0,150,75);

canvas 的左上角坐标为 (0,0),上面的 fillRect(0,0,150,75)意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

再来一个画圆的实例：arc(x,y,r,start,stop)

其中，画布左上角坐标0，0；x为圆心在x轴上坐标，y同理；r为半径长度；start为起始角度；stop结束角度；Math.PI表示180°，顺时针

您的浏览器不支持 HTML5 canvas 标签。

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(250,250,250,0,Math.PI);

ctx.stroke();

7、SVG

指可伸缩矢量图形，定义用于网络的基于矢量的图形，使用XML格式定义，图像改变尺寸质量不会损失。

优点：可通过文本编辑器创建与修改；可被索引，压缩；是可伸缩的；可在任何分辨率下高质量打印。

异同：SVG 是一种使用 XML 描述 2D 图形的语言；Canvas 通过 JavaScript 来绘制 2D 图形

8、video和audio

一个是音频，一个是视频。都可以有多个source，第一个不支持便播放下一个。

controls功能为让浏览器启用本身的播放控制栏。

Source标签用于给媒体(video/audio)指定多个可选择的(浏览器最终只能选一个)文件地址，且只能在媒体标签没有使用src属性时使用。

loop属性用于指定视频是否循环播放，是一个布尔属性。

Autoplay属性用于设置视频是否自动播放，是一个布尔属性。

preload属性用于定义视频是否预加载值有none,metadata,auto(默认)。

poster属性用于指定一张图片，在当前视频数据无效时显示(预览图)。

Your browser does not support the audio tag.

9、关于header,footer等的统一说明：

header:文档头部区域；nav定义导航链接部分；section定义文档中的章节；article定义独立的内容；aside定义页面主区域之外内容；figure规定独立的流内容(图像，图表等)；footer定义文档底部。

考虑到其兼容问题，可在样式中对其所有标签设置一个display:block属性。

其中，article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

article元素使用方法

发表日期：2010/10/10

此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论

评论

发表者：maizi

1小时前

这篇文章很不错啊，顶一下！

发表者：小妮

1小时前

这篇文章很不错啊，对article解释的很详细

10、MathML

数学标记语言，基于XML的标准，书写数学符号和公式的语言。

11、input新增几个类型

type=color选取颜色；date从日期选择器选择日期；email提交表单自动验证域名合法性；number选择数字(上下箭头)1 到 5 之间；tel电话号码；url自动校验url的值

12、web存储

localStorage：长久保存网站数据，无过期时间，直到手动去除；

sessionStorage：临时保存同一窗口数据，关闭窗口后删除；

mainfest：离线缓存，断开网络时继续访问页面。

常用API：

保存数据localStorage.setItem(key,value);

读取localStorage.getItem(key);

删除单个localStorage.removeItem(key);

删除所有localStorage.clear();

得到某个索引的key，localStorage.key(index);

对于离线缓存，首先建立一个manifest文件，内容为cache manifest,cache(必须),network,fallback。cache manifest固定格式， 写在第一行，#加版本号作为注释，cache标识出哪些文件需要缓存。然后在html标签里加上即可。服务器部署是需要添加相应mime-type

CACHE MANIFEST

# version 2018-08-20 10:44

CACHE:

./asset/src/style/main.css

./asset/src/style/index.html

./asset/src/style/main.js

HTML

CSS3

1、边框

border-radius有四个值，对应1)border-top-left-radius，2)border-top-right-radius，3)border-bottom-right-radius，4)border-bottom-left-radius，可以分别设置，也可以连写。当连写状态下，只有一个值，则四个角都为该值；有两个值，则对应13,24(对角)；如果为三个值，则1,24,3。

box-shadow，用来定义盒模型阴影而不是文字阴影，有如下几个值：阴影的x轴，y轴，模糊值(越大越模糊)，颜色，(inset可选，加上这个属性是内部阴影)。xy轴单位是px，用来定义阴影方向，为正则是右侧下侧阴影，为负左侧上侧。

如box-shadow:2px 2px 5px #333;

border-image，使用图像创建边框。

2、背景

background-image：url();background-position: left top;background-repeate: no-repeate;也可以连写background:url() left top no-repeate。

background-size：宽px 高px ；指定背景图像大小

background-origin:border-box/padding-box/content-box；背景图像的位置区域。

3、*渐变*

线性渐变：background: linear-gradient(direction,color-stop1,color-stop2,...);也可将颜色设置为rgba()加了透明度。多个颜色默认均匀分布，也可在其后面加上x%控制区域大小。

//从上到下渐变

background: linear-gradient(red,blue);

//左到右

background: linear-gradient(to right,red,blue);

//对角

background: linear-gradient(to bottom right,red,blue);

//角度定义方向

background: linear-gradient(180deg,red,blue);

//从上到下，其中0deg从下到上，45deg顺时针45°，90则顺时针90°也就是从左到右，180向下，-90从右到左

径向渐变：由中心向外。radial-gradient(circle,red,yellow,green);其中circle表示圆形，默认是椭圆ellipse。

4、字体

可以自定义字体，使用时，先在css引入并起名，然后使用

@font-face{//引入

font-family: 起名字;

url:('...');

}

div{

font-family: 名字;//在这里使用

}

5、2D转换

transform:translate(20px,10px);沿着xy轴移动；

rotate(30deg);顺时针旋转角度；

scale(2,3);放大或缩小倍数，沿xy轴；

3D转换

transforms:translate3d(x,y,z);scale3d(x,y,z);rotate3d(x,y,z,angle)

连写：transform:rotate|scale|skew|translate|matrix

6、transitions和animations

transition:property duration timing-function，pro表示对哪个属性过渡，duration表示在多长时间内完成，最后表示通过什么方法过渡。如：transitions: background-color 1s linear;

animations:name duration timing-function iteration-count，name表示关键帧的集合，duration多久完成过渡，timing-function通过什么方法过渡，最后一个迭代次数，infinite无限循环，默认为1。

创建动画，首先使用keyframes,然后animation使用之。

.box {

background-color: red;

-webkit-animation: mycolor 4s linear infinite;

}

@-webkit-keyframes mycolor {

0% {

background-color: red;

}

40% {

background-color: darkblue;

}

70% {

background-color: yellow;

}

100% {

background-color: green;

}

}

linear:同样速度变化；ease-in:开始速度慢，越来越快；ease-out：开始快，后面减速；ease：开始慢，加速再减速。

7、多媒体查询@media

可针对不同媒体类型定义不同样式。

@media 媒介类型and|not|only (媒介特征) {

...

}

媒介类型：print:打印机和打印预览；screen:电脑，平板或手机屏幕；all：所有媒体设备类型。

媒介特征：

device-height/width:设备屏幕可见高度/宽度；

max-device-height:屏幕可见最大高度；

height/width:页面可见区域高度；

max-height/width:页面可见最大高度；

max-width指的是显示区域的宽度，比如浏览器的显示区域宽度；max-device-width指的是设备整个显示区域的宽度，也就是设备分辨率。max-width在窗口大小改变或横竖屏转换时会发生变化；max-device-width只与设备相关，不会发生变化。

例子：为不同页面宽度设置不同的CSS样式——页面宽度大于320px和页面宽度等于320px时分别为div设置不同的背景颜色。

#square{

width:100px;

height:100px;

}

@media only screen and (min-width: 320px) {

#square {

background:red;

}

}

@media only screen and (min-width: 320px) and (max-width: 320px) {//(min-width: 320px) and可省略

#square {

background:yellow;

}

}

在head中引入

在@import中引入

@import url("css/style.css");

直接在CSS中使用

@media screen and (max-width: 800px) {

// CSS样式

}

来源：oschina

链接：https://my.oschina.net/u/3728554/blog/1929097