一、建议段落
p:http://www.w3school.com.cn/tags/tag_p.asp
<p>I like apples and oranges.
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
Florida citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>. </p>二、DIV
没有具体含义如果找不到合适的元素，可以找他建立结构，它的含义是由全局属性提供的
缺点：只限于设计者的网页或web应用系统，别人并不了解。
<div class="favorites">
<p>I like apples and oranges.
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p>My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
</div>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
Florida citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>. </p>三、预先编排好格式的内容（pre）
浏览器不会编程pre元素里的内容，比如说浏览器会把几个连续的空格合成一个，但是如果用了pre元 素的话就是保存原来的样式；pre元素经常和code这一类的元素一起使用。
<pre><code>
var fruits = ["apples", "oranges", "mangoes", "cherries"];
for (var i = 0; i < fruits.length; i++) {
document.writeln("I like " + fruits[i]);
}
</code></pre>
var fruits = ["apples", "oranges", "mangoes", "cherries"];
for (var i = 0; i < fruits.length; i++) {
document.writeln("I like " + fruits[i]);
}四、引有别处的内容（blockquote）：http://www.w3school.com.cn/tags/tag_blockquote.asp
表示是引用的别处的内容，局部属性cite表示出自哪里的url
<p>I like apples and oranges.
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p>My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">
The apple forms a tree that is small and deciduous, reaching 3 to 12 metres
(9.8 to 39 ft) tall, with a broad, often densely twiggy crown.
The leaves are alternately arranged simple ovals 5 to 12 cm long and 3?
centimetres (1.2?.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole
with anacute tip, serrated margin and a slightly downy underside. Blossoms are
produced in spring simultaneously with the budding of the leaves.
The flowers are white with a pink tinge that gradually fades, five petaled,
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter.
The fruit matures in autumn, and is typically 5 to 9 centimetres (
2.0 to 3.5 in) in diameter.
The center of the fruit contains five carpels arranged in a five-point star,
each carpel containing one to three seeds, called pips.</blockquote>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
Florida citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>. </p>五、增加主题分离
hr:代表向另一相关主题转换
<p>I like apples and oranges.
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
<p>My favorite kind of orange is the mandarin, properly known
as <i>citrus reticulata</i>.
Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">
The apple forms a tree that is small and deciduous, reaching 3 to 12 metres
(9.8 to 39 ft) tall, with a broad, often densely twiggy crown.
<hr>
The leaves are alternately arranged simple ovals 5 to 12 cm long and 3?
centimetres (1.2?.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole
with anacute tip, serrated margin and a slightly downy underside. Blossoms are
produced in spring simultaneously with the budding of the leaves.
<hr>
The flowers are white with a pink tinge that gradually fades, five petaled,
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter.
The fruit matures in autumn, and is typically 5 to 9 centimetres (
2.0 to 3.5 in) in diameter.
<hr>
The center of the fruit contains five carpels arranged in a five-point star,
each carpel containing one to three seeds, called pips.</blockquote>
<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
<p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
Florida citrus industry.</p>
<p>I still remember the best apple I ever tasted.
I bought it at <time datetime="15:00">3 o'clock</time>
on <time datetime="1984-12-7">December 7th</time>. </p>六、将内容组织成列表
1、有序列表（ol）:项目用li表示--http://www.w3school.com.cn/tags/tag_ol.asp
局部属性：start、reversed、type(1,A。。。)
I like apples and oranges.
I also like:
<ol type="A">
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>
2、无序列表（ul）:项目用li表示
项目号的样式由list-style-type控制
I like apples and oranges.
I also like:
<ul>
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ul>
3、li:表示列表中的项目
I like apples and oranges.
I also like:
<ol>
<li>bananas</li>
<li value="4">mangoes</li>
<li>cherries</li>
<li value="7">plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>4、生成列表说明（dl,dt,dd）
dl:表示说明列表
dt:表示说明列表中的术语
dd:表示说明列表中的定义
I like apples and oranges.
I also like:
<dl>
<dt>Apple</dt>
<dd>The apple is the pomaceous fruit of the apple tree</dd>
<dd><i>Malus domestica</i></dd>
<dt>Banana</dt>
<dd>The banana is the parthenocarpic fruit of the banana tree</dd>
<dd><i>Musa acuminata</i></dd>
<dt>Cherry</dt>
<dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>
</dl>5、生成自定义列表
列子是一个复杂的列表，不做过多的深入，后续会了解，只要知道ul能够做很复杂的列表
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
body {
counter-reset: OuterItemCount 5 InnerItemCount;
}
#outerlist > li:before {
content: counter(OuterItemCount) ". ";
counter-increment: OuterItemCount 2;
}
ul.innerlist > li:before {
content: counter(InnerItemCount, lower-alpha) ". ";
counter-increment: InnerItemCount;
}
</style>
</head>
<body>
I like apples and oranges.
I also like:
<ul id="outerlist" style="list-style-type: none">
<li>bananas</li>
<li>mangoes, including: </li>
<ul class="innerlist">
<li>Haden mangoes</li>
<li>Keitt mangoes</li>
<li>Kent mangoes</li>
</ul>
<li>cherries</li>
<li>plums, including:
<ul class="innerlist">
<li>Elephant Heart plums</li>
<li>Stanley plums</li>
<li>Seneca plums</li>
</ul>
</li>
<li>peaches</li>
<li>grapes</li>
</ul>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>七、使用插图figure:http://www.w3school.com.cn/tags/tag_figure.asp
一个独立的内容单元，可带标题，通常 作为一个整体被文档的主体引用，删除了也不会影响文档的意 思
figcaption表示插图的标题,必须放在最后或者是最前面
列子生成了将code元素裹在其中的插图
I like apples and oranges.
<figure>
<figcaption>Listing 23. Using the code element</figcaption>
<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
document.writeln("I like " + fruits.length + " fruits");
</code>
</figure>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
