HTML&CSS基础篇之五：HTML网页创建流程

来源：互联网发布：人工智能研究热点编辑：程序博客网时间：2024/05/21 11:03

代码：

<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
基本页面完成后再做些改进。
1. 粗略的设计草图
2. 从草图的略图
3. 从略图到网页

引用元素

<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> 块引用用于长引用，比如抢到书中的一大段文字。