html2canvas 模糊 html2canvas常见踩坑问题
一、html2canvas图片留白图片留白的问题应该是页面有滚动条,所以导致截屏又留白,解决方式有两种:1. 将页面window.scrollTo(0,0)这样可以解决,但是有的时候滚动会让用
顺晟科技
2022-09-14 10:57:31
192
1.常用的块属性标签及特征有哪些?
常用块标签:Divh1~h6olullidltdddtabletrthtdpbrform块标签特征:独占一行,换行显示,可以设置宽高,块可以套块和行
2.常用的行内属性标签及特征有哪些?
行标签:spanaimgvaremstrongtextareaselectoptioninput行标签特征:在行内显示,内容撑开宽高,不可以设置宽高(img,input除外),行只能套行标签
3.SEO重视的标签有哪些?
<title>、<strong>、h1~h3、<a>、<em>、<img>&alt等
4.HTML静态页面出现中文乱码如何解决?在head里加入<metacharset=’utf-8’/>并且保存文件时编码格式也选择utf-8编码
5.下列标签既是行内属性标签又可以设宽高的标签是?(CD)
A.varB.tableC.inputD.imgE.form
6.css选择器有几种,及各自的书写方式?(举例说明)ID选择器,举例:#div1{}类选择器,举例:.div1{}标签选择器,举例:div{}后代选择器,举例:.div1p{}群组选择器,举例:#div1,.div2,.div3p,#div4ulli{}
7.简单说说你对“盒模型”这个概念的理解,以及它都涉及到哪些css属性?
在css布局中,每一个html元素在浏览器中的解析都可以被看作一个盒子,拥有盒子一样的外形和平面空间它由margin、border、padding、content四部分组成涉及到的CSS属性有:margin、border、padding、display
8.div1里依次有div2和div3两个同级元素,div2高20px,margin-bottom:30px;
div3高50px,margin-top:20px;那么div1的高度是多少?20px+50px+30px=100px
本题考点:margin横向上是相加,但在竖向上却会产生叠加的现象,并会取上下间距的其大者生效
9.A标签的伪类有哪些,都是什么意思,及书写顺序?link:有链接属性时visited:链接地址已被访问过hover:鼠标悬停在上面active:被用户激活时书写顺序:lvha(lovehate)
10.有一个div宽是1000px,如何让它在浏览器里达到居中,并且左右自适应?
div{width:1000px;margin:0auto;}11.常用的调试工具有哪些?
谷歌的审查元素、火狐的firebug、IE开发者工具F12等12.分别说出float对块属性及行内属性标签的影响是什么?对块属性标签的影响:可以使块属性元素并排排列,在没有设置宽高的情况下浮动后,内容撑开宽度高度
对行属性标签的影响:float之后能设置width和height属性,并支持margin和padding属性
13.写出兼容IE及其他主流浏览器的CSS半透明设置?div{opacity:0.5;fiter:alpha(opacity=50);}
14.写出常见的CSS兼容性问题?(列举至少4个)1.不同浏览器的标签默认的margin和padding差异;2.图片之间默认有间距;3.不透明度;
4.图片有链接时的边框问题;5.双倍marginbug6....
15.CSSposition属性的常用值有哪些?分别是什么意思?Position:relative;相对定位(通常用在父级)Position:absolute;绝对定位(通常用在子级)Position:fixed;固定定位(相对于浏览器窗口)
16.以下的CSShack设置分别适用于哪个浏览器?_background-color:green;IE6适用*+background-color:pink;IE7适用*background-color:black;IE6、IE7适用
针对不同的浏览器或不同版本浏览器而写特定的CSS样式,叫做CSShack
17.html的书写规范有哪些?
标签换行写法;标签需要关闭;特殊字符用编码;标签缩进;标签用英文小写;注释;合理嵌套;
1、doctype是一种标准通用标记语言的文档声明类型,它的目的就是告诉标准通用标记语言解析器,应该使用什么样的文档类型定义。
2、标准模式与怪异模式区别:
主要在于盒模型。标准模式中,浏览器根据规范呈现页面,混杂模式中页面则以一种比较宽松的向后兼容的方式显示。
3、link与@import区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务; @import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全 载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本 的浏览器不支持。
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
4、盒模型:盒模型指在css布局中,html中的每个元素在浏览器中的解析都可以被看作一个盒子,拥有盒子一样的外形和平面空间。盒模型属性。。。
5、css中哪些属性可以继承:
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。
6、如何居中一个浮动元素?百分比外边距,相对定位一半自身的宽度负值。
7、css3新特性:1、增加了许多新的选择器,比如兄弟选择器,子元素选择器,属性选择器等,方便布局。2,还有一些特殊效果,例如圆角边框,多彩边框,图像边框,文本阴影和阴影等。3、还有渐变,蒙版,倒影。4,还有一些特殊效果,比如动画,过渡,旋转,缩放等5、还可以进行响应式布局,弹性布局等,以及媒体查询。
8、媒体查询:使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置响应式设计的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。媒体类型:mediatype
all 用于所有设备
screen 用于电脑屏幕,平板电脑,智能手机等
。关键字:and|not|only
and 用来连接条件,然后括号里就是一个媒体特征查询语句
not 用来排除某种媒体类型,即用于排除符合表达式的设备
only 用来限定某种媒体类型,可用来排除不支持媒体查询的浏览器。
9、h5本地存储:大小最小5MB,可以申请更大的空间
不会随HTTP请求发送给服务器
非常容易操作
移动端普及高
localStorage与sessionStorage两种localStorage为永久性保存数据,不会随着浏览器的关闭而消失,可以在同域名跨页访问
sessionStorage为临时性保存数据,当页面关闭就会消失。其他一切与localStorage一样
sessionStorage不能跨页面访问,也不会触发跨标签页的storage事件。它只局限在当前的标签页
10、javascript在ie与w3c中的兼容:冒泡,监听,滚轮,阻止默认事件。
11、跨域访问:两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的
12、js如何定义class:构造函数,setAttribute;
13.js如何扩展prototype:创建对象,利用原型拓展对象。
14、css:CSS(cascading Style Sheet 的缩写),可译为层叠样式表或级联样式表,是一组格式设置规则,用于控制 web 页面的外观。
页面内容与表现形式分离
可很好的控制页面的布局
提高网页加载速度降低服务器的成本呈现一致的效果
75、JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页上使用,用来给HTML网页增加动态功能
16、 ajax跨域
1. 可以让服务器去别的网站获取内容然后返回页面
2. 给页面的ajax一个url,ajax把这个url传给服务器,由服务器去访问跨域地址17、GET:
更常用,更方便
性能好
明文发送数据,没有POST安全
传输数据大小有限制:数据通过URL传递,但是URL有一定长度限制。18、POST:
使用相对较少
性能只有GET的1/3左右
比GET稍微安全一点
没有传输数据大小限制
word-6
1: 缩小Javascript和CSS文件
如果你的网站大约有50-60%的用户是第一次访客,那么这些人会下载Javascript和CSS,如果这些文件很大浏览器会下载很长时间。
2:减少HTTP请求
浏览器会花费80%的时间获取外部元件,包括脚本、样式表、图像等,只有20%的时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟。
3:缓存图片、CSS和Javascript
每当一个新用户访问你的网站,图片、CSS和Javascript应该在其浏览器缓存,这样他们下一次访问就特别快。
4:合并CSS引用图片
很多网站的图片都是切成小块的,这样下来就会有大量CSS引用图片,如果我们把CSS图片合并成一个,14个HTTP请求变成1个,想想会是什么效果?它的原理就是通过CSS坐标的方式取得图片径路,每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张,用的就是这个原理。
5:只加载<head>部分的基本脚本
这个最简单,不花时间,点击自己网站右键“查看源文件”找到<head>与</head>之间的区域,看看那些不重要好的JS文件,把它仍到页面底部,也就是让它最后加载。或者直接删除。
6:对图像进行压缩
除非你加载视频,那么影响网站速度罪魁祸首应该就是图片了,如果是jpeg、png图片,保证不失品质的前提下,让他们尽量压缩,Fireworks软件“导出向导”功能,它提供了一个很好的方式来预览保存的图像,让图片大小与质量之间平衡,大多数其他图像编辑软件都有类似的功能。
27
2022-09
25
2022-09
23
2022-09
22
2022-09
16
2022-09
14
2022-09