在html文件中使用自定义标签

xml文件中可以自由的使用自定义标签,html文件中同样可以使用自定义标签,但有几个注意事项:

  • 必需设置<html>标签的xmlns属性。例如,可以这样声明:<html xmlns:article>

    这是因为html文件有一个默认的“名字空间”,<div>,<p>等标签就处在这个默认的“名字空间”中.

    很显然,这个默认的“名字空间”中并不包含我们的“自定义标签”,因此我们只能自己定义一个“名字空间”,让“自定义标签”处在这个自定义的“名字空间”中.

    经过我的尝试,自定义名字空间不可以使用中文。例如,这样声明:<html xmlns:名字空间>是错误的

  • 在使用自定义标签时,应该使用<namespace:自定义标签>这样的形式,不能写成<自定义标签>这样的形式。

    也就是说,自定义标签的名称前一定要指明它所在的“名字空间”

  • 自定义标签的样式,既可以在<style>标签中设定,也可以在使用时设定它的style属性(内联式设定)。
    • 在<style>标签中设定,例如:
      <style type="text/css"> 
      article/:文章正文{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} 
      </style>

      注意,在<style>标签中设定样式时,在“名字空间”和“:”中间要加上“/”,例如上面写成article/:文章正文,不能写成article:文章正文

    • 使用自定义标签时设定它的style属性,例如:
      <article:文章标题 style="border:1px solid #ccc;">这里是文章的标题</article:文章标题>

举例:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 
<html xmlns:article> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  <title>使用自定义标签</title> 
 
  <style type="text/css"> 
   article/:文章正文{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;} 
  </style> 
 </head>
 
 <body>
 
  <article:文章标题 style="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;">
   这里是文章的标题
  </article:文章标题>
   
  <article:文章正文>
   这里是文章的正文
  </article:文章正文>
   
 </body 
</html>

注释:自定义标签的display值默认是inline,在本例中,将其改为block方式显示。

你可能感兴趣的:(在html文件中使用自定义标签)