【前端十五道面试题第二周 html和css】

20 篇文章 1 订阅

目录

1.display的值和作用

2.html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?

3.display:none和visibility:hidden的区别

4.iframe的优缺点

5.fixed和absolute的区别?

6.CSS有哪些单位?

7、CSS优先级如何排序?

8.input与textarea的区别

9.title与h1的区别、b与strong的区别、i与em的区别?

10.src与href有什么区别

11.如何让超出宽度的文字显示为省略号?

12.HTML全局属性(global attribute)有哪些

13.cookies,sessionStorage和localStorage的区别

14.请阐述table的缺点

15、CSS选择器(符)有哪些?



1.display的值和作用

2.html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?

1、新特性

语义化标签:article、footer、section、header、nav
视频和音频:video、audio
canvas画布:图形容器、必须使用js脚本来绘制图形

2、移除的元素

<basefont> 默认字体
<font>     字体标签
<center>   水平居中
<u>        下划线

3、处理html5新标签与浏览器兼容性问题:

(1)、使用document创建标签
(2)、a)使用html5shim:在<head>中调用以下代码:
 

        1.<!--[if lt IE 9]>
        2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        3.<![endif]-->

 b)使用kill IE6: 在</body>之前调用以下代码:
       

 1.<!--[if lte IE 6]>
        2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
        3.<![endif]-->

3.display:none和visibility:hidden的区别

display与元素的隐藏:

如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。    

visibility与元素的隐藏:

给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

4.iframe的优缺点

iframe的优点:

① iframe能够原封不动地把嵌入的网页展现出来。

② 如果有多个网页调用iframe,只需要修改iframe的内容,就可以实现对调用iframe的每一个页面内容的更改,方便快捷。

③ 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用性。

④ 如果遇到加载缓慢的第三方内容,如图标和广告等,可以用iframe来解决。


iframe的缺点:

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

② 在几个框架中都出现上下、左右滚动条时,这些滚动条除了会挤占已经非常有限的页面空间外,还会分散访问者的注意力。

③ 使用框架结构时,必须保证正确设置所有的导航链接,否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下会导致链接死循环。

④ 很多的移动设备(PDA手机)无法完全显示框架,设备兼容性差。
 

5.fixed和absolute的区别?

区别很简单:

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动


可以这么理解,fixed:固定在当前window不动, absolute:会随参照对象元素的高度和宽度变化而变化


一般fixed用在遮盖层和固定在页面某个位置,如固定在顶端的菜单栏,又如弹出提示框居中显示
 

6.CSS有哪些单位?

7、CSS优先级如何排序?

优先级如下:

!important>style(内联)>ld(权重100)> class(权重10)>标签(权重1)。同类别的样式中,后面的会覆盖前面的。

8.input与textarea的区别

input是单行文本框,不会换行。通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。value属性指定初始值,Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高,但是也不会增加行数。

textarea 是多行文本输入框,文本区中可容纳无限数量的文本,无value属性,其中的文本的默认字体是等宽字体(通常是 Courier) ,可以通 过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
 

9.title与h1的区别、b与strong的区别、i与em的区别?

strong标签有语义,是起到加重语气的效果,而b标签是没有的,b标签只是一个简单加粗标签。b标签之间的字符都设为粗体,strong标签加强字符的语气都是通过粗体来实现的,而搜索引擎更侧重strong标签。

title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取有很大的影响

i内容展示为斜体,em表示强调的文本
 

10.src与href有什么区别

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

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

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

11.如何让超出宽度的文字显示为省略号?

overflow:hidden;

white-space:nowrap; 

text-overflow:ellipsis。

12.HTML全局属性(global attribute)有哪些

13.cookies,sessionStorage和localStorage的区别

14.请阐述table的缺点

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量
b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱
e. 不够语义
 

15、CSS选择器(符)有哪些?

(1)id选择器(#myld)。

(2)类选择器( .my ClassName)。

(3)标签选择器(div,p,h1)

(4)相邻选择器(h1+p)

(5)子选择器(ul>li)

(6)后代选择器(li  a)

(7)通配符选择器(*)

(8)属性选择器( button[disabled="true"])。

(9)伪类选择器( a:hover、 li:nth- child)表示一种状态。

(10)伪元素选择器(li:before、“:after”、“:first- letter”、“:first-line”、“;selecton”)表示文档某个部分的表现。

注意:在CSS3规范中,为了区别伪元素和伪类,CSS3建议伪类用单冒号“:",伪元素用双冒号"::"。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值