0%

HTML基础入门

前言


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

HTML初识


什么是HTML

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

HTML文件结构

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

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>.....</title>
</head>

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

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

HTML文档

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

例如:

1
2
3
4
5
6
7
8
9
<html>
<body>

<h1>First Heading</h1>

<p>first paragraph</p>

</body>
</html>
  1. <html></html> 之间的文本描述网页

  2. <body></body> 之间的文本是可见的页面内容

  3. <h1></h1> 之间的文本被显示为标题

  4. <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>等标签进行定义的。例如:

1
2
3
4
5
<h1>This is first heading</h1>
<h2>This is second heading</h2>
<h3>This is third heading</h3>
...
...
  • HTML段落

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

1
2
3
4
<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的魅力吧!

1
2
3
4
5
6
7
8
9
10
<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元素,例如:

1
2
3
4
5
<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)加重语气

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>标签中,就可以得到与之前差不多的格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 元素的样式的通用方法。这里可以将背景颜色、字体样式、字体尺寸、字体颜色、对齐方式一并定义好。

1
2
3
4
5
6
7
8
9
10
11
12
<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内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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:

1
2
3
4
5
6
7
8
9
<html>
<head>
<title> Koen's Test Web </title>
</head>

<body>
<p> This is lianjie.html </p>
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
<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(创建新窗口打开新页面)。

1
2
3
4
5
6
7
8
9
10
11
12
<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

1
2
3
4
5
6
7
8
9
10
11
12
<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>

具体实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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:控制此单位所占行数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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属性添加背景图片
1
2
3
4
5
6
7
<html>
<head>
</head>

<body background="1.jpg">
</body>
</html>
  • 插入一张图片,写法如下:

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

1
2
3
4
5
6
7
8
<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

1
2
3
4
5
6
7
8
9
10
11
<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两个属性。

1
2
3
4
5
6
7
8
9
10
11
<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属性,分别用来指定超链接区域形状,超链接区域坐标,还有超链接跳转地。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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属性来决定起始地。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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属性来指定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>里的文字缩进显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>的用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>布局网页 我们在之前已经学习了表格,下面我们就来将一个网页的一个板块用没有边框的表格来布局(添加背景颜色和布置文本内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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的思路):

具体实现内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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属性就能完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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是被点替换了的,这就是这两个类型的区别。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>

参考链接:https://www.shiyanlou.com/courses/19


- - - - - - - - - 本文结束啦感谢您阅读 - - - - - - - - -