前端面试题 · HTML笔记

高频前端面试题之HTML

前端面试题 · HTML笔记

主要内容源于掘金作者@法医

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

Doctype是HTML5的文档声明,通过它可以告诉浏览器,使用哪一个HTML版本标准解析文档。如果没有事先告诉浏览器,大部分浏览器将开启最大兼容模式来解析网页,我们一般称为怪异模式,这不仅会降低解析效率,而且会在解析过程中产生一些难以预知的bug,所以文档声明是必须的。

2.说说对 html 语义化的理解

HTML标签的语义化,简单来说,就是用正确的标签做正确的事,给某块内容用上一个最合适的标签,使页面元素有含义,页面有良好的结构。
语义化的优点有:

  • 在没有CSS的情况下也能让页面呈现出清晰的结构,增强了可读性,便于开发与维护
  • 有利于搜索引擎爬虫获取有效信息,有利于seo优化(利用搜索引擎的规则提高网站排名)
  • 支持读屏软件,根据文章可以自动生成目录,有助于实现前端无障碍

3.src 和 href 的区别

src和href都是HTML中特定元素的属性,都可以用来引入外部的资源
两者区别如下:

  • src:全称source,通常用于img、video、audio、script元素,通过src指向请求外部资源的来源地址,指向的内容会嵌入到文档中当前标签所在位置,当浏览器解析到该元素时,会暂停其它资源下载,直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部。
  • href:全称hyper reference,意味着超链接,指向网络资源,当浏览器识别到它指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理,通常用于a、link元素。这也是为什么建议使用link方式来加载css,而不是使用@import方式,因为@importimport是css提供的方式,会在页面加载完毕后再加载。

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

  • h1 元素则表示层次明确的页面内容标题,对页面信息的抓取有很大影响,title 属性表示网页的标题
  • strong 是标明重点内容,有语气加强的含义,屏幕阅读时strong会重读,而b只是一个简单加粗标签
  • em 表示强调的文本,i 表示内容展示为斜体

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

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

6.前端页面由哪三层构成,分别是什么?

结构层、表示层、行为层

  • 结构层:由HTML超文本标记语言来创建的,也就是页面中的各种标签,在结构层中保存了用户可以看到的所有内容。
  • 表示层:由CSS(层叠样式表)负责创建,它的作用是如何显示有关内容
  • 行为层:表示网页内容跟用户之间的交互,简单来说就是用户操作了网页,网页给用户一个反馈,由JavaScript和DOM操作实现

7.iframe 的作用以及优缺点

iframe也叫嵌入式框架,可以把一个网页的框架和内容嵌入到现有的网页中
优点:

  • 可用于处理加载缓慢的内容,如广告

  • 可实现并行加载脚本

  • 可实现跨子域通信
    iframe实现跨子域通信:将两个页面的document.domain都设成相同的域名
    但是只能把document.domain设置成自身或更高一级的父域,且主域必须相同

    例:http://a.com是个主域(顶级域名),那么http://bbs.a.com、http://mail.a.com这类就是子域(二级/多级域名)

缺点:

  • iframe会阻塞主页面的Onload事件

  • iframe和主页面共享连接池,而浏览器对同域的连接有限制,所以会影响页面的并行加载。

    也就是说子文档和父文档的请求数会被计算在一起

  • 会产生很多页面,不易管理

  • 无法被一些搜索引擎识别,不利于seo优化
    注:可通过JS动态给ifame添加src属性值来解决共享连接池和阻塞主页面Onload事件的问题

8.img 的 title 与 alt

  • alt:也就是alternate(切换),如果无法显示图像,浏览器将显示alt指定的内容

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

alt是img标签特有的属性,是图片内容的等价描述,用于图片无法加载时显示,这样用户能看到丢失图片的信息,相对来说比较友好

9.H5 和 HTML5 区别

  • H5是一个产品名词,包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
  • HTML5是一个技术名词,指的是万维网联盟制定的第五代HTML标准

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

行内元素:a、img、span、input、button、select
块级元素:p、ul、ol、li、dl、dt、dd、h1~h6、div、form、table

<!-- <dl> <dt> <dd> 通常被称为定义性列表-->
<!-- <dl> define-list-->
<!-- <dt> define-title-->
<!-- <dd> define-description-->

<!--<dl>为父级-->
<dl>
	<!--<dt>与<dd>为同级子级-->
	<dt></dt>
	<dd></dd>	
</dl>

块级元素:display: block

  • 每个块级元素独占一行,默认从上到下排列

  • 未设置宽度时,宽度是父级元素的100%

  • 宽、高、内外边距都可以设置

  • 块级元素可容纳其他行内元素和块级元素

行内元素:display: inline

  • 与其他元素会在一行显示

  • 设置宽高无效,高度可以通过line-height来设置

  • 外边距margin、内边距padding都只有左右有效,上下无效

  • 行内元素只能容纳文本或其他行内元素

行内块元素:display: inline-block

  • 一行可存在多个行内块元素,但它们之间存在空隙

  • 可设置width、height、padding以及margin值

  • 宽度默认随文本内容变化

11.label 的作用是什么?

当用户点击该标签时,浏览器会自动将焦点转到和标签相关的表单控件上,常用场景:性别单选框

12.对于 Web 标准以及 W3C 的理解

Web标准 可分为结构、表现、行为。其中结构是由HTML各种标签组成,表现指的是CSS层叠样式表,行为指的是页面和用户具有一定的交互,这部分主要由JS组成。

W3C,万维网联盟,是一个制定各种标准的非盈利性组织,标准包括HTML、CSS、ECMAScript等等

web标准制定的好处:

  • 统一开发流程,方便多人协作,降低代码维护成本
  • 统一标准、降低学习成本
  • 跨平台,方便迁移不同设备

13.混杂模式(Quirks)是什么,它和严格模式(Standards)有什么区别?

页面如果未进行文档类型定义(DTD),就会采用向后兼容的布局方式,也就是混杂模式,有时候也叫怪异模式。

二者的常见区别:

盒模型

  • 标准盒模型:所设置元素的宽度和高度,指的是元素内容的宽度和高度

  • 怪异盒(IE盒)模型:所设置元素的宽度和高度,包含元素内容和padding和border的总宽度

行内元素的宽高

  • 标准模式下,设置行内元素宽高无效,怪异模式下生效

margin: 0 auto 水平居中

标准模式下有效,怪异模式下无效

百分比高度

  • 标准模式下,父元素未设置高度,子元素设置百分比高度无效

14.什么是微格式?

微格式,通过语义相关让内容人机可读,相当于对web网页进行语义注解。采用微格式的web页面,会在HTML文档中给一些标签增加一些属性,这样有助于软件或搜索引擎更好地理解html文档,更准确地识别语义,有助于seo优化。

15. HTML5为什么只需要写<!DOCTYPE html>

  • 因为HTML5不基于SGML,所以不需要引用DTD。

  • 而HTML4基于SGML,在HTML4中,<!DOCTYPE>声明引用DTD。
    DTD规定了标记语言的规则,这样浏览器才能正确的呈现内容。

16.HTML5新增了哪些新特性?移除了哪些元素?

新增

  • 语义化标签,article、footer、header、nav等

  • 音视频标签,audio、video

  • canvas 画布

    Geolocation 地理定位

    websocket 通信协议

  • 表单类型,date、time、email 等

    表单属性,requird、autofocus 等

  • 本地离线存储

    localStorage长期存储数据,浏览器关闭后数据不丢失

    sessionStorage的数据在浏览器关闭后自动删除

  • 拖拽释放

  • history API

    go history.go(number) 打开第n个页面:number>0前进;number<0后退

    forward 前进一个页面

    back 后退一个页面

    pushstate 无刷新地向当前history插入一条历史状态 可应用于ajax请求数据

移除

  • 纯表现的元素:basefont、font、s、strike、tt、u、big、center
  • 对可选用性产生负面影响的元素:frame、frameset、noframes

17.怎么处理 HTML5 新标签兼容问题

  1. 通过document.createElement(tagName)方法可以让浏览器识别新的标签,浏览器支持新标签后,还可以为新标签添加CSS样式

  2. 使用HTML5的shim框架,在head标签中调用以下代码

   <!--[if lt IE 9]>
       <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
   <![endif]-->

18.如何实现在一张图片上的某个区域做到点击事件

图片热区技术

  • <img>标记中设置参数usemap="#Map",以表示对图像地图的引用。

  • <map>标记设定图像地图的作用区域,并取名:Map;

  • <area>标记划分出作用区域,并设定好链接href

<body>
	<img src="./image.jpg" alt="" usemap="#Map" />
	<map name="Map" id="Map">
		<area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
	</map>
</body>

19.a元素除了用于导航外,还有什么作用?

href属性中的url可以是浏览器支持的任何协议,所以a标签可以用来

  • 手机拨号<a href="tel:110">110</a>

  • 发送短信<a href="sms:110">110</a>,还有邮件等等

  • 最常用的是:锚点和下载文件

    下载的原理:浏览器无法解析a标签所对应的资源,所以会将其下载下来

20.SEO中的TDK

在SEO中,TDK其实就是titledescriptionkeywords这三个标签

  • title是标题标签
  • description是描述标签
  • keywords是关键词标签
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值