新增视频标签

video —— 视频

常见属性

• controls属性：控制控件的显示,取值只能为controls
• autoplay：视频自动播放（谷歌浏览器需要添加muted(静音播放)来解决自动播放问题）
• width：取值为pixels（像素），设置播放器宽度
• height：取值为pixels（像素），设置播放器高度
• loop：取值loop，是否循环播放
• preload：取值auto——预先加载视频，取值none——不应加载视频
• src：url() 括号内加视频地址
• poster：取值imgurl加载等待的环面图片
• muted：取值muted，静音播放

表单知识补充

组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。

会把它范围内的表单元素信息提交给服务器。

属性

• checked属性：单选按钮和多选按钮可以设置，当页面打开时默认选中这个按钮。
• maxlength：规定输入字段中的字符的最大长度。
• value与placeholder的区别：value设置的值选中后不会消失，placeholder选中的值选中后不会消失。
  type属性的button属性值、reset属性值与submit属性值的区别：
  • button：定义可点击按钮（通常用于通过JavaScript启动脚本）。
  • reset：清除表单元素中所有的数据。
  • submit：将表单数据发送到服务器。

HTML5新增表单属性

• required：取值为required，表单拥有该属性表示其内容不能为空，必填
• placeholder：取值为提示文本，表单的提示信息，存在默认值将不显示
• autofocus：取值为autofocus，自动聚焦属性，页面加载完成自动聚焦到指定表单
• autocomplete：当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，autocomplete=“on”，关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交
• multiple：取值为multiple，可以多选文件提交

CSS3新增选择器

CSS3现状：

• 新增的CSS3特性有兼容性问题，ie9+才支持
• 移动端支持优于PC端

CSS3新增属性选择器

• E[att]：选择具有att属性的E元素
• E[att=“val”]：选择具有att属性且属性值等于val的E元素
• E[att^=“val”]：匹配具有att属性且值以val开头的E元素
• E[att$=“val”]：匹配具有att属性且值以val结尾的E元素
• E[att*=“val”]：匹配具有att属性且值中含有val的E元素

CSS3新增伪元素选择器

• ::before 在元素内部的前面插入内容
• ::after 在元素内部的后面插入内容

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器权重为1

使用场景：

1. 配合字体图标（例如搜索框里的按钮等）
2. 仿土豆效果（在div盒子里制作半透明效果）
3. 通过伪元素清除浮动本质

CSS3新特性

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

格式：

filter:函数(数值);
例如：filter:blur(5px); blur模糊处理，数值越大越模糊

calc函数

此CSS函数让你在声明CSS属性值时执行一些计算

举例：

div{
    with:calc(100%-80px);
    /*根据父盒子宽度设置子盒子宽度*/
}

可以通过+、-、*、/进行计算

CSS3过渡

过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：从一个状态渐渐过渡到另一个状态。

可以让页面更好看，更动感十足，虽然低版本浏览器不支持（IE9以下版本）但是不会影响页面布局。

现在常和:hover一起搭配使用

格式：

transition:要过渡的属性 花费时间 运动曲线 何时开始;

• 属性：想要变化的CSS属性，宽度、高度、背景颜色、内外编剧都可以。如果想要所有的属性都变化过渡，填all
• 花费时间：单位为秒（必须写单位）
• 运动曲线：默认时ease，可省略
  • linear 匀速
  • ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
• 何时开始：单位时秒（必须写单位），可以设置延迟触发时间，默认是0秒
  注意：如果想要写多个属性，用逗号分隔，或属性写all

举例代码：

        div{
            width: 200px;
            height: 100px;
            background-color: blue;
            transition: all 2s ease 0s;
        }
        div:hover{
            width: 300px;
            height: 250px;
        }

LOGO SEO优化

1. logo里面先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2. h1里面放一个链接，可以返回首页，把logo的背景图给链接。
3. 为了搜索引擎收录logo，链接里面要放文字（网站名称），但文字不要显示出来。
   • 方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflowhidden，淘宝的做法。
   • 方法2：直接给font-size:0; 就看不到文字了，这是京东的做法。
4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到文字了。

Web服务器

什么是Web服务器

服务器（我们也会称之为主机）是提供计算服务的设备，它是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器

根据服务器在网络中所在位置的不同，又可分为本地服务器和远程服务器。

远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把所写网站上传到远程服务器。

远程服务器通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名：www.mi.com 可以访问小米网站

申请免费空间及网站上传

将自己的网站上传到远程服务器

注意：一般稳定的服务器都是需要收费的。比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/

1. 去免费网站注册账号。
2. 记录下主机名、用户名、密码、域名。
3. 利用cutftp软件上传网站到远程服务器。
4. 在浏览器输入域名，即可访问网站

第一次申请域名要在网站中进入FTP管理进行激活

2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

移动：translate

2D移动是2D转换里面的一种功能可以改变元素在页面中的位置，类似定位。

语法

transform:translate(x,y);
或分开写：
transform:translateX(n);
transform:translateY(n);

代码如下：

div{
    width:100px;
    height:100px;
    color:red;
    /*沿着x轴移动100px，沿着y轴移动200px*/
    transform:translate(100px,200px);
}

重点

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点：不影响其他元素的位置
• translate中的百分比单位是相对于自身元素（宽、高）的translate:(50%,50%);
• 对行内标签（行盒）没有效果

通过translate可以实现盒内盒子居中，代码如下：

        /* 实现盒内盒子居中 */
        div{
            width: 300px;
            height: 400px;
            background-color: blue;
            position: relative;
        }
        div div{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: brown;
            transform: translate(-50%,-50%);
        }