HTML元素属性测试总结(续篇)_html/css_WEB-ITnose
程序员文章站
2022-05-13 08:24:17
...
HTML元素属性测试总结(续篇)
code 元素的含义(语义)为“代码内容”,FireFox 在渲染该元素时,会将 code 标签内容显示为“等宽字体”(每个字符的宽度相等),这就造成了元素的语义和呈现形式混杂在一起;正确的做法是:浏览器应该无视 code 元素由于历史原因遗留下来的默认呈现效果(等宽字体)。
语义元素仅仅说明文档内容的结构与含义,例如 code 表示文档中的代码;video 表示文档中的视频;用 CSS 控制这些元素呈现给用户的形式(将 code 元素的内容用等宽字体呈现给用户),这就做到了内容与呈现分离,关于这一点,chrome 做得比 FireFox 稍好一些,例如对于下面这个文档:
XssPayloadTest this is normal textNodethis is normal textNode include in code element
两者的渲染效果如下:
推荐阅读
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
读取页面元素的onclick属性值 禁止重定向 获取url重定向后Location头指定的重定向目标_html/css_WEB-ITnose
-
float元素内元素含有border属性之后页面变形问题,求_html/css_WEB-ITnose
-
为什么内嵌元素也能加padding属性呢_html/css_WEB-ITnose
-
CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小_html/css_WEB-ITnose
-
了解HTML表单之input元素的30个元素属性_html/css_WEB-ITnose
-
CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小_html/css_WEB-ITnose
-
HTML元素的ID和Name属性的区别_html/css_WEB-ITnose
-
为什么内嵌元素也能加padding属性呢_html/css_WEB-ITnose
-
html元素属性问题?_html/css_WEB-ITnose