2020校招前端知识点整理

自用的前端知识点整理笔记(长期更新)

开启面试造火箭模式点击获得更好的阅读体验
有错误的地方请指出,感激不尽

HTML

你是如何理解HTML语义化的?⭐

总结:用恰当的标签来标记内容。

比如段落就写 p 标签,标题就写 h1 标签,文章就写article标签,视频就写video标签,等等。

优点:

1.让人更容易读懂(增加代码可读性)

2.让搜索引擎更容易读懂(SEO(搜索引擎优化)

Doctype

Doctype声明于文档最前面,告诉浏览器以何种方式来解析文档,这里有两种模式,标准模式兼容模式

在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。

meta标签

元素可提供有关页面的元信息(meta-information),比如页面的描述和关键词,利于搜索引擎检索。

页面描述
 
页面关键词者
     
网页作者
    

meta viewport 是做什么用的,怎么写?

viewport 是对移动网页的优化

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

width:控制 viewport 的大小,如 device-width 为设备的宽度

maximum-scale=1,minimum-scale=1,即不允许用户缩放

行内元素和块级元素的区别

补充问:为什么图片能设置宽高

·常见块级元素有:html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等。

·常见行内元素有:span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等。

而他们明显的区别是:

块级元素:会自动换行,在横向充满其父元素的内容区域,默认独占一行的,可修改宽高。

行内元素:不会自动换行,行内元素左右可以有其他元素,行内元素的宽高大多是auto*auto

注意:行内元素设置宽高无效(但是行内置换元素可以设置宽高,下面有详细解释)、设置上下margin无效,设置上下padding类似无效(不影响文档流排列)

另外一种分类方式:可替换元素和不可替换元素的分类

替换元素:替换元素根据其标签和属性来决定元素的具体显示内容,