学习《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>江南岸

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

可用属性

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }