常见的CSS和HTML面试题

1. 常用那几种浏览器测试?有哪些内核(Layout Engine)?

浏览器:IE,Chrome,FireFox,Safari,Opera。

内核:Trident,Gecko,Presto,Webkit。

2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)

  • 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。
    块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。
  • 兼容性: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常用的属性有哪些?分别有什么作用?

box-sizing: content-box|border-box|inherit;

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.Doctype作用?标准模式与兼容模式各有什么区别?

<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和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/dwj88/p/7439539.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/268551.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

理解快速生成树协议(RSTP)(二)

RSTP引进了新的BPDU处理以及一种新的拓扑结构改变机制。即使没有从根桥处接收到任何信号&#xff0c;每个网桥在每次“hello时间周期中”中都生成BPDU。BPDU扮演了在网桥间进行消息通知的角色。如果一个网桥不能从临近网桥处收到BPDU&#xff0c;它就会认为与这个网桥失去了连接…

C语言位运算

一、位运算符&#xff23;语言提供了六种位运算符&#xff1a;& 按位与| 按位或^ 按位异或~ 取反<< 左移>> 右移1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时&#xff0…

c语言运行后没生成exe,这个程序怎么运行?为什么显示没有exe??

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include #include #include #include #include #include void main(){void welcome();void over(int x);void state();void score(int x);void hp(int x);welcome();state();char key;int x, y,a,m;int sc 0,wc 0;srand(time(NU…

网络工程师之广域网必胜篇一

完全没有必要看网工的教程&#xff0c;仔细阅读完以下篇幅&#xff0c;基本上能够应付网工的考试了&#xff0c;注意&#xff0c;一定要是仔细阅读。<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />广域网广域网&#xff08;WAN…

POJ2243 Knight Moves —— A*算法

题目链接&#xff1a;http://poj.org/problem?id2243 Knight MovesTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 14500 Accepted: 8108Description A friend of you is doing research on the Traveling Knight Problem (TKP) where you are to find the short…

c语言多重括号,大佬在吗,我用C写了一个去多重括号的函数,结果。。。

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#include #include #include "malloc.h"char * changeOrder(char *s);struct Node{char *data;struct Node * link;};struct Node * top1 NULL;struct Node * top2 NULL;void Push1(char *s){struct Node * temp (str…

mac配置telnet

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" brew install telnet

linux下的DNS服务器详解

DNS&#xff1a;Domain Name System 域名管理系统 域名是由圆点分开一串单词或缩写组成的&#xff0c;每一个域名都对应一个惟一的IP地址&#xff0c;这一命名的方法或这样管理域名的系统叫做域名管理系统。 大家都知道&#xff0c;当我们在上网的时候&#xff0c;通常输入的是…

c语言一个循环重新输入密码,想程序高手求助--用C语言来编辑一个输入密码的程序...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼/*--------实现密码的隐式输入-----------------*/inputpw(char *password,int len) /*len为密码长度*/{int i0; /*密码数组索引值,同时也表示记录已显示*的数目*/char ch;fflush(stdin); /*清洗流&#xff0c;以防妨碍密码正确输入…

怎样玩转千万级别的数据

作者&#xff1a;Sam Xiaowww.cnblogs.com/xcj26/p/3305789.html如有好文章投稿&#xff0c;请点击 → 这里了解详情大数据处理是一个头疼的问题&#xff0c;特别当达不到专业DBA的技术水准时&#xff0c;对一些数据库方面的问题感到无奈。所以还是有必要了解一些数据库方面的技…

c语言多维数组基础知识,C语言基础第7章多维数组.ppt

C语言基础第7章多维数组7.2 二维数组及多维数组二维数组的定义定义方式&#xff1a;  数据类型 数组名[常量表达式][常量表达式]&#xff1b;;二维数组理解;二维数组元素的引用形式&#xff1a; 数组名[下标][下标]二维数组元素的初始化分行初始化&#xff1a;;程序举例;例 …

关于待机、休眠、睡眠的区别和优缺点

Windows中很早就加入了待机、休眠等模式&#xff0c;而Windows Vista中更是新加入了一种叫做睡眠的模式&#xff0c;可是很多人还是习惯在不使用电脑的时候 将其彻底关闭。其实充分利用这些模式&#xff0c;我们不仅可以节约电力消耗&#xff0c;还可以用尽可能短的时间把系统恢…

如何制作pem公钥证书和私钥证书

1.先下载openssl 下载地址 https://pan.baidu.com/s/1kUK1MJX 2.下载之后保存在某个盘里&#xff08;例如在F:/cer/openssl&#xff09; 3.打开windows的 cmd&#xff0c;切换到目录 F:/cer/openssl/openssl\bin 4.生成商户RSA私钥(执行如下命令) openssl genrsa -out rsa_…

苏州大学电子信息学院C语言,电子信息学院

专著Z. Zhu and A. K. Nandi, (2014) Automatic Modulation Classification - Principles, Algorithms, and Applications. Wiley (to be published in January 2015)期刊论文Z. Zhu, A. K.Nandi, (2014) Blind Digital Modulation Classification using Minimum Distance Cent…

网络协议集合2

这张是更加详细的网络协议图&#xff0c;希望会对学习有一定作用。学习网络知识&#xff0c;一定要打好框架&#xff0c;做到心中有“图”&#xff0c;通常我们只是接触TCP/IP协议&#xff0c;但对于其他体系和结构&#xff0c;也应当有所了解&#xff0c;这样能更好地理解网络…