前端八股文（HTML篇）

目录

1.什么是DOCTYPE,有何用呢？

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

3.src和href的区别？

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

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

6.前端页面有哪三层构成，分别是什么？

7.行内元素和块级元素分别有哪些？有何区别？

八.HTML5中新增了哪些新特性？移除了哪些元素？

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

十.知道什么是微格式吗？

---

1.什么是DOCTYPE,有何用呢？

Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明时必须的。

---

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

HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当的标签，使页面有良好的结构，页面元素有含义。

语义化的优点如下:

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

---

3.src和href的区别？

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

• src：全称source，它通常用于img，video，audio，script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在的位置，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
• href：全称hyper reference ，意味着超链接，指向网络资源，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，通常用于a，link元素。

---

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

• title属性表示网页的标题，h1元素表示层次明确的页面的内容标题，对页面信息的抓取也有很大的影响
• strong是标明重点内容，有语气加强的含义而b是展示强调内容
• i是italic（斜体）的简写，是早期的斜体元素，表示内容展示为斜体，而em是emphasize（强调）的简写，表示强调的文本。

---

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

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

---

6.前端页面有哪三层构成，分别是什么？

构成：结构层，表示层，行为层

1.结构层

        结构层是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到所有内容。

2.表示层

        表示层是由css负责创建，它的作用是如何显示有关内容，学名：层叠样式表。

3.行为层

        行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈。

---

7.行内元素和块级元素分别有哪些？有何区别？

常见的块级元素：p,div,form,ul,li ,ol,table,h1,h2,h3,h4,h5,h6,dl,dt,dd

常见的行内元素：span,a,img,button,input,select

块级元素：

• 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
• 宽度缺少时它的容器的100%,除非设置一个宽度
• 高度，行高以及外边距和内边距都是可以设置的
• 块级元素可以容纳其他行内元素和块级元素

行内元素：

• 和其他元素都会在一行显示
• 高，行高以及外边距和内边距可以设置
• 宽度就是文字或者图片的宽度，不能改变
• 行级元素只能容纳文本或者其他行内元素

---

八.HTML5中新增了哪些新特性？移除了哪些元素？

HTML5中主要是关于图像，位置，存储，多任务等功能的增加：

• 语义化标签，如：article，footer，header，nav等
• 视频video，音频audio
• 画布canvas
• 表单控件，calemdar，date，time，email
• 地理
• 本地离线存储，localStorage长期存储数据，浏览器关闭数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
• 拖拽释放

移除的元素：

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

---

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

web标准简单来说可以分为结构，表现，行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现是指css层叠样式表，用过css可以让我们的页面结构标签更具美感。行为是指页面和用户具有一定的交互。

W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：

• 可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
• 学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
• 跨平台，方便迁移都不同设备
• 降低代码维护成本、

---

十.知道什么是微格式吗？

所谓的微格式是建立在已有的，被广泛采用的标准基础之上的一组简单的，开发的数据格式。

具体表现是把语义嵌套在HTML中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾HTML文档的可阅读性，相当于对web网页进行语义化注解。

采用微格式的web页面，在HTMl文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理HTML文档的软件，更好的理解HTML文档。当爬取web内容时，能够更为准确地识别到内容块的语义，微格式可以对网站进行SEO优化。

---