前端基础面试题

最新推荐文章于 2023-01-04 15:54:50 发布

芜湖起飞蛙哥哥

最新推荐文章于 2023-01-04 15:54:50 发布

阅读量74

点赞数 1

分类专栏：前端文章标签： html5 javascript css 前端 jquery

本文链接：https://blog.csdn.net/m0_55652153/article/details/118963146

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.html基本框架

<!DOCTYPE html>
<html> //用来标记html文档
   <head> //文档头部开始
       <meta charset="utf-8"> //标记文档属性
       <title></title> //标记文档标题
   </head> //文档头部结束
   <body> //文档主体的开始
   </body> //文档主体的结束
</html> //文档的结束

2.H5新特性

1）html5新特性之用于绘画的canvas元素
2）html5新特性之更加丰富强大的表单
3）html5新特性之用于媒介的video和audio元素
4）html5新特性之html5地理定位
5）html5新特性之html5拖放
6）html5新特性之html5 Web存储
7）html5新特性之html5应用程序缓存
8）html5新特性之html5 Web Workers
9）html5新特性之html5服务器发送事件
10）html5新特性之html5 WebSocket

3.H5语义化

1）HTML的语义化就是从代码层次表达人的想法、思路，同时描绘出网站页面的结构，因为页面不止是给人看的，机器也要看。
2）网页结构清晰更方便开发维护，html语义化就是规定一些html的标签、属性有着特定的作用。
3）语义化的HTML，不关心内容的显示效果。说的简单一点就是：标题脱了CSS这层外衣渲染，它还是一个标题。例如<header> / <footer> / <nav> 等等，在没有css渲染样式时让人一看就知道是头部，尾部，导航栏。
4）语义化使得html标签有了实际意义。

4.H5空元素

没有内容的H5元素：常见的有<area> <base> <br> <col> <colgroup> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr>

5.常见浏览器内核

1）Trident:ie/360兼容模式/搜狗

2）Geoko:火狐firefox

3）Presto:opera(后来改为Webkit又到了Blink内核)

4）Webkit:谷歌(Webkit的分支Blink) safari 360极速模式(Blink)

6.link 与 @import 的区别

1）引用的方式不同：link为外部引用，@import为导入式。

2）放置的位置不同：link 一般放在 head 标签中，而 @import 必须放在 <style type="text/css"> 标签中。

3）加载方式不同：link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。

4）兼容性不同：@import 只能在 IE6 以上才能识别，而 link 是 XHTML 标签，无兼容问题。

5）样式权重不同：link 方式的样式的权重高于 @import。

6）改变样式：link 支持使用 JavaScript 改变样式，而 @import 不可以。

7）加载内容不同：link 除了可以加载 css 文件以外，还可以加载 MIME 类型的文件；而 @import 只能加载 css 文件。

7.CSS继承属性

1）字体系列属性

font-family：字体系列

font-weight：字体的粗细

font-size：字体的大小

font-style：字体的风格

2）文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：单词之间的间距

letter-spacing：中文或者字母之间的间距

text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）

color：文本颜色

3）元素可见性：

visibility：控制元素显示隐藏

4）列表布局属性：

list-style：列表风格，包括list-style-type、list-style-image等

5）光标属性：

cursor：光标显示为何种形态

8.position的用法

position设置属性值后，还需要搭配left、top等值，才能发挥预期效果，例如只设置position:absolute; 而不设置left等，则不会立即根据父级定位元素定位，但依然会脱离正常文档流，并拥有定位属性。如果不设置position，则默认为static，没有定位，元素出现在正常的流中，同时也会忽略top, bottom, left, right 或者 z-index 等声明。