zoukankan      html  css  js  c++  java
  • xhtml+css符合标准的WEB设计

    XHTML代码规范

    1.所有的标记都必须要有一个相应的结束标记
    2.所有标签的元素和属性的名字都必须使用小写
    3.所有的XML标记都必须合理嵌套
    4.所有的属性必须用引号""括起来
    5.把所有<和&特殊符号用编码表示
    6.给所有属性赋一个值
    7.不要在注释内容中使“--”

    HEAD区示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="Keywords" content="keyword1,keyword2" />
    <meta name="Description" content="description about the site or page" />
    <link href="/style/common.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
    <script language="JavaScript" src="/js/common.js" type="text/javascript"></script>
    <title>这是一个标题</title>
    </head>

    常用代码结构

    div:主要用于布局,分割页面的结构
    ul/ol:用于无序/有序列表
    span:没有特殊的意义,可以用作排版的辅助,例如

    <li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>
    然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

    h1-h6:标题

    label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:
    <label for="user-password">密 码</label>
    <input type="password" name="password" id="user-password" />

    fildset & legend:fildset套在表单外,legend用于描述表单内容。例如:
    <form>
    <fildset>
    <legend>title</legend>
    <label for="user-password">密 码</label>
    <input type="password" name="password" id="user-password" />
    </fieldset>
    </form>

    dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如
    <dl>
    <dt>什么是CSS?</dt>
    <dd>CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。<dd>
    <dt>什么是XHTML?</dt>
    <dd>XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似HTML的角色的XML。 本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。</dd>
    </dl>

    命名参考

    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list

    用CSS做1px边框的表格

    #maincontent table{
      border-collapse:collapse;
      border-bottom:1px solid #000000;
      border-left:1px solid #000000;
    }
    #maincontent th{
      border-top:1px solid #000000;
      border-right:1px solid #000000;

    }
    #maincontent td{
      border-top:1px solid #000000;
      border-right:1px solid #000000;
    }
  • 相关阅读:
    预处理01 零基础入门学习C语言50
    内中断01 零基础入门学习汇编语言60
    预处理03 零基础入门学习C语言52
    预处理02 零基础入门学习C语言51
    对《移动互联网白皮书(2013年)》的几个解读
    Windows Azure Mobile Services增加了对 Android的支持并扩展其适用范围至东亚地区
    中国将自主研发操作系统对抗谷歌
    Windows Azure2.5天免费深度技术训练营——面向软件工程师和架构师
    Windows Azure Store:扩大服务市场
    use Visual studio2012 developing kernel driver monitor thread creation on Windows8
  • 原文地址:https://www.cnblogs.com/heters/p/1287629.html
Copyright © 2011-2022 走看看