A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[前端与移动开发] HTML和CSS初学

© 黑马前端小白 初级黑马   /  2019-11-20 23:55  /  581 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

经过近一个月的学习,终于完成了前端最基础部分HTML和CSS的学习,内容来说不算很难,加上英语基础还不错,学习起来压力不大。最近在网上浏览了一些基础部分面试可能会遇到的一些问题,再次做一个简单的总结,希望可以带来一点帮助。
XHTML与HTML的有何异同?
HTML是一种基于WEB的网络设计语言,XHTML是基于XML的置标语言,XHTML可以认为是XML版的HTML,所以它的语法比较严谨:元素必须关闭,嵌套必须正确,大小写区分,属性值必须用双引号,id属性代替name属性

介绍一下CSS的盒子模型?弹性盒子模型是什么?
盒子模型由content+padding+border+margin组成,分为标准盒子和IE盒子,标准盒子的width指content,IE盒子的width包括content,padding,border
弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。
*Doctype的作用?标准模式与兼容模式各有什么区别?
声明在文档的第一行,位于html的前面,用于告知浏览器的解析器以什么样的文档标准来解析这个文档,如果没有声明文档就会以兼容模式呈现
标准模式的排版和JS都是以浏览器支持的最高的标准运行
兼容模式页面以宽松向后兼容的方式显示,模仿老式浏览器,防止站点无法工作

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
行内元素有:a b span img input select strong(强调的语气)
块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素:br hr img input link meta

介绍一下你对浏览器内核的理解?
浏览器内核分为渲染引擎和JS引擎

常见的浏览器内核有哪些?
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支]

cssSprite是什么 ?有什么优缺点?
精灵图是一种网页图片的应用技术,它把背景图片都整合到一张图片上,再利用background-position进行图片定位,优点是有效的减少了http请求,减少了图片的字节,缺点是合成比较麻烦,需要精准定位

前端页面有哪三层构成? 分别是什么? 作用是什么?
结构层由HTML负责,负责搭建页面的结构
表示层由CSS负责,负责页面的样式
行为层由JavaScript负责,负责页面的交互

css选择符有哪些?优先级算法如何计算?
标签选择符,类选择符,ID选择符,伪类选择符,相邻选择符,子代选择符,后代选择符,通配符选择符,属性选择符
优先级:
就近原则,下面覆盖上面
!important>内联>ID>类>标签

HTML中div与span区别
div是块级元素,独自占一行,宽度默认是占满父级的宽度,可以设置宽高
span是行内元素,排列在一行里,宽度是内容的宽度,不能设置宽高

css实现垂直水平居中
定位,top和left设置50%,再通过transform的translate(-50%, -50%)设置实现垂直水平居中
定位,top和left设置50%,再通过margin-top和margin-left自己宽高的一半设置实现垂直水平居中
定位,top,bottom,left,right都设置为0,再通过margin设置为auto实现垂直水平居中
flex布局,先设置justify-content为center实现水平居中,再设置align-items为center实现垂直居中
table布局,设置父元素display为table-cell,再设置vertical-align为middle实现垂直居中,把自己display设置为inline-block,父级设置text-align为center实现水平居中

alt和title分别表示什么含义以及具体应用体现
alt是代替图片的文字,图片不能显示时会显示alt,title是鼠标指上去时的解释文字。
看似简单的问题其实要想系统的回答出来也不是很容易,希望大家学完之后多多总结,能用自己的话描述出来。



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马