“中国要复兴、富强,必须在开源软件领域起到主导作用,为了国家安全和人类发展,责无旁贷,我们须为此而奋斗”——By:云客
HTML类class和ID的命名:
HTML标准是由W3C维护的,在它的推荐标准中只对class和id命名有如下要求:
类名:一些由空格分隔的字符串
ID名:全局唯一,不能含任意空白字符,至少一个字符,可以仅含数字或标点符号,可以以数字、字母、下划线开始等等,见以下资料:
https://www.w3.org/TR/html52/dom.html#element-definitions-attributes
https://www.w3.org/TR/html52/dom.html#global-attributes
在HTML4中对id和name有特别规定,只能以字母开头,后接任意数量的字母、数字、连字符、下划线、冒号、点号,见:
http://www.w3.org/TR/html4/types.html#type-name
但class和id也被用于CSS中当做识别符identifier,CSS标准也是W3C维护的,其中有更细致的规定,见:
https://www.w3.org/TR/CSS21/syndata.html#characters
在CSS识别符中除class和id外还包含了name,他们需要遵循以下规则:
连字符- (U+002D)
小写字母 (U+0030 - U+0039)
大写字母 (U+0041 - U+005A)
下划线 (U+005F)
数字 (U+0061 - U+007A)
ISO 10646 字符 U+00A1 及更高
不能以数字、双连字符、连字符加数字开始
在实践中我们需要遵循更细致更通用的规则,但在实际实现中各浏览器要求不一,总的来说建议你遵循以下规则(这将通用于所有浏览器,class和id规则相同):
以字母 A-Z 或 a-z 开头
其后是字母(A-Za-z), 数字 (0-9), 连字符 ("-")或下划线 ("_")
区分大小写
注意class和id属性:
在 HTML5 中,可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)。
在 HTML 4.01 中,不能用于: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>。
drupal8遵循以上css识别符规则,在类:\Drupal\Component\Utility\Html中处理相关过滤
HTML辅助类:
类:\Drupal\Component\Utility\Html
该类提供许多和HTML操作有关的实用方法。介绍如下:
\Drupal\Component\Utility\Html::getClass($class)
过滤一个字符串,得到合法有效的类名,每次调用只能过滤一个类名,不可以空格分隔传递多个类名,过滤后的类名除符合前文介绍的规则外,将具备以下特征:
空格、下划线、/、[ 将被替换为连字符,“]”被去掉,双下划线保留,全部被转化为小写
\Drupal\Component\Utility\Html::getId($id)
过滤一个字符串,得到合法有效的id字符串,具备以下特征:
空格、下划线、[ 被连字符替换,多个连字符-被替换为一个,仅包含字母、数字、连字符,全部小写
\Drupal\Component\Utility\Html::getUniqueId($id)
和getId($id)完全相同,不过她保证唯一性,在html页面中id必须唯一,该函数通过追加计数的方式保证id字符串的唯一性,具体是:id+“--”+计数,计数从2开始,含2,如“yunke--2”,在页面中如果发现id具备双连字符加数字,那么就是该函数在起作用了;如果是ajax请求,由于内容会合并到一个未知的页面,那么id为:id+“--”+Base64的随机字符;该方法通常由程序在自动处理中调用,在前端如需要确定的id,需要手动设置
在该类中还有关于DOM操作、html实体转换、路径转换等辅助方法这里仅做简单介绍,详细请看注释文档。
\Drupal\Component\Utility\Html::normalize
规范化文档,比如移除空文本节点等
\Drupal\Component\Utility\Html::load
加载一个html片段,形成\DOMDocument对象
\Drupal\Component\Utility\Html::serialize
还原\DOMDocument对象的body到html片段
\Drupal\Component\Utility\Html::decodeEntities
解码html实体,仅一重
\Drupal\Component\Utility\Html::escape
将特殊字符转为html实体
\Drupal\Component\Utility\Html::transformRootRelativeUrlsToAbsolute
将html片段中的相对路径转换为绝对路径
反馈互动