2022面试题HTML

1、href和src的区别是什么

• src用于引入文件，href用于在当前文档和引用资源之间建立联系

<link href="./style.css" rel="stylesheet" />
<a href="http://baidu.com">
浏览器识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理

<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕，这也是js脚本放到底部的原因

2、为什么引用css的link标签放在头部，引用js的script标签放在body结束标签之前

• link标签放在head标签中
  ①用户访问网站时，代码是从上往下解析的，正常展示页面内容的样式，提高用户体验
  ②放在html结构底部时，加载页面会出现html结构混乱的情况

• script标签放在body结束标签之前
  ①JS脚本在下载和执行期间会阻断html解析
  ②把script标签放在底部，保证html和css首先完成解析之后再加载js脚本
  ③script标签加上defer属性时，可以放在head标签中（async）

<script defer></script>

3、如何提高网站的搜索权重

• seo优化
  ①设置网站的title标题标签

<title>百度</title>

②设置网站的description描述标签

<meta name="Description" content="百度是一个搜索平台" />

③设置网站的keyword关键词

<meta name="keyword" content="百度 搜索"/>

• HTML语义化
  ①使用正确的标签引用正确的内容
  ②增加了可读性，结构更加清晰，便于浏览器、搜索引擎解析
  ③搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重

4、常见的块级元素和行内元素有哪些

• 块级元素
  div、p、h1-h6、ul、li
  转换为块级元素：display: block
• 行内元素
  a、span、strong、em、i
  转换为行内元素： display: inline
• 行内块元素
  input、img、button
  转换为行内块元素：display: inline-block

5、h5新增了哪些新特性

• 语义化标签：H5引入了一些新的语义化标签，如header、footer、nav、article等，有助于开发者更好地描述网页结构和内容。
• Canvas：H5引入了元素，它是一个可编程的绘图区域，开发者可以利用JavaScript在其中绘制图形、动画以及实现其他交互效果。
• 音频和视频：H5支持和标签，使得在网页中嵌入音频和视频变得更加简单，而不需要依赖第三方插件。
• 本地存储：H5提供了本地存储API，包括localStorage和sessionStorage，使得网页可以在客户端存储数据，以便在用户下次访问时进行读取。
• Web Workers：H5引入了Web Workers API，使得在后台运行脚本成为可能，从而提高了网页的性能和响应能力。
• 表单控件：H5新增了一些表单控件，如input type=“email”、input type="date"等，使得开发者能够更方便地收集和验证用户输入。
• 地理定位：H5提供了Geolocation API，使得网页可以获取用户的地理位置信息，从而实现一些基于地理位置的功能。