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浏览器使用最新内容渲染页面

  • <meta property="og:title" content="标题">
  • <meta property="og:description" content="描述">
  • <meta property="og:image" content="图片URL">
  • <meta property="og:url" content="网页URL">

Open Graph一般用于社交媒体,有助于提高链接吸引力和信息完整性

  • <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类似

相关推荐
云心似我心^o^40522 分钟前
使用POI和EasyExcel使用导入
java
我是大头鸟31 分钟前
SpringMVC 使用thymeleaf 进行数据展示
java·springmvc·thymeleaf
小刘|34 分钟前
JVM 自动内存管理
java·jvm·算法
2401_837088501 小时前
eclipse怎么导入junit4
java·junit·eclipse
幼儿园口算大王1 小时前
Spring反射机制
java·spring·反射
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code1 小时前
美团社招一面
前端·javascript·vue.js
purrrew2 小时前
【JAVA ee初阶】多线程(3)
java·开发语言
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html