HTML基础入门

发表于 2015-08-24 更新于 2024-02-19 阅读次数：本文字数： 7.4k 阅读时长 ≈ 27 分钟

前言

本文主要对HTML基础中常用的一些概念、标签、属性进行讲解，其实HTML的知识远远不止这些，如果希望深入学习HTML的相关知识，可到W3school上进行详细，深入的学习。

HTML初识#

什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) 是一种使用标记标签来描述网页的标记语言，而不是编程语言。所谓的超文本就是指页面内可以包含图片、链接、甚至音乐，等非文字元素。HTML文件的后缀名是.html，使用一般的文本编辑器就能编辑，之后再使用浏览器打开，就能看见你所编辑的网页。

HTML文件结构

上图展示的是html文件简单的机构图，由此可见，一般的html文件结构就是下面这样的：

<html>
    <head>
            <title>.....</title>
    </head>

    <body>
            <p>.....</p>
    </body>
</html>

HTML是一种标记语言，这些<..>就叫做标签，而HTML就是使用这些标签来描述网页的。

HTML文档

HTML文档 也被称为网页，HTML 文档包含 HTML 标签 和 纯文本。Web 浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML标签（相当于是隐藏的格式描述），而是使用标签来解释页面的内容。

例如：

<html>
    <body>

        <h1>First Heading</h1>

         <p>first paragraph</p>

    </body>
</html>

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML标签

什么是标签

标签就是上面这些<head>、<body>、<table> 等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签;当然还有少部分不是成对出现的，如<br>、<hr>等。标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。

什么是元素

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

比如<p>这就是一个标签,<p>内容</p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容。这里有一个值得注意的例外，即<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。

常用的标签

我们知道，网页能实现各种各样的定制，实现各种各样的功能，反过来可以说明我们的标签种类是很多的，这样才能实现各种各样的功能及定义。这里我们先介绍四个最基本的标签：

HTML标题

Heading 是通过 <h1>-<h6>等标签进行定义的。例如：

<h1>This is first heading</h1>
<h2>This is second heading</h2>
<h3>This is third heading</h3>
...
...

HTML段落

paragraph 是通过<p>标签进行定义的。例如：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
...
...

HTML链接

链接是通过<a>标签进行定义的。例如：

1	<a href="http://shiyanlou.com">This is a link</a>

HTML图像

image是通过<img>标签进行定义的。例如：

1	<img src="shiyanlou.jpg" width="100" height="142" />

感受HTML

尽管现在我们还没有入门，尽管我们只知道了一丢丢，抛开一切，尝尝味道先。用上面学到的一两个标签，写一个简单的例子，体验一把HTML的魅力吧！

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <h1> My Firest Web </h1>
        <p> Hello,My name is koen! </p>
    </body>
</html>

HTML文本

HTML元素

什么是HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

<开始标签> 元素内容 <结束标签>

下面这就是一个元素：

<p> Hello,My name is koen! </p>

HTML元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

HTML元素嵌套示例

HTML嵌套顾名思义就是在一个HTML元素的内容中嵌入了另一个HTML元素，例如：

<html>
    <body>
        <p> Hello,My name is koen! </p>
    </body>
</html>

上述例子中一共有三个元素，这样你是否理解了所谓的HTML元素嵌套呢？

HTML空元素

没有内容的 HTML 元素被称为空元素。<br> 就是没有关闭标签的空元素（<br>标签用来定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法，即使 <br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障，说了那么多就是想说以后换行就用<br/>。

前面我们从示例中看出,<p>标签结束以后也后一个换行的动作，那现在又介绍了下面我来给大家展示下<p>标签和<br>标签的区别:

相同之处是br和p都是有换行的属性及意思

区别<br/>是只需一个单独使用，而<p>和</p>是一对使用

br标签是小换行提行（相当于我们平时文本中输入一个回车），p标签是大换行（分段，相当与两个回车）各行作用。

HTML属性

某些标签要想按照作者的意愿来实现在网页上，就得需要一定信息的补充，这信息就叫属性，HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。

是在 HTML 元素的开始标签中定义。

总是以名称和值对应的形式出现，比如：name=”value”。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

例如：

<a href="http://www.baidu.com">baidu</a>

href="http://www.baidu.com，这一部分就叫做<a>标签的属性，是对<a>标签的补充说明，即指向百度的网页。

再看几个例子：

<h1 align="center"> My Firest Web </h1> 
#设置标题居中

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black"> 
#设置网页背景颜色为黑色

以上三种方式都可以设置背景颜色（上面为黑色），这个属性值可以是十六进制数、RGB值或颜色名。这里就简单的选择最直观的方式。颜色名支持aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow）

HTML文本格式化

一般我们在网页中能看见有各种各样的字体、文本样式，这就是文本格式化标签的功劳。下面我们就来学习使用文本格式化标签（比较常用的）

标签	描述
`<b>`	(bold粗体)
`<big>`	(big)大字体
`<em>`	(emphasized)强调字
`<i>`	(italic)斜体
`<small>`	(small)小字体)
`<strong>`	(strong)加重语气

例如：

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <h1 align="center"> My Firest Web </h1>
        <p> Hello,My name is koen! </p>

        <b> bold words </b><br/>
        <strong> strong words </strong><br/>
        <big> big works </big><br/>
        <em> emphasized words <em/><br/>
        <i> italic words </i><br/>
        <small> small words </small><br/>
    </body>
</html>

编辑html文件如上并用浏览器打开即可直观的看出字体的区别。但是可以发现，每写完一句要想换行就要加一个换行标签<br/>比较麻烦，这个时候就可以使用预格式文本来处理。

预格式文本：指代码页和网页展示是一样的格式，不用额外添加换行符标签就能换行

<pre>...</pre>标签的使用

将刚才的html文件中的换行符标签都删掉，将其内容丢到<pre>标签中，就可以得到与之前差不多的格式。

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <h1 align="center"> My Firest Web </h1>
        <p> Hello,My name is koen! </p>

<pre>
<b> bold words </b>
<strong> strong words </strong>
<big> big works </big>
<em> emphasized words <em/>
<i> italic words </i>
<small> small words </small>
</pre>
    </body>
</html>

这个标签适用于代码的粘贴，你想过没有，要是没有这个标签，要想控制网页中显示的代码格式，是一件多么难的事。

HTML样式

上面我们用了各种各样的标签来使HTML文本格式符合我们的意愿，其实有一个属性能帮助我们减少不少的麻烦。

style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将背景颜色、字体样式、字体尺寸、字体颜色、对齐方式一并定义好。

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body style="background-color:powderblue">
        <h1 style="text-align:center"> show some function of style </h1>
        <p style="text-align:center;font-family:verdana;color:gray"> verdana and white </p>
        <p style="font-family:time;color:green"> time and green words </p>
        <p style="font-size:40px"> the size of these words is 40 pixels </p>
    </body>
</html>

编辑完成后用浏览器打开，看了效果以后是不是有倍感亲切的感觉，以后就不用再单独使用多种标签了，在style中可以一气呵成，将大部分的文本格式全都处理掉了。

HTML超文本

HTML链接

之所以你可以在浏览器屏幕上单击鼠标或在键盘上按下按键，从而选择并自动跳转到文档中自己感兴趣的那个主题，或跳转到世界上某处完全不同的集合中的某个文档。那是因为你单击的这就是超链接

相信大家对超链接不会陌生吧，天天都不知道点了多少个呢。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以单击这些内容来跳转到新的文档或者当前文档中的某个部分。我们在前面的例子中只简单使用了<a>标签，用字符作为网页的超链接。下面我们要讲到的都是关于<a>标签的属性。

给文字及图片添加超链接

首先我们还是回顾一下最简单的链接使用，直接给文字添加链接到网页和另外的HTML文件。

HTML内容如下：

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <p> let's have an example </p>
        <p>
            <a href="http://www.baidu.com"> baidu </a>
        </p>
    </body>
</html>

这是最简单的超链接,接下来我们就来让这个HTML文件链接到另一个HTML文件(在相同的文件夹，再添加一个HTMl文件）。两个html文件内容如下:

test.html:

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <p> let's have an example </p>
        <p>
            <a href="http://www.baidu.com"> baidu </a>
        </p>
        <p>
            <a href="lianjie.html"> lianjie.html </a>
        </p>
    </body>
</html>

lianjie.html：

<html>
    <head>
        <title> Koen's Test Web </title>
    </head>
    
    <body>
        <p> This is lianjie.html </p>
    </body>
</html>

说完了给文字添加超链接，下面我们就来说说给给图片添加超链接，单击图片，链接到另一个页面，html文件内容如下：

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <p> let's have an example </p>
        <p>
            <a href="http://www.baidu.com"> <img src="happy.png" /> </a>
        </p>
    </body>
</html>

超链接的打开方式

打开方式分为在本页打开和在新的浏览器窗口打开，默认情况下，超级链接打开新页面的方式是自我覆盖（就是在本页打开）。根据浏览者的不同需要，读者可以指定超级链接的其他打开新窗口的方式。超级链接标签提供了target属性进行设置，取值分别为_self（自我覆盖，默认）、_blank（创建新窗口打开新页面）。

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <p> let's have an example </p>
        <p>
            <a href="http://www.baidu.com" target="_blank"> <img src="happy.png" /> </a>
        </p>
    </body>
</html>

在上一个例子中的<a>标签里加入target属性并设置为_blank后，会发现链接到的网页是在新窗口中打开的，而默认的_self属性则是在页面以覆盖的形式打开。

超链接添加提示文字

有些时候超链接文字不足以说明单击以后所要链接的内容，所以这个时候我们就需要给超链接添加提示文字，加以描述下一个链接的内容，当光标停留在超链接上时，提示语言就会显现，会让页面显现的很简介。涉及到的属性就是title

<html>
    <head>
        <title> Koen's First Web </title>
    </head>

    <body>
        <p> let's have an example </p>
        <p>
            <a href="http://www.baidu.com" target="_blank" title="this word will link to the web of baidu"> <img src="happy.png" /> </a>
        </p>
    </body>
</html>

超链接实现书签

也许你在网页看过小说，当你在页首单击章节的题目，就会自动的跳转到相应的章节，这是怎样实现的呢？。要实现书签，你就要了解，什么是锚（anchor）。锚（anchor）是引自于船只上的锚，锚被抛下后，船只就不容易飘走、迷路。实际上锚就是用于在单个页面内不同位置的跳转，有的地方叫做书签。涉及到的标签当然还是<a>标签,超级链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超级链接的href属性可以根据name跳转到对应的锚。如下实现跳转：

<a href="#跳转目的地名称">跳转起始字符</a>
...
...
...
<a name="跳转目的地名称">跳转目的地字符</a>

具体实现：

<html>
    <head>
    <title>HTML</title>  
    </head>  
    
    <body style="font-size:20px">
    
        <p style="text-align:center">HTML LEARNING</p>
    
        <p>
        <a href="#c1">  HTML chushi</a>
        </p>
        <p>
        <a href="#c2">HTML wenben </a>
        </p>
        <p>
        <a href="#c3">HTML chaowenben 1 </a>
        </p>
        <p>
        <a href="#c4"> HTML chaowenben 2 </a>
        </p>
        <p>
        <a href="#c5">HTML shiyan </a>
        </p>
    
    
        <h1><a name="c1"></a>chapter 1 chushi HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
    
        <h1><a name="c2"></a>chapter 2 wenben HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
    
        <h1><a name="c3"></a>chapter 3 chaowenben 1 HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
    
        <h1><a name="c4"></a>chapter 4 chaowenben 2 HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
    
        <h1><a name="c5"></a>chapter 5 shiyan HTML</h1>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        <p>lalalaalalal</p>
        
    </body>
</html>

HTML表格

HTML 网页设计不可或缺的元素就是表格（Table），通常表格用来做版面的排版，而表格的用法包含了几个重要的标签，分別是<table>、<tr> 与<td>这几个重点，组合起來才是个完整的表格，表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。<th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如：

<html>
    <head>
        <title >TABLE</title>
    </head>
    
    <body style="font-size:20px">
        <p style="text-align:center">table practice</p>  
         <table  align="center" border="1">  
                <tr>
                    <td>first row and first column</td>
                    <td>first row and second column</td>
                    <td>first row and third column</td>
                </tr>
                 <tr>
                     <td>second row and first column</td>
                     <td>second row and second column</td>
                     <td>thirt row and third column</td>
                 </tr>
         </table>
    </body>
</html>

border=”1”定义的是最外面边框粗细，为1，你也可以设置为0，就是不显示边框（默认就是没有边框）

下面再介绍表格两个属性：

colspan：控制此单位所占列数
rowspan：控制此单位所占行数

<html>
    <head>
        <title >TABLE</title>
    </head>
    
    <body style="font-size:30px">
        <p style="text-align:center">table practice</p>
         <table  align="center" border="15" >
            <tr>
                <td align="center" colspan="2">first row and first column</td>
             </tr>
    
             <tr>
             <td rowspan="2">second row and first column </td>
                <td>second row and second column </td>
                <td >second row and third column</td>
             </tr>
             <tr>
                <td>third row and first column </td>
                <td>third row and second column </td>
             </tr>
        </table>   
    </body>
</html>

如果不是很理解，我们就来看看在网页上的表现，对比起来有助于我们理解。让第一行第一列这个单位占两列，让第二行第一列这个单位占两行，就是这个效果。

表格还有很多细节可以定义,我们在这里就简单叙述，具体的可以参考W3School

标签：<th>表头</th>：设置表头
标签：<caption>标题</caption>：设置表的标题
属性：cellpadding=”…”设置单元格边距
属性：bgcolor=”…”设置表格背景颜色
属性：background=”…” 以某张图片作为表格背景

HTML图像

上面我们简单提到过用图像作为链接使用，接下来我们来详细讲述下图像的应用。一般我们用到的就是插入图片、将图片多为背景、再者将图片作为链接。涉及到的标签就是<img>

先设置一张图片作为网页背景图片，在body属性中加入background属性添加背景图片

<html>
    <head>
    </head>
    
    <body background="1.jpg">
    </body>
</html>

插入一张图片,写法如下：

< img src=”路径加文件名” >

<html>
    <head>
    </head>
    
    <body background="1.jpg">
        <p>let's have an example<img src="2.png"></p>
    </body>
</html>

插入图片后：

这时我们可以看出，字体和图片的低端是对齐的，下面我们就来调整下对齐方式

添加属性调整图文的对齐方式

在<img>标签中加入align属性，调整对齐。相对字体上下可加的参数有bottom、middle、top，默认就是我们刚看见的bottom，相对字体左右可加的参数有right，left默认为right

<html>
    <head>
    </head>
    
    <body background="1.jpg">
        <p>let's have an example<img src="2.png"></p>
        <p>align top<img src="2.png" align="top"></p>
        <p>align middle<img src="2.png" align="middle"></p>
        <p>align left<img src="2.png" align="left"></p>
    </body>
</html>

效果如下：

调整插入图片尺寸

大多数的尺寸都没有那么合适，直接插入以后会破换整体页面的效果。所以在插入图片时，很有必要控制其尺寸，这是很容易办到的，只需要在<img>标签中加入width、height两个属性。

<html>
    <head>
    </head>
    
    <body background="1.jpg">
        <p>let's have an example<img src="2.png" width="80" height="80"></p>
        <p>align top<img src="2.png" align="top" width="80" height="80"></p>
        <p>align middle<img src="2.png" align="middle" width="80" height="80"></p>
        <p>align left<img src="2.png" align="left" width="80" height="80"></p>
    </body>
</html>

创建图片映射

在这之前我们动手试验过将图片作为链接来使用，触发链接的方式就是单击图片的任何地方都可以链接到跳转地址，有时我们需要实现的是单击图片的不同地方跳转到不同的地方。意思就是，一张图片我们可以创建带有可供单击区域的图像地图，其中每个区域就是一个超链接。涉及到的标签就是<map>标签，用来指定图片,<area>用来指定超链接区域。写法如下：

<img src="xx.jpg" usemap="#mp"/>  
<map name="mp" id="mp">  
    <area>
    ...
    ...
    ...
    </area>  
</map>

这里以一张图片作为地图，在<area>标签中我们会涉及到shape、coords、 href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。

<html>
    <head>
    <title>image test</title>
    </head>
    
    <body background="1.jpg">

        <p>image map test </p>
        <img src="2.png" usemap="#koen"/>
    
        <map name="koen">
         <area shape="rect" coords="50,10,100,60" href="lianjie.html" target="_blank"
        </map>  

    </body>
</html>

然后，当你单击你所设置的区域内时，会跳转到所指定的html页面

shape属性的取值可以是：rect(矩形)、circle(圆形)、poly(多边形)和default(整个图像区域)。这里采用的是矩形。
coords属性对于矩形而言，coords有4个值，分别用逗号隔开，表示矩形区域左上角x坐标、左上角y坐标、右下角x坐标和右下角y坐标，这里获取坐标的方式，用截图工具帮忙就好。

HTML列表

HTML列表标记主要有三种：有序列表、无序列表和定义列表。

有序列表

有序列表始于<ol>标签。每个列表项始于<li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<html>
    <head>
    <title> Koen's Test Web </title>
    </head>
    
    <body background="1.jpg">
        <ol>
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
    </body>
</html>

在有序列表中我们还能定义其他的排序方式，上面是默认的是数字排序，下面我们再加上字母排序和罗马数字排序。只需要添加type属性就可以了，”a”表示以小写字母来排序;”A”就是使用大写字母来排序;”i”就是以小写罗马数字来排序;”I”就是以大写罗马数字来排序。还可以添加start属性来决定起始地。

<html>
    <head>
    <title> Koen's Test Web </title>
    </head>
    
    <body background="1.jpg">
        <ol start="2">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
        <ol type="a">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
        <ol type="A">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
        <ol type="i">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
        <ol type="I">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
    </body>
</html>

无序列表

无序列表在HTML中还是很常用的。无序列表始于<ul>标签。每个列表项始于<li>（有序无序是一样的）。无序列表排序的时候就是给每个列表项加各种小符号其中分为Disc（默认）实心黑点、Cirle小圈、square方点，用type属性来指定。

<html>
    <head>
    <title> Koen's Test Web </title>
    </head>
    
    <body background="1.jpg">
        <ul>
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ul>
        <ul type="circle">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ul>
        <ul type="square">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ul>
    </body>
</html>

定义列表

定义列表通常用于术语的定义和解释。定义列表由<dl>开始，术语由<dt>开始，解释说明有<dd>开始，<dd>....</dd>里的文字缩进显示。

<html>
    <head>
    <title> Koen's Test Web </title>
    </head>
    
    <body background="1.jpg">
        <ol>
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ol>
        <ul type="square">
            <li>hadoop</li>
            <li>linux</li>
            <li>C language</li>
        </ul>
        <dl>
            <dt>hadoop</dt>
            <dd>it's useful!!!</dd>
            <dt>linux</dt>
            <dd>it's nice!!!</dd>
        </dl>  
    </body>
</html>

HTML块

首先，我们要知道，HTML元素被定义为块级元素和内联元素。

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
就像以前用到的<h1>,<p>,<ul>,<table>标签。

内联元素(inline)特性：

和相邻的内联元素在同一行
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小
就像以前用到的<b>,<td>,<a>,<img>标签。

在这里我们先介绍两个标签<div>标签和<span>标签。

<div>用来定义文档中的分区或节（division/section），没有特定的含义。它是可用于组合其他 HTML 元素的容器

<span>用来组合文档中的行内元素，也没有特定的含义

<div>的用法：

<html>
    <head>
        <title> Koen's Test Web </title>
    </head> 

    <body style="font-size:20px;background-color:gray">
        <div style="color:white">
            <h3>This is a header</h3>
            <p>This is a paragraph.</p>
            <p>we can control all style in div</p>
        </div>
    </body>
</html>

HTML布局

大多的网页布局要配合CSS来完成,CSS用于对元素进行定位或者为页面创建背景以及色彩丰富的外观。由于这里我们涉及到HTML的基础知识，我们就用我们现有的知识来进行布局。

网页布局可以通过<table>元素，或者<div>元素实现。先来个简单的<table>布局网页我们在之前已经学习了表格，下面我们就来将一个网页的一个板块用没有边框的表格来布局（添加背景颜色和布置文本内容）

<html>
    <head>
        <title> Koen's Test Web </title>
    </head> 

    <body bgcolor="gray">

        <table width="1000">
            <tr>
                <td colspan="2" style="background-color: royalblue">
                    <h1 align="center">shiyanlou book store</h1>
                </td>
            </tr>

            <tr valign="top">
                <td style="background-color: darkorange;width:300px">
                  <dl>
                      <dt>list of book</dt>
                      <dd>
                          <ol>
                              <li>hadoop</li>
                              <li>linux</li>
                              <li>c</li>
                          </ol>
                      </dd>
                  </dl>
                </td>
                <td style="background-color: forestgreen;height:500px;width:700px;">
                    <h1 style="font-size: 20px;text-align: center">the summary of the book</h1>
                    <p>i will lead you to travel in the season of linux</p>
                </td>
            </tr>

            <tr>
                <td colspan="2" style="background-color: powderblue;text-align:center;height: 100px">
                    good good study day day up</td>
            </tr>

        </table>
    </body>
</html>

这个网页只是一个简单的表格，所用的都是我们学过的标签而已，橙色中还加入了我们上面刚学习的定义性列表嵌套有序列表。

下面我们再使用< div>元素进行布局（尽量达到上面的页面效果）：

一般的div元素结构如下图（思路也是用table的思路）：

具体实现内容：

<html>
    <head>
        <style>
            div#container{width:1000px}
            div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
            div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
            div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
            div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1>shiyanlou book store</h1>
            </div>
            <div id="sidebar">
               <dl>
                   <dt>list of book</dt>
                    <dd>
                        <ol>
                            <li>hadoop</li>
                            <li>linux</li>
                            <li>c</li>
                        </ol>
                    </dd>
               </dl>
            </div>
            <div id="mainbody">
                <h1>the summary of the book</h1>
                <p>i will lead you to travel in the season of linux</p>
            </div>
            <div id="footer">good good study day day up</div>
        </div>
    </body>
</html>

HTML表单

学习表单首先我们要知道，表单标签是什么，表单标签就是用于网页中的数据提交，比如我们注册网页，在留言板中留言、评论等可以填写数据、提交、处理的地方都需要表单标签，form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。

我们就直接在上面的代码中修改，首先我们尝试的是搜集不同类型的用户输入，这里我们就只涉及文本和密码只需要涉及到一个<input>标签和type属性就能完成

<html>
    <head>
        <meta charset="utf-8">
        <style>
            div#container{width:1000px}
            div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
            div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
            div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
            div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1>shiyanlou book store</h1>
            </div>
            <div id="sidebar">
               <dl>
                   <dt>list of book</dt>
                    <dd>
                        <ol>
                            <li>hadoop</li>
                            <li>linux</li>
                            <li>c</li>
                        </ol>
                    </dd>
               </dl>
            </div>
            <div id="mainbody">
                <h1>the summary of the book</h1>
                <p>i will lead you to travel in the season of linux</p>
                <form>
                    user：
                    <input type="text" name="user">
                    <br />
                    password：
                    <input type="password" name="password">
                </form>
            </div>
            <div id="footer">good good study day day up</div>
        </div>
    </body>
</html>

当你输入时你会发现，username是可见的，password是被点替换了的，这就是这两个类型的区别。

下面我们再增添两种选框，一种是多选框，一种是单选框。当用户从若干给定的的选择中选取其一时，就会用到单选框。

<html>
    <head>
        <meta charset="utf-8">
        <style>
            div#container{width:1000px}
            div#header {background-color: royalblue ;height: 100px;text-align:center;font-size: 20px}
            div#sidebar{background-color: darkorange;height:400px;width:300px;float:left;}
            div#mainbody {background-color: forestgreen;height:400px;width:700px;float:left;}
            div#footer {background-color: powderblue;height: 100px;clear:both;text-align:center;}
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1>shiyanlou book store</h1>
            </div>
            <div id="sidebar">
               <dl>
                   <dt>list of book</dt>
                    <dd>
                        <ol>
                            <li>hadoop</li>
                            <li>linux</li>
                            <li>c</li>
                        </ol>
                    </dd>
               </dl>
            </div>
            <div id="mainbody">
                <h1>the summary of the book</h1>
                <p>i will lead you to travel in the season of linux</p>
                <form>
                    user：
                    <input type="text" name="user">
                    <br />
                    password：
                    <input type="password" name="password">
                </form>
                <form>
                    <input type="radio" name="sex" value="male" /> Male
                    <br/>
                    <input type="radio" name="sex" value="female" /> Female
                </form>
                <form>
                    <input type="checkbox" name="married" />
                    married
                    <br/>
                    <input type="checkbox" name="have a job" />
                    have a job
                    <br/>
                    <input type="checkbox" name="chinese" />
                    chinese
                </form>
            </div>
            <div id="footer">good good study day day up</div>
        </div>
    </body>
</html>