带你深入了解前端【HTML+JavaScript】

关于前端和大家推荐一个书籍，就是JavaScript高级程序设计，也叫红宝书，内容非常全面详细，大家可以买来看，以后面试工作的时候可能会用到，知识点什么的讲解的都挺好的也比较全面

1.首先讲解一下src和href的区别：

1.src是source的缩写，表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置，src会将其指向的资源下载并应用到文档当中，当浏览器解析到带有src属性的标签时，它会发起一个HTTP请求来加载指定的资源，并将其嵌入到文档中。

例如，<img src="image.png">会使浏览器加载并显示图片，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载，编译，执行完毕，所以一半js脚本会放在页面底部。

2.href是hypertext reference的缩写，表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系，当浏览器是识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，常用在a，link,等标签上。当用户点击带有 href属性的链接时，浏览器会导航到指定的URL。

例如，<a href="https://example.com">Visit Example</a>会创建一个链接，点击后将用户带到 "example.com"。

主要区别：

src用于嵌入或替换当前元素的内容，并且src会阻塞页面的解析和渲染，直到资源加载，处理完毕

href用于建立链接关系，会并行下载资源，不会阻塞页面的解析和渲染

2.HTML语义化

语义化是指内容的结构化（内容语义化），选择合适的标签（代码语义化）

内容语义化：

内容语义化是指在编写HTML时，根据页面的内容和结构，选择最能表达该内容本质的标签来标记内容例如对于文章的标签，应该使用<h1>到<h6>标签，而不是使用<span> 或<div> 并通过样式模拟标签样式。

代码语义化：

代码语义化是指使用具有明确语义的HTML标签，而不是仅仅依赖class和id或style属性来定义元素的外观和行为，使用<nav>标签来表示页面的导航部分，而不是使用<div>并添加class="nav"

 3.script标签中defer和async的区别：

如果没有defer和async属性，浏览器会立即加载并执行相应的脚本，它不会等待后续加载的文档元素，读取到就会加载和执行，这样就阻塞了后续的文档的加载。

无defer和async属性的script标签

当浏览器遇到该标签是，会暂停对HTML的解析和渲染，立即开始加载script.js并执行

这会阻塞后续文档元素的加载和解析，直到脚本加载和执行完毕

defer属性：

当使用<script src="script.js" defer></script〉时，脚本的加载是异步的，不会阻塞 HTML 的解析脚本会在 HTML 文档的解析完成后，按照<script>标签在文档中的出现顺序依次执行在 DoMcontentLoaded 事件触发之前。

对于多个带有 defer 属性的脚本，它们会按照在文档中的顺序依次执行，即使它们的加载完成顺序不同。

<script src="script1.js" defer></script>
<script src="script2.is" defer></script>
<script src="script3.is" defer></script>

script2.js和script3.js 会并行加载,script1.is 
当HTML解析完成后，按照 script1.js、script2.js、script3.js的顺序依次执行DoMcontentLoaded 事件会在所有 defer 脚本执行完成后触发

async属性：

当使用<script src="script.js"async>/script〉时，脚本的加载也是异步的，不会阻塞 HTML 的解析。一旦脚本加载完成，会立即执行，不管 HTML 解析是否完成。

对于多个带有 async 属性的脚本，它们的执行顺序不保证与在文档中的顺序一致，谁先加载完成谁先护行。

<script src="script1.is" defer></script>
<script src="script2.is" defer></script>
<script src="script3.js" defer></script>

script2.is 和 script3.is 会并行加载,script1.is、
它们的执行顺序取决于各自的加载完成时间，可能是 script2.js先执行，然后是 script1.js ，最后
是 script3.js，顺序不固定。DoMcontentLoaded 事件可能在某些 async 脚本执行之前或之后触发，因为 async 脚本的执行不依赖于HTML 解析完成，也不遵循<script> 标签的顺序。

4.常用的meta标签有哪些，作用分别是什么

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

charset
用于指定 HTML 文档的字符编码，确保浏览器能够正确解析文档中的字符。

<meta charset="UTF-8">

UTF-8 是一种通用的字符编码，支持世界上大多数语言的字符,确保页面可以正确显示中文、英文、特殊字符等，避免出现乱码现象。

keywords
为搜索引擎提供页面的关键词信息，帮助搜索引擎更好地理解页面的主题和内容，以提高搜索排名

<meta name="keywords" content="关键词1, 关键词2, 关键词3">

content 属性包含了一系列用逗号分隔的关键词。例如，对于一个关于旅游的页面，可以使用<meta name="keywords"content="旅游，度假，景点，酒店">。搜索引擎会将这些关键词作为页面的主要搜索词，当用户搜索这些关键词时，该页面可能会出现在搜索结果中

description
提供页面的简短描述，该描述通常会显示在搜索引擎的搜索结果中，作为页面的摘要信息,

<meta name="description" content='
这是一个关于旅游景点推荐的页面，为你提供各种热门景点的信息和旅游攻略。">

content 属性包含了页面的描述信息，长度通常在 150-160 个字符左右。
它可以帮助用户快速了解页面的主要内容，吸引用户点击链接。

refresh
用于页面的自动刷新或重定向。

<meta http-equiv="refresh" content="5;url=https://example.com">

content 属性中的第一个值表示刷新或重定向的时间间隔(以秒为单位)，上述示例中是5 秒。
第二个部分( url=https://example.com )表示重定向的目标 URL。
例如，<meta http-equiv="refresh" content="g;url=https://newpage.com">会立即将用户重定向至 https://newpage.com。

viewport
主要用于控制移动端设备的视口，确保页面在移动设备上的显示效果，使其更适应不同屏幕尺寸和分辨率，

<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1.0，user-scalable=no">

awidth=device-width :
将视口的宽度设置为设备的屏幕宽度，确保页面宽度与设备屏幕宽度匹配
initial-scale=1
初始缩放比例为 1，即页面初始显示不进行缩放。
maximum-scale=1.0
限制用户可以将页面放大的最大比例为 1.0 倍，防止用户过度放大页面。
user-scalable=no
禁止用户手动缩放页面，对于某些特定的页面(如应用页面)可能需要此设置，但通常不建议，因为会影响用户体验。