• html和css面试题


    HTML

    1.   <img>标签上title属性与alt属性的区别是什么?

    title:当光标移动到图片上,显示title属性

    alt:图片不显示,显示alt属性

    2.   分别写出以下几个HTML标签:文字加粗、下标、居中、字体

    文字加粗:b strong       扩充  倾斜标签  i     em     下划线   u   ins    删除线   s    del  

    下标:sub         上标     sup 

    居中:center

    字体:font    <basefont>

    3.   请说说你对标签语义化的理解?

    让合适的标签作合适性,利于搜索引擎搜索

         a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

         b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

         c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

         d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

    4.   Doctype作用严格模式与混杂模式如何区分?它们有何意义?

          声明文档类型   处理兼容性 渐进增强 优雅降级

    <!DOCTYPE> 标签位于文档的开头,用来说明当前文档的类型。

    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。(渐进增强

    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。(优雅降级)

    5.你知道多少种Doctype文档类型?

    过渡的(Transitional)、严格的(Strict)和框架的(Frameset)

    6.   HTMLXHTML——二者有什么区别

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

    b.XHTML元素必须被关闭。

    c.标签名必须用小写字母。

    d.XHTML文档必须拥有根元素。

    7. iframe的优缺点?

    就是个双标签  可以设置宽高src属性 显示另一个页面内容   嵌套

    优点:

    a.解决加载缓慢的第三方内容如图标和广告等的加载问题

    b.iframe无刷新文件上传

    c.iframe跨域通信

    缺点:

    a.iframe会阻塞主页面的Onload事件

    b.无法被一些搜索引擎索引到

    c.页面会增加服务器的http请求

    d.会产生很多页面,不容易管理。

    8. 请阐述table的缺点

    a.太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接

    的损失就是大大增加了冗余代码量。

    b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td

    c.代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

    d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺

    序混乱。

    e.不够语义

    9. 简述一下srchref的区别

    src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。

        

    srcsource的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置

     

    hrefHypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

     

    CSS

    1.   谈谈你对CSS布局的理解

    常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。

    2.   请列举几种可以清除浮动的方法(至少两种)

    1、给父元素加overflow:hidden

    2、给浮动元素加clear:left   clear:right   clear:both

    3、父元素加clearfix::after{content:‘’;display:block;clear:both}

    4、给父元素加

    clearfix::after;clearfix::before{content:‘’;display:table;clear:both}

    3.   请列举几种隐藏元素的方法

    1、display:none; 2、opacity:0;3、visibility:hidden;

      扩充:

    c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。

    e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。

    f. HTML5 hidden attributehidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态

    g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。

    h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素消失在页面中。

    4. 如何让一段文本中的所有英文单词的首字母大写

           text-transform:capitalize; 首字母大写

    none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )

    5. 请简述CSS样式表继承

    CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:

    文本相关:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,color,text-…

    列表相关:list-style-image,list-style-position,list-style-type,list-style

    6. 请简述CSS的选择器

    基本选择器:类名选择器、id选择器、标签选择器、多类名选择器、通配符选择器

    复杂选择器:子代选择器、后代选择器、交集选择器、并集选择器

    伪类选择器:a:link、a:hover、a:visite、a:active

    7. CSS伪类与CSS伪对象的区别

    根本区别在于:它们是否创造了新的元素(抽象)

    伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

    伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中

    8. 请简述CSS的权重规则

           !Important>style>id选择器>类名选择器>标签选择器>通配符选择器

           元素本身的样式>继承的样式

      继承或者*的贡献值0,0,0,0

      每个标签的贡献值0,0,0,1

      每个类的贡献值0,0,1,0

    每个id的贡献值0,1,0,0

    每个行内样式的贡献值1,0,0,0

    每个!important贡献值重要的无穷大

    9. 请写出多种等高布局

           a.假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,

    从而实现一种等高列的假像

    b.给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大

    高度撑大其他的容器高度

    c.创建带边框的两列等高布局:用border-left来做,只能使用两列。

    d.使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、

    下padding和负的上、下margin,并在所有列外面加上一个容器,设置

    overflow:hiden把溢出背景切掉

    e.使用边框和定位模拟列等高:但不能使用在多列

    f.模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

    10. CSS样式中常使用pxem,各有什么优劣,在表现上有什么区别?

    px是相对长度单位,相对于显示器屏幕分辨率而言的。

    em是相对长度单位,相对于当前对象内文本的字体尺寸。

    Rem是相对长度单位,相对于根元素文本的字体尺寸

    11. CSS link @import 的区别是什么?

    a.link属于HTML标签,而@import是CSS提供的,且只能加载CSS

    b.页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加

    载完再加载

    c.import只在IE5以上才能识别,而link是HTML标签,无兼容问题

    d.link方式的样式的权重高于@import的权重

    e.当使用Javascript控制DOM去改变样式的时候,只能使用link方式,因

    为@import眼里只有CSS,不是DOM可以控制

    12. positionabsolutefixed共同点与不同点

          absolute和fixed脱离标准流,不占位置

           absolute: 父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。

           fixed:相对于浏览器窗口定位

    13. position的值, relativeabsolute分别是相对于谁进行定位的?

    relative:相对于元素本身定位

    absolute:父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。

    14. CSS3有哪些新特性?

    CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)

    增加了更多的CSS选择器多背景rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局

    15. 为什么要初始化CSS样式?

    浏览器存在兼容问题

    16. 解释下 CSS sprites原理,优缺点

           将背景图片放到一张图上,利用background-image、background-repeat,,background-position等样式对所需图片进行定位

    17. 解释下浮动和它的工作原理?

           浮动的元素会脱离标准流,移动到设置好的位置上

    浮动元素碰到包含它的边框或者浮动元素的边框停留。

    18. 浮动元素引起的问题

    a.父元素的高度无法被撑开,影响与父元素同级的元素

    b.与浮动元素同级的非浮动元素会跟随其后

    c.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显

    示的结构

    19. 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?(未学)

           如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:

      以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。

      原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

      解决方法:使用LINK标签将样式表放在文档HEAD中。

    20 :link:visited:hover:active的执行顺序是怎么样的?

           :link:未访问链接

      :visited:已访问的链接

           :hover:鼠标移动到链接上

           :active:鼠标选定链接

    21 经常遇到的浏览器兼容性有哪些?如何解决?

    a.浏览器默认的margin和padding不同

    b.IE6双边距bug

    c.在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给

    元素设置默认的行高的高度导致的

    d.min-height在IE6下不起作用

    e.透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用opacity:0.6

    f.input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解

    析input样式时的BUG(优先级问题),在IE6下无效

    22 有哪项方式可以对一个DOM设置它的CSS样式?

    1、        行内样式

    2、        内联样式

    3、        外联样式

    23 什么是外边距重叠?重叠的结果是什么?

           外边距重叠有两种情况:1、两个相邻块元素,一个设置下外边距,一个设置上外边距,外边距发生重叠,它的值为两者的最大值;2、当父块状元素没有边框和上内边距时,父块状元素与子块状元素的上外边距发生合并,值为两者上外边距的最大值

    24 rgba()opacity的透明效果有什么不同?

           opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素

    的颜色或其背景色。

  • 相关阅读:
    题解 P5320
    Codeforces 1500F
    三个 AGC D(AGC037D、AGC043D、AGC050D)
    Atcoder Regular Contst 084 D
    DG-基础知识点整理
    MySQL-数据恢复场景实验
    MySQL-查看Galera集群状态
    MySQL-运行日志切割
    MySQL-生产环境删除大表或大量binlog策略
    MySQL-基于(MySQL 5.7)NDB中启用共享权限表
  • 原文地址:https://www.cnblogs.com/guirong/p/13510336.html
Copyright © 2020-2023  润新知