前端(HTML+CSS)高频面试题(1)
HTML:
1.简述<!doctype>的作用?
答:
- 帮助浏览器正确地显示网页
<!DOCTYPE>
声明叫做文件类型定义(DTD),声明的作用是为了告诉浏览器该文件的类型。让浏览器解析知道应该用哪个规范来解析文档。
<!DOCTYPE>
声明必须在HTML文档的第一行,这并不是一个HTML标签。
2.常见的浏览器及其内核?
答:
- pc端:
chrome(谷歌) | firebox(火狐) | opero(欧朋) | IE(微软) | sarfari |
---|---|---|---|---|
blink(webkit分支) | gecko(高版本兼容谷歌内核) | presto(后来版本改成blink) | trident | webkit |
- 移动端:360、qq、UC、搜狗: 双内核(blink&trident)
3.b 和strong(i和em)标签的区别?
答:
-
以strong和b标签为例:
b标签仅仅只是给文字添加了加粗样式,属于UI层面的处理,除此之外没有任何意义。你甚至就可以把它看作是加了font-size:bold的css样式的span标签。 -
strong标签则是侧重于标签语义化,它是在告诉浏览器这是一段重点强调的内容。只不过它的默认样式恰好也是加粗。
-
此外,针对SEO(搜索引擎优化),strong标签与b标签相比更被搜索引擎重视,内容更容易被抓取到。同理,em标签也是语义化标签,而i标签只是仅仅加了斜体样式,并且em标签对SEO来说也更加友好。
4.谈谈对语义化的理解?
答:
- 概念:运用合适的标签和特定的属性去格式化文档(合适标签和属性要用在合适的场合)
优点:
- 易于开发和维护
- 用户体验比较好
- 易于seo,易于爬虫抓取关键字,能和搜索引擎建立良好的沟通。
- 即使在没有css样式的情况下,也能呈现良好的效果
CSS:
1.CSS引入方式有哪些?
答:
- 行内式
<div style="width: 200px;height: 200px;background-color: red;">1</div>
- 特点:代码冗余,结构层与表示层不分离。
- 内嵌式(文本内部引入)
- 只作用于当前文档
<head>
<style>
/* 标签选择器 */
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
- 特点:代码相对清晰,结构层与表示层不完全分离
- 外链式
- 可以作用于任何文档,需要link标签引入
<link rel="stylesheet" href="./css/index.css">
- 特点:代码非常清晰,结构层与表示层完全分离
2.CSS基本选择器有哪些?
答:
通配符选择器:
- 格式:
* {
属性名:属性值;
属性名:属性值;
}
标签选择器:
- 格式:
标签 {
属性名:属性值;
属性名:属性值;
}
累选择器:
- 格式:
.类名 {
属性名:属性值;
属性名:属性值;
}
id选择器:
- 格式:
#id名 {
属性名:属性值;
属性名:属性值;
}
- 优先级
- id选择器>类选择器>标签选择器>通配符选择器
3.如何合并表格单元格
答:
-
合并列—colspan
-
合并行—rowspan
-
合并行的时候,比如rowspan=“2”,它的下一行tr会少一列;合并列的时候 colspan=“2”,此行的列会少一列
4.thead、tbody、tfoot有什么用?
答:
<thead>
标签应该与<tbody>
和<tfoot>
标签结合起来使用,用来规定表格的各个部分(表头,主体,页脚)。<thead>
标签用于组合HTML表格的表头内容。<tbody>
标签用于组合HTML表格的主体内容。<tfoot>
标签用于组合HTML表格的页脚内容。<thead>
、<tbody>
、<tfoot>
标签默认不会影响表格的布局。