HTML面试题（2）
HTML5相比HTML有哪些更新？
- 语义化更强的HTML元素：引入artitcle、section、nav、header、footer等元素，帮助创建结构更清晰、语义更明确的网页，有利于SEO和内容的可访问性
- 表单控件增强：新增多种表单输入类型（如email、data），直接支持数据验证，提高了表单的易用性和功能性
- 音视频支持：原生支持音频（audio）和视频（video），无需依赖外部插件，提高了访问多媒体内容的速度和兼容性
- 新的API支持：如Canvas Geolocation Drap and Drop，让网页能支持更复杂的用户交互
- Web存储和WebSockets：提供了更先进的数据存储方案（localStorage和sessionStorage）和实时通信能力（WebSockets），让网页应用像传统的桌面应用
- 更好的连接性和离线支持：通过应用程序缓存（Application Cache）支持离线应用，使得Web应用能够更灵活地在没有网络的环境下使用
img标签的srcset属性的作用？
提供多个文件源和各自的分辨率，浏览器会根据设备的屏幕尺度和像素密度（DPI）选择最适合的图像。
行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素（Inline Elements）
行内元素通常位于文本内部，它们不会导致文本换行，而是在内容流中连续展示。这些元素主要用于改变一小块内容的样式或行为，不影响周围的布局。
- <span>
- <a>
- <img>
- <b>和<i>
- <input>
- <select>:在表达中创建下拉选择菜单
- <strong>
块级元素（Block-level-Elements）
块级元素在页面中通常表现为“块”，会在其前后自动换行，默认占据父元素的完整宽度。
- <div>
- <p>
- <h1>到<h6>
- <ul> <ol>：分别定义有序列表和无序列表
- <li>：列表项
空元素（Empty Elements）
空元素是那些只有开始标签，没有结束标签的元素，因为它们不包含任何内容
- <img>
- <br>
- <hr>：水平分割线
- <input>：用于创建输入字段，如文本框、复选框、单选框等
- <meta>：提供关于HTML文档的元数据，如定义字符集，页面描述等
- <link>：用于链接外部资源，如CSS文件
HTML5的离线储存如何使用？
离线存储（Application Cache）：允许开发者指定哪些文件(如 HTML 页面、图像、JS 脚本和 CSS 样式表)应该被浏览器缓存，并能够在没有网络连接时访问它们。
1.创建清单文件
创建一个以.appcache结尾的清单文件，在文件中列出需要缓存的资源。这个文件必须声明MIME类型，即text/cache-manifest
2.引用清单文件
在HTML页面的<html>中使用manifest属性引用这个清单文件
<html manifest="example.appcache">
3.结构清单文件
# 2024-01-01 v1.0.0
CACHE:
/css/style.css
/js/app.js
/images/logo.png
NETWORK:
*
FALLBACK:
/ /offline.html
- CACHE：首次下载后会被缓存，支持离线访问。
- NETWORK：不会缓存，从浏览器请求。*表示默认情况下，所有其他资源都需要网络连接才可以访问。
- FALLBACK：备用页面的路径。如果用户请求的资源无法访问，将跳转到备用路径。
浏览器如何对离线缓存的资源进行管理和加载？
管理
- 创建并引用清单文件
- 下载资源到缓存：用户首次访问时，浏览器解析清单文件并下载指定资源到应用程序缓存中
- 更新缓存：每次访问页面时，浏览器都会检查清单文件是否更新。如果更新，重新下载清单文件中指定的所有资源并替换掉旧缓存。
- 离线访问：资源被缓存，即可离线访问
加载
- 缓存中存在资源，从缓存加载
- 缓存中不存在资源且设备离线，使用备用资源