本文汇总了75道HTML、CSS和计算机网络领域的高频面试题，涵盖了从HTML5标签、CSS选择器、浏览器内核到HTTP协议等方面，帮助读者全面准备面试，提升技术水平。
1.（常考）常见浏览器的内核分别是?
2. DOCTYPE作用?严格模式与混杂模式如何区分？它们有何意义?
Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
3.（常考） HTML5行内元素有哪些？块级元素有哪些？空元素有哪些？语义化标签有哪些？(列举常见的)
行内元素：
a
br(换行)
em(斜体强调) i(斜体) strong(粗体强调)
img
input label(表格标签) textarea(多行文本输入框)
span(常用，定义文本内区块)
sub(下标)、sup(上标)
块级元素：
div(常用)
p(段落)
h1-h6(标题，层次明确)
hr(水平分割线)
ul(无序列表)
ol(有序列表)
table(表格)
form(交互表单)
空元素：没有内容的 HTML 元素
<br /> 换行
<hr /> 分割线
<input /> 文本框
<img /> 图片
<link /> HTML元素，链接
<meta /> 提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
语义化标签：
<header></header>
<footer></footer>
<nav></nav>
<section></section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
<article></article> 用来在页面中表示一套结构完整且独立的内容部分
<aside></aside> 主题的附属信息,如果article里面为一篇文章的话，那么作者信息就是这篇文章的附属内容
<figure></figure> 标签规定独立的流内容（图像、图表、照片、代码等等）
4.（常考）link和@import有什么区别？
- 从属关系区别：@import是css提供的语法规则，只有导入样式表的作用；link是html提供的标签，不仅可以加载css文件，还可以定义rel连接属性、引入网站图标等。
- 加载顺序区别：加载页面时，link标签引入css被同时加载；@import引入的css将在页面加载完毕后被加载
- 兼容性区别：@import是css2.1才有的语法，故只可在ie5+才能识别；link标签作为html元素，不存在兼容性问题。
- DOM可控性区别：可以通过js操作dom,插入link标签来改变样式；由于dom方法是基于文档的，无法使用@import的方式插入样式。
5. 超链接target属性的取值和作用？
target这个属性指定所链接的页面在浏览器窗口中的打开方式。
主要参数:
- self：不新建页面跳转,默认就是self
- _blank ：新建页面跳转
a标签 必须属性：href
6. 'data-'属性的作用是什么？
'data-'为H5新增的，自定义属性
属性集可以通过以下方法获取：
- 对象.dataset 属性获取
- 不支持1中的属性的浏览器可以通过’getAttribute’方法获取
7. 介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎和 JS 引擎。
渲染引擎：
- 负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：
- 解析和执行 javascript 来实现网页的动态效果。
8. label的作用是什么，是怎么用的？
label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
PS：label的for属性值要与后面对应的input标签id属性值相同
9. 如何在页面上实现一个圆形的可点击区域？
使用border-radius：
<style>
.div1{
background-color: red;
width: 100px;
height: 100px;
border-radius:50%;
line-height: 100px;
text-align: center;
cursor:pointer;
}
</style>
</head>
<body>
<div cl
最低0.47元/天 解锁文章
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
