前端面试题 · HTML笔记

yayeah

已于 2023-05-27 14:35:47 修改

阅读量156

点赞数 1

分类专栏：前端文章标签：前端 html javascript 面试

于 2023-03-17 14:57:52 首次发布

本文链接：https://blog.csdn.net/yayeah/article/details/129620799

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

高频前端面试题之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 新标签兼容问题

通过document.createElement(tagName)方法可以让浏览器识别新的标签，浏览器支持新标签后，还可以为新标签添加CSS样式
使用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其实就是title、description、keywords这三个标签

title是标题标签
description是描述标签
keywords是关键词标签

yayeah

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题 · HTML笔记

Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。如果没有事先告诉浏览器，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。严格模式：是以浏览器支持的最高标准运行混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为微格式，通过语义相关让内容人机可读，相当于对web网页进行语义注解。
复制链接

扫一扫