HTML+Css面试题个人归纳

最新推荐文章于 2024-08-09 18:20:18 发布

"William'_

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量192

点赞数 2

分类专栏：问答文章标签： HTML Css

本文链接：https://blog.csdn.net/weixin_44731536/article/details/98642778

版权

问答专栏收录该内容

9 篇文章 1 订阅

订阅专栏

web前端面试题及答案

HTML基础问题归纳

1、常用块级元素标签
·HTML：address、center 地址文字；
h1 ~ h6 标题1-6级； hr 水平分割线； p 段落；
pre 预格式化； blockquote 段落缩进（前后5个字符）； marquee 滚动文本；
ul 无序列表； ol 有序列表； dl 定义列表； dd 定义列表中条目
table 表格； tr 表格行；td 表格列；th 表格头；
form 表单； div 块级自定义标签
·HTML5：header 头部标签；footer 底部标签；
section 定义文档中的节； article 定义独立的自包含内容…
还有一些没有列举的是在日常代码中不是非常常用

2、常用行内元素标签
（1）span、img、a、label(标签)、code(文本格式化-代码段)、input、abbr(指示简称或缩写)、em(强调文本)、b(加粗)、big、cite(表示引用-斜体)、i(斜体文本)、q(定义短的引用)、textarea、select、small、sub(定义下标文本)、sup(定义上标文本)，strong(加粗文本)、u(下划线文本)；
button（display：inline-block）；
（2）有一些特别的行内元素可以设置宽高替换元素：
<img>、<input>、<textarea>、<select>、<object>

3、HTML中缓存方式有哪些？

cookies：存储于浏览器端 的数据。可以设置 cookies 的到期时间，如果不设置时间，则在浏览器关闭窗口的时候会消失。
session：存储于服务器端 的数据。session 存储特定用户会话所需的属性和配置信息。
cookies 和 session 的区别在于：
（1）cookies 数据存放在客户的浏览器上，session 数据存放在服务器上。
（2）浏览器前端都是裸君子，没有安全可言，cookies 可能会被黑客利用作数据欺骗。所以重要信息记得存 session。
（3）session 如果在生效期内量过大，会占用服务器性能。
（4）单个 cookies 保存的数据不能超过 4 K，很多浏览器限制一个站点保存最多 20 个 cookies。
sessionStorage：生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空。
localStorage：生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage 信息，否则它将会永久存在。
参考来源：掘金—jsliang

4、HTML5新标签

HTML5的类型标签

<!DOCTYPE html>

HTML5布局相关标签（上->下，左->右）
header—定义顶部区域；section—定义一个区域；
aside—定义页面侧边框内容；footer—定义底部区域。
Html5图像媒体标签
canvas—定义图形，比如图表和其他图像；
audio—定义音频内容；video—定义视频（video 或者 movie）；
source—定义多媒体资源 video 和 audio；embed—定义嵌入的内容，比如插件；
track—为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
HTML5新表单元素
datalist—定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值；
keygen—规定用于表单的密钥对生成器字段；
output—定义不同类型的输出，比如脚本的输出。
HTML5语义和结构相关新标签
nav—定义导航栏与链接区域；article—定义文章块区域；
figure—定义媒介内容的分组，以及它们的标题（配套使用figcaption来定义标题）；
dialog—定义对话框或窗口（其中可以使用dd和dt标签，表示对话框中的标题和内容）；
mark定义带有记号的文本；time定义日期或时间；
menu—定义命令的列表或菜单（可与li标签配套使用）；
hgroup—用于对网页或区段（section）的标题进行组合；
small—定义小号文本；details定义元素的细节(里面可配合标题dt和内容标签dd来使用)；
ruby— 定义注释(不认识字体注音)；
meter—定义预定义范围内的度量(有几个属性值，min="" max="" value="" low="" high=""，其中low和high是范围，当value范围超了话就会显示不同的效果)；
progress—进度条的标签(max是进度条的长度，value值就是显示的进度，用它可以进行动态的进度条)：

<progress id="jindu" max="100" value="0"></progress>进度条
<script>
    var pro = document.getElementById("jindu");
    setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
</script>

等等…详见参考：HTML5新元素

5、清除浮动有哪些方式？比较好的方式是哪一种？

(Q1)
（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。
(Q2) 比较好的是第3种方式，好多网站都这么用。

6、box-sizing常用的属性有哪些？分别有什么作用？

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

7、Doctype作用？标准模式与兼容模式各有什么区别?

(Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
(Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

8、HTML5 为什么只需要写“!DOCTYPE html”？
答：
HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

9、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

10、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
(1)渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
(2)JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

11、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

(Q1) 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;
(Q2) 　　
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim，
(Q3)
(1)在文档类型声明上
HTML声明：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
HTML5声明：<!doctype html>
(2)在结构语义上
HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id=“header”></div>，这样表示网站的头部。
**HTML5:**在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。

12、简述一下你对HTML语义化的理解？　　
答：
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO(搜索引擎优化);
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

13、如何设置超连接在新窗口打开？
将其target属性设置为_blank.

14、

Css问题归纳

1、css选择器有哪些？权重如何？

通配符：*
id选择器：#id
类选择器：.class
元素选择器：p、a、div、span等
后代选择器：div p、p span等
伪类选择器：a:hover 等
属性选择器：input[type=“text”] 等
子元素选择器：#mydiv>p、li:firth-child 等
权重：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认
参考来源：掘金—jsliang

2、Css样式中padding、margin属性不同参数个数含义？

一个值：四边填充；
两个值：上下、左右填充；
三个值：上、左右、下填充；
四个值：上、右、下、左填充。

3、定位属性的参数值包括?

relative（相对定位）；
absolute（绝对定位）；
fixed（绝对定位—固定与页面）；
static（默认值，没有定位，正常文档流）；
inherit（继承父元素position 属性的值）；
sticky（粘性定位，新属性，跳转查看详细）。

4、display:none与visibility:hidden的区别是？

使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”，即元素不加载;
而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
CSS display:none和visibility:hidden的区别
visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

5、

"William'_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML+Css面试题个人归纳

HTML基础问题归纳1、常用块级元素标签·HTML：address、center 地址文字；h1 ~ h6 标题1-6级； hr 水平分割线； p 段落；pre 预格式化； blockquote 段落缩进（前后5个字符）； marquee 滚动文本；ul 无序列表； ol 有序列表； dl 定义列表； ddtable 表格； tr...
复制链接

扫一扫

专栏目录