HTML
DOCTYPE是一种指示浏览器以何种HTML或XHTML规范来解析文档的声明。它能够告知浏览器网页文档使用的标记语言的类型以及版本,从而确保浏览器能够正确地展示网页内容。DOCTYPE声明通常位于HTML文档的开头,是HTML文档的必须部分。
alt
属性用于为图像提供替代文本,即使图像无法加载,也可以描述图像内容,提高网页的可访问性和可用性。title
属性则提供有关图像的额外信息,可以通过鼠标悬停或使用辅助技术来查看。它通常用于提供更多的上下文或补充描述,但并不是必需的。
在 HTML 中,src
属性是用来指定外部资源的 URL,如图像、脚本或嵌入式对象的位置。例如,<img>
标签中的 src
属性指定图像的 URL。
而 href
属性则用来指定超文本链接的目标资源的位置,如超链接或 link
标记中的外部样式表。例如,<a>
标签中的 href
属性指定了链接目标的 URL。
iframe
(内联框架)是一种 HTML 元素,它允许在当前文档中嵌入另一个独立的 HTML 文档。iframe
有一些优点和缺点:
优点:
iframe
可以将不同来源的内容隔离开来,使得它们在不同的上下文中运行。这有助于保护当前文档免受潜在的安全风险,并确保不同来源的内容不会互相干扰。iframe
中的内容可以异步加载,这意味着页面主体内容可以在 iframe
加载完成之前呈现。这有助于提高页面加载速度。iframe
内的内容可以独立滚动,而不会影响主页面的滚动。这有助于在需要展示大量内容的情况下,提高用户体验。iframe
可以用于访问跨域资源,例如嵌入来自其他域的网页或应用。缺点:
iframe
的使用可能会导致性能下降,因为它需要浏览器加载额外的文档资源。每个嵌入的 iframe
都需要额外的 HTTP 请求,这可能会延长页面加载时间。iframe
的使用可能会使页面结构更加复杂,导致维护困难。而且,在 iframe
和主页面之间进行通信可能会涉及到跨域问题,这会增加开发难度。iframe
中的内容,这会影响到网页的搜索引擎优化(SEO)。iframe
在某些情况下可能导致可访问性问题。例如,屏幕阅读器可能无法正确解析 iframe
中的内容,导致部分用户无法访问这些内容。综上所述,iframe
有一些优点,如内容隔离、异步加载和独立滚动等。然而,它也有一些缺点,如性能影响、复杂性增加、SEO 不友好和可访问性问题等。在使用 iframe
时,需要权衡这些优缺点,确保它适用于你的需求。
meta
标签提供了有关 HTML 文档的元数据,如描述、关键词、作者等。以下是一些常用的 meta
标签:
字符集声明:声明文档使用的字符编码,通常为 UTF-8。
视口设置:控制页面在移动设备上的显示方式,如缩放级别和页面宽度。
页面描述:提供页面的简短描述,有助于搜索引擎了解页面内容。
关键词:设置页面关键词,有助于搜索引擎优化(SEO)。但请注意,大多数现代搜索引擎不再使用此标签。
作者:指定页面作者。
禁止缓存:告诉浏览器不要缓存页面。
自动刷新:设置页面在特定时间间隔后自动刷新。
跳转到其他页面:在指定的时间间隔后,自动将用户重定向到其他页面。
兼容模式:指定浏览器(如 Internet Explorer)使用特定的渲染模式。
搜索引擎索引控制:指示搜索引擎是否应索引页面和跟踪链接。
这些常用的 meta
标签可以帮助你控制页面的显示、搜索引擎优化和其他功能。根据页面需求,可以根据需要添加更多的 meta
标签。
header
、footer
、nav
、section
、article
、aside
等date
(从一个日期选择器选择一个日期) 、email
(包含 e-mail 地址的输入域) 、number
(数值的输入域) 、range
(一定范围内数字值的输入域) 、search
(用于搜索域) 、tel
(定义输入电话号码字段) 等audio
、video
Canvas
绘图、 SVG
绘图Geolocation
drag
web worker
:是运行在后台的 JavaScript
,独立于其他脚本,不会影响页面的性能web storage
: localStorage
、sessionStorage
WebSocket
: HTML5
开始提供的一种在单个 TCP
连接上进行全双工通讯的协议SVG和Canvas都是用于在web上绘制图形的技术,但它们有几个主要区别:
简而言之,SVG适用于需要与DOM交互并具有复杂动画和交互的情况,而Canvas则适用于创建大量图形对象和复杂动画。
defer 和 async 都是用于脚本加载和执行的关键字,两者的主要区别如下:
因此,如果需要按顺序执行脚本并且不想阻塞 DOM 的解析,可以使用 defer。如果脚本的执行不依赖于其他脚本或 DOM,可以使用 async 加快加载速度。
<style>
标签的prefetch
和preload
属性都用于优化CSS资源的加载,但它们有不同的行为和目的:
prefetch
属性告诉浏览器这个CSS资源可能在未来的某个时刻需要被加载,但并不需要立即加载。浏览器会在空闲时间异步加载这个资源,以便在需要时能够立即使用。prefetch
适用于那些当前不需要但是可能在未来会需要使用的资源。preload
属性则告诉浏览器这个CSS资源在当前页面中必须被使用,因此应该立即加载和执行。浏览器会在主HTML文档下载和解析完成之前加载这个资源。preload
适用于那些当前需要使用的资源。