HTML基础知识点_html rarr-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46504400/article/details/143020214

1.HTML的src和href属性有什么区别？

应用标签不同
这两个属性分别适用于不同的HTML标签。误用href替代src可能会导致页面功能无法正常运作，因为浏览器不会对错误的属性做出正确的响应。
src属性的作用是指定要加载的资源路径，常出现于

2.什么是HTML语义化

HTML语义化是指根据内容的结构和含义（内容语义化），选择合适的HTML标签（代码语义化），以更好地表达内容的意义和层次。通俗来讲，就是用正确的标签做正确的事情。
语义化的优点

对机器友好：

SEO友好：语义化的标签让搜索引擎更容易理解网页内容，有利于搜索引擎优化
提高可访问性：列如屏幕阅读器，可以通过语义化标签更好地理解和朗读网页内容，帮助视障用户浏览网页。
内容组织：语义化标签有助于搜索引擎爬虫和其他自动化工具更好地抓取和索引页面内容，甚至生成目录。
对开发者友好：
代码可读性：语义化标签增强了代码的可读性，开发者可以更清晰地理解网页结构和内容。
维护和协作：清晰的结构有助于团队协作和项目维护，使得开发者能够快速定位和修改代码。
、

3. DOCTYPE(文档类型)的作用是什么？

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，<!DOCTYPE>不是一个HTML标签，他是一个指令，负责告诉浏览器页面使用哪个HTML版本进行编写
主要作用
1.启用浏览器的标准模式或怪异模式
2.用于告知浏览器应使用哪种HTML版本来解析文档，这一声明对于确保网页在不同浏览器中的正确显示和行为具有至关重要的作用，DOCTYPE声明位于文档的最顶部，是文档的第一行。
标准模式与怪异模式的区别
1.CSS1Compat标准模式：浏览器按照W3C的标准严格解析代码，网页的显示效果和性能表现更加符合现代web标准
2.BackCompat(怪异模式)：假如文档缺少DOCTYPE或使用错误的DOCTYPE,浏览器就可能采取这种模式，页面可能不会按照开发者的预期渲染，
不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析
3.提高页面的兼容性，确保在不同的浏览器和设备上都能如预期般正常显示。
4.减少调试和维护的时间，避免了因浏览器解析差异导致的多数常见的问题。

4.HTML的crcipt标签中defer和async有什么区别

defer和async属性用于控制脚本的加载和执行，都是异步加载外部的JS脚本，两者都不会阻塞HTML的解析
主要区别：

执行顺序：defer保证脚本按照在HTML中出现的顺序执行，一般是在HTML解析完成后才执行。而async则是谁先下载完成谁先执行，async可能会阻断解析以执行脚本。
使用场景：async适合不依赖于其他脚本且不被其他脚本以来的独立模块，而defer适用于需要在HTML完全解析后才能运行JS脚本，尤其是依赖于DOM的JS脚本。他保证了脚本执行的顺序和依赖关系，适合用于包含多个脚本的页面。
页面性能影响：
性能优化：使用defer和async可以显著改善页面的加载时间，特别是在加载大型脚本或依赖多个脚本的页面时，合理使用这两个属性能减少页面渲染的阻塞时间，提升用户体验。
减少首屏加载时间，由于async和defer脚本不会阻塞HTML解析，可以帮助减少首次内筒绘制，和首次有意义的绘制时间，在做SEO的时合可以运用上这两个属性。

5.常用的HTML meta标签有哪些？

meta标签由name和content属性定义，用来描述网页文档的属性性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，还可以自定义name。name属性在meta标签中用来指定元数据的名称，想描述的信息类型，content属性用来提供与name属性对应的实际数据或信息，值是具体的内同，可以是文本，网址，或其他数据。

charset声明文档使用的字符编码，一般是UTF-8编码，支持国际化字符集，是现代网页的标准字符集。
viewport是为了响应式设计而设置的，确保页面在不同设备上正确缩放和渲染，width=device-width使页面宽度等于设备的屏幕宽度initial-scale=1.0设置初始缩放比例。
其中，content参数有以下几种：

width viewport：宽度（数值/device-width）；
height viewpot:高度（数值/device-height）；
initial-scale:初始缩放比例；
maximum-scale：最大缩放比例；
minimum-scale：最小缩放比例；
user-scalable：是否允许用户缩放（yes/no）；

descriptin提供了页面的简短描述，这写描述在搜索引擎结果中可能会显示为页面的摘要，用于提高页面的SEO效果
keywords可以在SEO中设置以尝试优化搜索结果。
author用于指明文档的作者名字
refresh用于设置页面在一定时间后刷新或重定向到另一个URL content=”30“表示每30秒刷新页面一次
robots用于告诉搜索引擎蜘蛛不要索引这个页面，或不要跟踪页面上的链接，noindex防止页面被索引，nofollow防止搜索引擎跟中链接
8.X-UA-Compatible为了指定Internet Explorer浏览器使用最新的内核渲染当前页面，有助于解决某些兼容性问题
Open Graph一般用于社交媒体/平台上，定义了当前网页被分享时显示的标题，描述，图片和链接等信息，这些信息有助于提高链接分享的吸引力和信息的完整性。
Twitter Card与Open Graph类似，Twitter Card标签允许控制分享到Twitter时的呈现方式，用于增加推文的吸引力和点击率
10.Content-Type用来定义HTML文档的内同类型和字符集，但它的使用已经比较少见，因为较新的HTML5规范推荐使用简单的charset定义

6.HTML5相比于HTML有哪些更新？

HTML5是HTML最新的标准，它比HTML更加规范，并添加了很多新特性：

语义化更强的HTML元素：引入如article，section，nav，header和footer等元素，帮助创建结构更清晰，语义明确的网页，有益于SEO和内容的可访问性。
表单控件增强：新增多种表单输入类型如（email，date）直接支持数据验证，极大提高了表单的易用性和功能性。
音视频自持：原生支持因音频audio和视频video内容，无需依赖外部插件，提高了多媒体内容的访问速度和兼容性。
新的API支持：引入了多个强大的API如Canvas,Geolocation，Drag and Drop增强了网页的功能性，使其支持更复杂的用户交互。
Web存储和WebSockets：提供了更新进的数据存储方案locakStorage和sessionStorage和实时通信能力webSockets让网页应用更像传统的桌面应用
更好地连结性和离线支持：通过应用程序缓存支持离线应用，使得Web应用能够更灵活地在没有网络环境下使用。
语义化标签
header：定义文档的页眉
footer：定义文档的页脚
nav：定义导航链接部分
article定义独立的文章内容
section：定义文档中的节
aside：定义与页面主内容相关联但又相对独立的内容

7.HTML中img，标签srcset属性的作用是什么？

在开发响应式页面时，经常需要考虑图像在不同设备上的显示效果，srcset属性就非常有用，它允许我们为img标签指定多个源图像，并根据设备的屏幕大小和分辨率来选择最合适的图像，这样做的好处是可以避免在小屏设备上加载过大的图像，节省带宽并提升页面的加载速度。
主要作用
srcset属性可为同意图像提供多个文件源和各自的分辨率描述符，浏览器会根据当前设备的屏幕尺寸（如宽度）和像素密度（DPI）来选择最合适的图像源进行加载，这样，就能获得与其设备相匹配的最佳图像体验，而不必加载比所需更大或更高的分辨率图像。

<img
	src="small.jpg"
	srcset="small.jpg 500w,medium.jpg 1000w,large.jpg 1500w"
	alt="示例图片"
	/>

这里的示例中：根据设备的屏幕宽度，浏览器会从三个图像中选择去一个最合适的来显示，如果屏幕宽度接近500像素，他会加载small.jpg;如果接近1000像素则会加载medium.jpg以此类推，一般情况下，srcset和sizes属性一起使用，因为sizes可以帮助浏览器更准确地知道在不同视图下应该显示多大的图像这样浏览器在选择图象时就更加精准了

<img
	src="small.jpg"
	srcset="small.jpg 500w,medium.jpg 1000w,large.jpg 1500w"
	sizes="(max-width:600px) 500px,(max-width:900px) 1000px 1500px"
	alt="示例图片"
	/>

srcset:列出了三个图象源和他们各自的宽度描述符500w，1000w，1500w告诉浏览器每个图像的自然宽度
sizes：

当视口宽度最大为600px时，图像的显示大小应为500px宽
当视口宽度最大为900px时，图像的显示大小应为1000px宽
当视口宽度超过900px时，图像的显示大小应为1500px宽
这种方法非常有效，因为他确保了图像不会过大或过小，从而避免了不必要的带宽消耗，并确保图像在各种设备上都能快速且正确地加载

8.HTML行内元素有哪些？块元素有哪些？空（viod）元素有哪些？

1.行内元素（InLine Elements）
行内元素通常用于文本内部，它们不会导致文本换行，而是在内容流中连续展示，这些元素主要是用来改变一小块内容样式或行为，而不影响周围内容的布局。
常见的行内元素包括：

span：用于对文本的小块部分进行分组和样式设置
a：定义超链接，用于从一个页面链接到另一个页面。
img：将图像嵌入到文档中，虽然它看起来像是块级，但实际上他是行内的
b和i：分别用于加粗和倾斜文本，用于文本的简单样式改变。
input：可以在文本行中直接显示，不会创建新的行，用于创建各种类型的数据输入字段
select：用于在表单中创建下拉选择菜单，不打断行的连续性
strong：用于为文本提供强调，表现在行内，不会引起文本换行。
2.块级元素（Block-level Elements）
块级元素在页面中通常表现为块，会在其前后自动创建换行，块级元素用于结构上的组织，他们会占据其父元素（容器）的完整宽度。
常见的块级元素包括：
div：用于文档中的分区或布局目的，非常灵活。
p：定义段落，是文本的基本块级元素
h1到h6：定义六级标题h1是最重要的，通常用于主标题
ul，ol：分别定义无序和有序列表
li：列表项，通常包含在ul或ol元素中
3.空元素（Empty Elements）
空元素是那些没有结束标签，只有开始标签的元素，因为他们不包含任何内容
常见的空元素包括：
img：插入图片，需要src属性指定图像源
br：在文本中插入一个换行，用于改变内容的排列方式。
hr：创建一条水平线，用于分隔内容。
input：用于创建输入字段，如文本框，复选框，单选按钮等，
meta：提供关于HTML文档的元数据，如定义字符集，页面描述等，
link：用于链接外部资源，如CSS文件。

9.HTML5的离线存储怎么使用？它的工作原理是什么？

HTML5引入了一些强大的技术来支持离线存储，使得我们可以创建在无线网络状态下也能正常工作应用，这些技术包括本地存储Local Storage和离线存储 Application Cache
离线存储指的是：允许开发者指定哪些文件如HTML页面，图像，JS脚本和CSS样式表，应该被浏览器存储，并能够在没有网络连接时访问他们。
工作原理
缓存清单文件：首先，需要创建一个清单文件，通常以.appcache扩展名保存，在这个文件中列出要缓存的资源，这个文件必须声明正确的MIME类型，即text/cache-manifest
引用清单文件：在HTML页面的html标签中使用manifest属性引用这个清单文件，例如：

<html manifest="example.appcache">

结构清单文件：清单文件的结构通常如下：
2024-01-21 v1.0.0
CACHE:
/css/stle.css
/js/app.js
/images/logo.png

NETWORK:
*
FALLBACK:
/ /offline.html

其中：

CACHE：后面列出的文件在首次下载后会被浏览器缓存，即使用户离线也可以访问。
NETWORK:指定的资源永远不会被缓存，总是从服务器请求，*表示默认情况下所有其他资源都需要网络连接。
FALLBACK:提供备用页面的路径，如果用户请求的资源无法访问，将返回这个备用页面
如何更新缓存
更新manifest文件
通过JS操作
清楚浏览器缓存
使用场景和优势
离线应用缓存最大的好处是提高了应用在离线状态时的可用性，同时也可以减少服务器的负载，因为许多资源都是从本地缓存加载的，这对于那些需要在网络不稳定的环境下工作的应用特别有用，例如移动应用会在偏远地区使用的服务
注意事项
确保更新缓存清单文件时，更改文件内的任何部分以触发浏览器重新下载文件
离线缓存可能导致开发过程中资源更新问题，开发者在测试阶段需要频繁清理浏览器缓存，或使用版本控制技巧
HTML5的离线应用缓存功能在新的HTML规范中已经被弃用，被更强大的Service Workers取代，后者提供了更精细的控制能力和缓存管理功能

10.浏览器是如何对HTML5的离线存储资源进行管理和加载的？

清单文件：创建一个包含资源列表的清单文件（通常命名为manifest.appcache）并在HTML文件中通过引用
缓存下载：当用户首次访问应用时，浏览器解析清单文件并下载列出的所有资源到应用程序缓存中。
缓存更新，每次页面访问时，浏览器都会检查清单文件是否有更新，如果检测到清单文件或其中一个资源发生变化，浏览器将重新下载改变的资源并更新缓存。
离线访问：一旦资源缓存，即使在离线状态下，浏览器也会使用缓存的资源来加载页面
加载过程
当一个请求的资源存在于应用程序缓存中时，即使设备处于离线状态，浏览器也会直接从缓存中加载该资源
如果请求的资源不再缓存中，且设备处于离线状态，浏览器将使用清单文件中定义的备用资源

11.HTML中，title与h1标签的区别是什么？

主要区别有三点：

位置和作用：title用于定义浏览器工具栏或标签页上的标题，对用户在浏览器外部的可见性和SEO影响最大；而h1用于页面内部，标识主要内容，对页面结构和内部SEO有重要作用。
可见性：title在页面外可见，h1在页面内可见
SEO重要性：两者都非常重要但title更影响搜索引擎结果页中如何展示网页，而h1则影响搜索引擎对页面内容的理解
title标签
用途：title标签定义的使整个网页的标题，他是HTML文档头部hrad中的一个表要元素，主要用于指定网页的标题
功能：这个标题会显示在浏览器的标签也上，是用户在浏览器标签页或书签中看到的描述性文本，搜索引擎结果页serp上显示的标题通常取自于这个标签，对SEO至关重要
可见性：title标签的内容不会在网页的视图区域直接显示，只在浏览器的标题栏或页面的标签上显示
h1
用途：h1标签用于定义网页中的主要标题，是HTML文档体body中的内容，通常用来指示页面的主要内容或主题，
功能：在HTML文档中，h1标签用于突出显示重要的标题，是页面结构的一部分，理论上，一个页面应该只有一个h1标签，以标明页面的主要主题，尽管在实际应用中，有时会根据设计需要使用多个，他会搜索引擎优化SEO也很重要，因为搜索引擎算法倾向于把h1标签视为页面内容层次的重要指示，
可见性：h1标签的内容直接显示在网页上，通常是最大和最显眼的标题。

12.HTML中，b与strong标签的区别是什么？

b和strong标签都用于文本的样式展示，都能使文本加粗显示，但是他们的使用应当根据内容的语义需要来选择，如果文本的加粗仅仅是为了吸引视觉注意力而没有其他特别的意义，使用b标签是合适的，如果文本需要表达额外的重要性或强调，则应选择strong标签
b标签

语义含义：b标签没有特定的语义含义，仅用于从视觉上加粗文本，而不表示文本是重要或强调的，它主要用于那些仅需视觉改变，而没有其他语义重要性的场景
用途：常用于不需要特别强调但希望突出的文本，如关键词，产品名称，或界面中的某些元素，这些内容并不比周围文本更重要
strong标签
语义含义：strong标签具有强调的语义意义，表示其内的文本是重要的，严肃的或紧急的，浏览器会加以加粗的方式显示其内容，但是用这个标签还表明了文本具有高度的重要性
用途：用于需要表达强烈情感，重要性或紧迫性的文本，例如，在警告或提示信息中可能会用到strong来强调特别需要用户注意的部分，
样式与可访问性
样式：默认情况下，两者都会使用文本加粗，然而，因为strong具有额外的语义重要性，所以使用strong更适合那些需要强调的内容
可访问性：屏幕阅读器会读取strong标签包裹的内同时，加重语气，因为这些内容被视为有特别强调的信息，b标签的内容则仅仅是正常语气，因为他指标是普通的文本样式更改

13.HTML中，i与em标签的区别是什么？

i和em标签都用于改变文本的样式，都是是文本一斜体显示。
i标签只展示样式，不强调内容
em标签不仅展示样式，还有具有强调文本的语义意义
i标签
主要用于在视觉上改变文本样式，使文本以斜体形式显示，她并不携带任何特定的语义重要性或强调意味，而仅仅是为了样式效果，通常用来表示技术术语，外来语。
em标签
em标签具有强调文本的语义意义，当使用em时，表示包裹的内容在上下文中具有较高的重要性，通常也会以斜体显示，em标签中的内容，但其主要目的是强调文本的重要性，这一点对屏幕阅读尤为重要，因为会改变语音的语调来反映文本的强调。