《Head First HTML and CSS 》学习笔记——3、构建模块

最新推荐文章于 2024-07-25 15:44:34 发布

Stephen-wzw

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量103

点赞数

分类专栏：《Head First HTML and CSS》学习笔记文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_51370367/article/details/113808513

版权

《Head First HTML and CSS》学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

构建模块

前面两章已经学了不少东西了：标记、元素、链接、路径……这一章主要将重点放在建设上：从概念到蓝图来设计Web页面，浇筑地基，完成建设，甚至最后还可以加几笔润色。全书代码见文末。

<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, 2012</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>Truth or Consequences, NM</li>
      <li>Why, AZ</li> 
    </ol>

    <h2>July 14, 2012</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, 2012</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>and 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元素（<p>、<h1>、<h2>和<img>），上述代码又增加了一些新的元素：<q>元素，用来在HTML里加段简短的引用；<blockquote>元素，用于较长的引用；<br>元素，用于换行。浏览器会负责将<q>元素里面的内容加上双引号，而<blockquote>创建单独的文本块，另外还把文字稍稍缩进，<br>元素能让浏览器插入回车符。

注意：

并不是所有的浏览器都会在<q>元素的内容两边加上双引号。
<q>元素的使用可以让页面更结构化。
<blockquote>元素：长引用；<q>元素：短引用。
void元素：没有任何内容的元素，甚至没有结束标记，如<br>、<img>等。

列表

HTML列表分为有序列表<ol>（ordered list）和无序列表<ul>（unordered list），每个列表中包含列表项<li>（list item）。

注意：

<ol>或<ul>总要和<li>一起使用，且里面只能包含<li>元素。<li>元素用来标识每个列表项，<ol>或<ul>元素把它们归为一组。
可以把一个<ol>或<ul>作为某个<li>的内容，这就是嵌套列表。
把一个元素放在另一个元素中就是嵌套。

块元素和内联元素

<blockquote>元素和<q>元素实际上是两种不一样的元素，前者是一个块元素，后者是一个内联元素。块元素显示时好像前后各有一个换行，而内联元素在页面文本流中总是在“行内”出现，因此也叫行内元素。<h1>、<h2>、……、<h6>、<p>、<ol>、<ul>、<li>和<blockquote>是块元素，<q>、<img>和<em>是行内元素。

而<a>看起来像一个内联元素，但是它还可以包围块元素，而不只是文本。所以根据具体的上下文，它既可以是内联元素，也可以是块元素。<br>是块元素和内联元素之间的一个模糊地段，它确实会创建一个换行，不过不会像有两个<p>元素那样把文本分成单独的两块。

块元素通常用作Web页面中的主要构建模块，而内联元素往往用于标记小段内容。设计一个页面时，一般先从较大的块元素开始，然后在完善页面时再加入内联元素。在用CSS控制HTML表现时，如果清楚内联元素和块元素的区别，就可以轻松地设计好布局。