发布于 2024 年 2 月 26 日，星期一
前端面试中HTML部分的实际考察内容，本质上是探讨面试官如何通过HTML相关问题评估候选人的前端技能和知识深度。HTML作为网页结构的基础，其掌握程度直接影响页面的基本功能和用户体验。面试实录通过具体问题和候选人的回答，展示了HTML在实际应用中的重要性，如语义化标签的使用、表单元素的正确应用、以及与CSS和JavaScript的交互等。这些问题不仅考察了候选人的技术熟练度，还反映了其对前端开发最佳实践的理解和应用能力。
系列首发于公众号『非同质前端札记』https://mp.weixin.qq.com/s?__biz=MzkyOTI2MzE0MQ==&mid=2247485576&idx=1&sn=5ddfe93f427f05f5d126dead859d0dc8&chksm=c20d73c2f57afad4bbea380dfa1bcc15367a4cc06bf5dd0603100e8bd7bb317009fa65442cdb&token=1071012447&lang=zh_CN#rd ，更多精彩内容敬请关注公众号最新消息。
header: 头部元素section: 中间元素footer: 底部元素nav: 导航区域aside: 侧边栏区域article:内容元素process: 进度条bdo: 定义文字方向sub: 下标sup: 上标pre: 预格式化文本audio: 音频标签video: 视频标签source: 格式源标签input 标签的扩展：
placeholder: 默认提示文本autofocus: 自动聚焦required: 必填项type 属性扩展：
date: 日期选择框color: 颜色选择器button: 按钮radio: 单选框checkbox: 复选框range: 滑块history API:
history.go(): 跳转某个页面(URL)/上个页面(-1)/下个页面(1)history.back(): 返回上个页面history.forward(): 跳转下个页面history.pushstate(): 添加 history 栈history.replacestate(): 替换 history 栈localStorage：永久性存储sessionStorage：会话存储SEOa,b,span,img,input,select,strongdiv,ul,ol,li,dl,dt,dd,h1~h6,p<br>、<hr>、<img>、<input>、<link>、<meta>、<area>、<source>iframe 会创建包含另一个文档的内联框架，可将另一个 HTML 页面嵌入到页面中。onload 时间CSS1Compat: 标准模式(strick mode)：使用 W3C 的标准来解析渲染页面，在浏览器中，会以最高标准呈现页面BackCompat: 怪异模式(也称混杂模式, Quick mode): 浏览器使用自己的模式来解析渲染页面，在当前模式中，页面会以一种比较宽松向后兼容的方式显示。<!DOCTYPE html>：告诉浏览器使用 W3C 的标准来解析渲染页面，以最高的标准呈现页面。src: 表示对资源的引用，所引用的内容会嵌入到当前标签所在位置中，也就是会将引用的资源下载应用到内容中。当浏览器解析到它的时候，会暂停其他资源的处理，直到该资源加载——编译——执行完毕。一般情况下 js 脚本放在页面的最底部href: 表示超文本引用，指向一些网络资源，会建立当前站点建立链接关系。当浏览器解析到他们所引用的资源时，不会停止其他资源的处理，而是会并行下载。常用在 a, link 等标签上。defer: 延迟 async: 异步defer 或 async，当浏览器遇到 js 脚本会立即加载——编译——执行，会阻塞后面的逻辑。<script src="example.js"></script>defer 或 async：
defer: 加载其他文档和 js 脚本会同时进行的，但在此过程中 js 脚本是不执行的，只加载。js 脚本的执行会在加载解析完所有的元素后才会执行。<script defer src="example.js"></script><script async src="example.js"></script>defer 不会在加载后立即执行，而 async 会在加载后立即执行。defer 符合是最接近我们对于 js 脚本执行的理解defer 属性的 js 脚本，他们会按照加载顺序执行，而 async，他们只要加载完成后就会立刻执行meta: 描述网页文档的属性，比如网页的作者，网页描述，关键词等<!-- charset 文档的编码类型 -->
<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, maximum-scale=1">
title 与 h1 的区别：
title 属性更侧重于网站的信息，显示在网页标题上，告诉搜索引擎和用户此网站是做什么的。而 h1 显示在内容上，title 标签比 h1 标签更重要一些。b 与 strong 的区别：
strong 标签有语义，起到加重语气及强调的地方，而 b 标签没有，b 标签只是简单的加粗标签i 与 em 的区别：
em 标签有语义，表示一般的强调文本，对搜索引擎更友好。而 i 标签仅仅表示样式上的斜体。Q:(question)R:(result)A:(attention matters)D:(detail info)S:(summary)Ana:(analysis)T:(tips)