Html_Css问答集(10)

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 Doe\&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 伪类的样式会立即应用。