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;
    }
  • 相关阅读:
    分布式计算原理
    消息的有序性
    CAP再解释
    数据建模
    领导层级的跨越
    如何上云|什么是多机房多活架构
    mysql导出导入数据
    Qt 串口 封装好的类 直接使用
    C++ 在类的定义时初始化非静态变量
    Qt error C3646: 未知重写说明符
  • 原文地址:https://www.cnblogs.com/heters/p/1287629.html
Copyright © 2011-2022 走看看