什么是 HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词
  • HTML 标签通常是成对出现
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

一、Web语言

Web服务器:在互联网上有一份全天候的工作,夜以继日、不知疲倦的等待来自Web浏览器的请求

Web浏览器:点击一个链接来访问某个页面。这个单击会导致浏览器向Web服务器请求一个HTML页面,获取和这个页面,并在你的浏览器上显示。下面是一个页面事例与讲解:

<html>   <!--首先用<html>和</html>标记包围你的HTML,这个会告诉浏览器文件的内容是HTML-->             
      <head>   <!--<head>和</head>标记。首部(head)包含web页面有关信息,如页面标题。-->
      <title>stirbuzz coffee</title>    <!--<title>和</title>中内容总会出现在浏览器窗口顶部。-->
      </head>
      <body>        <!--页面主题包括<body>和</body>标记以及它们之间的所有内容。-->
           <h1>Starbuzz Coffee Beverages</h1>        <!--使用<h1>和</h1>标记来标记标题这两个标记之间所有文本就是标题的具体内容-->
           <h2>House Blend, $1.49</h2>              <!-- <h2>和</h2>标记包括一个子标题。可以把<h2>标记看作是<h1>标题的子标题-->
           <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>    <!--<p>和</p>标记包围一个文本块,这是一个段落其中可以有一个或多个句子-->
           <h2>Mocha Cafe Latte, $2.35</h2>
           <p>Espresso, steamed milk and chocolate syrup.</p>
           <h2>Cappuccino, $1 .89</h2>
           <p>A mixture of espresso, steamed milk and foam.</p>
           <h2>Chai Tea, $1.85</h2>
           <p>A spicy drink made with black tea, spices,milk and honey. </p>
    </body>
</html>

总结:

HTML和CSS是我们用来创建网页的语言。
Web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面,并根据HTML和CSS显示网页的内容。
HTML是超文本标记语言(HyperText MarkupLanguage)的缩写,用来建立网页的结构。
CSS是层叠样式表(Cascading Style Sheets)的缩写,用来控制HTML的表现。
通过HTML,我们利用标记来标示内容提供结构。我们把匹配标记以及它们包围的内容称为元素。
元素由3部分组成:一个开始标记、内容和一个外。结束标记。不过有些元素(比如<img>)有所例开始标记可以有属性。
结束标记在左尖括号后面、标记名前面有一个“/”,以明确这是结束标记。
所有页面都要有一个<html)元素, 其中要有一<head>元素和一个<body>元素。
网页的信息放在<head>元素里。
<body>元素里的内容就是你将在浏览器里的东西。
大多数空白符(制表符、回车、空格)都会被浏览器忽略,不过可以利用空白符让你的HTML (对你)更有可读性。
可以在<style>元素中写CSS规则,为HTML网页增加CSS。<style> 元素总要放在<head>元素里。
可以使用CSS在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">   <!--src属性指定一个img标记显示的图形的文件名。-->
    <p>
       Join us any evening for 
       refreshing <a href="beverages/elixir.html">elixirs</a>, 
<!--规划路径:
1.明确源文件和目标文件
2.追踪从源文件到目标文件的一个路径 
3.创建一个hert表示追踪到的路径. 用/分隔路径中的各个部分-->
       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>.<!--使用<a>元素创建一个超文本链接,链接到另一个Web页面。href属性会告诉浏览器链接的目标文件。-->
      Come join us!
    </p>
  </body>
</html>

总结:

想从一个页面链接到另一个页面时,要使用<a>元素。
<a>元素的href属性指定了链接的目标文件。
<a>元素的内容是链接的标签。这个标签就是你在网页上看到的链接文本。默认地,这个标签会有下划线,指示这是可以单击的。
文字或图像都可以用作链接的标签。
单击一个链接时,浏览器会加载href属性中指定的Web页面。
可以链接到相同文件夹中的文件,也可以链接到其他文件夹中的文件。
相对路径是相对于链接的源Web页面指向网站中其他文件的一个链接。就像在地图上一样,终点总是相对于起点。
".."表示“父文件夹”
记住要用“/”(斜线) 字符分隔路径中的各个部分。
指向一个图像的路径不正确时,会在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>    <!--使用ol元素包围列表项,则则这些列表项将作为一个有序列表显示。-->
      <li>Walla Walla, WA</li> 
      <li>Magic City, ID</li>    <!--每个<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>    <!--blockquote元素用于较长的引用,需要单独显示。<q>用于短引用,作为现有段落的一部分。-->
      Passing cars, <br>
      When you can't see, <br>  <!--在希望换行的地方增加一个<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>     <!--使用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> <!--每个引用都需要用一个<q>开始标记和一个</q>结束标记包围。-->
    </p>
  </body>
</html>

总结:

开始输入内容之前要规划好Web页面的结构。首先画出一个草图,然后创建一个略图,最后再写出HTML。
规划页面时,首先设计大的块元素,然后用内联元素完善。
记住,要尽可能使用元素来告诉浏览器你的内容的含义。
一定要使用与内容含义最接近的元素。例如,如果需要一个列表,就不要使用段落元素。
<p>、<blockquote>、 <ol>、 <ul>和<li> 都是块元素。它们单独显示,在内容前后分别有一个换行(默认地)。
<q>和<em>是内联元素。这些元素中的内容与其包含元素的其余内容放在一起。
需要插入你自己的换行时,可以使用<br>元素。
<br>是一个“void” 元素。
void元素没有内容。
void元素只有一个标记组成。
“空”元素没有内容。不过它有开始和结束标记。
嵌套元素是指完全包含在另一个元素中的元素。如果元素能正确地嵌套,所有标记都能正确匹配。
要结合两个元素建立一个HTML列表:使用<ol>和<li>建立有序列表,使用<ul>和<li>可以建立一个无序列表。
浏览器显示一个有序列表时,它会为列表创建序号,所以无需你费心。
可以在列表中建立嵌套列表,将<ol>或<ul>元素放在<li>元素中。
要对HTML内容中的特殊字符使用字符实体。