67、为什么多个<li>标签在没有<ul>或<ol>包裹时也能展现？
（1）浏览器的容错机制：
现代浏览器有很强的容错能力，即使HTML代码有错误或不符合规范，浏览器仍会尽力尝试渲染页面内容。即使没有使用<ul>或<ol>标签包裹，浏览器也会显示<li>标签中的内容。
（2）默认样式：
在大多数浏览器中，<li>元素会自动带有某些默认样式，如前面带有一个圆点或数字。即使这些<li>不在列表标签内，这些默认样式依然会应用，所以看起来似乎“正常”渲染了。
推荐：最好写在ul或ol中，否则有时出了问题找不到原因。
按照规范写有下面好处：
语义化：
使用<ul>和<ol>标签可以清楚地表明这些<li>项是一个整体，是有序或无序的一组项目。这不仅让HTML代码更易读，而且让搜索引擎和辅助技术（如屏幕阅读器）能够更好地理解和解析页面内容。
结构正确：
未被<ul>或<ol>包裹的<li>标签在HTML规范中是无效的，不符合W3C的标准。这会导致验证工具报错，并可能引起其他HTML解析问题。
样式一致性：
使用列表标签确保浏览器对列表项应用默认样式，并且你可以更方便地通过CSS进行一致的样式控制。
68、在vscode输入代码后，没有提示，无法用tab来自动完成，咋办？
安装插件来帮助完成。
H5的有些新标签在vscode中并不提示，哪怕你设置了识别为html，它仍然不提示。可以借助下面两个插件：
HTML CSS Support:
这个扩展提供更基础的语法高亮、代码提示、代码补全等功能，它对 HTML 和 CSS 代码整体的语法支持更全面。
IntelliSense for CSS class names in HTML:
这个扩展专门针对 HTML 代码中 CSS 类名的提示，它能更智能地识别你当前代码中的 CSS 类名，并提供相应的提示。
这两个插件不会相互冲突。安装后最后重启一下vscode。
安装后，有些仍然不提示，比如progress，但它提示为prog，按tab后会补全。比如datalist，只有datal，说明vscode本身没有，可能插件中有简写的片段，将就用吧:(。
69、datails与summary是怎么配合的？
实际上detail是一个容器（没有内容），它可将里面内容进行展开与折叠。容器里面的内容就是summary，它表示标题，鼠标点击时就会展开（再点则折叠），显示summary后面的内容。
因此一般用于问答式解释，用detail容纳一个问题，summary来说明问题的标题，后面的跟的就是回答的内容。
<details>
<summary>前端是指什么？</summary>
<p>通常指在网页上呈现的东西</p>
</details>
<details>
<summary>前端是指什么？</summary>
<span>这是内容</span>
</details>
一般一个问题一个details，这样方便一个问题对应一个答案。
注意：details与summary都是块级元素。
上面p更远离summary，因为<p> 是一个块级元素（block-level element），它会在其前后生成换行符，并且浏览器会在其前后添加默认的垂直间距(开发者工具查看）。
而span更靠近summary，因为<span> 是一个内联元素（inline element），它不会生成换行符，也没有默认的垂直间距。
70、如何理解optimum对meter的变化？
optimum 属性用于指定 <meter> 元素的最优值。它与 min、max、low 和 high 属性一起使用，来定义不同的值范围。
<meter> 元素根据值呈现三种色：
绿色：表示最优范围
黄色：表示警告范围
红色：表示危险范围
optimum所处的区间不同，根据value值默认呈现不同的值。
(1)value的值在optimum的区间，则为绿色。
<meter value="19" max="100" min="0" low="20" high="80" optimum="10" ></meter>
optimum为10，即所处的区间为[0,20]，注意：一定是包含两个端点。
value为19，在[0,20]内，则为绿色.
(2)value的值在optimum的相邻区间，则为黄色。
<meter value="29" max="100" min="0" low="20" high="80" optimum="10" ></meter>
optimum为10，即所处的区间为[0,20]，相邻的区间为(20,80]，注意一定包含远端端点80。
value为29，在(20,80]内，则为黄色.
(2)value的值在optimum的相隔区间，则为红色。
<meter value="89" max="100" min="0" low="20" high="80" optimum="10" ></meter>
optimum为10，即所处的区间为[0,20]，相隔的区间为(80,100]，注意一定包含最远端端点100。
value为89，在(80,100]内，则为红色.
举例
<meter value="89" max="100" min="0" low="20" high="80" optimum="50" ></meter>
optimum为50，最优区间[20,80]，value在这范围则为绿色（value=30);
相邻区间为(0,19)，value在此范围为黄色（注意0值没有，无法呈现颜色，所以不含0)；
另一个相邻区间为(81,100]也为黄色。
71、mark与strong、em都有强调，有什么区别？
简言之:
<mark> 用于突出显示“重要”这个词，表示这是需要用户特别注意的“内容”。比如考试内容填空。
<strong> 用于强调“记住”这个词，表示这个信息很重要。"语气"强调。
<em> 用于强调“我非常高兴”，表示带有喜悦的情绪。"情绪"强调。
H5 中的 <mark>, <strong>, <em> 标签都用于强调文本，但它们各自侧重不同的方面：
(1)<mark> 标签：
强调重点内容：
<mark> 主要用于突出显示文本中的重要部分，通常用来标记需要用户注意的关键词或重要信息。
视觉效果：
<mark> 默认会用黄色背景色来标记文本，这在视觉上可以清晰地突出显示被标记的文字。
语义：
<mark> 表示文本是需要用户注意的重点内容，而不是强调语气或情绪。
(2)<strong> 标签：
强调语气：
<strong> 用于强调文本的语气，表示文本内容比周围内容更重要。
视觉效果：
<strong> 通常会以加粗的方式显示文本，以强调其重要性。
语义：
<strong> 表示文本内容在语义上比周围内容更重要，但并不一定意味着用户需要格外注意。
(3)<em> 标签：
强调情绪：
<em> 用于强调文本的情绪或语气，表示文本内容带有特殊的感情色彩。
视觉效果：
<em> 通常会以斜体的方式显示文本，以突出其情绪或语气。
语义：
<em> 表示文本内容在语气或情绪上与周围内容不同，但并不一定意味着其重要性更高。
<p>这是一个非常<mark>重要</mark>的段落，你必须<strong style="color: red;">记住</strong>这个信息！</p>
<p><em>我非常高兴</em>能看到你！</p>
理解上面代码：
<mark> 用于突出显示“重要”这个词，表示这是需要用户特别注意的内容。
<strong> 用于强调“记住”这个词，表示这个信息很重要。
<em> 用于强调“我非常高兴”，表示带有喜悦的情绪。
72、ruby的布局是怎么样的？
布局很复杂，我放弃了。有精力的可以弄弄。
ruby用于模拟东亚文字排版中常见的注音方式。且文字先写拼音后写。见鬼的是vscode又不提示这个关键词。
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng</rt>
</ruby>
注意：拼音是写在下面，但网页上呈现的是拼音在上面，看了几家拼音对齐方式，似乎没有完美方案。
另外在它们后面加<br/>有不同的效果，很是复杂。
<ruby>
<span>魑</span><br /><br /><br />
<rt>chī</rt><br /><br /><br /><br />
</ruby>
（1）当span后面增加一个<br>无效果，但若有两个br，则会在整个"ruby"效果的后面增加一行，三个则增加两行；
（2）在rt后面增加一个br无效果，增加两个br则在整个"ruby"的前面增加一行，若三个则增加两行；
（3）span后面增加n个br行时，则整体后面增加(n-1)个行，而整体ruby前面的行与rt后面的br有关，若rt后br行与span相等或小于span后面br个数，前面无行，当多于一个br时则前面整体增加一行。
整体前面的行数(span后br个数为3，小于，rt后面的br个数4，多了一个br），因此增加一个行。而整体后面的行只与span有关，为n-1，即3-1=2行，整体后面会增加2个行。
若是下面，更为复杂：
<ruby>
<span>魑</span>a<br />b<br />c<br />d
<rt>chī</rt>e<br />f<br />g<br />h<br />j
</ruby> 再进化一化：
<ruby>
<span>魑</span>aaaaaaaaaaa<br />bbbbbbb<br />c<br />d
<rt>chī</rt>e<br />f<br />g<br />h<br />jjjjjjjjjjjjjj
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng</rt>
</ruby> 估计解释起来更为费劲了。
简单点：ruby里面的是单独的规则环境不要弄了。
解释：
在<ruby>标签内部，<br>标签的行为受到<ruby>的内部布局规则的影响。在<ruby>标签内，<br>标签在<span>或<rt>后面插入的换行不会立即影响外部布局，因为<ruby>标签的内部布局是封闭的。当使用多个<br>标签时，它们开始累积换行效果，但这种效果只在<ruby>标签的内部或外部累积，具体取决于<br>标签是在<span>还是<rt>后面。
个人感觉，里面有浮动意思。
73、在h5中，为什么patter必须与required配合，如果为空时，patter就不起作用了
这是因为功能细化的原因，各适用范围不同。
required确保用户必须填写该字段。如果用户没有填写被标记为required的字段，浏览器会阻止表单的提交，并显示一个默认的错误消息，提示用户该字段是必填的。
patter只对输入的数据进行验证。
有些是可选项，只有输入时才验证，比如评论（若有内容则需要过滤），比如个人兴趣，则需要限制。等等。
因此，单独有pattern而无reqired时，那么pattern属性实际上不会被触发，因为没有任何输入可以与正则表达式进行匹配。在这种情况下，pattern属性不会起作用，因为它没有输入数据可以验证。
这样更容易细化功能，适用各种不同场景。
74、总结一下input的type用法？
(1)text
描述: 默认类型，用于单行文本输入。
应用场景 用户名、地址、搜索框等。
注意点: 默认情况下，输入的文本不会限制格式。
<input type="text" id="username" name="username">
(2)password
描述: 用于输入密码，输入的文本会被隐藏（通常显示为圆点或星号）。
应用场景: 登录表单中的密码输入。
注意点: 安全性考虑，敏感信息应通过HTTPS传输。
<input type="password" id="password" name="password">
(3)email
描述: 用于输入电子邮件地址，支持基本的格式验证。
应用场景: 注册或联系表单中的电子邮件输入。
注意点: 浏览器会进行基本的格式检查，但不保证输入的电子邮件地址有效。
<input type="email" id="email" name="email">
(4)number
描述: 用于输入数字，支持输入数字和一些特殊字符（如“+”、“-”、“.”、“,”）。
应用场景: 年龄、数量等数字输入。
注意点: 可以设置最小值、最大值和步长。
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1">
(5)date
描述: 用于输入日期，通常显示为一个日期选择器。
应用场景: 出生日期、预约日期等。
注意点: 支持的格式可能因浏览器而异。
<input type="date" id="birthday" name="birthday">
(6)checkbox
描述: 用于创建复选框，用户可以选择多个选项。
应用场景: 多选项选择，如兴趣爱好、服务条款同意等。
注意点: 每个复选框都是一个独立的<input>元素。
<input type="checkbox" id="terms" name="terms" value="accepted">
<label for="terms">我同意服务条款</label>
(7)radio
描述: 用于创建单选按钮，用户只能选择一组选项中的一个。
应用场景: 性别选择、支付方式等。
注意点: 同一组中的单选按钮必须具有相同的name属性。
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
(8)file
描述: 用于上传文件。
应用场景: 图片上传、文档上传等。
注意点: 应确保文件上传的安全性，限制文件类型和大小。
<input type="file" id="file" name="file">
当然还有time,week,datetime,url,color等等，真是一多功能的输入框啊。
75、为什么网页传输当中要使用URL编码？
简言之：URL 编码让网页数据安全可靠地旅行。
URL 编码是网页应用程序中不可或缺的一部分，它确保了数据能够安全、可靠地从浏览器传递到服务器。它将 URL 中的特殊字符转换为安全的、可移植的格式，避免数据在传输过程中出现错误或丢失。
（1）为什么需要 URL 编码？
URL 字符限制：
URL 中只能包含特定字符，例如字母、数字、连字符、下划线等。其他字符，如空格、特殊符号、非 ASCII 字符，会导致 URL 格式错误，无法正常解析。
数据一致性：
不同浏览器和操作系统可能使用不同的字符编码，导致数据在传输过程中出现乱码。
数据隔离：
URL 编码将表单数据与 URL 地址分开，避免数据混淆。每个数据项都以 "键=值" 的形式进行编码，方便服务器端解析。
（2）URL 编码的规则：
URL 编码使用 % 符号加两位十六进制数字来表示特殊字符。例如：
空格：%20
加号：%2B
等号：%3D
斜杠：%2F
冒号：%3A
（3）URL 编码的应用：
表单提交：
当用户提交表单时，浏览器会将数据编码成 URL 格式，然后发送到服务器。
URL 参数：
URL 中包含的参数通常也需要进行 URL 编码，例如：http://example.com?name=John%20Doe&age=30
API 请求：
当应用程序发送 API 请求时，请求中的参数也需要进行 URL 编码。
（4）URL 编码的工具：
浏览器：
大多数浏览器都支持 URL 编码，你可以在地址栏中输入需要编码的文本，然后查看编码后的结果。
在线工具：
网上有很多在线工具可以进行 URL 编码和解码，例如：https://www.urlencoder.net/
编程语言：
各种编程语言都提供 URL 编码和解码的函数。
（5）URL 解码：
服务器端接收到 URL 编码后的数据后，需要进行解码才能读取数据。解码过程与编码过程相反，使用 % 符号加两位十六进制数字来还原原始字符。
（6）URL 编码的总结：
URL 编码是 Web 应用程序中不可或缺的一部分，它保证了数据在传输过程中的安全、可靠和一致性。理解 URL 编码的原理和应用能够帮助你更好地理解网页应用程序的工作机制，并且能够更好地处理网页数据。
76、video中preload，auto与metadata加载的的长度有什么规律？
auto和metadata的区别在于加载内容的多少：
preload="auto"：
浏览器会尽可能多地预加载视频数据，包括视频文件本身和视频的元数据（例如时长、分辨率等）。这可以使视频更快地开始播放，但会消耗更多带宽和内存。
preload="metadata"：
浏览器只预加载视频的元数据，而不加载视频文件本身。这意味着用户点击播放时，视频需要从头开始加载。但这可以节省带宽和内存，对于网络连接较差的用户比较友好。
加载长度的规律：
preload="auto" 的加载长度取决于浏览器和网络连接，但一般情况下会尽可能地加载更多视频数据。
preload="metadata" 的加载长度仅限于视频的元数据，通常包含以下信息：
视频的时长
视频的分辨率
视频的格式
视频的编码
视频的标题
视频的描述
视频的作者
总结：
preload="auto" 倾向于更快的播放体验，但消耗更多资源。
preload="metadata" 倾向于更小的资源消耗，但播放开始时需要等待加载视频文件。
建议：
如果你的视频较短，或者用户网络连接良好，建议使用 preload="auto"。
如果你的视频较长，或者用户网络连接较差，建议使用 preload="metadata"。
注意：
preload 属性的默认值为 auto。
在某些浏览器中，即使 preload="metadata"，浏览器也可能预加载部分视频数据。
如果设置了autoplay则忽略prepaly的auto,因为autoplay 属性优先级高于 preload 属性。
77、contenteditable一般用在哪些元素身上？
在HTML5中，contenteditable属性可以应用在以下几种元素上：
<div>、<span>、<p>、<li>、<td>、<th>、<a>、<header>、<footer>、<section>等，以便在页面布局中提供更丰富的可编辑内容。
以下元素默认不支持contenteditable属性：<audio>, <embed>, <iframe>, <img>, <input>, <label>, <textarea>, <video>等。
这些元素不能直接设置为可编辑，但可以通过间接方法（例如，将它们放置在一个contenteditable的容器中）来允许编辑。
<div contenteditable="true">
<p>这是一段可以编辑的文本。</p>
<img src="image.jpg" alt="可编辑区域内的图片">
<p>这是图片下面的另一段可以编辑的文本。</p>
</div>
contenteditable属性也可以设置为true、false或inherit，以控制元素的编辑状态：
true：元素及其子元素可以被编辑。
false：元素及其子元素不可被编辑。
inherit：元素继承父元素的contenteditable属性值。
使用contenteditable时，应考虑到用户体验和网页的可用性，因为过度使用可能会导致页面行为变得不直观或难以控制。
78、对于“隐藏”功能有哪些，区别是？
(1)display:none：
该元素会被完全从文档布局中移除，不占用任何空间。它就像是元素不存在一样，不仅不可见，而且不能通过DOM访问，也不会响应任何事件（如点击事件）。
使用 display:none 的元素不会被渲染，并且它的子元素也会被隐藏。
(2)visibility:hidden：
元素虽然不可见，但它仍然保留在文档布局中，占据原本的空间。它不会被渲染出来，但可以通过DOM访问，并且仍然可以响应事件。
(3)overflow:hidden：
这个属性与隐藏元素的内容有关，而不是元素本身。设置 overflow:hidden 的元素会限制其内容只能在元素的指定区域内显示。如果内容超出了元素的边界，它将被裁剪，不会显示在元素的外面。
(4)hidden
元素不可见,不占布局空间(与 display:none 类似)，仍然可以通过DOM访问，并且可以通过JavaScript修改其 hidden 属性来显示或隐藏元素。
使用HTML属性 hidden 可以直接在HTML标签上控制元素的可见性，而不需要在CSS中添加额外的规则。
它与display:none一样的效果，唯一不同的是hidden不可继承，而前者可以继承生效。
79、简单说一下伪类与伪元素选择器的区别？
伪类关注的是元素的外部状态，例如用户的交互（悬停、聚焦）或元素在文档中的位置（第一个子元素、奇数或偶数子元素）。
a:hover {
color: red;
}
p:first-child {
font-weight: bold;
}
伪元素关注的是元素的内部内容，并且可以将内部内容的某部分视为一个独立的元素进行样式化，例如将段落的第一个字母或第一行作为一个单独的元素来处理。
p::first-line {
font-style: italic;
background-color: yellow;
}
::selection {
background-color: lightblue;
color: darkblue;
}
注意：
::selection 是一个全局伪元素，它可以作用于文档中任何被用户选中的文本，不论这些文本属于哪个元素。因此，::selection 不需要与任何具体的 HTML 元素结合使用，它的样式将应用于任何选中文本。
对于伪类，通常需要与特定的元素选择器结合使用。伪类不能单独存在，它们需要依附于某个元素选择器来指定样式应用于哪个元素的状态。
80、复习一下目标伪类选择器？
目标伪类（:target）是 CSS 中用于选择被 URL 的哈希部分（即 URL 中 # 后面的部分）所指定的元素的一种伪类。它的本质是允许开发者针对页面中的特定元素应用样式，当页面滚动或跳转到该元素时，这个元素会成为“目标”。
<style>
:target {
background-color: yellow;
padding: 10px;
outline: none;
}
</style>
'-------------------------
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">Section 1 Content</section>
<section id="section2">Section 2 Content</section>
<section id="section3">Section 3 Content</section>当用户点击指向 #section2 的链接时，页面会滚动到 <section id="section2"> 元素，并且该元素的背景颜色会变为黄色，同时增加内边距，从而突出显示。
本质上在于响应页面内部的锚点链接，因此可以利用这一点来为该元素添加特殊的样式，比如突出显示。
注意：
:target可以看作是具有全局效果的选择器，因为它能够针对页面中的任何元素（只要元素具有一个唯一的 id），而不是局限于某个特定的元素或元素集合。也可以结合id,类，属性等使用。
#section1:target {
background-color: yellow;
}
.content:target {
border: 2px solid red;
}
[data-section="intro"]:target {
color: green;
} 不管怎样：
仅限当前页面：
:target 伪类仅在当前页面内部跳转时工作，它不会在新打开的页面或者通过 <a> 标签的 href 属性跳转到不同 URL 时生效。
锚点跳转：
只有通过页面内部的锚点链接（即链接带有 # 符号后面跟有元素 ID 的 URL）进行跳转时，:target 伪类才会激活。
ID 必须唯一：
:target 伪类要生效，目标元素的 ID 必须是唯一的，因为 URL 的哈希部分是用来唯一标识页面中的元素。
(若有多个同名的id，目标选择器可能生效到第一个同名的id上）
即时生效：
当页面加载或者用户通过点击链接跳转到页面中的某个元素时，:target 伪类的样式会立即应用。