各大厂前端面试题合集—html 和 css

努力的小葵
163 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

html5

1）标签增删

  • 8个语义元素 header section footer aside nav main article figure

  • 内容元素mark高亮 progress进度

  • 新的表单控件calander date time email url search

  • 新的input类型 color date datetime datetime-local email

  • 移除过时标签big font frame frameset

2）canvas绘图，支持内联SVG。支持MathML

3）多媒体audio video source embed track

4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件

5）web存储。localStorage、SessionStorage

css3

CSS3边框如border-radius，box-shadow等；

CSS3背景如background-size，background-origin等；

CSS3 2D，3D转换如transform等；CSS3动画如animation等。

文本省略

// 单行
.line{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 多行
.multi-line {
    display: -webkit-box;
    width: 50px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

html5 新属性

placrholder 占位属性

required 必填属性

autofocus 自动聚焦属性

multiple 多选属性

IMG_7032.PNG

浏览器内核

  • Trident———IE 
  • Gecko———Firefox 
  • WebKit———safari 
  • Chromium/blink ———chrome 
  • Presto———opera 

🌟盒模型

在标准模型中，盒模型的宽高只是内容（content）的宽高，

而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

box-sizing:content-box  //默认值

box-sizing:border-box    //告诉浏览器border和padding是包含在width中的

bz.png

ie.png

href 和 src 的区别

  • href (Hypertext Reference)

     超文本引用href这个属性指定web资源的位置，从而定义当前元素（如锚点a）或当前文档（如链接）与目标锚点或目标资源之间的联系

  • src (Source)源

     这个属性是将资源嵌入到当前文档中元素所在的位置。

src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

例如：

<a href="[www.xxx.com](http://www.xxx.com/)">
    <img src="1.jpg"\>
</a>

a标签里面的内容是一张图片，a标签加上href属性将图片链接到了www.xxx.com这个网站，但并未替换a标签里面的内容，而img标签的src属性则是将这个标签完全替换成了src里面的资源。

flex布局

flex.png

🌟em, rem, px, rpx的区别

px是像素单位，像素是相对于显示器屏幕分辨率而言的 

em是根据父元素来设置字体大小的

rem是相对于根元素的html设置字体大小

rpx是根据屏幕宽度自适应（小程序常用单位）

说一下html5的drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

🌟对html5语义化的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

xhtml和html的区别

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

最主要的不同：

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

  • XHTML 元素必须被关闭。

  • 标签名必须用小写字母。

  • XHTML 文档必须拥有根元素。

iframe是什么？有什么缺点？

  • 定义：iframe元素会创建包含另一个文档的内联框架

    TML内联框架元素() 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

  • 提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器

  • 缺点：

    • 会阻塞主页面的onload事件

    • 搜索引擎无法解读这种页面，不利于SEO

    • iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

Doctype的作用 & 严格模式和混杂模式的区别

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。

混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

avatar
文章
阅读
粉丝