总结 | |
——、 | |
1.什么是html5? | |
HTML 标准的最新版本,是对 HTML 的第五次重大版本修改。 | |
2.常用的新属性有哪些? | |
placeholder:占位符 提示信息 | |
autofocus:自动获取焦点 | |
multiple:支持多文件上传 | |
autocomplete:当提交过表单内容之后规定 某个表单控件的提示内容,关闭和打开,规定表单是否应该启用自动完成功能,on默认,启用自动完成(name必须,提交按钮必须) | |
required:必填项 | |
tabindex:指定表单控件获取焦点的顺序 | |
3.新增的input的type属性值有哪些? | |
tel:输入手机号码格式 | |
email:输入邮箱格式 | |
url:输入url格式 | |
number:输入数字格式 | |
time | |
date | |
range:自由拖动滑块 | |
month | |
week | |
search:搜索框 | |
4.什么是自定义标签属性?如何设置 ,如何取值 | |
data | |
利用getattribute获取类名然后 dataset.index | |
5.多媒体标签是那三个 | |
embed :embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等 | |
video:视频 | |
audio:音频 | |
6.什么是字体图标?为什么使用字体图标 | |
是一些简单,颜色单一的图片,采用字体图标去做。 | |
图标放大或者缩小不会失真, 加载速度快、兼容性高、灵活性高 | |
二、 | |
1.css3有哪些私有属性和兼容情况 | |
私有属性: | |
Webkit引擎浏览器使用“-webkit-”作为私有属性,像Safari和Chrome浏览器。 | |
Gecko引擎浏览器使用“-moz-”作为私有属性,像Firefox浏览器。 | |
Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。 | |
Trident引擎浏览器使用“-ms-”作为私有属性,只有IE8以上支持,像IE浏览器。 | |
2.css3新增哪些选择器?(元素选择器,属性选择器,结构性伪类选择器) | |
元素选择器:选择相邻兄弟,匹配选择器 | |
+ 相邻兄弟选择器 ~ :如:匹配选择器位于div 后面的所有span元素都会被选中 | |
属性选择器:[attribute]用于选取带有指定属性的元素。 | |
[attribute=value]用于选取带有指定属性和值的元素。 | |
[attribute^=value]匹配属性值以指定值开头的每个元素。 | |
[attribute$=value]匹配属性值以指定值结尾的每个元素。 | |
[attribute\=value]匹配属性值中包含指定值的每个元素。 | |
[attribute~=value]用于选取属性值中(包含)指定词汇的元素,还可以空格为分隔符。 | |
[attribute|=value]用于选取带有以指定值(开头)的属性值的元素,还可以连字符为分隔符。 | |
3.结构性伪类选择器: | |
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 | |
:last-child 匹配的是某父元素的最后一个子元素,可以说是结构上的最后一个子元素。 | |
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 | |
:last-of-type 匹配某个父元素中最后一个某一类型的元素。 | |
css3追加伪元素选择器? | |
::before:向当前的元素前面追加内容(创建一个伪元素,其将成为匹配选中的元素的第一个子元素) | |
::after:向当前的元素内容后面追加内容(创建一个伪元素,作为已选中元素的最后一个子元素) | |
4.css3新增哪些js选择器? | |
querySelector:获取一个元素 | |
querySelectorAll:获取多个元素 | |
5.:before和 ::before写法的区别? | |
:before 是css2的写法, ::before 是css3的写法 | |
6.如何设置多重背景? | |
background-image:url(),url(),url()........ | |
background-repeat: no-repeat,no-repeat,no-repeat; | |
background-size: 200px 200px; | |
background-position: 0 0, 50% 50%, right bottom; | |
7.两种类型的渐变分别是什么? | |
linear-gradient(),radial-gradient() | |
8.css3的opacity属性有什么作用? | |
opacity 属性是设置元素的不透明级别,规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 | |
三、 | |
1.transition是什么?是哪几个属性的简写? | |
过渡元素,给用户呈现 由一种样式到另一种样式的过程 | |
transition-propert | |
transition-duration | |
transition-timing-function | |
transition-delay | |
2.transform是什么?移动,旋转,伸缩,倾斜扭曲分别是什么? | |
transform 变形 | |
移动:translate(x,y); | |
倾斜:skew(deg, deg) | |
旋转:rotate(deg); | |
伸缩:scale(x,y); | |
上述是2d | |
改变变形原点:transform-origin:top bottom left right | |
3.animation是哪几个属性的简写? | |
animation-iteration-count:infinite; 无限循环播放 | |
animation-play-state:paused; 暂停动画 | |
animation-direction:alternate;(动画交替反向运行)alternate-reverse;(动画反向交替运行)reverse(动画反向); | |
animation-fill-mode: forwards(动画完成后,保持最后状态); | |
animation-fill-mode: backwards;(动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。) | |
animation-fill-mode: both;(动画遵循 forwards 和 backwards 的规则。) | |
4.perspective属性指的是什么? | |
透视透视可以将一个2D平面,在转换的过程当中,呈现3D效果。perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素 | |
5.transform-style属性指的是什么? | |
transform-style: flat|preserve-3d; | |
flat:子元素将不保留其 3D 位置。 | |
preserve-3d:子元素将保留其 3D 位置。 | |
四、 | |
1.flex布局是什么 | |
把父元素设置为 弹性盒模型,子元素们会默认按照主轴排列 | |
2.作用在父盒子容器的属性 | |
flex-direction: 主轴的方向 | |
row 默认值 主轴正常排列 | |
row-reverse 主轴颠倒排列 | |
column 副轴排列 | |
column-reverse 副轴颠倒排列; | |
flex-wrap: 如何换行 | |
nowrap(默认):不换行 | |
wrap :换行 | |
wrap-reverse:换行,但取反 | |
flex-flow(flex-direction属性和flex-wrap属性的简写) | |
例:flex-flow: column wrap; | |
主轴上面的对齐方式 | |
justify-content: | |
flex-start(默认值) 正常主轴排列 | |
flex-end 主轴末尾对齐 | |
center 主轴居中对齐 | |
space-between 主轴两端对齐 | |
space-around 元素之间的间距一致 左右两边的间距加起来=元素间距; | |
副轴上面的对齐方式 | |
align-items: | |
flex-start:交叉轴的起点对齐。 | |
flex-end:交叉轴的终点对齐。 | |
center:交叉轴的中点对齐。 | |
baseline: 项目的第一行文字的基线对齐。 | |
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度,元素被拉伸以适应容器。。 | |
多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用 | |
align-content: | |
stretch(默认) 默认排列方式 | |
flex-start 开始对齐 | |
flex-end 末尾对齐 | |
center 居中对齐 | |
space-between 两端对齐 | |
space-around 元素之间的间隙一致*/ | |
3.作用在子元素上的属性 | |
order规定子元素 (项目)的排列顺序 | |
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 | |
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 | |
如果每一个项目没有宽度 那么 flex-grow: 1; 就代表平均分配宽度 | |
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。值越大,越缩小 | |
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间 ,flex-basis 跟width一样 | |
flex属性(flex-grow, flex-shrink 和 flex-basis的简写) | |
flex:auto flex: 1 1 auto | |
flex:none flex: 0 0 auto | |
flex-shrink flex: 0 1 0% | |
flex:1 flex:1 1 0% | |
align-self: auto | flex-start | flex-end | center | baseline | stretch; | |
align-self属性允许单个项目有与其他项目不一样的对齐方式 | |
4.媒体查询的语法那些 | |
@media screen and(max-width|min-width) { | |
} | |
max-width 最大宽度 | |
min-width 最小宽度 | |
5.响应式开发原理: | |
原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。 | |
5.说一说你对视口的理解 | |
布局视口:在PC端开发的页面 切换到了移动设配上面 就会显示不全此时布局视口要远大于 移动设配的宽度 | |
视觉视口:用户正在看到的网页的区域 | |
理想视口:布局视口 等于 视觉视口 | |
五、 | |
1.简单说明canvas的作用 | |
通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。 | |
2.canvas浏览器不兼容问题 | |
ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持 | |
只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外) | |
移动端的兼容情况非常理想,基本上随便使用 | |
2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持 | |
如果浏览器不兼容,最好进行友好提示,提示内容只有在浏览器不支持时才显示。 | |
3.使用canvas创建画布需要注意哪些? | |
不能使用CSS样式控制canvas元素的宽高,否则会导致绘制的图形拉伸。 | |
重新设置canvas标签的宽高属性会导致画布擦除所有的内容。 | |
可以给canvas画布设置背景色 | |
4.简单说一下canvas绘制的基本步骤? | |
获取元素,获取画笔,定义一个起点(绘制一个起点 )填充图形 | |
5.可以利用canvas做什么功能操作? | |
给形状描边 填充 | |
6.svg的使用方式?svg的属性都有哪些? | |
svg代码直接插入网页中 | |
CSS中引入svg文件 | |
使用标签引入svg | |
7.canvas和svg的区别? | |
canvas 放⼤会失真或者锯⻮。 | |
svg 输出的图形是⽮量图形,可以修改参数来⾃由放⼤缩⼩,不会失真和锯⻮。 | |
绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点,能够⽅便的绑定事件或⽤来修 。 | |
六、 | |
1.Location对象以及Location的属性和方法? | |
location 对象是 window 对象的一部分,可通过window.location属性对其进行访问。 | |
属性: | |
origin返回页面来源的域(当前协议 + 主机名+端口号) | |
host返回一个URL的主机名和端口 | |
hostname返回URL的主机名port返回一个URL服务器使用的端口号 | |
pathname返回的URL路径名。 | |
protocol返回一个URL协议 | |
href返回完整的URL | |
hash返回从井号 (#) 开始的 URL(锚) | |
search返回从问号 (?) 开始的 URL(查询部分) | |
方法: | |
assign()加载新的文档。跟href一样,可以跳转页面 | |
replace()用新的文档替换当前文档。替换当前页面,不记录历史,不可以后退 | |
reload()重新加载当前文档。 | |
2.Navigator对象? | |
表示用户代理的状态和标识 | |
3.Navigator.onLine网络状态是什么? | |
判断用户设备是否处于脱机状态(没网) | |
ononline有网 | |
onoffline 没有网 | |
4.History对象及History的属性和方法? | |
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。 | |
属性: | |
length返回浏览器历史列表中的 URL 数量。 | |
state返回浏览器在当前 URL 下的状态信息,如果没有调用过 pushState() 或 replaceState() 方法,则返回默认值 null。 | |
方法: | |
back()加载 history 列表中的上一个 URL。 | |
forward()加载 history 列表中的下一个 URL。 | |
go()加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面pushState()用于在历史中添加一条记录。 | |
replaceState()用来修改 History 对象的当前记录,其他都与pushState()方法一模一样。 | |
5.FileReader对象与Files对象的区别和作用? | |
为表单元素添加multiple属性,因此我们通过<input>上传文件后得到的是一个Files对象(伪数组形式)。 | |
可以读取本地文件内容。 | |
七、 | |
1.localStorage和sessionStorage的区别? | |
localStorage:永久性存储 | |
sessionStorage:临时存储 当页面关闭时就失效 | |
2.什么是同源策略? | |
协议 域名 端口号一致 就可以访问其内容 | |
如果其中一项不同就违背了同源策略 就访问不到 - 跨域 | |
3.本地存储的有哪几个方法可以实现增删改?如何使用? | |
setItem 设置当前值(key,value) | |
getItem 获取存储数据 | |
removeItem 删除某一个本地存储数据(key) | |
clear 清空所有 | |
4.如何监听存储事件? | |
使用addEventListener进行监听 | |
5.与存储事件相关的5个属性都是什么? | |
key : 修改或删除的key值,如果调用clear()时,该属性值为null | |
newValue: 新设置的值,如果调用removeItem()时,该属性值为null | |
oldValue : 调用改变前的value值;添加新项时,该属性值为null | |
storageArea : 当前的storage对象 | |
url : 触发该存储变化脚本所在文档的URL(也就是说哪个页面修改的数据) | |
--> | |
<!-- 重要问题 | |
1.HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5? | |
增加语意化的元素,比如 article footer header nav section | |
增加常用的属性:placeholder,multiple,autofocus,data-*(自定义属性),autocomplete...等 | |
增加表单控件, date time email url search tel | |
用于媒介回放的audio和video元素 | |
用于绘画的 canvas 元素 | |
新增API:Location,Navigator,History,FileReader,localStorage,sessionStorage等对象 | |
本地离线存储。localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除 | |
2.CSS3有哪些新特性? | |
新增选择器:属性选择器、伪类选择器。 | |
伪元素 :::before,::after | |
颜色:新增RGBA,HSLA模式 | |
文字阴影:(text-shadow) | |
边框: 圆角(border-radius)边框阴影: box-shadow | |
盒子模型:box-sizing | |
背景:background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点等 | |
渐变:linear-gradient、radial-gradient | |
过渡:transition,可实现动画 | |
2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y) | |
3D转换 | |
自定义动画animation | |
媒体查询,弹性盒子布局 | |
3.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE? | |
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。 | |
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 | |
页面头部必须有meta声明的viewport。 | |
4.Canvas和SVG有什么区别? | |
canvas 输出的是⼀整幅画布,就像⼀张图⽚⼀样,放⼤会失真或者锯⻮。 | |
svg 输出的图形是⽮量图形,后期可以修改参数来⾃由放⼤缩⼩,不会失真和锯⻮。绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点,能够⽅便的绑定事件或⽤来修 。 | |
5.谈谈iframe标签的优缺点? | |
iframe:是一个内联框架(行内框架),可以包含另外一个文档的内容。 | |
iframe的优点: | |
iframe能够原封不动的把嵌入的网页展现出来。 | |
如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。 | |
如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。 | |
iframe的缺点: | |
会产生很多页面,不容易管理。 | |
代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。 | |
很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。 | |
iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。 | |
H5C3的总结
最新推荐文章于 2024-09-10 13:54:44 发布