"> 3s之后刷新并跳转到百度

//title：定义文档的标题

//link:定义文档与外部资源的关系

//显示在浏览器选项卡标题前的小图标

大部分浏览器都支持icon 只有个别浏览器不支持，所以需要加上shortcut

type是浏览器的老式写法，由于最新的定义rel类型，type就可有可无了

title 定义鼠标悬浮超链接时的提示性文字

src:显示图像的URL 图片地址

alt:图像的替代文本

当图片加载失败的时候，显示的内容

1.提示用户加载的图片是什么内容

2.搜索引擎来爬去你的网站的时候，看懂文字，看不懂图片，通过alt识别图片是关于什么内容

width:定义图像的宽度

html标签中的宽高属性不需要添加单位

usemap:将图像定义为客户端图像映射

1.图片必须添加的属性：alt和src

2.只设置宽度或者高度，图片等比例缩放

同时设置宽度和高度，图片可能会被拉伸

// 避免浏览器表现不一致，name和id属性保持一致

通过脚本绘制图形：canvas（后期HTML5新特性讲解）

默认会出现一个框，如果需要取消 使用CSS样式进行取消

figure:认为标签的内容是一个整体

figcaption:专门针对图片等内容的标题

figure：规定独立的流内容（图像，图表，照片，代码）

即使有文字 但是figure也会缩进一块显示

note 当页面加载完成的时候，不加载音频

meta 当页面加载完成的时候，只加载音频的元数据（音频的总时间，不加载音频的核心内容）

auto 当页面加载完成的时候，加载音频

IE8以下包括IE8 不识别audio 则显示标签之间的内容

浏览器能识别音频，但是不同的浏览器对于音频的识别不太一致，浏览器看见source标签的时候，如果识别第一个source的资源，则使用该标签即可，如果不识别第一个资源，则看第二个资源是否能够好使，好使则使用，如果还是不识别，则提示对应信息

注意：source不是播放列表，不是一曲一曲的播放，而是互斥关系

preload 确认视频加载的方式

auto:页面加载完成，直接加载视频

meta:页面加载完成，只加载视频的元信息

none:页面加载完成，不加载视频（跟autoplay是互斥）

浏览器从上到下查看，找到支持的视频就停止

不支持视频标签，赶紧升级吧

优点：包含的图像信息比较丰富，几乎不压缩缺点：占用磁盘空间过大功能：在单机上比较流行

优点：压缩比高，磁盘空间占用较少（文件小，下载速度快）缺点：不能存储超过256色的图像

优点：压缩技术先进，用有损压缩方式去除冗余的图像彩色数据，获得极高的压缩率的同时展现十分丰富生动的图像（总结：用最少的磁盘空间得到较好的图像质量）调节图像质量的功能，允许你使用不同的压缩比例

1.不失真的情况下，存贮形式丰富，兼有GIF和JPG的色彩模式

2.无损压缩到极限以减少文件的大小，减少网络传输，图像品质得到保证

3.显示图片速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像

4.PNG同样支持透明图象的制作

5.WebP:支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8（一统江湖）

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

td: 行中的每个单元格标签

th: 行中的每个单元格标签（居中加粗）

caption：表格的标题标签

1. table和tr之间，tr和td/th之间只能是表格的标签，不能是其他标签

2. td/th内可以放置其他标签

3. 不能在tr和th之间写其他标签

定义表格中的表头内容thead

定义表格中的主体内容 tbody

定义表格中的脚注内容 tfoot

1. td/th的内容随便写

合并一行中的6个单元格，第一个单元格使用colspan=”6”,然后去除多余的单元格。

auto 以内容大小为参照（默认样式）

定义一个HTML表单，用于用户输入

定义单行输入控件（元素）input

type设置当前单行文本域的类型

text 普通文本（用户名，详细地址）

让单选和多选默认选中，则需要添加checked属性

hidden 隐藏域（不能被用户看到修改，但是后端必须使用的内容）

file 文件域(点击之后选择文件)

image:上传文件的按钮

art=”设置图片文本”

name 表单元素的名字（主要是跟后台相关，但是我们在开发过程中需要加上）

让下拉框中某一个默认选中，用selected属性

表单form内的标签属性

maxlength 设置内容输入的最大长度

readonly 只读，可以向服务器提交数据

disabled 只读，不可以向服务器提交数据 废弃

placeholder=””; 设置表单默认提示的内容，只要有输入内容，该提示文字立即消失

注意：如果需要开启自动提示，必须写name=””

pattern 用户提交的时候，通过正则验证用户提交内容

这个就是允许输入小写字母a~z  字符长度在1-6个之间，不能少于一个，不能多于6个

正常单击单选按钮才可以，为了增加用户体验，点击文字便可进行单选操作

action：将用户名和密码提交给服务器，服务器必须告诉我一个地址

绝大部分都使用post方式

id:所有的标签都可以设置id属性，没有实际效果

1. 属性值在页面中唯一，主要以后为JS获取DOM对象提供方便
2. 由字母数字下划线_和中划线-组成，不能以数字开头

class:所有的标签都可以设置class属性，没有实际效果

1. 由字母数字下划线_和中划线-组成，不能以数字开头
2. 属性值在页面中定义多个，给多个标签设置相同的样式和设置JS效果

title:鼠标移入标签，在标签中显示title的属性值

contenteditable:直接在行内设置文本修改，但是这个标签不不常使用，没有人愿意让用户在自己网站进行修改

hidden：设置元素是否隐藏

tabindex：规定元素的tab键控制次序，表单登录常应用

div：没有实际的含义，是一个占据页面100%宽度的容器

span:没有实际的含义，是一个内容多大，空间就多大的容器

但是不同浏览器兼容性不同，谷歌兼容最好，火狐，最新版IE都不好

1. 内嵌式：将css代码嵌入到HTML标签中

1. 内联式：通过style标签将css代码引入

1. 外联式：通过link表面将css引入，rel让浏览器识别该文件是一个css文件，href是css地址

2.CSS颜色的三种表示方法

提供多个选择器进行匹配，样式同时对多个选择器生效

4.1后代选择器 空格

注意：顺序应该如上。CSS属性遵循就近原则，同名属性的值覆盖，不同名属性进行继承。

扩展：:hover和:active 可以针对所有的标签做鼠标移入和鼠标按下的样式设置

::before设置在对象前（根据对象树的逻辑结构）发生的内容

::after设置在对象后（依据对象树的逻辑结构）发生的内容

伪元素默认内联元素，当为了清除浮动而使用时，需要转为块状元素

::first-letter:设置对象内的第一个字符的样，不区分中英文

1. 百分比(以父级容器大小设置，宽度继承，高度不继承)

max-width:最大宽度，宽度最大不能超过这个值

max-height:最大高度，高度最大不能超过这个值

min-width:最小宽度，宽度最低不能低于这个值

min-height:最小高度，高度最低不能低于这个值

display:none不展示，隐藏（隐藏之后，不占据原位置）

8.2三种隐藏方式及显示方式

auto自动，如果内容超出，显示滚动条；如果内容不超出，不显示滚动条

overflow-x在横向上对于超出内容的处理

overflow-y在纵向上对于超出内容的处理

百分比：参照父级容器的字体大小

1. 复合属性必须写字体大小和字体名称（宋体，黑体..）

1. 字体最小为12px，默认字体大小为16px
2. 字体大小为0，不显示字体，不占据位置

百分比：参照当前文字的大小乘以倍数

倍数：参照当前文字的大小乘以倍数

nowrap 强制文字在同一行显示

强制打断长单词（针对英文单词）

BFC 块状格式化上下文

避免子级设置margin-top和父级一起下落

解决方法：让父级变成一个BFC就可以

margin: 如果上下两个盒子都设置了margin，不会相加，以大margin为准

子盒子继承父盒子的宽度，不继承高度，继承的宽度padding不会挤开

如果是三个值，或者两个值   也遵循上右下左的原则

注意：有时候给父盒子浮动了，也给子盒子a和span一起浮动，目的是清除a链接和span之间空格的距离。除非写到一行上，但是体验不好， 看代码不方面。

以上形式只是适用于测试阶段，项目开发阶段不可用，因为兼容性问题和性能问题

项目开发阶段 类似以下形式

当前div在页面中实际占据的空间

当前div在页面中时间占据的空间

因为padding和border占据了内容区域的一部分空间，导致内容区域变小

定位的盒子是没有高的，需要清除浮动才有高

固定和绝对定位的盒子必须写宽高，定位的盒子宽度不会继承父盒子的宽度,除非子盒子绝对定位，父盒子相对定位，子盒子才会继承父盒子的宽高

参考对象：自身应该在的位置

特点：1.相对定位的参考，自身的原位置

2.不脱离正常的文档流，设置了相对定位，依然占据原来的位置，不会对周围的标签产生影响

1.父级（祖辈）没有定位（相对定位，绝对定位，固定定位），以整个页面左上角为参照

2.父级（祖辈）有定位，以父级左上角为参照点。

特点：脱离正常的文档流，不占据自身的位置，后面的内容就会自动补充

参考对象：当前屏幕的可视区域

特点：脱离文档流，不占据原来的位置

通过z-index设置定位的层级顺序，z-index越大，越靠上

网页中显示内容的层叠顺序

普通标签<浮动<文字内容<绝对定位

a) 浮动的话，会脱离文档流，但是不会遮盖文字，因为文字在网站中属于核心内容，浮动没有能力把文字覆盖，文字会跑到浮动的盒子后面显示

b)如果设置了绝对定位，但是不设置top和left,该盒子默认在原位置飘着

如果设置了top和left，以父辈或者页面为参考

c)   如果给盒子设置了固定定位 绝对定位 浮动，不设置宽度的话，宽度不会继承父级的宽度，而是默认文字的宽度，

但是如果设置相对定位不设置宽度的话，宽度会继承父级的100%.

50px/100px每个角的水平半径/每个角的纵向半径

左上角 右上角 左下角 右下角/左上角 右上角 左下角 右下角

box-shadow:横向偏移 纵向偏移 模糊值 外延值 阴影颜色 inset（默认是外阴影，inset是内阴影）

1. 影子不占据页面空间，不会影响其他元素
2. 必须添加横向偏移，纵向偏移。

注意：文字阴影不像盒子阴影，文字阴影没有外延值

如果想要三角形，只需要给其中一个边的颜色改为transparent即可。

background:颜色 图片地址 是否重复 位置/背景图片大小 随...滚动 背景图片起始位置 剪裁位置

重点：颜色 地址 是否重复 位置/大小

如果一次给同一个写了多个背景，后来者居下，先写的优先级越高

round 背景图片可能被缩放，直到充满整个容器

space 背景图片以相同的间距填充，直到充满整个间距，不会缩放。

fixed:背景图像相当于窗体固定

scroll:背景图像相对于元素（标签）固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身，但会随元素的祖先元素和窗体一起滚动。

local:C3属性，背景图像相对于元素内容滚动，当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总要跟着内容。

cover 将背景图像等比例到完全覆盖容器，背景图像有可能超出容器

contain 将背景图像等比例缩放到宽度或者高度与容器的宽度或者高度相等，背景图像始终都被包含在容器内。

缺点：增大开发的难度，通过定位

子元素不浮动的时候，会将父元素的高度撑起来

如果子元素浮动，父元素不能获取子元素的高度，自身的高度就为0

想让父级元素高度自动撑起来的方法：

1.单独设置一个div，清除浮动

缺点：多设置一个标签，这种方式现在不常使用

1. 如果父级容器是一个BFC容器的话，就能让父级容器获取到元素的高度，从而自己有高度

1. 使用::after进行清除浮动，这种方法比较常见

自定义字体：正常情况下，需要使用用户电脑都有的字体，但是非得用特殊字体，用户电脑又没有，自己通过@font-face这种字体，需要通过font-family引用这种字体。

transition复合属性：过渡属性 过渡总时间 过渡动画类型 过渡的延迟时间

如果过渡多个属性，而且效果都一致的话 可直接写 all 代表所有属性

如果需要给过渡的盒子离开也过渡的话，需要给盒子也加过渡

所有input里取出来的值都是字符型

没有var的就是全局变量，var a=b=c=9; 虽然在函数内，但是b c 没有var 所以是全局变量

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。 只提升变量声明，不赋值。