摘要:为何只要写不基于标准通用标记语言,所以不需要引用,但需要来规范浏览器的行为使得浏览器知道应该以何种解析方式对文档进行解析基于,所以要引用才能告知浏览器文档所使用的文档类型讲讲行内元素块元素空元素有哪些行内元素,,,,,,,标记性元素块元素,
HTML 1.HTML5为何只要写
HTML5不基于SGML(标准通用标记语言),所以不需要引用DTD,但需要doctype来规范浏览器的行为(使得浏览器知道应该以何种解析方式对文档进行解析)
HTML4.0基于SGML,所以要引用DTD才能告知浏览器文档所使用的文档类型
2.讲讲行内元素、块元素、空元素有哪些行内元素:a,span,img,input,select,strong,em,b(标记性元素)
块元素:div,p,ul,li,ol,dd,dt,dl,h1-h6
空元素:hr,br,input,img,link,meta
3.导入样式时,使用link与@import的区别link属于XHTML标签,除了可以加载css外,还能定义SSR,定义rel连接属性等作用,@import是css提供的,只能加载css样式
页面加载时,link引入的资源能够同时被加载,而@import引入的css必须等页面加载完成后才能进行加载
link是XHTML标签,无兼容问题,而@import是css2.1提出的,IE5以下的低版本浏览器不支持
4.简述对HTML5语义化的理解在没有css样式时,以一种文档的形式显示,并且是容易阅读的
HTML5语义化使页面的内容结构化,结构更清晰,便于浏览器、搜索引擎解析
有利于哪些有视障的人使用屏幕阅读器根据标记来访问网站
有利于团队的开发和维护
有利于SEO:便于爬虫抓取更多有效的信息
5.描述下cookie、localStorage和sessionStorage的区别cookie本是用来客户端与服务端进行通信的,因为其有存储功能,而被借用来存储信息,cookie数据会始终在同源http请求中携带
localStorage和sessionStorage不会自动把数据发送到服务器上,仅在本地存储
存储大小
cookie只有4k;而localStorage和sessionStorage可以达到5M或者更大
过期时间
cookie在设置的过期时间前一直有效,
localStorage长期有效,关闭浏览器数据不会丢失,除非用户主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
6.实现不用border画出1px高的线,在不同浏览器里,标准模式与怪异模式下都能保持一致的效果7.网页验证码的作用及解决的安全问题
区分用户是人还是机器,可以防止恶意破解密码、刷票等;可以防止黑客对某一特定注册用户以暴力破解的方式不断的尝试登录
8.data-属性的作用data-*用于存储页面或者应用程序的私有自定义的数据,可以在所有的html元素中嵌入data-自定义属性,可以被js利用来操作数据
注意:data属性应该为小写,且data-后至少要有一个字符,不能单单使用data,data属性值可以是任意字符串9.说说HTML5新特性,移除的元素(说说HTML5)
新特性:
绘画canvas
用于媒介回放的video、audio元素
本地离线locaStorage长期存储数据,浏览器关闭后数据不丢失
sessionStorage在浏览器关闭后数据自动删除
表单控件:data、email、search、url、calendar、time
语义化标签:header、footer、nav、section、article
新的技术:webworker、websocket、Geolocation
移除的元素
纯表现元素:basefont、center、font、big、u、tt、strike、s
对可用性产生负面影响的元素:frame、frameset、noframes
CSS 1.介绍下标准的盒子模型和IE的怪异盒子模型w3c标准盒子模型:content的width就是设置的width
IE怪异盒子模型:content的width包含border和padding
2.css优先级计算优先级就近原则,同等权重时样式最近者优先级更高
!import > id > class > tag
!import比内联样式优先级更高
3.简述css文件为什么要reset浏览器种类众多,不同浏览器的默认样式不一样,需要进行reset统一浏览器的样式
4.如何使两个div进行水平布局使用flex布局:父元素设置:display:flex
使用浮动布局(或者使用display:inline-block)
// html5.左边固定宽度,右边自适应// css .left{ float: left; background: red; /*display: inline-block;*/ } .right{ overflow: hidden; background: green; /*display: inline-block;*/ }fffffffdf
左边定宽+设置浮动width:300px;float:left;右边设置overflow:hidden(或者margin-left:左边的宽度)
.left{ float: left; width: 300px; background: red; } .right{ overflow: hidden; background: green; }
父元素设置display:flex;左边设置width:300px;右边设置flex-grow:1
父元素设置display:table;左边设置width:300px;右边设置display:table-cell;width:100%;
父元素设置position:relative;左边设置position:absolute;width:300px;右边设置margin-left:左边的宽度
6.两个div完成两列布局:要求高度不定(父元素也是),两个div实时等高(左边div高度被子元素撑高时,右边div高度与左边一致)父元素设置display:table;右边设置:display:table-cell
父元素设置display:flex;右边设置flex-grow:1
7.实现左右两边宽度固定,中间自适应使用左右浮动布局,中间居中布局,此时中间div要放在右浮动下面(因为center的div在正常文档流中,占据全屏宽度,右边的浮动元素会放置在下一行)
// html// css .left{ float: left; background: red; } .right{ float: right; background: green; } .center{ margin: 0 auto; background: yellow; }fffffffdddss
使用flex布局
父元素设置display:flex;左边定宽width:300px;右边定宽width:300px;中间设置flex-grow:1
// html// css .box{ display: flex; } .left{ width: 300px; background: red; } .right{ width: 300px; background: green; } .center{ flex-grow: 1; background: yellow; }fffssffffddd
使用绝对定位,左右两边绝对定位,脱离文档流,中间使用margin留出定宽的margin值
.left{ position: absolute; top: 0; left: 0; width: 300px; background: red; } .right{ position: absolute; right: 0; top: 0; width: 300px; background: green; } .center{ margin: 0 300px; background: yellow; }8.圣杯布局(与双飞翼布局差不多)
其实是利用负margin值实现,也就是固比固(两边盒子宽度固定,中间盒子自适应)
.box{ overflow: hidden; padding: 0 150px; } .left{ left: -150px; margin-left: -100%; width: 150px; height: 50px; background: red; } .right{ right: -150px; margin-left: -150px; width: 150px; height: 50px; background: green; } .center{ width: 100%; height: 50px; background: yellow; } .col{ position: relative; float: left; }dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
定位完成后,要进行position:relative;再左右两栏添加left和right值,使中间的内容不被遮盖
9.双飞翼布局10.如何水平居中一个浮动元素,如何水平居中一个绝对定位元素.left{ margin-left: -100%; width: 150px; height: 50px; background: red; } .right{ margin-left: -150px; width: 150px; height: 50px; background: green; } .center{ width: 100%; height: 50px; background: yellow; } .col{ float: left; } .wrap{ margin: 0 150px; } 与圣杯布局只是中间的div增加了包含的容器,防止遮盖文字使用了在包含容器中设置margin:0 定宽值;dgdggdgdsgdsfhsgkjsdflkghjsdkghsdghsdhg dhgsdhgsdghsdhgjdhkghsdghsdghskdjhgsdhfgsdfhg
居中浮动元素
.right{ float:left; width: 150px; height: 50px; margin: 0 0 0 -75px; position: relative; left: 50%; top: 50%; background: green; }
居中绝对定位元素
.right{ position: absolute; width: 150px; height: 50px; margin: 0 auto; left: 0; top: 0; bottom: 0; right: 0; background: green; }11.position的值relative和absolute的定位原点是哪里
absolute:生成绝对定位元素,相对于值不为static的第一个父元素进行定位
fixed:生成绝对定位,相对于浏览器窗口进行定位
relative:生成相对定位元素,相对于其正常位置进行定位
static:没有定位,元素出现在正常的流中(忽略偏移声明:top、left、right、bottom、z-index)
inherit:从父元素继承position属性的值
12.li与li之间有看不见的空白间隔是什么原因引起的行框的排列会受到中间空白(回车或者空格)的影响,空格也属于字符,也会应用样式,占据空间
将字符大小设为0就可以将间隔去除
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进,追加功能达到更好的用户体验
优雅降级:先构建完整的功能,再针对低版本浏览器进行兼容
JS 部分等待更新
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54559.html
摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...
摘要:一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学,大三狗一枚面试是个漫长的过程,从海投到收获电话面试,一面二面三面,一个步骤出错那么后面就宣告终结。 一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言 年前刚刚离职了,分享下我曾经出过的一道...
摘要:一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章,转载请务必保留原出处为:http://www.54tianzhisheng.cn/... , 欢迎访问我的站点,阅读更多有深度的文章。 实例变量 和 类变量...
阅读 2389·2021-11-16 11:44
阅读 1845·2021-10-12 10:12
阅读 2121·2021-09-22 15:22
阅读 2987·2021-08-11 11:17
阅读 1484·2019-08-29 16:53
阅读 2641·2019-08-29 14:09
阅读 3460·2019-08-29 14:03
阅读 3284·2019-08-29 11:09