前端八股文之HTML

147 阅读3分钟

最近在准备找个实习,作为一个还没有经历过面试的大三生,心里还是有很多担心和焦虑的,所以把最近复习的内容做个小总结,不管结果怎么样也算是尽力了。

1. 对html语义化的理解

刚看到这个题目,我的回答是:在html5之前,页面布局会用div标签这类没有语义化的标签,会使代码的可读性不高,不利于后期的维护,html5添加了一些语义化标签,大大提高了代码的可读性,并且有利于SEO,即搜索引擎优化,语义化标签让搜索引擎更能理解你的网站,常见的几种语义化标签有:<header> <aside> <nav> <content> <footer>等。 在这个回答上,关于语义化标签的优点还需要完善:1.为了在没有css的情况下,页面也能呈现出很好的内容结构;2.有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;3.可以极大方便设备的使用,提升可访问性和互操作性;4.对于浏览器,更加方便解析;5.使代码更加清晰,可读性提高,方便编写代码。

2. html中的document是干嘛的

document对象(文档对象)是HTMLDocument对象的一个实例,表示整个HTML页面,又叫做页面的根节点,document上有一些属性和方法,可以获取页面的信息和操作页面。常见的几种属性: document.URL----返回一个字符串,表示当前文档的网址;document.body----返回当前文档的 <body>节点等。常见的方法:document.white()----用于向当前文档写入内容。

3. 块级元素、行内元素、行内块元素

  • 块级元素:

特点:可设置宽高边距,占满整行,会自动换行

示例:<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<form>

  • 行内元素:

特点:无法设置宽高边距,不会占满满行,不会自动换行

示例:<a>、<strong>、<b>、<em>、<i>、<del>、<span>

  • 行内块元素:

特点:可设置宽高,占满整行,但不会自动换行

示例:<img>、<input>

4.src和href的区别

  • src:引用资源,替换当前元素,用在 img、script、iframe上 。 当浏览器解析到src,会暂停其他资源的下载和处理,直到将该资源加载(图片不会暂停其他资源的下载和处理),编译执行完毕,这也是为什么建议把js脚本放在底部而不是头部的原因。
  • href:在当前元素和引用资源建立联系,用在link和a等元素上。 若在文档中添加href,浏览器会识别该文档为CSS文件,就会并行下载资源并且不会停止对当前文档的处理,这也就是为什么建议用link方式加载CSS,而不是使用@import方式。

5.浏览器内核

浏览器(内核)引擎分为两部分:渲染引擎和js引擎。

  1. 渲染引擎:负责取得网页的内容(HTML、XML、图像等等),整理信息(如加入的css等)以及计算网页的显示方法,然后输出到显示器。
  2. js引擎:解释执行js语句来实现网页的动态效果