前端面试题-HTML5(01)

125 阅读7分钟

1.什么是DOCTYPE,有何作用?

Doctype是HTML5的文档声明,他可以告诉浏览器使用哪一个HTML版本标准解析文档

在整个浏览器发展过程,HTML出现过很多版本,不同版本之间格式书写存在一些差异。如果不告诉浏览器文档解析标准是什么,
大部分浏览器会开启最大兼容模式来解析网页,我们一般称为怪异模式,这样不仅会降低解析效率,还会在解析过程中产生一些
无法预知的bug,所以文档声明是必须的。

2.对HTML语义化的理解

语义化就是用正确的标签做正确的事情,给某块内容用上最恰当合适的标签,使页面有良好的结构,尽量保证无论是谁都能看懂这块内容是什么

语义化的优点:

(1)在没有CSS样式的情况下也能够让页面呈现出清晰的结构
(2)有利于SEO和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息。(爬虫依赖于标签来确定上下文和各个关键字的权重)
(3)方便团队开发和维护,语义化更具可读性,可以减少差异化

3.src和href的区别

src和href都是HTML中特定元素的属性,都可以用来引入外部的资源

它们之间的主要区别可以用这样一句话来概括:src用于替代这个元素,而href用于建立这个标签与外部资源之间的关系。

两者区别如下:

  • src:全称source,通常用于img、video、audio、script元素,通过src指向外部资源的来源地址,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时,它会将资源下载并应用到文档内。当浏览器解析到该元素时,会暂停其他资源下载,直到将该资源加载、编译、执行完毕。

  • href:全称hyper reference,意味着超链接,指向网络资源,通常用于a、link元素,当浏览器识别到它指向的文件时,就会并行下载资源,不会停止对当前文档的处理。

4.title与h1的区别,b与strong的区别,i与em的区别

  • title是网站标题,h1是文章主题

    title概括网站信息,可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的,显示在网页Tab栏里h1突出文章主题,面对用户,更突出其视觉效果,指向页面主体信息,显示在网页中,一般在网页中出现一次。

  • b(bold)是实体标签,用来给文字加粗,而strong是逻辑标签,作用是加强字符语气

    b标签只是加粗的样式,没有实际含义,常用来表达无强调或着重意味的粗体文字,比如文章摘要中的关键词、评测文章中的产品名称、文章的导言; 而strong表示标签内字符重要,用以强调,其默认格式是加粗,但是可以通过CSS添加样式。

    建议:为了符合CSS3的规范,b应尽量少用而改用strong。

  • i(italic)是实体标签,用来使字符倾斜,而em(emphasis)是逻辑标签,作用是强调文本内容

    i标签只是斜体的样式,没有实际含义,常用来表达无强调或着重意味的斜体,比如生物学名、术语、外来语;而em表示标签内字符重要,用以强调,其默认格式是斜体,但是可以通过CSS添加样式。

    建议:为了符合CSS3的规范,i应尽量少用而改用em。

5.什么是严格模式与混杂模式

  • 严格模式:是以浏览器支持的最高标准运行
  • 混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为

6.前端页面由哪三层构成

构成:结构层表示层行为层

(1)结构层(structural layer)

结构层是由HTML超文本标记语言来创建的,即页面中的各种标签。类似于盖房子需要的地基以及放置悬梁框架。
结构层中保存了用户可以看到的所有内容,比如:一段文字、一张照片、一段视频等等。

(2)表示层(presentation layer)

表示层是由CSS负责创建的,它的作用是如何显示有关内容,学名:层叠样式表。
类似于房子的装修风格,像田园的、中式的、北欧风。

(3)行为层(behavior layer)

行为层表示网页内容跟用户之间产生交互性,简单说就是用户操作了网页,网页给用户一个反馈,是JavaScript和DOM主宰的领域。

7.iframe的作用以及优缺点

iframe也称作嵌入式框架,与框架网页类似,能够把一个网页的框架和内容嵌入到现有的网页中

优点:用起来相当方便,和宿主的隔离比较彻底。
缺点:由于太隔离所以不能和宿主做到无缝衔接。

关键问题:

  1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  2. UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..

  3. 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中,较难实现免登效果。

  4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

传统优点:

  • iframe可以实现无刷新文件上传;

  • iframe可以跨域通信;

  • 可以用来处理加载缓慢的内容,比如:广告

传统缺点:

  • iframe会阻塞主页面的Onload事件
  • iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题,当然也可以解决iframe会阻塞主页面的Onload事件的问题
  • 会产生很多页面,不易管理
  • 浏览器的后退按钮没有作用
  • 无法被一些搜索引擎识别

8.img标签的title与alt

  • title:当鼠标移动到元素上时显示title的内容

  • alt:全称alternate(切换),图片无法加载显示时,浏览器将显示alt指定的内容

    alt是img标签特有的属性,是图片内容的等价描述,用于图片无法显示时,让用户能够看到丢失的是什么东西的信息,相对来说比较友好。

9.H5与HTML5区别

  • H5是一个产品名词,指包含了最新的HTML5、CSS3、ES6等新技术制作的应用
  • HTML5是一个技术名词,指第五代HTML(HTML最新标准)

10.行内元素和块级元素分别有哪些?有何区别?怎样转换?

常见的块级元素:p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd、thead、tbody、caption、tr、form、header、footer、section、nav、aside

特点

  1. 有默认的宽高:宽度是父元素的100% ,高度是内容撑起来实际高度,table除外
  2. 宽高可以设置
  3. 可以包含任意元素(表格系除外、hn不能包含hn、p不能包含块状元素)
  4. 独占一行
  5. 四个方向的内外边距都是可以设置

常见的行级元素:span、a、b、srtong、i、em、u、ins、s、del

特点

  1. 有默认的宽高,都是内容所撑起来的
  2. 设置宽高无效
  3. 一般只能包含行内元素与文本内容
  4. 不独占一行,相邻的行内元素在同一行上显示
  5. 水平方向的外边距可以设置,垂直方向设置无效,内边距四个方向都可以

常见的行内块元素:img、audio、videolabel、input、button、select、option、textarea

常见空元素: <br><hr><img><link><meta>;

特点

  1. 有默认的宽高,由本身元素特点决定
  2. 宽高可以设定
  3. 一般不包含其他元素
  4. 相邻的行内块元素在同一行显示
  5. 四个方向的内外边距都可以设置

转换

  • 转为块元素: display:block;
  • 转为行内块元素 :display: inline-block;
  • 转为行内元素 :display:inline;