(1)浏览器的容错机制:
现代浏览器有很强的容错能力,即使HTML代码有错误或不符合规范,浏览器仍会尽力尝试渲染页面内容。即使没有使用
样式一致性:
使用列表标签确保浏览器对列表项应用默认样式,并且你可以更方便地通过CSS进行一致的样式控制。
安装插件来帮助完成。
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本身没有,可能插件中有简写的片段,将就用吧:(。
实际上detail是一个容器(没有内容),它可将里面内容进行展开与折叠。容器里面的内容就是summary,它表示标题,鼠标点击时就会展开(再点则折叠),显示summary后面的内容。 通常指在网页上呈现的东西
因此一般用于问答式解释,用detail容纳一个问题,summary来说明问题的标题,后面的跟的就是回答的内容。
前端是指什么?
前端是指什么?
这是内容
一般一个问题一个details,这样方便一个问题对应一个答案。
注意:details与summary都是块级元素。
上面p更远离summary,因为
是一个块级元素(block-level element),它会在其前后生成换行符,并且浏览器会在其前后添加默认的垂直间距(开发者工具查看)。
而span更靠近summary,因为 是一个内联元素(inline element),它不会生成换行符,也没有默认的垂直间距。
optimum 属性用于指定
绿色:表示最优范围
黄色:表示警告范围
红色:表示危险范围
optimum所处的区间不同,根据value值默认呈现不同的值。
(1)value的值在optimum的区间,则为绿色。
optimum为10,即所处的区间为[0,20],注意:一定是包含两个端点。
value为19,在[0,20]内,则为绿色.
(2)value的值在optimum的相邻区间,则为黄色。
optimum为10,即所处的区间为[0,20],相邻的区间为(20,80],注意一定包含远端端点80。
value为29,在(20,80]内,则为黄色.
(2)value的值在optimum的相隔区间,则为红色。
optimum为10,即所处的区间为[0,20],相隔的区间为(80,100],注意一定包含最远端端点100。
value为89,在(80,100]内,则为红色.
举例
optimum为50,最优区间[20,80],value在这范围则为绿色(value=30);
相邻区间为(0,19),value在此范围为黄色(注意0值没有,无法呈现颜色,所以不含0);
另一个相邻区间为(81,100]也为黄色。
简言之:
用于突出显示“重要”这个词,表示这是需要用户特别注意的“内容”。比如考试内容填空。
用于强调“记住”这个词,表示这个信息很重要。"语气"强调。
用于强调“我非常高兴”,表示带有喜悦的情绪。"情绪"强调。
H5 中的 , , 标签都用于强调文本,但它们各自侧重不同的方面:
(1) 标签:
强调重点内容:
主要用于突出显示文本中的重要部分,通常用来标记需要用户注意的关键词或重要信息。
视觉效果:
默认会用黄色背景色来标记文本,这在视觉上可以清晰地突出显示被标记的文字。
语义:
表示文本是需要用户注意的重点内容,而不是强调语气或情绪。
(2) 标签:
强调语气:
用于强调文本的语气,表示文本内容比周围内容更重要。
视觉效果:
通常会以加粗的方式显示文本,以强调其重要性。
语义:
表示文本内容在语义上比周围内容更重要,但并不一定意味着用户需要格外注意。
(3) 标签:
强调情绪:
用于强调文本的情绪或语气,表示文本内容带有特殊的感情色彩。
视觉效果:
通常会以斜体的方式显示文本,以突出其情绪或语气。
语义:
表示文本内容在语气或情绪上与周围内容不同,但并不一定意味着其重要性更高。
这是一个非常重要的段落,你必须记住这个信息!
我非常高兴能看到你!
布局很复杂,我放弃了。有精力的可以弄弄。
ruby用于模拟东亚文字排版中常见的注音方式。且文字先写拼音后写。见鬼的是vscode又不提示这个关键词。
魑魅魍魉
注意:拼音是写在下面,但网页上呈现的是拼音在上面,看了几家拼音对齐方式,似乎没有完美方案。
另外在它们后面加
有不同的效果,很是复杂。
魑
(1)当span后面增加一个
无效果,但若有两个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个行。
若是下面,更为复杂:
魑a
b
c
d e
f
g
h
j
再进化一化:
魑aaaaaaaaaaa
bbbbbbb
c
d e
f
g
h
jjjjjjjjjjjjjj 魑魅魍魉
估计解释起来更为费劲了。
简单点:ruby里面的是单独的规则环境不要弄了。
解释:
在标签内部,
标签的行为受到的内部布局规则的影响。在标签内,
标签在或
这是因为功能细化的原因,各适用范围不同。
required确保用户必须填写该字段。如果用户没有填写被标记为required的字段,浏览器会阻止表单的提交,并显示一个默认的错误消息,提示用户该字段是必填的。
patter只对输入的数据进行验证。
有些是可选项,只有输入时才验证,比如评论(若有内容则需要过滤),比如个人兴趣,则需要限制。等等。
因此,单独有pattern而无reqired时,那么pattern属性实际上不会被触发,因为没有任何输入可以与正则表达式进行匹配。在这种情况下,pattern属性不会起作用,因为它没有输入数据可以验证。
这样更容易细化功能,适用各种不同场景。
(1)text
描述: 默认类型,用于单行文本输入。
应用场景 用户名、地址、搜索框等。
注意点: 默认情况下,输入的文本不会限制格式。
(2)password
描述: 用于输入密码,输入的文本会被隐藏(通常显示为圆点或星号)。
应用场景: 登录表单中的密码输入。
注意点: 安全性考虑,敏感信息应通过HTTPS传输。
(3)email
描述: 用于输入电子邮件地址,支持基本的格式验证。
应用场景: 注册或联系表单中的电子邮件输入。
注意点: 浏览器会进行基本的格式检查,但不保证输入的电子邮件地址有效。
(4)number
描述: 用于输入数字,支持输入数字和一些特殊字符(如“+”、“-”、“.”、“,”)。
应用场景: 年龄、数量等数字输入。
注意点: 可以设置最小值、最大值和步长。
(5)date
描述: 用于输入日期,通常显示为一个日期选择器。
应用场景: 出生日期、预约日期等。
注意点: 支持的格式可能因浏览器而异。
(6)checkbox
描述: 用于创建复选框,用户可以选择多个选项。
应用场景: 多选项选择,如兴趣爱好、服务条款同意等。
注意点: 每个复选框都是一个独立的元素。
(7)radio
描述: 用于创建单选按钮,用户只能选择一组选项中的一个。
应用场景: 性别选择、支付方式等。
注意点: 同一组中的单选按钮必须具有相同的name属性。
(8)file
描述: 用于上传文件。
应用场景: 图片上传、文档上传等。
注意点: 应确保文件上传的安全性,限制文件类型和大小。
当然还有time,week,datetime,url,color等等,真是一多功能的输入框啊。
简言之: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 编码的原理和应用能够帮助你更好地理解网页应用程序的工作机制,并且能够更好地处理网页数据。
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 属性。
在HTML5中,contenteditable属性可以应用在以下几种元素上:
、