CSS-8（CSS初始化+HTML5新特性+CSS新增属性+品优购）

2.HTML5的新特性

<header>头部标签       <nav> 导航标签      <article>内容标签       <section> 定义文档某个区域<aside> 侧边栏标签     <footer>尾部标签

HTML5-新增视频标签

<video src="文件地址"   controls="controls"></video>

常见属性

autoplay="autoplay"      视频自动播放，如果是谷歌浏览器需要添加muted="muted"

controls="controls"    显示播放控件

width height   设置宽和高

loop="loop"  循环播放视频

poster="图片"   等待加载的图片

HTML5-新增音频标签

<audio src="文件地址"  controls="controls"></audio>

常见属性

autoplay="autoplay"  自动播放，谷歌不能自动播放

controls="controls"     显示控件

loop="loop"      循环播放

HTML5新增input表单

重点记忆tel 、number、 search

HTML5新增表单属性

required="required"    内容不能为空

placeholder="..."     设置默认信息

autofocus="autofocus"  自动聚焦属性（如自动聚焦搜索框）

autocomplete="off/on"   在输入相同部分时会显示搜索信息，默认时开着的，需要设置name值，一般会关闭

multiple="multiple"   可以多选文件提交

在样式中添加

inout::placeholder{...} 进行修改

3.CSS3新增特性

属性选择器

• 利用属性选择器就可以不借助类选择器或id选择器

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元素

结构伪类选择器

E:first-child   匹配父元素的第一个子元素

E:last-child    匹配父元素的最后一个元素

E:nth-child(n)    匹配父元素的第n个元素

nth-child(n)   选择某个父元素的一个或多个特定的子元素

n可以是数字、关键字和公式

• n如果是数字，就是选择第n个子元素，里面的数字从1开始
• n可以是关键字：even是偶数，odd是奇数
• n可以是公式：如果从0开始算起，但是第0个元素或者超出了元素的个数会被忽略（相当于全部选中）

nth-child 对父元素里面所有孩子进行排序选择，先找到第n个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定的子元素进行排序选择。先匹配E，再去找E的第n个元素

伪元素选择器

::before   在父元素内容的前面插入内容

::after     在父元素内容的后面插入内容

before和after必须有content属性

伪元素选择器和标签选择器一样，权重是1        则div::before 权重是2

.tudou:hover::before{}   中间不要有空格

伪元素清除浮动

盒子模型

通过border-sizing来指定盒模型，可指定为content-box、 border-box

添加border-box后，在添加padding或margin，盒子不会被撑大，只保持width的大小

模糊滤镜filter

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

filter: 函数；                 filter:blur(5px)             blur为模糊处理，数值越大越模糊

calc函数

width:calc(100%-80px)     可理解为子盒子与父盒子的高度相同，但是右侧离父盒子有80px宽

括号里面可以使用+、-、*、/来计算

过渡

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

属性：可以是宽度、高度、背景颜色、内外边距（如果想给所有的属性都变化过渡，那么写一个all就行）

花费时间：单位是秒（必须写单位）

运动曲线：默认是ease（可以省略）如0.5s

何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

谁做过渡给谁加

添加过渡，一般是鼠标经过，所以要设置好hover中的过渡后的值

4.品优购项目

favicon图标

<link rel="shortcut icon"  href="favicon.ico"  />

SEO优化

对网站进行深度的优化，在搜索引擎上提升网站的排名

title网站的名字       网站名（产品名）+网站的介绍（不超过30个汉字）

description对于网站的简短描述       <meta name="description"  content=......>

keywords页面关键词，搜索引擎的关注点之一    <meta name="keywords"  content=......>

都写在<title></title>中间

常用模块类名命名

在之前设置过类名为style_red，将其中的内容设置为红色，在这一步链接的设置中可以直接写入该类名，从而使链接的字体颜色也为红色

原本是红底白字，当鼠标经过时让它变成白底黑字，注意把hover给li让其变成白底，把hover给li同时在后面加上a

在给父元素添加边框，同时给子元素添加边框，会形成边框重复，如果简单好处理可以采用nth-child来做，如果较为复杂，可以给父元素添加overflow:hidden,来隐藏父元素的边框

给图片添加竖线，可以用定位和after伪元素，为了去掉最后一个盒子的竖线，采用nth-child(-n+3),因为n+3时从第三个开始算起，而-n+3则是从第三个倒着开始算

在一行上面放多个关键词，先设置一个大盒子，在用li去表示每个关键词，同时关键词加上链接，将li设置成右浮动，每个链接设置成左浮动就可以形成布局

链接a是行内元素，当它含有有宽度和高度的元素时，需要给a转换为块级元素，否则样式显示不出来

设置经过图片会出现红色边框时，可能会出现在经过盒子时，虽然有边框但是盒子会向向动一下，这是因为盒子图片本身的大小是不变的，经常使用div来做的（这里是插入的图片），只需要把li中的边框设置为透明色（transparent）就行了；还会发现边框显示不全，设置overflow:hidden就可以了

给盒子设置浮动，结果发现底部元素会升上来，这就需要清除浮动，给li的父元素添加class="clearfix"就可以了

在把logo添加上时，logo与浏览器上面是有一定距离的，但是不能直接给div中的logo设置一个margin-top，这样会出现塌陷，将父盒子也带下来，所以设置成padding-top

下面这种格式，先添加一个父盒子，再在里面添加小盒子；因为它的父盒子是没有设置高度的，所以父盒子的高度根据其中的内容多少来显示；可以看到手机号、验证码、密码都是右侧对齐，设置label,让其text-align:right;就可以实现右侧对齐

5.服务器