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:备用页面的路径。如果用户请求的资源无法访问,将跳转到备用路径。
浏览器如何对离线缓存的资源进行管理和加载?
管理
- 创建并引用清单文件
- 下载资源到缓存:用户首次访问时,浏览器解析清单文件并下载指定资源到应用程序缓存中
- 更新缓存:每次访问页面时,浏览器都会检查清单文件是否更新。如果更新,重新下载清单文件中指定的所有资源并替换掉旧缓存。
- 离线访问:资源被缓存,即可离线访问
加载
- 缓存中存在资源,从缓存加载
- 缓存中不存在资源且设备离线,使用备用资源