您的位置:首页 > 健康 > 美食 > Html_Css问答集(10)

Html_Css问答集(10)

2024/10/14 4:10:45 来源:https://blog.csdn.net/dzweather/article/details/140467621  浏览:    关键词: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%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 伪类的样式会立即应用。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com