h5新增和css3新增
编辑器： webstorm，英⽂版 sublime, hbuilder vscode, dw
h5的新标签及特性（移动端⽤的多），，，，如果想在图⽚⾥⾯显⽰ “帅哥" 记得使⽤单双引号，外⾯是单引号，⾥⾯是双引号例如： <img src="" alt="" title='这⾥有⼀个"傻狗"'/>
h5新增语义化标签：（对浏览器和搜索引擎友好，）div没有语义化，都可能出现很多次
section元素表⽰页⾯中的⼀个区块
article 元素；表⽰页⾯中的⼀块内容，字多的区域---论坛，博客，新闻
aside : 侧边栏
header : 页⾯头部
footer 页⾯底部
nav 导航可以直接写li 不⽤ul 也可以
figure 表⽰⼀段独⽴的流内容标题分组作⽤类似 dl dt dd
独⽴流内容的标题figcaption元素为其添加标题 <figcaption><img> </figcaption>
main元素表⽰页⾯中的主要内容（ie不兼容）
hgroup 标题的⼀个分组像-主副标题的那种
mark:（不是块，也不经常⽤）定义⾼量⽂本（⾃带黄⾊）⽤background改颜⾊
time 包时间的：例如： <time> 12-20 </time>
上⾯都是块
>>>#视频和⾳频
video 视屏属性：
src 引⼊视屏路径
controls属性：如果出现该属性，则向⽤户显⽰控件，⽐如播放按钮，控件可能不⼀样
autoplay属性；视屏在就绪后马上播放，⾕歌屏蔽了该功能
loop: 重复播放属性
muted 静⾳属性
poster: 视屏图⽚规定视屏正在下载时显⽰的图像，直到⽤户点击播放按钮
<video width="800" height=""> 可以设置宽⾼
<source src="myvideo.mp4" type="video/mp4"></source> 视屏的各种格式，向下查，有哪个就播放哪个
<source src="v" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
</video>
简单的写法就是
<video src="">
</video>
视屏常⽤的格式；mp4 ogg webm
⾳频：
audio : ⽤法同上
audio: ⾳屏常⽤的格式；mp3 ogg
>>H5智能表单：
input: type="email" 限制⽤户必须输⼊email类型 (验证不准，有局限性)
type="url" 限制⽤户必须输⼊url ⽹址的意思
type="range" 产⽣⼀个滑动条表单类似调节⾳量的滚动条
type="number" 数字
type="search" 产⽣⼀个搜索意义的表单
type="color" ⽣成⼀个颜⾊选择的表单颜⾊版
以下有兼容问题；
input: type="time" 限制⽤户必须输⼊时间类型⼩时和分钟
type="month" 限制⽤户必须输⼊⽉类型
type="week" 限制⽤户必须输⼊周类型
type="datetime-local" 选取本地时间
type="date" ⽇期类型
output ⽤于接收输出数据结果
<output></output>
表单新属性：
1）Datalist: 新增属性list 选项列表关联输⼊框
<input type="url" list="url-list" />
<datalist id="url-list">
<option value="www.baidu" label="百度"></option>
<option value="www.jd" label="京东"></option>
<option value="www.taobao" label="淘宝"></option>
</datalist>
list 属性要关联datalist 的id 属性
下拉提⽰内容写value 属性中
label 写提⽰内容
2）属性：
1）placeholder属性：
⽂本框处于未输⼊状态时⽂本框中显⽰提⽰
2）autofocus属性
给⽂本框、选择框或者按钮控件加上该属性，当打开页⾯时该控件⾃动获得焦点
⼀个页⾯只能有⼀个autofocus,
3）required 属性：
验证输⼊不能为空
4）list 属性
结合datalist元素使⽤----见1
5）autocomplete 就是⾃动补全，之前输⼊的东西，后来再输⼊时，有提⽰之前的⽹页，
输⼊富⾜和所⽤的⾃动完成功能，只有三种；on/off/""
on 可是显⽰指定候补输⼊的数据列表
使⽤datalist 元素与list 属性提供候补输⼊的数据列表，⾃动完成时，
可以将该datalist元素中的数据作为候补输⼊的数据在⽂本框中显⽰
控件要有name 属性，不然不⽣效
3. pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式
例如： <input pattern="[0-9][A-Z]{3}"title="输⼊内容：⼀个数与三个⼤写字母"
placeholder=’输⼊内容：⼀个数与三个⼤写字母‘>
4.对于number和range 新增属性 min，max step:
为包含数字或⽇期的input 类型规定限定（约束）
max 最⼤值
min 最⼩值
step: 数字间隔
5.multiple 允许输⼊多个值
常⽤的是⽂件上传，和select选择可⽤，，，上传多个，选择多个
6. novalidate 取消验证；
1.渐进增强优雅降级
2.css3选择器
a）层级选择器
⼦代选择器：>
相邻兄弟选择器：e + f 加号前后元素必须挨着，，，后⾯的元素⽣效, e和f是兄弟（同级）
选择后⾯所有的同⼀个⽗元素中同类兄弟元素 e~f e后⾯的所有f元素 e和f是同级
b)属性选择器：
1. E[attr]
具有attr 属性的E元素
p[class] 拥有class 的p
2. E[attr="value"]
[class="box"] class 属性只有box 的属性，某⼀个类名为box 不⾏，意思就只有⼀个box 类名，不是包含box类名3 E[attr~="value"]
[class~="main"] class属性包含main ⽽且是⼀个完整的单词
4 E[attr^="value"]
[class^="c"]class 属性以c开头，完整的所有的类名的开头，中间类名开头不算
5 E[attr$="value"]
[class$="c"]class 属性以c结尾，完整的所有的类名的结尾，中间类名结尾不算
6. E[attr*="value"]
css 属性选择器[class*="o"]class 属性包含o字母就⾏，不管类名有多少个
7. E[attr|="value"]
指定了属性名，并且属性值是value 或者以“value-”开头的值（⽐如说zh-cn）
c)伪类选择器：
1.结构性伪类选择器：带type 就是同类型中数，，，，不带type,，就是随便数
.wrap>p：first-child (意思就是： .wrap类⾥的第⼀孩⼦是p 并且判断是否是p ) 匹配所有⼦集元素的第⼀个元素。IE7就可以⽀持
.wrap>p：last-child 匹配⽗元素中最后⼀个X元素
.wrap>p： nth-child（n）⽤于匹配索引值为n 的⼦元素，索引值从1开始，还可以指定奇数⾏，偶数⾏，，也可以指定3的倍数，等等，就是3n
.wrap>p: only-child 有且只有唯⼀⼦元素，
以下：是分类型：就是.wrap 中p 的第⼏个
.wrap>p: nth-of-type(n)：匹配同类型中的第n个同级兄弟元素X
.wrap>p: only-of-type 匹配属于同类型中唯⼀兄弟元素的X
.wrap>p: first-of-type: 匹配同级兄弟元素中的第⼀个x 元素
.wrap>p: nth-last-child(n) 从最后⼀个开始算索引从后往前
.wrap>p: nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素p
.wrap>p: root 匹配⽂档的根元素
.wrap>p: empty匹配没有任何⼦元素（包括包含⽂本）空⽩的元素x 可以设置默认样式
2.⽬标伪类选择器
E：target 选择匹配E的所有元素，且匹配元素被相关URL指向跳转锚点
了解、语⾔伪类选择器
E：lang(language) 选择匹配E的所有元素，且匹配元素指定了lang属性，⽽且其值为language
3.元素状态伪类选择器（常⽤在表单）
E:enabled 匹配所有⽤户界⾯（form表单）中处于可⽤状态的E元素
E：disabled 匹配所有⽤户界⾯（form表单）中处于不可⽤状态的E原素，，，相当于是不可选择
E：checked 匹配所有⽤户界⾯（form表单）中处于被选中状态的E原素就是按钮被选中 [type="text"] 加⼀个span
E:: selection 匹配E元素中被⽤户选中或处于⾼亮状态的部分(⽹页选中显⽰的设置的颜⾊)（注意这⾥是两个：）
4.否定伪类选择器
E：not(s) (IE6-8浏览器不⽀持：not（）选择器)
匹配所有不匹配简单选择符s的元素E
5. E：focus ⽤户⾏为选择器选择匹配的E元素，⽽且匹配元素获取焦点
浏览器前缀：
-ms- : IE
-moz-: firefox
-o-: Opera 欧朋
-webkit- google chrome ⾕歌 Safari
4.css3的属性
盒⼦阴影：（属性之间⽤空格隔开）
box-shadow: ⽔平阴影位置垂直阴影位置模糊距离阴影尺⼨（）颜⾊内/外阴影
调整阴影位置，
⽔平阴影位置20px 向右偏移20px
垂直阴影位置20px 向下偏移20px
模糊距离；单位px 数值越⼤越模糊
阴影尺⼨；向外扩充
默认外阴影：改为内阴影inset
box-shadow:10px 10px 30px 0 #333 inset
常⽤的：⽔平阴影位置垂直阴影位置模糊距离颜⾊
⼀个元素设置多个阴影，要⽤逗号分割
5. ⽂本阴影
text-shadow：⽔平阴影位置垂直阴影位置模糊距离颜⾊；
6. ⽂本换⾏相关属性
word-wrap 只在允许的断字点换⾏（浏览器保持默认处理）
break-word 允许长单词或URL 地址换⾏到下⼀⾏
word--break
break-all 直接进⾏单词内的断句
Keep-all ⽂本不会换⾏，只能在半⾓空格或连字符处换⾏
7.字体图标@font-face
CSS3中的⼀个模块它主要是把⾃⼰定义的Web字体嵌⼊到你的⽹页中可以使⽤iconfont(阿⾥巴巴⽮量图标库)
制作---现成的字体图标库
8. css3边框的新增属性
border-color 边框颜⾊
border-color: pink yellow green orange ; 四个边的颜⾊，上右下左
border-image 简写属性：⽤于设置以下属性：
路径；路径偏移量（⽔平⼀⼑，垂直⼀⼑不带px）
平铺效果（拉伸stretch，铺满round 平铺repeat）
border-image-outset:20px; 边框图像区域超出边框的量
9. 边框倒⾓
border-radius:5px 10px 20px 50px ; 四个倒⾓不相同
border-radius:5px /10px ; 倒⾓是椭圆形
>>css3 新增的选择器
css3背景新增属性：
1. background-origin 背景原点
属性值：
padding-box 背景图像填充框的相对位置----默认在内边距左上⾓
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
2. background-clip 背景裁切 ----规定背景的绘制区域
属性值：
border-box 背景被裁剪到边框盒---默认
padding-box 背景被裁减到内边距框
content-box 背景被裁剪到内容框
3.background-size 背景尺⼨
属性值： 1）指定具体宽度⾼度：第⼀个值代表宽度，第⼆个值代表⾼度
2）50% %设置⼤⼩
3）cover -----把背景图像扩展⾄⾜够⼤，已使背景图像完全覆盖背景区域，
4）contain- 把图像扩展到最⼤尺⼨。以使其宽度和⾼度完全适应内容区域
4.background-color; hsl(40,50%,60%) 颜⾊ hsl
按钮：
盒模型：
标准盒模型： box-sizing: content-box; 默认
-----元素的内容区域才是代码设置的尺⼨
怪异盒⼦模型： box-sizing: border-box;
元素的总尺⼨就是代码设置的尺⼨ width:200px; heigh:200px;
---该尺⼨包含了元素的内容，内边距，边框
弹性盒模型：
布局的传统解决⽅案：基于盒模型
1.display: flex;
设置给⽗元素，形成弹性伸缩盒
弹性盒的特点：
a.弹性盒⾥⾯的⼦元素都是沿着主轴排列(主轴可以设置，默认是x轴，可以改成y轴⽅向)
b.弹性盒⾥⾯的⼦元素都能直接添加宽⾼---例如span
c.让弹性盒⾥⾯的(⼀个⼦元素)左右上下居中，直接给与元素添加margin:auto;
2.设置主轴排列⽅向
flex-direction给⽗元素设置
row 默认横向⼀⾏内排列主轴⽅向带着display:flex ；实现侧轴居中
row-reverse：反转横向排列（右对齐，从后往前排，最后⼀项排在最前⾯）倒着排列column：纵向排列侧轴⽅向
column-reverse：反转纵向排列，从下到上排，最后⼀项排在最上⾯
3.(主轴对齐⽅式（上⾯设置哪个是主轴就是对应哪个设置） )
justify-content
flex-start 默认顶端对齐
flex-end 末端对齐就是主轴⽅向，末端，不是侧轴⽅向（除⾮是上⾯设置反转纵向，）center 整体居中对齐
space-between 两端对齐中间⾃动分配
space-around ⾃动分配距离
*{ box-sizing: border-box; }
4。align-items（侧轴对齐⽅式）
flex-start:
flex-end
center
baseline；基线默认是顶部
stretch：默认值项⽬被拉绅以适应容器⾼度值被定了，就⽆效了
5.flex-wrap:
控制flex容器是单⾏或者单⾏
nowrap 默认的不换⾏
wrap 换⾏
6.align-content(⾏与⾏之间对齐⽅式，前提是⼦元素多⾏之间的效果) flex-start 没有⾏间距
flex-end 底对齐没有⾏间距
center 居中没有⾏间距
space-between 两端对齐，中间⾃动分配
space-around ⾃动分配距离
stretch ：默认值项⽬被拉伸以适应容器
*******************以上属性添加给⽗元素上***************************
弹性盒可以相互嵌套
7.align-self （加给⼦元素）灵活容器内别选中项⽬的对齐⽅式
auto 默认值元素继承了他的⽗容器的align-items属性
stretch 元素被拉绅以适应容器
center 元素位于容器的中⼼
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
9.
flex-grow:1
按⽐例平分剩余空间
10： flex-shrink：
缩⼩⽐例，默认为1 如果不想让元素缩⼩（保持原始的宽⾼），设置为0 11.flex-basis: 项⽬的长度
/*outline:none 去边框颜⾊*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

CSS面试知识点
« 上一篇
HTML5与CSS3进阶技巧与优化
下一篇 »

发表评论