HTML5 CSS3 知识总结

HTML 与XHTML的区别

1、DOCTYPE文档与编码

2、大小写 XHTML不允许大写标签

3、单标签要加结束 HTML 但是在XHTML中必须有

4、属性值必须加引号

5、属性布尔值，在HTML中可以true可以直接写名字，但是在XHTML中不可以

​ 如checked = “checked” 在HTML可以直接写checked

6、图片中在XHTML中必须加 alt=“ ”

strong和 b 、em 和 i

表现形态， 文本加粗 和 文本倾斜

strong和em 具有语义化

b 和 i 不具备语义

但是 b和i 属于内联元素 可以简化选择器的操作，在多样式中可以使用，便于选择器

引用标签

blockquote : 引用大段的段落解释

q: 引用小段的短语解释

abbr: 缩写或首字母的缩略词

address： 引用文档地址信息

cite：引用著作的标题

iframe

内联框架

可以引入其他的HTML到当前的HTML 中显示

主要利用HTML进行样式的调节

frameborder =" " 边框

scrolling 滚动条

srcdoc = " " 可以加标签和语句 规定在页面上显示的内容

应用： 数据传输、 共享代码 、 局部刷新 、 第三方介入（广告）

br 与 wbr

br 换行

wbr 软换行，当单词较长，想要按照按照某种方式换行在哪个地方换行，可以使用软换行

pre 与code

针对网页中的代码

pre 定义可格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符

只应该在表示计算机程序源代码或者其他机器可以阅读的文本上使用code标签，按时

code标签只是把文本换成等宽字体，但是他暗示着这段文本是源程序代码

map 与area

定义一个客户端图像映射，图像映射指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部，area元素可定义图像映射的区域

area元素的href 属性定义区域的URL，

shape属性定义区域的形状，

coords属性定义热区的坐标

embed 与 object

移动端不支持

都表示可以嵌套一些多媒体，如flash动画和插件

主要是解决兼容问题

object要配合 param一起使用

audio与video

audio音频

controls 显示控件

loop循环播放

autoplay 自动播放

video视频 一样

source 设置兼容

<video>
<source src = "" >
<source src = "" >
</video>

文字注解和文字方向

文字注解 ruby 、rt 组合

<ruby>
    寒<rt> hán</rt>
</ruby>

文字方向 bdo 可以覆盖默认的文本方向

<bdo dir="rtl"> 加油</bdo>  //反序

link扩展

引入样式、引入小图标、

DNS解析

meta扩展

meta辅助信息，不会显示在页面上

关键字、便于搜索引擎、描叙、

HTML5 语义化标签

header 页眉 footer 页脚 main 主体 hgroup 标题组合 nav 导航

article 独立的内容 aside :辅助信息的内容 section ：区域

figure： 描述图像或视频

figcaption: 描述图像或视频的标题部分

<figure>
    <img src="" alt="">
    <figcaption>
       
    </figcaption>
</figure>

datalist 选项列表 只能的下拉选项列表

通过id进行联系

<input type="text" list="name">
<datalist id="name">
    <option > abb</option>
    <option > abb</option>
    <option > ab</option>
    <option > b</option>
</datalist>

details / summary : 文档细节/文档标题

progress / meter 进度条 / 度量

meter可已设置最大值和最小值

time 定义日期或时间

<P> 见天是<time title="2-14"> 情人节 </time></P>

mark 带有标记的文本

表格扩展

添加单线： border-collapse: collapse

colgroup /col 列分组

斜线分类： border/rotate

隐藏单元格： empty-cells： hide

表单扩展

美化表单：

1、label ：checked

2、position + opacity （ 定位加透明度）

新的input控件

email: 电子邮件地址输入框

url : 网址输入框

number： 数值输入框

range : 滑动条

date/month/week : 日期控件

search： 搜索框

color： 颜色控件

tel :电话号码输入框

time： 时间控件

新的属性

autocomplete ： 自动完成 下拉有提示框

autofocus : 获取焦点

required : 不能为空

pattern： 正则验证

method： 数据传输方式 get / post

enctype： 数据传输类型

name / value 键值对

表单扩展

fieldset: 表单内元素分组

legend: 为fieldset 元素定义标题

optgroup : 定义选项组

<fieldset>
    <legend>登录</legend>
    <p>
        用户名： <input >
    </p>
    <p>
        用户名： <input >
    </p>
</fieldset>


<select>
    <optgroup label="水果"></optgroup>
    <option> 12</option>
    <option> 12</option>
    <option> 12</option>
    <option> 12</option>
    <optgroup label="水果2"></optgroup>
    <option> 12</option>
    <option> 12</option>
    <option> 12</option>
    <option> 12</option>
</select>

BFC规范

格式化上下文： 他是页面中的一块渲染区域，并且有一套渲染规则，他决定了子元素将如何定位，以及和其他元素的关系和相互作用、

BFC 块级格式化上下文：它属于上述中的一种规范，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的一些元素不会再布局上影响外面的元素，并且BFC具有普通容器所没有的一些特性

触发BFC：

浮动定位 除none

绝对定位元素 position（absolute \ fixed)

display 为 inline-block 、 table-cells 、flex

overflow 除了 visible 以外的值（hidden、auto、scroll)

触发BFC规范的元素可以形成一个独立的容器，不受外界影响，从而解决一些布局问题

应用场景

margin 传递问题 浮动使外部塌陷

margin叠加问题 内嵌 内部块会影响外部块

解决浮动问题、解决覆盖问题

浏览器前缀

CSS3 去兼容不同的浏览器，针对旧的浏览器做兼容，新的浏览器不需要添加

IE Trident (cui den t) -ms-

firefox Gecko (j k) - moz-

Opera （欧朋） Presto (p s tou ) - o-

Chrome webkit -webkit-

Safari （撒f rui) webkit -webkit-

OPera Chrome Blink

transtion 过渡

transition- property : CSS 属性的名称

transition- duration: 规定完成过渡需要的时间

transition-delay: 定义过渡效果何时开始

transition-timing-function : 规定速度效果的速度曲线

transfrom : 变形

1、translate() 位移

translateX()

translateY()

translateZ()

2、scale（ ） ：缩放（是个比例值，正常大小是1）

scaleX()

scaleY()

scaleZ()

3、rotate: 旋转 (旋转的值，单位为角度deg)

rotateX(); 3d

rotateY(); 3d

rotateZ(); 和 rotate是等价的，正为顺时针，负为逆时针

4、skew（） : 斜切 （单位为角度deg) 正向左倾斜，负为向右倾斜

transfrom 注意事项

1、不会影响其他元素

2、只能添加给块元素，但是不能添加给内联元素

3、复合写法，可以同时添加多个变形操作

4、执行是有顺 序的，先执行后面的操作，再执行前面的操作

​ 位移会受到 rotate、scale、skew的影响

5、设置多个值时候的顺序，设置transform-origin 的基点位置

animation 动画

animation-name： 设置动画的名字

animation-duration: 动画持续时间

animation-delay： 动画延迟时间

animation-iteration-count：动画的重复次数 默认值为1 infinite 无限次数

animation-timing- function： 动画的运动形式

@keyframes 设置动画的内容

animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效

animation-direction  :  属性定义是否应该轮流反向播放动画。
 	alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
 	reverse : 永远都是反向 , 从100%~0%
 	normal (默认值) : 永远都是正向 , 从0%~100%

animation

远动结束后，默认为停留在原位置

<style>
    .box1{
        width: 300px;
        height: 300px;
        border: 1px black solid;
        margin: 30px auto;
    }
    /*.box2{*/
        /*width: 100px;*/
        /*height: 100px;*/
        /*background: red;*/
        /*animation-name: mybox ;*/
        /*animation-duration: 4s;*/
        /*animation-iteration-count: 3;*/
        /*animation-timing-function: linear;*/
    /*}*/
    .box2{
        width: 100px;
        height: 100px;
        background: red;
        animation: mybox 4s 2s 3 linear;

    }
    @keyframes mybox{


        0%{transform: translate(0,0);}
        25%{transform: translate(200px,0)}
        50%{transform: translate(200px,200px)}
        75%{transform: translate(0,200px)}
        100%{transform: translate(0,0)}
    }
</style>

animate.css 动画库

​ 一款强大的预设css3动画库。
​ 官网地址：https://daneden.github.io/animate.css/
​

基本使用：
    animated : 基类(基础的样式，每个动画效果都需要加)
    infinite : 动画的无限次数

3D

transform:
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前，负值向后
scaleZ() : 立体元素的厚度

3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin : 景深-基点位置，观察元素的角度。
transform-origin: center center -50px;   （Z轴只能写数值，不能写单词）
transform-style : 3D空间
    flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)
backface-visibility : 背面隐藏
    hidden、visible (默认值)

外层景深，内层加厚度

CSS3扩展背景样式

​ background-size : 背景图的尺寸大小
​ cover : 覆盖
​ contain : 包含
​ background-origin : 背景图的填充位置
​ padding-box (默认)
​ border-box
​ content-box
​ background-clip : 背景图的裁切方式
​ padding-box
​ border-box (默认)
​ content-box

注：复合样式的时候，第一个是位置，第二个是裁切

CSS3渐变

1. 线性渐变 -> linear-gradient是值，需要添加到background-image属性上

注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。

2. 径向渐变 -> radial-gradient

字体图标

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

好处：
1.可以非常方便的改变大小和颜色
font-size color
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体

使用：
@font-face语法

    像.woff等文件都是做兼容平台处理的, mac、linux等。