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