文章目录
- 前言
- HTML5新增语义标签
- 新增语义化标签
- 新增视频标签
- 常见属性
- 表单知识补充
- 组成
- 表单域
- 属性
- HTML5新增表单属性
- CSS3新增选择器
- CSS3新增属性选择器
- CSS3新增伪元素选择器
- CSS3新特性
- CSS3滤镜filter
- calc函数
- CSS3过渡
- LOGO SEO优化
- Web服务器
- 什么是Web服务器
- 远程服务器
- 申请免费空间及网站上传
- 将自己的网站上传到远程服务器
- 二维坐标系
- 移动：translate
- 语法
- 重点
前言
寒假第一周时间对于前端的学习进程。
HTML5新增语义标签
新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持。
新增语义化标签
-
：头部标签 - ：内容标签
-
：定义文档某个区域 - ：侧边栏标签
新增视频标签
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
使用场景：
- 配合字体图标（例如搜索框里的按钮等）
- 仿土豆效果（在div盒子里制作半透明效果）
- 通过伪元素清除浮动本质
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优化
- logo里面先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
- h1里面放一个链接，可以返回首页，把logo的背景图给链接。
- 为了搜索引擎收录logo，链接里面要放文字（网站名称），但文字不要显示出来。
- 方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflowhidden，淘宝的做法。
- 方法2：直接给font-size:0; 就看不到文字了，这是京东的做法。
- 最后给链接一个title属性，这样鼠标放到logo上就可以看到文字了。
Web服务器
什么是Web服务器
服务器（我们也会称之为主机）是提供计算服务的设备，它是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。
Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
以下服务器我们主要指的是Web服务器
根据服务器在网络中所在位置的不同，又可分为本地服务器和远程服务器。
远程服务器
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把所写网站上传到远程服务器。
远程服务器通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
比如域名：www.mi.com 可以访问小米网站
申请免费空间及网站上传
将自己的网站上传到远程服务器
注意：一般稳定的服务器都是需要收费的。比如：阿里云
这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/
- 去免费网站注册账号。
- 记录下主机名、用户名、密码、域名。
- 利用cutftp软件上传网站到远程服务器。
- 在浏览器输入域名，即可访问网站
第一次申请域名要在网站中进入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%);
}
