最新动态
HTML+CSS面试题汇总(持续更新)
2024-11-23 04:15

先注明一下题目来源,剑哥的大家如果有兴趣可以去github上答题

HTML+CSS面试题汇总(持续更新)

 

1、 页面导入样式,使用link与@import有什么区别? 

  a、从属关系:link是html标签,@import是css提供的

  b、加载差异:页面加载时,link会同事加载;而@import引入的css会在页面加载完成后加载  

  c、兼容性: link没有兼容问题,@import不兼容ie5一下的浏览器

  d、link可以通过js操作dom插入link标签改变样式,而@import不能

 

2、.描述块级元素与行内元素的区别?写出五个块级元素及五个行内元素?img是块级元素还是行内元素?怎么指定元素以块级元素展示?

  a 区别

   内元素会在一条直线上排列,水平方向排列;块级元素各占据一行,垂直方向排列

      块级元素可以包含行内元素和块级元素,行内元素不能包含块级元素,只能包含文字或其它行内元素

   行内元素设置width,height无效,margin上下无效,padding上下无效

  b 列举

   行内元素: span,a, em, strong, i, input, select

   块级元素:div,ul,ol, li, h1-h6,p

  c img和input属于行内替换元素,height/width/padding/margin均可用。效果等于块元素

  d display:block;

 

3、 H5有哪些新特性?

  a 语义化标签: header,footer,section,nav,aside,article

  b 增强型表单:input新增多个实用type

  c 新增表单元素: datalist,keygen, output

  d 新增表单属性:placehoder,require,min,max

  e 音频,视频: video,audio

  f canvas,地理定位,拖拽

  g 本地存储: localStorage---没有时间限制的数据存储,sessionStorage---针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除

  h 新事件: onresize, onscroll, onerror, onplay,onpause,ondrag,onmousewheel

  i webSocket: 单个tcp链接上的全双工协议

 

4、 cookie,localStorage,sessionStorage的区别

特性 cookie localStorage sessionStorage 存储大小 4k 5M 5M 数据有效期 cookie在设置的有效期内保存,超过有效期自动清理 缓存数据永久有效,可手动清除 当前会话有效,关闭页面或浏览器会自动清除 与服务器通讯 cookie会参与服务器的通信,每次都会携带在http的头部信息中 不参与通信 不参与通信 作用域区别   不同浏览器不能共享localStorage,sessionStorage中的数据 相同浏览器不同页面可以共享相同的localStorage(页面属于相同的域名及端口),但是不同页面及标签间不能共享相同的sessionStorage

 

5 、css选择器有哪些?优先级?

  a.通配符选择器(*):用来选择所有元素,或者某个元素的所有子元素

  b.元素选择器(E):常见,最基本的选择器

  c.id选择器(#ID):id选择器只能选择页面中的唯一一个ID

  d.class选择器(.class):类选择器会选择页面中class名为指定名的所有标签,组成一个类数组

  e.后代选择器(E F):E为父元素,F为子元素

  f.子元素选择器(E>F):使用大于号 “>”指定

  g.相邻选择器(E+F) : 选择一个指定元素的兄弟元素

  h.选择器优先:!important > 内联 > ID选择器 > class选择器 > 标签选择器

 

6 、什么叫css盒模型?有几种盒模型?margin与padding的区别?

  css盒模型是css技术的一种思维模式。每个盒模型有内容(content),填充(padding),边框(border),外边距(margin)组成 

  css盒模型有两种,IE盒模型和w3c标准盒模型,其中IE模型的width=content+padding+border,而标准盒模型width=content

  margin是自身容器边框到另一个容器容器边框的距离,就是容器的外边距

  padding是自身容器边框到自身内容之间的距离,是为内边距

 

7、Doctype作用?标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

  a、告诉浏览器解析器以什么文档标准来解析文档,DOCtype不存在或者编写错误会以兼容模式来呈现

  b、  标准模式下排版和js运行模式都以浏览器支持的最高标准运行

    兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为已防止页面无法工作

  c、常用的Docytpe有:html5、htm4.1 strict、html4.1 transitional、html4.1 frameset

 

8、说说你对语义化的理解

  根据内容的结构化使用适合的语义化标签,让浏览器的爬虫和机器更好的解析,同时增加代码的可读性及可维护性

  

9、html与xhtml的区别?

  xhtml必须被正确地嵌套

  xhmtl便签必须小写

  xhtml空标签也必须被关闭

  xhtml文档必须有根元素<html></html>

10、css3新增伪类选择器

  a、E:not(ele) 除了ele以外的都选中,常用于除最后一个li外就下边框 ---ul li:not(:last-of-type)

  b、E:root 获取根元素---:root {background:red}

  c、E:first-child 第一个子元素;E: last-child 最后一个子元素; E:only-child 判断是否是独生子,如果是就选中

  d、E:nth-child(n) 选中第n个元素,n从1开始;n也可以是表达式,如2n+1;可以配合odd(奇数),even(偶数)使用

  e、E:nth-last-child(n),与E:nth-child(n)用法一样,但是是从末尾开始计数的,就是倒数 ;

  f、以上cde所述选择器都会受到其它元素的影响,例如父元素的第n个元素不是指定元素,就选不了了

  g、E:first-of-type在父元素下查找第一个E;E:last-of-type在父元素下查找最后一个E;E:only-of-type判断是否是独生子,如果是就选中;

  h、E:nth-of-type(n) 与nth-child(n)一样,不过不会受到其它元素影响

  i、E:nth-of-last-type 与E:nth-of-type(n)相反,是倒数计数

  j、以上ghi所述选择都不会受到其它元素影响

  k、E:empty 选中一个空元素,里面什么都没有,包括空格

  l、E:checked  匹配被选中的表单,radio或者CheckBox

  m、E:enabled,E:disabled  匹配input的正常状态和不可操作状态

 

11. div+css布局的好处

 

  • 代码精简,且结构与样式分离,易于维护
  • 代码量减少了,减少了大量的带宽,页面加载的也更快,提升了用户体检
  • 对seo搜索引擎更加友好,且H5又新增了许多语义化标签更是如此
  • 允许更多炫酷的页面效果,丰富了页面
  • 符合W3C标准,保证网站不会因为网络应用的升级而淘汰

 

12. 盒模型及如何转换

 

  • box-sizing: content-box (W3C盒模型,又名标准盒模型): 元素的宽高大小表现为内容的大小
  • box-sizing: border-box(IE盒模型,又名怪异盒模型):元素的宽高表现为内容 + 内边距 + 边框的大小

 

13. 实现水平垂直居中的几种方式

 

  • flex布局

 

 

  • 绝对定位布局

 

 

 或者

 

 

13、flex的兼容性怎么样??

 

  • IE9(包括IE9)以下不支持,IE10~11部分支持,但是需要-ms-前缀
  • 其他主流浏览器包括安卓iOS基本都支持了

 14、font样式的便捷式写法

  font: font-style font-variant font-weight font-size/line-height font-family

    以上就是本篇文章【HTML+CSS面试题汇总(持续更新)】的全部内容了,欢迎阅览 ! 文章地址:http://www.tpjde.com/quote/969.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 推平第移动站 http://mip.tpjde.com/ , 查看更多