html+css面试题集锦(一)

html+css面试题集锦(一)1、对WEB标准以及W3C的理解与认识?web标准简单来说可以分为结构、表现和行为,其中结构主要是有HTML标签组成,或者通俗点来讲,在页面Body中我们写入的标签都是为了页面的结构,表现指css样式表,通过css可使页面的结构标签更具美感,行为是指页面和用户具有一定的交互,同时页面结构或者行为发生变化,主要是js组成。web标准一般是将该三部分独立分开,使其更具有模块化,但一般行为发生变…

大家好,又见面了,我是你们的朋友全栈君。

1、对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现和行为,其中结构主要是有HTML标签组成,或者通俗点来讲,在页面Body中我们写入的标签都是为了页面的结构,表现指css样式表,通过css可使页面的结构标签更具美感,行为是指页面和用户具有一定的交互,同时页面结构或者行为发生变化,主要是js组成。

web标准一般是将该三部分独立分开,使其更具有模块化,但一般行为发生变化时,一般伴随着结构或者表现的变化。

其中W3C对web标准提出了规范化的要求,也即是代码规范,包括:①对于结构的要求(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助),标签的字母要小写,标签要闭合,标签不允许随意嵌套。②对于css和js,尽量使用外链css样式表和js脚本,使结构,表现和行为分为三块,提高页面渲染速度,提高用户体验,尽量少用行间样式表,使结构与表现分离,标签的id和class等属性名要做到见文知意。

2、xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言;

最主要的不同:

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素:div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:content(内容),border(边框) ,margin(外边距),padding(内边距)

4.CSS引入的方式有哪些? link和@import的区别是?

①内联方式(很糟糕的书写方式)

直接在html标签中的style属性中添加css。

html+css面试题集锦(一)

②嵌入方式

在html头部中的<style>标签下书写css代码

html+css面试题集锦(一)

③链接方式

在hrml的头部的<head>标签中引入外部的css文件。

html+css面试题集锦(一)

最常见也是最推荐的引入css的方式,使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。

④导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

html+css面试题集锦(一)

两者都是外部引用CSS的方式,但是存在一定的区别:

  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

  区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

5.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和!important哪个优先级高?

html+css面试题集锦(一)

html+css面试题集锦(一)

Class 可继承  伪类A标签可以继承  列表 UL LI DL DD DT 可继承优先级就近原则,样式定义最近者为准载入样式以最后载入的定位为准

优先级为!important > [ id > class > tag ] 

 !Important 比 内联优先级高。

6.前端页面有哪三层构成,分别是什么,作用是什么?

结构层HTML,表示层CSS,行为层JS

网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”

网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

7.IE6 BUG的解决方法

1.双边距BUG float引起的 使用display:inline;

2.3像素问题 使用float引起的 使用dislpay:inline -3px 或者

margin-right:-3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover

active;

4.Ie z-index问题 给父级添加position:relative;

5.Png 透明 使用js代码改;

6.Min-height 最小高度 !Important 解决’;

7.select 在ie6下遮盖 使用iframe嵌套;

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使

用over:hidden,zoom:0.08 line-height:1px);

8.HTML5应用程序缓存为应用带来什么优势。

     应用程序缓存为应用带来三个优势:

     1)离线浏览:用户可在应用离线时使用它们。

     2)速度:已缓存资源加载得更快。

     3)减少服务器负载:浏览器将只从服务器下载更新过或更改过的资源。

9.​​​​​​​谈谈对响应式布局的看法。

     响应式布局有缺点也有优点。

     优点:面对不同分辨率设备,灵活性强,能够快捷地解决设备显示适应问题。

     缺点:兼容各种设备时所需工作量大、效率低下、代码累赘,会隐藏无用的元素,加载时间延长,其实这是一种折中性质的十设计解决方案,由于多方面元素影响而达不到最佳效果,在一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138487.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • emwin显示中文的方法_emwin中文手册

    emwin显示中文的方法_emwin中文手册emwin显示中文

  • slic超像素分割算法_hdr算法

    slic超像素分割算法_hdr算法原文出自:https://blog.csdn.net/Fighting_Dreamer/article/details/77170859SLIC与目前最优超像素算法的比较RadhakrishnaAchanta,AppuShaji,KevinSmith,AurelienLucchi,PascalFua,andSabineS¨usstrunk摘要近年来,计算机视觉应用越来越依赖…

    2022年10月28日
  • SLAM算法总结——经典SLAM算法框架总结

    SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结SLAM算法总结——经典SLAM算法框架总结从研究生接触SLAM算法到现在也有

  • 旌扬机器人_“http://club.liangchanba.com/”搜索蜘蛛、机器人模拟抓取结果–站长工具…

    旌扬机器人_“http://club.liangchanba.com/”搜索蜘蛛、机器人模拟抓取结果–站长工具…量产部落_量产吧论坛_量产之家_量产网_U盘之家_固态硬盘之家_U盘量产工具_SSD量产工具_固态硬盘开卡软件-提供量产工具和相关资料下载-量产吧论坛-专业U盘/SSD量产交流网站量产部落,量产吧论坛,量产之家,量产网,U盘之家,固态硬盘之家,U盘量产工具,SSD量产工具,固态硬盘开卡软件量产部落(LCB.CLUB)提供量产工具和相关资料下载请登录后使用快捷导航没有帐号?加入部落…

  • linux tar压缩文件命令,tar打包压缩文件命令

    linux tar压缩文件命令,tar打包压缩文件命令tar命令tar命令用于将多个文件合成1个文件,wiki中把这个命令和cpio、shar等一起叫做archive文件,个人理解是归档,合成一个文件,后就可以用gzip、bz2、xz等工具进行压缩,同时也能方便在各个计算机间传输,有点类似windows下共享的zip文件。wiki上这个图比较形象,tar把零散的文件合拢,gzip把合拢的文件压缩。一、命令语法tar[选项…][FILE]…..

  • 微信小程序列表页面_微信发现没有小程序

    微信小程序列表页面_微信发现没有小程序尽量不要用缓存去写效果展示:点击编辑,进入编辑页第一页编辑按钮:<viewclass=”bj-btn”bindtap=”redactGroup”data-id=”{{传递的id}}”>编辑</view>redactGroup方法:options.currentTarget.dataset.前面自定义的名字redactGroup(options){letid=options.currentTarget.dataset.id;…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号