Html面试题

Frank
  • 前端面试
  • 面试复盘
  • Html
大约 3 分钟约 972 字...

如何理解 HTML 语义化?

  1. 代码结构清晰,方便阅读,有利于团队合作开发。
  2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
  3. 有利于搜索引擎优化(SEO)。

默认情况下,哪些 HTML 元素是块级元素,哪些是内联元素(行内元素)?

内联(行内)元素(display:inline)

  1. 可以和其他元素处于一行,不用必须另起一行。
  2. 元素的高度、宽度及顶部和底部边距不可设置。

    提示

    行内元素的 padding-top、 padding-bottom、 margin-top、 margin-bottom 属性设置是无效的;行内元素的 padding-left、 padding-right, margin-left、 margin-botton 属性设置是有效;行内元素的 padding-bottom(经过测试 padding-top 无论设置多大都没有任何效果,而 padding-bottom 在显示效果上确实增加了)从显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响

  3. 元素的宽度就是它包含的文字、图片的宽度。

常见的行级元素有:ainputspanimgbutton

img表单元素行内块(display:inline-block),他们既可以设置宽度高度,也能并排显示

块级元素(display:block)

  1. 每个块级元素都是独自占一行,其后的元素也只能另起一行,两个元素不能共用一行。
  2. 元素的高度、宽度、行高和顶底边距都是可以设置的。
  3. 元素的宽度如果不设置的话,默认为父元素的宽度。

常见的块级元素有 divph1...h6oluldldtlitableform

提示

无论是块级元素还是行内元素,height 属性如果不设置,他将自动被内容撑开,如果没有内容,则 height 默认为 0

src 和 href 的区别

  • src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内,如请求 js 脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕。

  • href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的文件时,就会并行下载资源,不会停止对当前⽂档的处理。 常用在 a、link 等标签上。

script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。

async.defer

defer 和 async 属性都是去异步加载外部的 JS 脚本文件,它们都不会阻塞页面的解析,其区别如下:

  1. 执行顺序: 多个带 async 属性的标签,不能保证加载的顺序;多个带 defer 属性的标签,按照加载顺序执行;
  2. 脚本是否并行执行:async 属性,表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的,即异步执行;defer 属性,加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步),js 脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded 事件触发执行之前。

Doctype 作用?严格模式与混杂模式如何区分?它们有何差异?了解

参考open in new window

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1