学习《html5.css3.0》网页布局和样式精粹(第二天)

第4章

4.1 段落和行

4.1.1 p元素

<p>这是第一段内容</p>
<p>这是第二段内容</p>

4.1.2 控制换行

1. 强制换行

2. 禁止换行

3. 软换行

4.1.3 连字符

4.1.5 预格式化文本

4.2 标记文章改变（ins元素和del元素）

春风又<del>过</del><ins>绿</ins>江南岸

可用属性

cite=url

datetime=datetime

4.3 基本文字格式(i,b,small,s)

    <p>
    <i>斜体呈现</i><br/>
    <b>粗体呈现</b><br/>
    <b><i>斜体+粗体</i></b><br/>
    <b><i><s>删除线+斜体+粗体</s></i></b><br/>
    </p>

4.3.1 small元素（网页底部的版权声明、靠近logo）

4.3.2 s元素

4.4 水平分割线

4.5 语义化和结构化的文本

4.5.1 em 强调

4.5.2 strong强烈的强调

4.5.3 sub(下标)和sup(上标)

    <p>
    <s>忽略</s><br/>
    <em>强调</em><br/>
    <strong>强烈的强调</strong><br/>
    你好<sub>下标</sub><br/>
    你好<sup>上标</sup><br/>
    </p>

4.5.4 注音显示(ruby、rt、rp元素)

4.5.5 标注(cite元素不用强调人名)

4.5.6 用于缩写的短语元素(abbr)

4.5.7 用于定义术语的元素(dfn)

4.5.8 用于定义计算机代码片段

<p>
        下面是一段JavaScript程序代码<br/>
        <code>
            var myText="嗨，这是JavaScript代码！";
            document.write(myText);
        </code>
       </p>

4.5.9 其他短语元素(smap、kbd、var元素)

4.5.10 突出显示文本(mark元素)

4.5.11 表示时间的元素(time)

第5章 建立列表

3种列表形式：有序列表，无序列表，解说列表

5.1.1 有序列表(ol元素)

5.1.2 无序列表(ul)

5.1.3 解说列表(dl,dt,dd)

 <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
       </ol>
       </p>
       <ul>
        <li>无序1</li>
        <li>无序2</li>
        <li>无序3</li>
       </ul>
    </p>
    <dl>
        <dt>标题1</dt>
        <dd>标题1.1</dd>
        <dd>标题1.2</dd>
        <dd>标题1.3</dd>
        <dt>标题2</dt>
        <dd>标题2.1</dd>
        <dd>标题2.2</dd>
        <dd>标题2.3</dd>
    </dl>

5.1.4 嵌套列表

5.2 自定义有序列表

<p>
    定制有序列表中序号(type属性)
    <br/>
        <ol type="I">
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
        </ol>
        定制有序列表中列表项的起始数(start属性)
    <br/>
        <ol start="10">
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
        </ol>
        反转序号值(reversed)
    <br/>
        <ol reversed>
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
        </ol>
                定制有序列表中列表项的数值(value属性)
    <br/>
        <ol >
            <li>有序1</li>
            <li value="3">有序2</li>
            <li>有序3</li>
        </ol>
    </p>