[前端面试基础]HTML+CSS

HTML

HTML的src和href属性有什么区别？

HTML中src（source）和href（hypertext reference）是两个常见的属性，用于引用外部资源，它们的主要区别如下：

用途：src用于嵌入到文档中的资源，如图像、音频、视频或JavaScript文件；href用于链接到HTML文档之外的资源，如CSS样式表、字体文件或其他网页。
引用方式：src引用的资源是必需的，并且将在文档中占据一定的空间，直接影响文档的渲染；href引用的资源是可选的，并且不会占据文档的空间，仅用于指定链接到文档之外的资源。
对文档的影响：src会直接影响文档的加载和显示，如果src属性引用的资源无法加载或错误，将会导致嵌入的内容无法显示或运行；href不会直接影响文档的加载和呈现，而是通过链接到外部资源来影响文档的样式和行为，如果href属性引用的资源无法加载或错误，只会影响到该资源的使用，而不会影响到整个文档的显示。
适用范围：src适用于图片、音频、视频和脚本等资源的引用；href适用于CSS样式表、字体文件和其他网页的链接。

什么是HTML语义化？

HTML语义化是指根据内容的结构和含义（内容语义化），选择合适的HTML标签（代码语义化），以更好地表达内容的意义和层次。用正确的标签做正确的事情，这有助于搜索引擎优化（SEO）、提高网页的可访问性、内容组织、代码可读性，以及团队协作和项目维护。

DOCTYPE（文档类型）的作用是什么？

DOCTYPE是HTML中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样的文档类型定义来解析文档。DOCTYPE声明位于HTML文档的最顶部，是文档的第一行，具体作用如下：

启用浏览器的标准模式（Standards mode）或怪异模式（Quirks mode）。
用于告知浏览器应使用哪种HTML版本来解析文档。

正确的DOCTYPE声明对于确保网页在不同浏览器中的正确显示和行为具有至关重要的作用。

HTML的script标签中defer和async有什么区别？

defer和async属性都用于控制脚本的加载和执行，它们都是异步加载外部的JS脚本文件，且都不会阻塞HTML的解析，但两者在执行顺序和适用场景上有区别：

执行顺序：defer保证脚本按照在HTML中出现的顺序执行，一般是在HTML解析完成后才执行；而async则是谁先下载完成谁先执行，async可能会阻断解析以执行脚本。
适用场景：async适合不依赖于其他脚本且不被其他脚本依赖的独立模块，例如计数器或广告加载；而defer适用于需要在HTML完全解析后才能运行的JS脚本，尤其是依赖于DOM的JS脚本，它保证了脚本执行的顺序性和依赖关系，适合用于包含多个脚本的页面。

常用的HTML meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性。常用的meta标签包括：

charset：用来描述HTML文档的编码类型，例如<meta charset="UTF-8">。
keywords：页面关键词，例如<meta name="keywords" content="页面关键词">。
description：页面描述内容，例如<meta name="description" content="页面描述内容">。
refresh：页面重定向和刷新，例如<meta http-equiv="refresh" content="0;url=">。
viewport：适配移动端，可以控制视口的大小和比例，例如<meta name="viewport" content="width=device-width, initial-scale=1.0">。
搜索引擎索引方式：例如<meta name="robots" content="index,follow">，其中content参数包括all、none、index、follow、noindex、nofollow等。

HTML5相比于HTML有哪些更新？

HTML5是HTML的第五个版本，也是最新版本，相比于之前的HTML版本，HTML5增加了很多新的特性和功能，具体如下：

播放视频和音频：HTML5支持直接在浏览器中播放视频和音频，而之前的HTML版本需要使用Flash等插件才能实现。
语义化标签：HTML5增加了很多语义化标签，如header、footer、nav等，可以更清晰地表示网页的内容结构。
Canvas绘图功能：HTML5中增加了Canvas元素，可以使用JavaScript在页面上进行绘图。
表单控件：HTML5中增加了很多新的表单控件，如日期选择器、颜色选择器等，可以使表单更加灵活。
移动设备支持：HTML5针对移动设备进行了优化，可以更好地支持触摸事件、屏幕适配等。

HTML中，img标签srcset属性的作用是什么？

img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源，实现分辨率自适应。属性格式包括图片地址、宽度描述w、像素密度描述x，多个资源之间用逗号分隔。例如，可以设置浏览器宽度达到800px时加载middle.jpg，达到1400px时加载big.jpg。像素密度描述只对固定宽度图片有效。

HTML行内元素、块级元素、空（void）元素有哪些？

行内元素：行内元素不会独占一行，只占据其对应的标签的宽度。常见的行内元素有<a>、<span>、<br>、<i>、<em>、<strong>、<img>等。
块级元素：块级元素会独占一行，并尽可能地撑满其父元素的宽度。常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<ol>、<li>、<table>等。
空（void）元素：也称为自闭合元素或空元素，它们没有闭合标签。常见的空元素有<br>、<hr>、<img>、<input>、<meta>、<link>等。

HTML5的离线储存怎么使用？它的工作原理是什么？

HTML5的离线存储主要通过Web Storage和Web SQL Database实现。

Web Storage：Web Storage包括sessionStorage和localStorage两种，它们提供了一种在客户端存储数据的方式。sessionStorage用于存储针对一个会话的数据，数据在页面会话结束时被清除；localStorage用于持久化存储数据，数据存储在浏览器中，没有过期时间，直到用户手动清除或浏览器卸载。
Web SQL Database：Web SQL Database是一种在浏览器中使用的轻量级关系型数据库，它允许开发者使用SQL语句来操作数据。不过需要注意的是，由于Web SQL Database的规范已经被废弃，因此在实际开发中应尽量避免使用。

浏览器是如何对HTML5的离线储存资源进行管理和加载的？

浏览器对HTML5的离线存储资源的管理和加载主要依赖于Web Storage和IndexedDB等API。

存储管理：浏览器会为每个源（origin）分配独立的存储空间，并根据API的类型（如sessionStorage、localStorage或IndexedDB）来组织数据。对于sessionStorage，数据在页面会话结束时被清除；对于localStorage和IndexedDB，数据会持久化存储，直到用户手动清除或浏览器卸载。
加载机制：当浏览器加载页面时，它会检查是否存在与该页面关联的离线存储资源。如果存在，浏览器会根据需要加载这些资源。例如，对于存储在localStorage中的数据，开发者可以在页面加载时通过JavaScript访问这些数据，并根据需要使用它们。

HTML中，title与h1标签的区别是什么？

title标签：位于HTML文档的<head>部分，用于定义文档的标题。这个标题会显示在浏览器的标签栏或标题栏上，也是搜索引擎在搜索结果中显示的页面标题。
h1标签：位于HTML文档的<body>部分，用于定义文档或文档部分的主要标题。h1标签是HTML中的最高级标题标签，通常用于页面的主标题。

HTML中，b与strong标签的区别是什么？

b标签：b标签（bold）用于定义粗体文本，它仅从视觉上强调文本，没有传递额外的语义信息。
strong标签：strong标签（strong emphasis）用于定义语气上更重要的文本，它除了从视觉上强调文本外，还传递了额外的语义信息，表示这些文本在内容上具有更强的重要性。

HTML中，i与em标签的区别是什么？

i标签：i标签（italic）用于定义斜体文本，它仅从视觉上改变文本的样式，没有传递额外的语义信息。
em标签：em标签（emphasis）用于定义语气上有所强调的文本，它除了从视觉上改变文本的样式外，还传递了额外的语义信息，表示这些文本在内容上具有某种程度的强调。

iframe有哪些优点和缺点？

优点：

嵌入内容：iframe可以嵌入其他网页或资源，如广告、视频、地图等，使得网页内容更加丰富和多样。
保持独立性：iframe中的内容独立于主页面，不会影响主页面的布局和样式。

缺点：

安全性问题：iframe可能引入跨站脚本（XSS）等安全风险，因为攻击者可能会利用iframe嵌入恶意内容。
搜索引擎优化（SEO）问题：搜索引擎可能无法正确索引iframe中的内容，导致这些内容在搜索结果中的排名较低。
兼容性问题：不同浏览器对iframe的支持程度不同，可能导致在不同浏览器中呈现不同的效果。

HTML 的 head 标签的作用及必不可少的标签

作用：

<head> 标签用于定义文档的头部，是所有头部元素的容器。头部的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，但这些信息通常不会真正作为内容显示给读者。

必不可少的标签：

在 <head> 标签中，<title> 是唯一必需的元素。它定义了文档的标题，该标题会显示在浏览器的标题栏中。

其他常见的标签包括 <meta>（提供额外信息，如字符集、作者、描述等）、<link>（定义文档与外部资源的关系，如链接样式表）、<style>（在文档中声明样式）等。

Canvas 和 SVG 的区别

绘制的图片格式：
- Canvas：使用 getContext 方法绘制的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg 格式保存存储图像，是位图。
- SVG：一种矢量图像格式，图像由数学公式描述，可以无损地放大或缩小。
事件处理器：
- Canvas：不支持事件处理器。
- SVG：支持事件处理器。
适用范围：
- Canvas：适合有许多对象要被频繁重绘的图形密集型游戏。
- SVG：适合带有大型渲染区域的应用程序，如地图。

HTML中，label标签的作用是什么？如何使用？

作用：

<label> 标签是 HTML 中用于创建表单元素标签和关联标签文本的标签。它通常与表单控件（如 <input>、<textarea>、<select> 等）结合使用，主要作用包括：

明确地将标签文本与相应的表单控件相关联，提高表单的可读性和易用性。
提高表单的可访问性。当用户点击 <label> 标签时，相关联的表单控件将获得焦点，从而改善用户体验和可用性。

使用方法：

可以通过两种方法来使用 <label> 标签：

HTML4 与 HTML5 的区别

取消的标签和属性：
- HTML5 取消了一些过时的 HTML4 标签和属性，如 <font>、<center>、acronym、applet 等。
新的表单标签和元素：
- HTML5 引入了更加智能的表单标签（如 date、email、url 等）和更加合理的标签（如 section、video、progress、nav、meter、time、aside、canvas 等）。
全局属性：
- HTML5 引入了新的全局属性，如 id、tabindex、repeat 等。
文档结构标签：
- HTML5 提供了更加语义化的文档结构标签，如 <article>、<aside>、<header>、<footer>、<hgroup> 等，以更好地描述文档的结构和内容。