HTML 常见元素和理解(常见面试题）

1. HTML常见元素

1.1 head：<head>元素用于放置文档的元信息和配置，不会直接显示在页面上。

<meta>：定义元信息，如字符编码、关键词等。
<title>：定义文档标题，显示在浏览器的标题栏或标签页上。
<style>：用于定义内部样式表，控制文档的样式。
<link>：用于引入外部资源，如样式表和图标。
<script>：用于引入JavaScript代码或链接外部脚本。
<base>：指定相对路径的基准URL，为页面上所有链接指定默认URL。

1.2 body：<body>元素包含文档的可见内容。

结构化元素：<div>、<section>、<article>、<aside>、<header>、<footer>等，用于语义化页面结构和布局。
文本元素：<p>用于段落文本，<span>、<em>、<strong>等用于文字样式和语义强调。
表格元素：<table>、<thead>、<tbody>、<tr>、<td>、<th>等用于创建表格和定义表格结构。
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>用于创建不同类型的列表。
链接和表单元素：<a>用于创建超链接，<form>、<input>、<select>、<textarea>、<button>等用于处理用户输入和提交表单数据。

1.3 重点：

<meta charset="utf-8">：设置文档的字符编码，支持显示中英文字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">：指定页面的视口宽度，适应不同设备屏幕宽度，优化移动端显示。
<base href="/">：指定页面中相对路径的基准URL，常用于处理页面内部链接。

HTML重要属性：

a[href, target]：href用于指定链接目标URL，target用于指定链接在何处打开，如在新窗口或当前窗口。
img[src, alt]：src指定图像文件的URL，alt用于图像无法显示时显示的替代文本。
table tr td[colspan, rowspan]：colspan和rowspan用于合并表格单元格。
form[target, method, enctype]：target用于指定表单提交的目标，method指定表单提交的HTTP方法，enctype指定表单数据编码类型，用于上传文件等特殊数据。
input[type, value]：type指定输入字段的类型，如文本、密码、复选框等，value用于设置字段的默认值。
button[type]：type用于指定按钮的类型，常见的有普通按钮、提交按钮和重置按钮。
select > option[value]：option用于定义下拉列表的选项，value指定每个选项的值。
label[for="id"]：for属性将label与对应的表单元素关联起来，提升用户体验。

2. 如何理解HTML

HTML是一种标记语言，用于描述文档的结构和内容。
HTML文档由块级元素和大纲组成，块级元素用于构建页面布局，而大纲用于表示文档的结构和层次。
块级元素通过<div>等标签来划分不同的区块，帮助组织和布局页面。
大纲由标题标签<h1>到<h6>组成，用于表示文档的层次结构和重要内容。
了解HTML常见元素和属性，有助于构建语义化的网页结构和增强页面的可访问性和用户体验。

3. doctype的意义是什么？

<!DOCTYPE>声明位于HTML文档的开头，用于告诉浏览器文档使用的HTML版本以及采用的文档类型定义。它的主要意义包括：

告诉浏览器以哪种标准模式渲染页面：DOCTYPE声明可以触发不同的渲染模式，确保页面在不同浏览器中以相同的方式显示，避免出现不一致的布局和样式。
告诉浏览器哪些元素是合法的：DOCTYPE定义了HTML文档的合法元素和规则，使浏览器能够正确解析和处理文档内容。

不同的DOCTYPE声明会触发浏览器使用不同的渲染模式，如标准模式（standards mode）和怪异模式（quirks mode），以确保页面正确显示。使用正确的DOCTYPE声明对于构建兼容性良好的网页至关重要。

4. html，xhtml，html5的关系？

HTML：HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML是SGML（Standard Generalized Markup Language）的应用之一，包含HTML4及之前的版本。
XHTML：XHTML（Extensible Hypertext Markup Language）是HTML进行XML严格化处理后的结果，基本上就是HTML按照XML规范进行书写。XHTML使用XML语法，要求标签闭

合，属性值加引号等，使得文档更加严谨，符合XML规范。

HTML5：HTML5是HTML的最新版本，不再严格依赖于SGML或XML规范，而是引入了一系列新的元素和API，以满足现代Web应用的需求。

总结关系：

HTML是HTML5之前的版本，属于SGML。
XHTML是对HTML进行XML严格化处理的结果，更加符合XML规范。
HTML5是HTML的最新版本，不再依赖于SGML或XML，拥有更多新特性和API。

5. html5有什么变化？

HTML5相较于之前的HTML版本带来了许多变化和改进，其中一些重要的变化包括：

引入了新的语义化元素：如<header>、<nav>、<article>、<section>、<aside>、<footer>等，使开发者能够更清晰地描述页面结构和内容。
表单功能得到了增强：新增输入类型、表单验证、表单属性等，简化了表单处理，提升用户体验。
引入了新的API：包括离线存储、音视频、图形、实时通信、本地存储、设备能力等API，使得Web应用更加强大和丰富。
对分类和嵌套进行了变更：HTML5允许更加宽松的嵌套和分类规则，使得页面结构更灵活和容易书写。

HTML5的引入带来了更好的语义化、更丰富的功能和更灵活的标记，有助于开发更优秀的Web应用和提升用户体验。

6. em和i的区别是什么？

<em>是表示强调的语义化标签，用于强调文本的重要性，通常会以斜体样式显示。例如，强调一些关键词或重要的观点。
<i>是纯样式标签，用于斜体文本的呈现，但没有强调的语义含义。在HTML5中，<i>标签仍然存在，但不再建议用于表示强调，而是通常用于表示图标或其他斜体样式的内容。

在语义化和可访问性方面，使用<em>标签比使用<i>更好，因为<em>能够传达更明确的含义并且对屏幕阅读器等辅助技术更友好。对于纯样式的斜体文本，最好使用CSS样式来实现，而不是依赖于<i>标签。

7. 语义化的意义是什么？

语义化是指在编写Web页面时，使用合适、恰当的HTML标签来描述页面的结构和内容，使代码更具有可读性和语义含义。语义化的意义包括：

使开发者更容易理解代码：通过语义化的标签，开发者能够更快速地理解页面的结构和内容，有助于代码的维护和团队协作。
使机器更容易理解页面结构：搜索引擎、屏幕阅读器等机器可以更好地解析页面内容，提高页面的可访问性和SEO优化。
有助于页面的SEO优化：搜索引擎对语义化的页面更加友好，有助于提升网页在搜索结果中的排名。
提供语义化的微数据（Semantic Microdata）：语义化的标签有助于为页面内容添加结构化的微数据，帮助搜索引擎了解页面内容，从而支持更丰富的搜索结果展示，如显示星级评价、价格等信息。

通过合理运用语义化标签，可以提升页面的可读性、可访问性、SEO效果和用户体验。

8. 哪些元素可以自闭和？

自闭合元素是指在HTML中不需要显式闭合标签的元素，它们直接以/>结尾。常见的自闭合元素包括：

表单元素：<input>、<button>、<select>、<textarea>等。
图片元素：<img>。
换行元素：<br>。
水平线元素：<hr>。
元信息元素：<meta>。
样式表链接元素：<link>。

自闭合元素的使用简化了HTML代码书写，但要注意确保自闭合元素在不同浏览器中的兼容性。

9. HTML与DOM的关系？

HTML是一种标记语言，用于描述网页的结构和内容，是静态的页面代码。
DOM（Document Object Model）是由浏览器解析HTML文档后生成的动态、可操作的文档对象模型。它以树形结构表示文档，允许通过JavaScript动态地操作和修改页面内容和样式。

HTML和DOM之间的关系是：当浏览器加载HTML文档时，它会解析HTML代码并构建DOM树，将HTML元素转化为DOM节点。随后，JavaScript可以通过操作DOM来实现对页面内容、样式和结构的动态改变。

10. property和attribute的区别？

Attribute（属性）是HTML标签上的初始值，在HTML文档加载时设置，并且通常不会随着JavaScript的修改而自动更新。
Property（属性）是DOM对象上的当前值，是实时反映DOM

状态的。通过JavaScript修改DOM对象的属性，会直接影响到页面上的显示和布局。

举个例子来说明区别：

HTML代码：

<input type="text" value="Hello">

在HTML文档加载时，type和value是元素的属性（attribute），它们是初始化时的值。而在DOM树构建后，可以通过JavaScript获取或设置input元素的属性值。

JavaScript代码：

const inputElement = document.querySelector('input');
console.log(inputElement.getAttribute('value')); // 输出 "Hello"
console.log(inputElement.value); // 输出 "Hello"

// 修改属性值
inputElement.setAttribute('value', 'New Value');
console.log(inputElement.getAttribute('value')); // 输出 "Hello"（仍然是HTML初始值）
console.log(inputElement.value); // 输出 "New Value"（是实时更新的当前值）

可以看到，通过getAttribute()获取的是HTML初始值，而直接访问value属性获取的是当前值，它会实时反映DOM对象上的状态。

11. `<form>`的作用有哪些？

<form>元素在HTML中用于创建表单，它的作用包括：

提供直接提交表单数据的功能：用户可以在表单中输入数据，然后通过提交按钮将数据发送给服务器。
使用提交按钮（<input>标签的type属性为submit）或重置按钮（<input>标签的type属性为reset）：提交按钮用于提交表单数据，重置按钮用于将表单中的数据重置为初始值。
便于浏览器保存表单数据：浏览器通常会自动保存表单中的数据，方便用户在下次访问时自动填充。
方便第三方库整体提取表单数据：通过表单的name属性和JavaScript代码，可以方便地整体提取表单数据，进行数据处理和提交。
第三方库可以进行表单验证：许多JavaScript库可以方便地对表单进行验证，确保用户输入的数据的合法性和正确性。

前端基础 - HTML基础