HTML5和CSS3重点知识汇总
HTML5
1、什么是H5：
HTML5是HTML最新的修订版本，2014年10⽉由万维⽹联盟（W3C）完成标准制定。设计⽬的是为了在移动设备上⽀持多媒体。
2、新增特性：
绘画<canvas>；多媒体播放<video><audio>；本地离线存储；特殊内容元素<article><header><nav><footer>；表单控件
<calendar><date><email>等
3、最⼩的HTML5⽂档
<!DOCTYPE html>  <!--h5的声明-->
<html>
<head>
<meta charset="utf-8">
<title>⽂档标题</title>
</head>
<body>
⽂档内容......
</body>
</html>
4、⽀持：
最新版Safari,Chrome,Firefox,Opera⽀持，IE9⽀持
5、⾃定义标签：
⾸先在html标签通过xmlns：命名空间名来指定；其次可以使⽤这个标签写内容（通常命名采⽤-连接⽅式）；最后，在样式⾥使⽤
命名空间名\：标签名{}定义
<!DOCTYPE html>
<html xmlns:ownhtml>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
//2、这⾥如果有多个标签，都是从ownhtml创建的，那么对其设置样式主要是冒号后⾯的部分，也就是命名空间部分
ownhtml\:customdiv{
font-size: .36rem;
font-weight: bold;
color:red;
}
p{
color: green;
}
</style>
</head>
<body>
<ownhtml:customdiv class="custom">this is a custom element!</ownhtml:customdiv>
<!--1、冒号后的命名空间可以有多个值，这样就有多个不同的标签可以拿来使⽤-->
svg和h5的关系
<p>this is normal text</p>
</body>
</html>
6、canvas
这个 HTML 元素是为了客户端⽮量图形⽽设计的。它⾃⼰没有⾏为，但却把⼀个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到⼀块画布上。默认情况下 <canvas> 元素没有边框和内容。
<canvas id="myCanvas" width="200" height="100" ></canvas>
<script>
//⾸先到canvas元素
var ElementById("myCanvas");
//创建 context 对象：是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
var Context("2d");
//fillStyle属性可以是CSS颜⾊，渐变，或图案。fillStyle 默认设置是#000000（⿊⾊）
ctx.fillStyle="#FF0000";
//fillRect(x,y,width,height) ⽅法定义了矩形当前的填充⽅式。
ctx.fillRect(0,0,150,75);
</script>
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°，顺时针
<canvas id="myCanvas" width="500" height="500" >
您的浏览器不⽀持 HTML5 canvas 标签。</canvas>
<script>
var ElementById("myCanvas");
var Context("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
ctx.stroke();
</script>
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属性⽤于指定⼀张图⽚，在当前视频数据⽆效时显⽰（预览图）。
<audio controls="controls">
<source src="" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
9、关于header,footer等的统⼀说明：
header:⽂档头部区域；nav定义导航链接部分；section定义⽂档中的章节；article定义独⽴的内容；aside定义页⾯主区域之外内容；figure规定独⽴的流内容（图像，图表等）；footer定义⽂档底部。
考虑到其兼容问题，可在样式中对其所有标签设置⼀个display:block属性。
其中，article是⼀个特殊的section标签，它⽐section具有更明确的语义, 它代表⼀个独⽴的、完整的相关内容块。
<article>
  <header>
<h1>article元素使⽤⽅法</h1>
    <p>发表⽇期：<time pubdate="pubdate">2010/10/10</time></p>
  </header>
  <p>此标签⾥显⽰的是article整个⽂章的主要内容，，下⾯的section元素⾥是对该⽂章的评论</p>
  <section>
<h2>评论</h2>
    <article>
<header>
        <h3>发表者：maizi</h3>
        <p><time>1⼩时前</time></p>
      </header>
      <p>这篇⽂章很不错啊，顶⼀下！</p>
</article>
    <article>
<header>
        <h3>发表者：⼩妮</h3>
<p><time>1⼩时前</time></p>
      </header>
    <p>这篇⽂章很不错啊，对article解释的很详细</p>
    </article>
</section>
</article>
10、MathML<math>
数学标记语⾔，基于XML的标准，书写数学符号和公式的语⾔。
11、input新增⼏个类型
type=color选取颜⾊；date从⽇期选择器选择⽇期；email提交表单⾃动验证域名合法性；number选择数字(上下箭头)<input
type="number" name="quantity" min="1" max="5">1 到 5 之间；tel电话号码；url⾃动校验url的值
12、web存储
localStorage：长久保存⽹站数据，⽆过期时间，直到⼿动去除；
sessionStorage：临时保存同⼀窗⼝数据，关闭窗⼝后删除；
mainfest：离线缓存，断开⽹络时继续访问页⾯。
常⽤API：
保存数据localStorage.setItem(key,value);
读取Item(key);
删除单个veItem(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
<html lang="en" manifest="index.manifest"></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引⼊并起名，然后使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。