html

介绍下DOCTYPE以及作用

Doctype 是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档

用正确的标签处理正确的内容，让浏览器和搜索引擎更好地解析页面

严格模式：是浏览器支持的最高标准运行，不允许出现一些过时或非标准用法

混杂模式：页面以宽松向下兼容的方式显示，模拟了早期浏览器的行为，浏览器对 HTML 的语法和结构要求相对宽松,允许一些非标准的用法

块级元素(Block-level)：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

行级元素(Inline)：span、a、img、button、input、select

行内元素设置width无效；设置height无效，可以设置line-height；设置margin，padding只有左右有效，上下无效

通过css的display可以改变元素的显示类型

新的语义元素：header、nav、footer、article、section、main
新的表单元素和属性：
- input 新增 type 属性值:date、time、email、url、number、range 等
- datalist 与 <input> 配合使用,提供输入建议
- output 表示计算结果或用户操作的输出
- progress
多媒体元素：audio、video、source、track(为多媒体元素添加文本轨道,如字幕)
图形和绘图：canvas、svg等
离线 Web 应用
Web Workers 允许在后台线程中运行脚本,而不会阻塞用户界面
Web Sockets 提供了在 Web 应用和服务器之间建立持久连接的能力,实现实时通信
历史管理 History API:允许操作浏览器的历史记录,实现无刷新的页面导航

优点

缺点

最佳实践

明确指定 width 和 height 属性:为 iframe 设置明确的宽度和高度,以确保页面布局的稳定性
使用 title 属性提供描述性标题:为 iframe 添加 title 属性,提供关于嵌入内容的简要描述,增强可访问性
设置 sandbox 属性:根据需要设置 sandbox 属性,限制 iframe 中的某些功能,如禁止弹出窗口、禁止脚本执行等,提高安全性
谨慎处理 allow 属性:根据实际需求设置 allow 属性,控制 iframe 对某些功能和 API 的访问权限,如全屏、麦克风、摄像头等
合理设置 referrerpolicy 属性:根据隐私要求设置 referrerpolicy 属性,控制在导航到 iframe 中的内容时如何发送 referrer 信息
提供替代内容:在 iframe 标签之间提供替代内容,以便在不支持 iframe 或无法加载嵌入内容时显示
避免在 iframe 中嵌入敏感信息:不要在 iframe 中嵌入敏感信息,如登录表单、个人数据等,以防止潜在的安全风险
定期审查和更新嵌入内容:定期审查 iframe 中嵌入的第三方内容,确保其安全性和合规性,并及时更新或移除过期的内容
监控 iframe 的性能影响:监控 iframe 对页面性能的影响,如加载时间、资源消耗等,并进行优化

Viewport，适配移动端，可以控制视口的大小和比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">