基础面试题——HTML/CSS
1. 常用那几种浏览器测试?有哪些内核(Layout Engine)?
- (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。
- (Q2)内核:Trident,Gecko,Presto,Webkit。
2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
- (Q1)行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。
- (Q2)兼容性:display:inline-block;*display:inline;*zoom:1;
3.清除浮动有哪些方式?比较好的方式是哪一种?
- (1)父级div定义height。
- (2)结尾处加空div标签clear:both。
- (3)父级div定义伪类:after和zoom。
- (4)父级div定义overflow:hidden。
- (5)父级div定义overflow:auto。
- (6)父级div也浮动,需要定义宽度。
- (7)父级div定义display:table。
- (8)结尾处加br标签clear:both。
4.box-sizing常用的属性有哪些?分别有什么作用?
- (Q1)box-sizing: content-box|border-box|inherit;
- (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
5.Doctype作用?标准模式与兼容模式各有什么区别?
- (Q1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
- (Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
6.HTML5 为什么只需要写 <!DOCTYPE HTML>?
- HTML5不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
- 而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
7.页面导入样式时,使用link和@import有什么区别?
- (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
- (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
- (3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
8.介绍一下你对浏览器内核的理解?
- 主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
- JS引擎则:解析和执行javascript来实现网页的动态效果。
- 最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
9.html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
- (1)绘画 canvas;
- (2)用于媒介回放的 video 和 audio 元素;
- (3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
- (4)sessionStorage 的数据在浏览器关闭后自动删除;
- (5)语意化更好的内容元素,比如 article、footer、header、nav、section;
- (6)表单控件,calendar、date、time、email、url、search;
- (7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
10.简述一下你对HTML语义化的理解?
- 用正确的标签做正确的事情。
- html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
- 即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
- 使阅读源代码的人对网站更容易将网站分块
转载于:https://www.cnblogs.com/Teacher-chang/p/5613304.html
基础面试题——HTML/CSS相关推荐
- 前端基础面试题(HTML + CSS)
前端基础面试题(HTML + CSS) 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变 ...
- css手型指针_前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
- css视频教程面试题,前端基础面试题(CSS类)
一.用几种方式实现水平垂直居中 1.居中元素定宽高(其中像素都代表居中元素高度的一半) absolute + 负margin .parent{ position: relative; } .child ...
- html不同域名显示不同内容,前端基础面试题(HTML+CSS部分)
1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中im ...
- 前端基础:100道CSS面试题总结
前言 CSS 是层叠样式表(Cascading Style Sheets)的简称.CSS 主要作用是美化网页.布局页面.CSS 规则主要由两个主要部分构成:选择器及一条或多条声明.在前端基础面试中,C ...
- 34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录 一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...
- css 动态rem_【面试题】CSS知识点整理(附答案)
目录 伪类和伪元素 实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
- 常见JavaScript基础面试题上(附答案)
常见JavaScript基础面试题上(附答案) 1.JavaScript有哪些垃圾回收机制? 有以下垃圾回收机制. 标记清除( mark and sweep) 这是 JavaScript最常见的垃圾回 ...
- PHP基础题带详细答案,PHP基础语法试题(一)答案版.docx
PHP基础语法试题(一)答案版 关于服务器.浏览器.PHP解释器的说法中,正确的有( ).A. Web浏览器只解析HTML.CSS.JavaScript代码B. PHP文件,只能被Apache服务器解 ...
最新文章
- 2013微软 MVP 社区巡讲
- Android开发究竟该如何学习,成功入职字节跳动
- 《Neural networks and deep learning》概览
- 智能判断图片中是否存在某物体_智能家居组件漫谈——人体传感器
- Java----代码优化篇
- MyCat分布式数据库集群架构工作笔记0019---高可用_单表存储千万级_海量存储_水平分表
- /bin、/sbin、/usr/bin、/usr/sbin目录的区别
- WPS配置工具参数 ksomisc.exe
- python写出租车计费系统_出租车计费系统设计 Java
- 转载--卷积神经网络卷积层池化层输出计算公式
- 导入、build elasticsearch源码异常
- 几款常用的Git图形化工具
- Docker下载redis镜像
- LeetCode刷题指南
- 美味冰皮月饼的做法 月饼的做法
- 【数据库】MySQL入门
- java ocx,Eclipse使用ActiveX控件(OCX)开发Java程序
- 矩阵指数(The Exponential of a Matrix)
- MyBatis入门学习(二)
- CVE-2014-4113:飓风熊猫(HURRICANE PANDA)Win64bit提起权0day破绽
热门文章
- 零基础学前端可行吗?要如何学习呢?
- 女孩子适合学习前端开发吗?
- 双对数坐标系matlab绘图,EXCEL自动计算液塑限并绘制图表至双对数坐标系.doc
- java画笔覆盖在界面_Java画笔的简单实用方法
- python读取matlab矩阵_matlab、python中矩阵的互相导入导出方式
- 如何修改influxdb表结构_influxdb基本操作
- pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
- oracle 审计用户登录信息,Oracle预警用户登录锁定、过期及其审计信息
- C语言学习笔记----sizeof()的使用
- 使用JDBC把Java连接到数据库