网页重构基础（二）

标签：

11．超链接

a) <a href=”#”></a>       可以跳转到对应的url

b) <a name=”target”></a>、<a id=”target”></a>   与上面的锚节点配合，可以直接跳转到此处

c) 技巧：跳到锚点位置，上下偏移方法。 不会被悬浮的头部覆盖

.target{
    padding-top:50px;
    margin-top:-50px;
}

12．表格Table

　　a.基本样式：

<table border="1">
    <thead>
        <tr>           <!-- 行-->
            <th></th>  <!-- 表头-->
            <th></th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr>
            <td></td>  <!-- 单元-->
            <td></td>
        </tr>
    </tbody>
</table>

　　b.样式相关：

13．列表类元素

　　a.无序列表 ul:<ul><li></li></ul>

　　　　一般用list-style-type:none;去除小圆点。通常还伴随浮动的处理

　　b.有序类表 ol:<ol><li></li></ol>

　　c.定义列表 dl:<dl><dt></dt><dd></dd></dl>

　　　　在多图图文并茂的格式时，建议使用这种格式

14．图片元素img

　　a.基本格式 <img src="url" alt="替换文本" />

　　b.css样式：一般固定宽高，并定义成区块。如果接受到的图片大小不定，可以用max-width,max-height来粗略处理。可以通过border-radius来变成圆形等形状。

　　可以通过border:xpx solid color;来加上一个边框。

15．表单类元素

　　a.type="text": 基本文本格式

　　b.type="password":密码格式

　　c.type="radio":单选框模式。

    <label>
        <input type="radio" name="sex" />男
    </label>
    <label>
        <input type="radio" name="sex" />女
    </label>

　　d.type="checkbox"：多选框模式

　　e.文本模式：

<textarea rows="3"></textarea>

16．标题和段落元素

　　a.标题：<h1>:32px/2em。<h3>:1.17em

　　　　注意：不要随意使用标题元素，而是在需要标题的时候使用，有助于搜索引擎识别。同时，h1代表最主要标题，而不是因为字体大小。

　　b.段落：<p>

　　　　注意：段首空两格可以用text-indent:2em;空一行用<br/>。

17．语义化及正确性(详细说明需要另建文章)

　　a.html结构要注意语义化，采用对应的标签，如<h1>、<ul>等。在添加class名的时候更需要注意这点。通常有‘header’,‘wrapper‘,‘box‘,‘tip‘等命名。

　　　在结构比较复杂的时候，建议“功能-位置”这种方式来定义。

　　b.注意语义化的同时，要防止css样式冲突。有一些通用样式可以抽离出来，其他的要根据情况添加。

18．新增标签和元素（html5）

　　a.挑一些常用和认为有用的：

　　　　<mark>标记文本 <datalist>下拉列表 <nav>定义导航链接

　　　　音频：<audio>声音内容 <source>定义媒介源 <video>定义视频

　　　　样式：<header>,<footer>,<aside>,<dialog>弹窗,<article>文章,<sectiion>区段

19．表单与文件

　　a.表单。如今表单感觉就是用来做样式的，通过表单发送数据很少了。略过不提

　　b.文件。一般是图片和文件两种。可以通过jquery的语法进行上传，<input type="file" />是必须的。详细另建文章。

20．什么是CSS

 　　层叠样式表，是用来结构化文档（HTML或XHTML）添加样式的计算机语言，由W3C维护

网页重构基础（二）

标签：

原文地址：http://www.cnblogs.com/threehxhot/p/5028530.html