HTML面试题
一、src和href有什么区别？
1.应用标签不同
src用于指定要加载的资源路径，常出现于<script><img><audio><video><iframe>
href用于指定<a>的目标地址和在文档头部使用<link>引入外部样式表时，用href制定样式表的地址
2.资源加载方式不同
src：阻塞加载。会暂停其他资源的下载，直到该资源加载、编译（JS）、执行（脚本）完成。所以一般建议把JS放在页面底部。
href:并行下载资源。
二、什么是HTML语义化？
HTML语义化是指根据内容的结构和含义，选择合适的HTML标签，来更好地表达意义和层次。
HTML语义化的优点
1.对机器友好
SEO友好：语义化标签使搜索引擎更容易理解网页内容
提高可访问性：语义化标签更好地支持屏幕阅读器朗读网页内容，帮助视障用户浏览网页
内容组织：语义化标签有助于自动化工具（如搜索引擎）抓取和索引网页内容、生成自动化目录
2.对开发者友好
代码可读性：清晰理解网页内容和结构
维护和协作：有助于项目维护和团队协作、快速定位和修改代码
常见语义化标签
三、DOCTYPE的作用？
DOCTYPE是HTML5中一种标准通用的标记语言的文档类型声明。<!DOCTYPE>不是一个HTML标签，它是一个指令，告诉浏览器使用哪个版本的HTML进行编写网页。
DOCTYPE的主要作用
1.启用标准模式或怪异模式
2.告诉浏览器使用哪个版本的HTML进行编写网页
注：
标准模式：浏览器按照W3C标准解析代码，网页的显示效果和性能标准更加符合现代web标准
怪异模式：如果文档缺少DOCTYPE或使用错误的DOCTYPE，浏览器采用怪异模式，网页可能不会按照开发者预期渲染
DOCTYPE的重要性
1.提高页面兼容性
2.避免因浏览器解析差异导致的问题
四、<script>中的defer和async有什么区别？
1.执行顺序
defer保证JS按照在HTML中出现的顺序执行
async则是先下载完毕就先执行，可能会阻塞已执行的脚本
2.适应场景
defer适用于需要在HTML完全解析后才运行的JS，尤其是依赖于DOM的JS，适用于包含多个JS的页面
async适用于自身不依赖于其他JS脚本且自身不被其他脚本依赖的独立模块，如计数器、广告加载
五、常用的<meta>标签有？
<meta>标签由name（指定元数据的名称）和content（提供与name对应的数据）定义，用于描述网页。
1.<meta charset="UTF-8">
声明文档使用的字符编码
2.<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport实现网页响应式。
width=device-width 网页宽度等于设备屏幕宽度。
initial-scale=1.0 初始缩放比例1.0。
content还可以设置：
- height
- maxmum-scale
- minmum-scale
- user-scalable
3.<meta name="description" content="这是一个页面描述。">
4.<meta name="keywords" content="关键词1, 关键词2">
5.<meta name="author" content="作者名">
6.<meta http-equiv="refresh" content="30">
每30s刷新一次网页
7.<meta name="robots" content="noindex, nofollow">
noindex 阻止页面被搜索引擎索引
nofollow 阻止搜索引擎跟踪链接
content还可以设置为：
- all 文件被检索
- none 文件不被检索
- follow 页面链接可查询
8.<meta http-equiv="X-UA-Compatible" content="IE=edge">
指定IE浏览器使用最新内容渲染页面
9.
- <meta property="og:title" content="标题">
- <meta property="og:description" content="描述">
- <meta property="og:image" content="图片URL">
- <meta property="og:url" content="网页URL">
Open Graph一般用于社交媒体，有助于提高链接吸引力和信息完整性
10.
- <meta name="twitter:card" content="summary">
- <meta name="twitter:site" content="@用户名">
- <meta name="twitter:title" content="页面标题">
- <meta name="twitter:description" content="页面描述">
- <meta name="twitter:image" content="图片URL">
与 Open Graph类似
原文地址：https://blog.csdn.net/weixin_62668406/article/details/143778016
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！