HTML 是一种语言,是用来描述网页的语言,它是一种标记语言,HTML 就是使用标记标签来描述网页。

HTML 算是最容易学习的语言之一,它也是必须掌握的一门语言,之前对 HTML 只是大概了解,并没有开发过前端页面,现在在工作中,会使用前端框架已经成为了一项必备技能,所以花了点时间简单看了一下实验楼-HTML 基础课,稍微再学习一下 HTML 的相关知识,本文记录一下一些常用的 HTML 内容,后期还会对 css 简单总结一下。

HTML 最基本用法

这里先介绍一下 HTML 的最基本用法。

文档

HTML 文档也被称为网页,它包括标签和文本。Web 浏览器的作用就是读取 HTML 文档,并以网页的形式显示出它们,浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

1
2
3
4
5
6
<html>
<body>
<h1>First Heading</h1>
<p>first paragraph</p>
</body>
</html>

上面是最简单的一个网页,其中:

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

标签

介绍

  • 标签:就是上面这些 <head><body><table> 等被尖括号<>包起来的对象,绝大部分的标签都是成对出现的,如 <table></talbe><form></form>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签;
  • 也有少部分不是成对出现的,如<br><hr>等;
  • 标签就是用来标记 HTML 元素的,位于起始标签和结束标签之间的文本就是HTML元素的内容。
  • HTML 元素就是通过使用 HTML 标签进行定义的,比如 <p> 这就是一个标签,而 <p>内容</p> 这就是一个元素,也就是说元素由一个开始的标签和结束的标签组成,用来包含某些内容,这里有一个值得注意的例外,即 <br> 本身既是开始标签也是结束标签,但不包含任何内容,所以这只是个标签。

常用标签

四种最基本的标签:

  1. 标题:通过 <h1> - <h6> 等标签进行定义的;
  2. 段落:通过 <p> 标签进行定义的;
  3. 链接:是通过 <a> 标签进行定义的,<a href="http://matt33.com">matt</a>
  4. 图像:通过 <img> 标签进行定义的,<img src="matt.jpg" width="100" height="142" />

注: HTML 标签对大小写不敏感:<P> 等同于 <p>.

HTML 文本

HTML 元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。

元素语法

元素语法特点:

  • HTML 元素以开始标签起始;
  • HTML 元素以结束标签终止;
  • 元素的内容是开始标签与结束标签之间的内容;
  • 某些 HTML 元素具有空内容(empty content);
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束);
  • 大多数 HTML 元素可拥有属性。

空元素

HTML 元素的内容是开始标签与结束标签之间的内容,而某些 HTML 元素具有空内容(empty content),这种元素被叫做空元素,比如说换行符<br>

为了规范起见,换行符最好还是用 <br/>

<p> 标签结束以后也后一个换行的动作,那 <p> 标签和 <br/> 标签有什么异同呢?

  1. 相同之处是 <br><p> 都是有换行的属性及作用;
  2. 区别 <br/> 是只需一个单独使用,而 <p></p> 是一对使用;
  3. <br/> 标签是小换行提行(相当于我们平时文本中输入一个回车),<p> 标签是大换行(分段,相当与两个回车),隔行作用。

HTML 属性

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

关于属性有以下语法规则:

  • 是在 HTML 元素的开始标签中定义;
  • 总是以名称和值对应的形式出现,比如:name="value"
  • 属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

举例,下面这个就是 <a> 标签的属性,是对 <a> 标签的补充说明,既指向网页。

1
<a href="http://matt33.com">matt</a>

大多数的标签都会有各种各样的属性,没必要记住所有的属性,只需要在实践中多积累,知道哪些属性是常用的,知道如何查资料即可。

HTML 文本格式化

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

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

HTML 样式

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

1
2
3
4
5
6
<html>
<body>
<p style="text-align:center;font-family:verdana;color:gray"> verdana and white</p>
<p style="font-family:time;color:greeen"> time and green words</p>
</body>
</html>

HTML 超文本

HTML 链接

通过网页中超链接,可以连接到自己感兴趣的地方。

给文字及图片添加超链接

最简单的链接就是将文字添加链接连接到网页和另外的 HTML 文件,给图片添加链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<p>let's have an example</p>
<p>
<a href="http://matt33.com">matt</a>
</p>
<p>
<a href="matt.html">another html</a>
</p>
<p>
<a href="http://matt33.com"><img src="touxiang.jpg" /></a>
</p>
</body>
</html>

超链接的打开方式

打开方式分为在本页打开和在新的浏览器窗口打开,超级链接标签提供了 target 属性进行设置,取值分别为_self(在本页打开,默认)、_blank(创建新窗口打开新)。

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<p>let's have an example</p>
<p>
<a href="http://matt33.com" target="_blank">matt</a>
</p>
</body>
</html>

超链接添加提示文字

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<p>let's have an example</p>
<p>
<a href="http://matt33.com" title="this word will link to the wed of matt's blog.">matt</a>
</p>
</body>
</html>

超链接实现书签

在阅读小说时,会发现当在点击相应章节的题目时,可以跳转到相应的章节,想实现这种效果,就必须要了解什么是锚(anchor),实际上就是锚用于在单个网页内不同位置的跳转,锚也叫做书签。

  • 涉及到的标签还是 <a> 标签,超级链接标签的 name 属性用于定义锚的名称;
  • 一个页面可以定义多个锚,通过超级链接的 href 属性可以根据 name 跳转到对应的锚。
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
<html>
<head>
<title>HTML</title>
</head>
<body style="font-size:20px">
<p style="text-align:center">HTML LEARNING</p>
<p>
<a href="#c1"> HTML first</a>
</p>
<p>
<a href="#c2">HTML second </a>
</p>
<p>
<a href="#c3">HTML third </a>
</p>
<h1><a name="c1"></a>chapter 1 first HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c2"></a>chapter 2 second 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>
</body>
</html>

HTML 表格

表格在 HTML 中是不可缺少的元素,表格主要包括了 tabletrtd 这几个标签:

  1. 表格由 <table> 标签来定义;
  2. 每个表格均有若干行(由 <tr> 标签定义);
  3. 每行被分割为若干单元格(由 <td> 标签定义);
  4. 字母 td 指表格数据(table data),即数据单元格的内容。<th>标签用来定义表头;
  5. border="1"定义的是最外面边框粗细,为1,你也可以设置为0,就是不显示边框;
  6. colspan:控制此单位所占列数;
  7. rowspan:控制此单位所占行数;

还有一些其他的属性:

  • 标签:<th>表头</th>:设置表头;
  • 标签:<caption>标题</caption>:设置表的标题;
  • 属性:cellpadding="..." 设置单元格边距;
  • 属性:bgcolor="..." 设置表格背景颜色;

  • 属性:background="..." 以某张图片作为表格背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<title >TABLE</title>
<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>

HTML 图像

对于 HTML 图像,一般涉及到的就是以下几类:

  • 将图片作为背景;
  • 插入图片
  • 将图片作为链接。

图片作为背景

body 属性中添加 background 属性来添加背景图片。

1
2
<body background="./qwe.gif">
</body>

插入一张图片

通过 img 标签给网页插入一张图片。

1
<img src="图片的路径">

<img> 标签中加入 align 属性,来对其进行调整,可以进行调整的参数有:

  • 可以上下调整的参数有:bottommiddletop,默认是 bottom
  • 可以左右调整的参数有:rightleft,默认为 right
  • 尺寸的调整:widthheight 两个属性。
1
<p> align top<img src="./julizi.png" align="top" width="10%" height="100"></p>

将图片作为链接

将图片做链接,一般情况下,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,但有时需要实现,点击图片的不同地方跳转到不同的地方,也就是,一张图片可以创建带有可供点击区域的图像地图,其中每个区域就是一个超链接。

涉及到的标签就是 <map> 标签,用来指定图片,<area> 用来指定超链接区域。

<area> 标签中我们会涉及到 shapecoordshref 属性,分别用来指定超链接区域形状,超链接区域坐标,还有超链接跳转地。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">
<p>tap the li zi </p>
<img src="./julizi.png" usemap="#lizi"/>
<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="img.html" target="_blank"
</map>
</body>
</html>

其中

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

HTML 列表

有序列表

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

在有序列表中我们还能定义其他的排序方式,上面是默认的数字排序,下面我们再加上字母排序和罗马数字排序

  1. 通过添加 type 属性来设置排序方式,a 表示以小写字母来排序,A 就是使用大写字母来排序,i 就是以小写罗马数字来排序,I 就是以大写罗马数字来排序;
  2. 还可以添加 start 属性,决定起始的序号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>test</title>
</head>
<body style="font-size:20px;background-color:gray" >
<ol start="2">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
<ol type="a">
<li>hadoop</li>
<li>linux</li>
<li>c </li>
</ol>
</body>
</html>

无序列表

无序列表始于 <ul> 标签,每个列表项始于 <li>

无需列表排序的时候就是给每个列表项加各种小符号其中分为Disc(默认)实心黑点,Circle小圈,square方点,与有序列表的属性都是用的一样的。

1
2
3
4
5
<ul type="circle">
<li>hadoop</li>
<li>linux</li>
<li>c</li>
</ul>

定义性列表

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

1
2
3
4
5
6
<dl>
<dt>hadoop</dt>
<dd>it's useful!</dd>
<dt>linux</dt>
<dd>ti's nice!</dd>
</dl>

HTML 块

HTML元素被定义为块级元素或内联元素。

  • 块级元素(block)特性:
    1. 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
    2. 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制,就像以前用到的 <h1>, <p>, <ul>, <table>标签。
  • 内联元素(inline)特性:
    1. 和相邻的内联元素在同一行;
    2. 宽度(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> 用来组合文档中的行内元素,也没有特定的含义.
1
2
3
4
<div style="color:white">
<h3>This is a header.</h3>
<p>This is a paragrph.</p>
</div>

HTML 布局

大多的网页布局是需要配合 css 来完成,后面会总结一篇关于 css 基本用法的文章,这里先不涉及太多。

这里通过一个示例,它是使用 <table> 元素和 <div> 元素实现的。

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>
<body bgcolor="gray">
<table width="1000">
<tr>
<td colspan="2" style="background-color: royalblue">
<h1 align="center">matt' blog</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color: darkorange;width:300px">
<dl>
<dt>list of blogs</dt>
<dd>
<ol>
<li>hadoop</li>
<li>java</li>
<li>kafka</li>
</ol>
</dd>
</dl>
</td>
<td style="background-color: forestgreen;height:500px;width:700px;">
<h1 style="font-size: 20px;text-align: center">hello world</h1>
this is matt's blog
</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 元素来重新设计一下上面的网页。

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
<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>matt's blog</h1>
</div>
<div id="sidebar">
<dl>
<dt>list of blogs</dt>
<dd>
<ol>
<li>hadoop</li>
<li>java</li>
<li>kafka</li>
</ol>
</dd>
</dl>
</div>
<div id="mainbody">
<h1>hello word</h1>
<p>this is matt's blog</p>
</div>
<div id="footer">good good study day day up</div>
</div>
</body>
</html>

HTML 表单

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

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

其中,name 是明文显示,password 是隐藏的,radio 属性是单选,checkbox 属性是双选,上面展示的效果如下图所示。

示例

后面还会单独写一篇文章对 css 进行一下总结,html 和 css 的这两篇文章,会不定时更新,以后用到什么比较常用内容或者遇到什么好的方法,会更新到这两篇文章中。