HTML 基础

SOBER大约 51 分钟

HTML 基础

1. 什么是HTML？

HTML（HyperText Markup Language） 是一种用于创建网页的标记语言。它使用标签来描述页面的结构和内容。

2. HTML5有什么新特性？

HTML5引入了许多新特性，包括语义化标签、多媒体元素、Canvas绘图功能、本地存储、新的表单输入类型等。

  • 语义化标签：如 <header> , <footer>, <nav> 等，用于更清晰地描述文档结，这有助于提高网站的可访问性、可维护性和搜索引擎优化。。
  • 多媒体元素：包括 <video>, <audio> 等标签，用于在网页中嵌入音频和视频内容。
  • Canvas绘图功能：通过 <canvas> 标签，可以使用 JavaScript 进行动态绘图和图形操作。
  • 本地存储：引入了 LocalStorage 和 SessionStorage ，可以在客户端本地存储数据，而不需要依赖服务器。
  • 新的表单输入类型：例如 <input type="date"> 等，提供了更多种类的用户输入控件。
  • 至于 <meta> 标签，它在HTML文档中的作用是提供元数据，包括页面的描述、关键词、作者等信息，以及指定文档的字符编码、视口设置等。这些信息可以被浏览器解析，用于优化页面的显示和搜索引擎的索引。
  • 表单的控件：date、time、email、url、search等
  • websocket通信（聊天室）：常问，面试官设置场景，解决需求
  • webworker(专用线程)

为什么要引入新特性？

  1. 互联网需求： 随着互联网的发展，人们对网页内容和交互性的要求不断提高，HTML5的新特性可以更好地满足这些需求。
  2. 用户体验： HTML5的新特性使得开发者能够更轻松地实现复杂的功能，同时提供更丰富、更流畅的用户体验。
  3. 移动设备的普及： HTML5的特性使得网页在移动设备上的显示和操作更加友好，适应了移动互联网的发展趋势。

新特性有哪些优点？

  1. 功能和交互性： 新特性使得开发者能够轻松地实现复杂的功能，如音视频播放、图形绘制等，提升了网页的交互性和吸引力。
  2. 跨平台兼容性： HTML5标准的统一使得网页在不同平台和设备上的兼容性更好，减少了开发和维护的成本。
  3. 提高网站性能和速度： 一些新特性如本地存储和Canvas绘图可以减少对服务器的请求和响应时间，提高了网站的加载速度和性能。

新特性有哪些缺点？

  1. 兼容性问题： 虽然HTML5标准已经被广泛接受，但在一些旧版本的浏览器中仍然存在兼容性问题，需要开发者进行额外的兼容性处理。
  2. 学习曲线较陡： HTML5引入了许多新概念和技术，对于一些开发者来说，需要花费一定的时间来学习和掌握这些新特性。
  3. 安全性问题： 一些新特性可能会引入安全漏洞，例如本地存储可能导致信息泄露风险，需要开发者谨慎处理和保护用户数据。

3. HTML 和 XHTML 之间有什么区别？

XHTML是HTML的一种更严格的形式，它要求文档必须符合XML规范。 HTML5 放宽了这些要求，更注重实用性和兼容性。

4. 什么是HTML元素的包含（content）和内联（inline）？

包含元素指的是在页面上会产生一块独立区域的HTML元素；而内联元素指的是不会产生换行的元素。 当谈到HTML元素的"包含"（block-level）和"内联"（inline）时，指的是它们在页面上的排列方式和行为。

  • 包含元素（block-level elements）： 包含元素在页面上会产生一块独立的区域，它们通常从新行开始，宽度默认为父元素的100%。常见的包含元素包括 <div>, <p>, <h1> 等。 这些元素通常用于构建页面的整体结构，例如将页面分成不同的区块或段落。
  • 内联元素（inline elements）： 内联元素不会产生换行，它们在同一行内显示，并且宽度只占据它们包含的内容的宽度。常见的内联元素包括 <span>, <a>, <img> 等。

这些元素通常用于包裹文本或其他内联内容，并且在文本中添加样式或超链接等功能。 HTML中的元素可以根据需要嵌套，即包含元素可以包含内联元素和其他包含元素，但内联元素只能包含其他内联元素或者文本节点。这种包含关系以及元素的显示行为对于构建网页的布局和样式非常重要。

5. HTML 的空元素是什么？

空元素是指没有内容的 HTML 元素，例如 <img>, <br>, <input> 等。

6. 如何在 HTML 中包含 JavaScript 代码？

可以使用 <script> 标签将 JavaScript 代码嵌入到HTML文档中。

8. 什么是HTML表单？如何创建一个表单？

HTML 表单用于向服务器提交用户输入的数据。可以使用 <form> 标签创建一个表单，然后在其中使用各种输入元素来接收用户的输入。

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

  • 严格模式：是以浏览器支持的最高标准运行，在 HTML 文档的首行添加 <!DOCTYPE html> 来指定使用严格模式
  • 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为，首行省略 <!DOCTYPE html> 可触发

13. 前端页面由几层构成，分别是什么？

由三层构成，分别是：结构层、表示层、行为层

  • 结构层（structural layer）：结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由 HTML 超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
  • 表示层（presentation layer）：表示层是由 CSS 负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之 CSS 都能办妥
  • 行为层（behaviorlayer）：行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是 JavaScript 和 DOM 主宰的领域

15. img上 title 与 alt

  • alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
  • title：当鼠标移动到元素上时显示title的内容

16. H5和HTML5区别

H5 是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用

HTML5 是一个技术名词，指的就是第五代HTML

18. Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别？

页面如果写了 DTD，就意味着这个页面采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式，这就是 Quirks 模式，有时候也叫怪癖模式、诡异模式、怪异模式。

区别： 总体会有布局、样式解析、脚本执行三个方面区别，如下

  • 盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在 Quirks 模式下，IE的宽度和高度还包含了 padding 和 border
  • 设置行内元素的高宽：在 Standards 模式下，给行内元素设置 width 和 height 都不会生效，而在 Quriks 模式下会生效
  • 用 margin：0 auto 设置水平居中：在 Standards 模式下，设置 **margin：0 auto；**可以使元素水平居中，但是在 Quriks 模式下失效
  • 设置百分比高度：在 Standards 模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的

19. 知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？

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

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

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

历史题目

最新：2021.02.27

SOBER @ SPOONY-Z
Copyright © 2024 SOBER