《Head First HTML and CSS 》学习笔记——2、深入了解超文本

最新推荐文章于 2022-05-09 21:37:40 发布

Stephen-wzw

最新推荐文章于 2022-05-09 21:37:40 发布

阅读量130

点赞数

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

认识HTML中的“HT”

上一章简单认识了HTML，知道它是一个标记语言（HTML中的"ML"），用来描述网页的结构，现在我们再来了解HTML中的"HT"，也就是超文本（hypertext）。它能让我们摆脱单个页面的束缚，链接到其他页面。顺便认识一个新元素——<a>元素。

Head First Lounge 改良

附录代码见文末。下载之后，查看文件夹“Chapter2/lounge”，里面有一堆文件：“lounge.html”, “elixir.html”, 和 “directions.html” (和一大堆图像文件)。下为修改后的“lounge.html”。

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>Welcome to the Head First Lounge</h1>
    <img src="drinks.gif">
    <p>
       Join us any evening for refreshing elixirs,
       conversation and maybe a game or two of 
       <em>Dance Dance Revolution</em>.
       Wireless access is always provided;  
       BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.   
      If you need help finding us, check out our detailed directions.
      Come join us!
    </p>
  </body>
</html>

创建HTML链接：

首先把链接文本（可以是任何东西，例如图片、段落等）放在<a>元素中，如：<a>elixirs</a>，<a>detailed directions</a>。<a>元素用于创建指向另一个页面的链接。
再增加一些HTML告诉浏览器这个链接指向哪里：<a href="beverages/elixir.html">elixirs</a>。

浏览器做了什么：

首先，浏览器会显示页面，如果遇到一个<a>元素，则会将这个元素的内容显示有下划线，指示这是可点击的链接。
接下来，用户单击一个链接时，浏览器使用“herf”属性来确定这个链接指向哪个页面。

了解属性

利用属性，可以指定一个元素的附加信息。

<style type="text/css">，type属性指定我们使用哪一种样式语言，这里就是CSS。

<a href="irule.html">，href属性告诉我们一个超链接的目标文件。

<img src="sweetphoto.gif">，src属性指定要显示的图像。

**属性写法：**属性名 = “属性值”。记住，要加双引号。

组织目录结构

如果像之前一样，将所有文件和图像放在一个文件夹，则后期维护非常困难。因此，我们现在尝试划分一下目录结构。

在这里插入图片描述

找到“lounge”文件夹，创建三个新的子文件夹，分别名为“about”、“beverages”和“images”。
把文件“directions.html”移动到“about”文件夹中。
把文件“elixir.html”移动到“beverages”文件夹中。
把所有图像都移动到“images”文件夹中。
最后，加载“lounge.html”文件。

技术难点

按上述步骤做完之后，图片没有正常显示；另外，单击链接无法找到对应页面。问题在于：浏览器以为那些文件还在“lounge.html”所在的文件夹里，我们需要修改链接，让他们指向已经移动到新文件夹中的文件。

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>Welcome to the New and Improved Head First Lounge</h1>
    <img src="images/drinks.gif">
    <p>
      Join us any evening for 
      refreshing <a href="beverages/elixir.html">elixirs</a>, 
      conversation and maybe a game or two of 
      <em>Dance Dance Revolution</em>.
      Wireless access is always provided;  
      BYOWS (Bring your own web server).
    </p>
    <h2>Directions</h2>
    <p>
      You'll find us right in the center of downtown Webville.   
      If you need help finding us, check out 
      our <a href="about/directions.html">detailed directions</a>. 
      Come join us!
    </p>
  </body>
</html>