购票网站模板,路由器设置用来做网站空间吗,ae免费模板网站,五种营销工具【前端实习生备战秋招】—HTML 和 CSS面试题总结#xff08;三#xff09; 1.行内元素有哪些#xff1f;块级元素有哪些#xff1f; 空(void)元素有那些#xff1f;
CSS 规范规定#xff0c;每个元素都有 display 属性#xff0c;确定该元素的类型#xff0c;每个元素…【前端实习生备战秋招】—HTML 和 CSS面试题总结三 1.行内元素有哪些块级元素有哪些 空(void)元素有那些
CSS 规范规定每个元素都有 display 属性确定该元素的类型每个元素都有默认的 display 值比如 div 默认 display 属性值为“block”成为“块级”元素span 默认display 属性值为“inline”是“行内”元素。
行内元素有a b span img input select strong强调的语气 块级元素有div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素brhrimginputlinkmeta
鲜为人知的是areabasecolcommand embedkeygenparamsourcetrackwbr
2.CSS 选择符有哪些哪些属性可以继承优先级算法如何计算 CSS3 新增伪类有那些
1.id 选择器 # myid 2.类选择器.myclassname 3.标签选择器div, h1, p 4.相邻选择器h1 p 5.子选择器ul li 6.后代选择器li a 7.通配符选择器 * 8.属性选择器a[rel “external”] 9.伪类选择器a: hover, li: nth - child
可继承 font-size font-family color, UL LI DL DD DT;不可继承 border padding margin width height ;优先级就近原则样式定义最近者为准;载入样式以最后载入的定位为准;
优先级为:mportant 比 内联优先级高
!important id class tagCSS3 新增伪类举例 p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素。 p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。 p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked单选框或复选框被选中。
3.如何居中 div,如何居中一个浮动元素?
给 div 设置一个宽度然后添加 margin:0 auto 属性 div{width:200px;margin:0 auto;}居中一个浮动元素 确定容器的宽高 宽 500 高 300 的层设置外边距
.div {Width:500px ; height:300px;//高度可以不设Margin: -150px 0 0 -250px;position:relative;相对定位background-color:pink;//方便看效果left:50%;top:50%;}4.列出 display 的值说明他们的作用。position 的值 relative 和 absolute 定位原点是
display 的值
block 象块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。 inline-block 象行内元素一样显示但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示并添加样式列表标记。
2. position 的值 absolute:生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。 fixed 老 IE 不支持:生成绝对定位的元素相对于浏览器窗口进行定位。 relative:生成相对定位的元素相对于其正常位置进行定位。 static :默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right z-index 声明。 inherit 规定从父元素继承 position 属性的值。
5.对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件容易维 护、改版方便不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性
6.css 的基本语句构成是? 选择器{属性 1:值 1;属性 2:值 2;……} 7.说 display 属性有哪些可以做什么 display:block 行内元素转换为块级元素 display:inline 块级元素转换为行内元素 display:inline-block 转为内联元素 8.哪些 css 属性可以继承 可继承 font-size font-family color, ul li dl dd dt; 不可继承 border padding margin width height ; 9.有哪些选择符优先级的计算公式是什么行内样式和important 哪个优先级高 #ID .class 标签选择符 !important 优先级高 10.我想让行内元素跟上面的元素距离 10px 加 margin-top 和 padding-top 可以吗 margin-top,padding-top 无效 11.从浏览器地址栏输⼊url到显示⻚⾯的步骤
简略回答
浏览器根据请求的 URL交给 DNS域名解析找到真实 IP向服务器发起请求服务器交给后台处理完成后返回数据浏览器接收⽂件 HTML、JS、CSS、图象等浏览器对加载到的资源HTML、JS、CSS等进⾏语法解析建⽴相应的内部数据结构如HTML的DOM载⼊解析到的资源⽂件渲染⻚⾯完成。
详细回答
从浏览器接收 url到开启⽹络请求线程这⼀部分可以展开浏览器的机制以及进程与线程之间的关系开启⽹络线程到发出⼀个完整的 HTTP请求这⼀部分涉及到dns查询 TCP/IP请求五层因特⽹协议栈等知识从服务器接收到请求到对应后台接收到请求这⼀部分可能涉及到负载均衡安全拦截以及后台内部的处理等等后台和前台的 HTTP交互这⼀部分包括 HTTP头部、响应码、报⽂结构、 cookie等知识可以提下静态资源的cookie优化以及编码解码如 gzip压缩等单独拎出来的缓存问题 HTTP的缓存这部分包括http缓存头部 ETag catch-control等浏览器接收到 HTTP数据包后的解析流程解析 html -词法分析然后解析成 dom树、解析 css⽣成 css规则树 、合并成 render树然后 layout、painting渲染、复合图层的合成、 GPU绘制、外链资源的处理、 loaded和DOMContentLoaded等CSS的可视化格式模型元素的渲染规则如包含块控制框 BFC IFC等概念JS 引擎解析过程 JS的解释阶段预处理阶段执⾏阶段⽣成执⾏上下⽂ VO 作⽤域链、回收机制等等其它可以拓展不同的知识模块如 跨域 web安全 hybrid模式等等内容
12. 请描述⼀下 cookiessessionStorage 和localStorage 的区别
cookie是⽹站为了标示⽤户身份⽽储存在⽤户本地终端Client Side上的数据通常经过加密cookie数据始终在同源的http请求中携带即使不需要即会在浏览器和服务器间来回传递sessionStorage和 localStorage不会⾃动把数据发给服务器仅在本地保存 存储⼤⼩ cookie数据⼤⼩不能超过4k sessionStorage和 localStorage虽然也有存储⼤⼩的限制但⽐ cookie⼤得多可以达到5M或更⼤
有效时间 localStorage 存储持久数据浏览器关闭后数据不丢失除⾮主动删除数据 sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除 cookie 设置的 cookie过期时间之前⼀直有效即使窗⼝或浏览器关闭
13.⻚⾯访问cookie的限制条件
cookie 储存在⽤户本地终端上的数据
cookie 指某些⽹站为了辨别⽤户身份、进⾏ session 跟踪⽽储存在⽤户本地终端上的数据。cookie 在⽹络系统中⼏乎⽆处不在当我们浏览以前访问过的⽹站时⽹⻚中可能会出现 你好 XXX。
1. 跨域问题 cookie允许Web开发者保留他们的⽤户的登录状态。但是当你的站点有⼀个以上的域名时就会出现问题了。在 cookie规范上说⼀个 cookie只能⽤于⼀个域名不能够发给其它的域名。因此如果在浏览器中对⼀个域名设置了⼀个 cookie这个 cookie对于其它的域名将⽆效。
解决
通过nginx反向代理jsonp⽅式请求设置了HTTP only如果在cookie中设置了 HttpOnly属性那么通过程序(JS脚本、Applet等)将⽆法读取到 cookie信息这样能有效的防⽌ XSS攻击。
14.cookie的作⽤与弊端
cookie的作⽤
可以在客户端上保存⽤户数据起到简单的缓存和⽤户身份识别等作⽤。保存⽤户的登陆状态⽤户进⾏登陆成功登陆后服务器⽣成特定的cookie返回给客户端客户端下次访问该域名下的任何⻚⾯将该cookie的信息发送给服务器服务器经过检验来判断⽤户是否登陆。记录⽤户的⾏为。
cookie弊端
增加流量消耗每次请求都需要带上cookie信息。安全性隐患cookie使⽤明⽂传输。如果cookie被⼈拦截了那⼈就可以取得所有的session信息。Cookie数ᰁ和⻓度的限制。每个domain最多只能有20条cookie每个cookie⻓度不能超过4KB否则会被截掉
15.介绍cookie的属性
在chrome控制台中的Application选项卡中可以看到cookie的信息 ⼀个域名下⾯可能存在着很多个 cookie对象。但⼀个 cookie只能⽤于⼀个域名不能够发给其它的域名。 Name 为⼀个cookie的名称⽤ JavaScript 操作 Cookie 的时候注意对 Value 进⾏编码处理。 value 为⼀个cookie的值⽤ JavaScript 操作 Cookie 的时候注意对 Value 进⾏编码处理。 Domain 为可以访问此cookie的域名
注⼆级域名能读取设置了 domain为顶级域名或者⾃身的cookie不能读取其他⼆级域名 domain的 cookie。所以要想 cookie在多个⼆级域名中共享需要设置 domain为顶级域名这样就可以在所有⼆级域名⾥⾯获得到这个cookie的值了。
顶级域名只能获取到 domain设置为顶级域名的 cookie其他domain设置为⼆级域名的⽆法获取。
Path 为可以访问此cookie的⻚⾯路径。 ⽐如domain是abc.com,path是/test那么只有/test路径下的⻚⾯可以读取此cookieExpires 字段为此cookie超时时间 。若设置其值为⼀个时间那么当到达此时间后此cookie失效。不设置的话 默认值是Session意思是cookie会和session⼀起失效。当浏览器关闭(不是浏览器标签⻚⽽是整个浏览器) 后此cookie失效。
Set-Cookie: ida3fWa; ExpiresWed, 21 Oct 2015 07:28:00 GMT;当为 会话性 Cookie 的时候值保存在客户端内存中并在⽤户关闭浏览器时失效。需要注意的是有些浏览器提供了会话恢复功能这种情况下即使关闭了浏览器会话期 Cookie 也会被保留下来就好像浏览器从来没有关闭⼀样。
与会话性 Cookie 相对的是 持久性 Cookie持久性 Cookies 会保存在⽤户的硬盘中直⾄过期或者清除Cookie。这⾥值得注意的是设定的⽇期和时间只与客户端相关⽽不是服务端。
Max-Age Max-Age⽤于设置在 Cookie 失效之前需要经过的 秒数 。⽐如
Set-Cookie: ida3fWa; Max-Age604800;Max-Age 可以为正数、负数、甚⾄是 0。如果 max-Age 属性为 正数 时浏览器会将其持久化即写到对应的 Cookie ⽂件中。当 max-Age 属性为 负数 则表示该 Cookie 只是⼀个会话性 Cookie。当 max-Age 为 0 时则会⽴即删除这个 Cookie。假如 Expires和 Max-Age 都存在 Max-Age优先级更⾼。
HttpOnly 若此属性为 true则只有在http请求头中会带有此cookie的信息⽽不能通过 document.cookie来访问此cookie。
设置是否只能通过https来传递此条cookie。使⽤ HTTPS安全协议可以保护 Cookie 在浏览器和 Web服务器间的传输过程中不被窃取和篡改。
Size 此cookie⼤⼩SameSite
16.⽹⻚验证码是⼲嘛的是为了解决什么安全问题
区分⽤户是计算机还是⼈的公共全⾃动程序。可以防⽌恶意破解密码、刷票、论坛灌⽔有效防⽌⿊客对某⼀个特定注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试
17.前端注意哪些SEO?
合理的 title、 description、 keywords搜索对着三项的权重逐个减⼩title值强调重点即可重要关键词出现不要超过2次⽽且要靠前不同⻚⾯ title要有所不同 description把⻚⾯内容⾼度概括⻓度合适不可过分堆砌关键词不同⻚⾯ description有所不同 keywords列举出重要关键词即可语义化的 HTML代码符合W3C规范语义化代码让搜索引擎容易理解⽹⻚重要内容 HTML代码放在最前搜索引擎抓取 HTML顺序是从上到下有的搜索引擎对抓取⻓度有限制保证重要内容⼀定会被抓取重要内容不要⽤ js输出爬⾍不会执⾏js获取内容少⽤ iframe搜索引擎不会抓取 iframe中的内容⾮装饰性图⽚必须加 alt提⾼⽹站速度⽹站速度是搜索引擎排序的⼀个重要指标
18.CSS 动画的实现⽅式有⼏种
transitionkeyframesanimation
19.过渡动画和关键帧动画的区别
过渡动画需要有状态变化关键帧动画不需要状态变化关键帧动画能控制更精细
如何实现逐帧动画
使⽤关键帧动画去掉补间steps
20.CSS动画的性能
性能不坏部分情况下优于JS但JS可以做的更好部分⾼危属性例如 box-shadow等。
21.keyframe 关键帧动画
关键帧动画
相当于多个补间动画与元素状态的变化⽆关定义更加灵活
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlekeyframe关键帧动画/titlestyle.container{width: 100px;height: 100px;background: red;animation: run 1s;animation-direction: reverse;animation-iteration-count: infinite;/*animation-fill-mode: forwards;*//*animation-play-state: paused;*/}keyframes run {0%{width: 100px;}100%{width: 800px;}}/style
/head
bodydiv classcontainer/div
/body
/htmlCSS中动画的类型
transition 补间动画从⼀个状态到另⼀个状态状态切换之间是有动画的keyframe 关键帧动画指定的每⼀个状态就是⼀个关键帧逐帧动画跳动
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletransition补间动画/titlestyle.container{width: 100px;height: 100px;background: red;transition: width 1s, background 2s;}.container:hover{width: 300px;background: blue;}/style
/head
bodydiv classcontainer/div
/body
/html动画进度与时间的关系
