代码:
<html>
<head>
<title>My Trip Around the USA on a Segway</title>
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2005</h2>
<img src="images/segway2.jpg">
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<ol>
<li>Walla Walla,WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>
</ol>
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of the
road today:
</p>
<blockquote>
Passing cars,<br>
When you can't see,<br>
May get you,<br>
A glimpse,<br>
Of eternity.<br>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2005</h2>
<img src="images/segway1.jpg">
<p>
My first day of the trip! I can't believe I finally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
<p>
Just the essentials. As
Lao Tzu would have said, <q>A journey of a thousand miles begins
with one Segway.</q>
</p>
</body>
</html>
步骤
- 首先,大致浏览一遍旅程,它是你网页设计的基础。
- 然后,用HTML的基础模块(
<h1><h2><h3><p>
之类)把它翻译绘制成HTML能识别的略图(或者说是蓝图)。 - 有略图后,翻译成为成型HTML
基本页面完成后再做些改进。
- 粗略的设计草图
- 从草图的略图
- 从略图到网页
引用元素
<q>
添加<q>
并不是只是希望添加双引号,而是引用的意义
我们想把事情变得更结构化并使其更有意义。
使用<q>
就意味着某些特殊的东西-即文本的真正引用。
对其他设备,以及搜索引擎都是更加友好。
可以方便的通过CSS 统一样式化引用标签的外观。
<blockquote>
区别于<q>
:<q>
元素是简短地引用文字中一部分,而<blockquote>
则是引用一大段文字并独立显示。
<q>
与<blockquote>
区别
通常希望引用一段或更多文字的时候使用
<blockquote>
,而希望在文字红夹杂一点引用的话就用<q>
.可以把
<q>
放到<blockquote>
中,如果想引用别人的引用过的话就可以这样处理。
<blockquote>
放到<q>
是不可以的。<q>
和<blockquote>
是两种不同类型的元素。
<blockquote>
元素是块(block>元素而<q>
元素是内联(inline)元素。块元素前后都有换行符,而内联元素总是在网页中随着文字流出现在”行内”.
块元素、内联元素
记住:块元素特立独行, 内联元素随波逐流。
块元素是网页的主要结构模块, 而内联元素则用来标记内容的小片段。
当你设计网页时,开头会面对一大块东西(块元素),然后添加内院元素来修饰网页。
空元素(block):<h1>
<ul>
<li>
<ol>
<blockquote>
内联元素(inline): <a>
<em>
<img>
<q>
<br>
既不是内联元素,也不是空元素。它创建了换行,但是不像块元素那样在周围显示空白。
空元素
<br>
元素唯一的功用就是换行。
当一个元素设计为没有任何实际内容的时候,我们就使用缩写(比写结束标记)来代表这个元素,就像<br>
一样。
没有实际内容的元素:空元素。<br>
, <img>
.
没有HTML内容的元素称为空元素。当你需要一个空元素例如<br>
或者<img>
时,只需要写一个开始标记。这种方便的缩写减少了HTML标记的数量。
列表
重申原则:总是要选择方法与内容结构最接近的HTML元素。
创建一个HTML列表需要两个元素。
这两个元素结合使用就构成了列表:第一个元素用来标记列表项目;第二元素决定你创建的列表的类型:有序,无序。
步骤:
1. 把每个列表项目放到一个<li>
元素中。
<li>
标记之间的内容长度不限,也可以分成几行。
2. 用<ol>
或者<ul>
封装列表元素。
<ol>
有序列表
<ul>
无序列表
备注:
unordered list = ul
ordered list = ol
list item = li
备注:
1. <ol>``<ul>``<li>
都是块元素。
2. <ol>
和<li>
(或者说<ul>``<li>
)必须一起使用,唇齿相依,缺一不可。列表是一组项目:<li>
元素用来确定每一个项目,<ol>
则是把它们组成一组。
<ol>
,<ul>
中不能添加其他的文字或者元素,它们的诞生只是为了配合<li>
元素一起工作。
3. 嵌套列表,OK!
另一种列表:自定义列表
列表中的每个项目都有一个项限<dt>
和一个描述<dd>
<dl>
<dt>Burma Shave Signs</dt>
<dd>Road signs common in the U.S. in the 1920s and 1930s advertising shaving products.</dd>
<dt>Route 66</dt>
<dd>Most famous road in the U.S. highway system.</dd>
</dl>
嵌套
当把一个元素放到另一个元素中,我们把这叫做嵌套。
<body>
嵌套在<html>
中
<p>
嵌套在<body>
中
<q>
嵌套在<p>
中
使用嵌套来确保你的标记匹配。
字符实体
用字符实体来指定一些特殊的符号。
<html>
需要用<html>
替代
&
需要用&
替代。
元素大杂烩
<a>
当要建立链接时,需要<a>
元素。
<q>
使用这个元素来进行短引用。
<p>
一个段落。
<code>
代码元素用来显示计算机程序的代码。
<em>
使用这个元素来标识你想抢到的文本。
<address>
这个元素告诉浏览器这段内容是个地址,联系信息。
<ul>
显示列表,无序。
<ol>
显示列表,有序。
<li>
用于列表项目。
<strong>
使用这个元素来标识你着重强调的部分。
<pre>
当要浏览器显示你输入的文本时,使用这个元素来格式化文本。
<br>
一个用来换行的空元素。
<hr>
一个用来制作水平线的元素。
<blockquote>
块引用用于长引用,比如抢到书中的一大段文字。
要点
在输入内容之前先计划好网页的机构。先画草图,再绘制略图,最后写HTML。
用大的块元素来创建你的网页,然后用内联元素修饰。
记住无论什么时候,使用元素来告诉浏览器你的内容的含义。
通常使用最能匹配内容含义的元素,例如,当你需要列表时绝对不用段落表示。
<p>
、<blockquote>
、<ol>
、<ul>
和<li>
都要块元素, 它们独立显示,文本前后有空行。<q>``<em>``<a>
是内联元素。 这些元素的内容和其他内容一起跟随在文字流中。当你需要插入换行时,请使用
<br>
元素。<br>
是一个空元素。空元素没有内容。一个空元素仅由一个标记组成。嵌套元素是一个完全包含在另外一个元素中元素。如果你的元素嵌套正确,所有标记都会正确匹配。
结合使用两个元素创建HTML列表:使用
<ol>
和<li>
创建有序列表,用<ul>
和<li>
创建无序列表。当浏览器显示一个有序列表,它会给列表标上序号,无序你再费力。
可以用start属性指定你自己的列表顺序。用value属性改变每个项的值。
可以在
<li>
中嵌入<ol>``<ul>
来建立嵌套列表。在HTML中使用实体来显示特殊字符。
基于Head First HTML 整理