第01章 HTML基础

不睡觉的程序猿

已于 2024-03-24 21:01:28 修改

阅读量542

点赞数 29

分类专栏： HTML 文章标签： html

于 2024-03-24 20:25:51 首次发布

本文链接：https://blog.csdn.net/richieandndsc/article/details/136993564

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

超文本标记语言（Hyper Text Markup Language，HTML）是一种用于创建网页的标准标记语言。HTML 不是一种编程语言，而是一种标签语言，使用标签来描述网页的内容，比如说文字，图片，输入框等等。HTML文档的后缀名是.html 或 .htm，这两种后缀名没有太大区别，都可以使用。使用 HTML创建的代码文件是运行在浏览器上的。因此，我们可以直接创建html代码文件，然后使用浏览器打开即可运行。以下是最简单的HTML文档内容结构：

<html>
<head>文档的头部</head>
<body>文档的主体</body>
</html>

<html> 与 </html> 标签限定了文档的开始和结束，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而文档主体由 <body> 标签定义。HTML文档中的大部分标签都是有开始标签和结束标签“成对”组成的，中间用于定义标签包含的内容。同时，不同的标签还有有不同的属性，其属性值用来实现不同的标签效果。

这里我们使用 Adobe Dreamweaver来作为Html网页开发工具，它是一款非常老牌的Html网页开发工具了。如何安装Adobe Dreamweaver不是我们探讨的内容。当然，大家也可以使用其他的文本编辑器，例如Notepad++等等。我们直接启动Adobe Dreamweaver这款软件。

这里我们使用的是 Adobe Dreamweaver CS6 版本，不同版本界面上可以不同，但是主要内容是不变的。我们在菜单栏点击 “文件” -> “新建” 按钮

如上图所示，我们选择“空白页”，“HTML”类型，“无”布局选项，然后点击“创建”

上图红线标记的是几种不同的编码视图，大部分情况下，我们使用“代码”编辑视图即可。我们可以看到，Dreamweaver 已经帮我们自动生成了一部分HTML代码。其中第一行的<!DOCTYPE html>是一个声明，也就是HTML的版本，辅助浏览器正确显示网页内容。我们先了解一下HTML的版本历史，如下所示：

我们上文中的代码属于“XHTML 1.0”的版本，随着HTML5的发展，大家越来越多的使用HTML5的版本啦。在后面的章节中，我们会重点介绍HTML5的相关内容。

接下来，就是我们熟悉的<html>,<head>,<body>等标签。大家注意在<head>里面有两个新标签，一个是<meta>，一个是<title>。其中<meta>标签定义了文档类型是text/html，以及编码格式为utf-8。我们注意到这个<meta> 标签没有结束标签，在HTML语言中，确实有一部分标签可以这样使用，就是以 “/>” 方式作为标签的结尾。这种标签最重要的就是它只有属性，标签体内没有内容。其中“http-equiv” 以及“content”都是标签的属性。<meta> 标签里面还可以包含其他属性，比如针对搜索引擎提供关键词和描述。

<meta name="keywords" content="这里是提供给搜索引擎的站点关键字位置">
<meta name="description" content="这里是提供给搜索引擎的站点描述位置">

接下来就是<title>标签，它代表了当前文档的标题。也就是，使用浏览器打开当前网页的时候，浏览器标题栏显示的内容。为了能演示这个title标签内容，我们将其改为“hello”

接下来，我们同时按下键盘的“Ctrl”和“S”键来保存代码文件，当然也可以点击菜单栏上面的“文件”->“保存”按钮，如下所示：

我们选择保存目录后，再录入文件名称为“01_hello.html”，然后点击“保存”按钮。

这就是我们保存成功的“01_hello.html”的代码文件（后续案例代码文件都将保存在该目录下）。从文件样式来看，它已经被浏览器“Microsoft Edge”自动识别了。也就是说，我们双击这个文件，就会使用浏览器“Microsoft Edge”打开了。当然，我们也可以使用其他浏览器，比如Google Chrome等等。使用其他浏览器打开“01_hello.html”代码文件的办法也很多，你可以右击这个代码文件，然后选择“打开方式”按钮，然后从列出的应用程序中选择Google Chrome浏览器。还可以直接启动Google Chrome浏览器后，将我们的代码文件直接拖拽到浏览器里面。如下所示：

以上使用Microsoft Edge浏览器打开的效果，红框标记的就是title中的hello

以上使用Google Chrome打开的效果。因为我们没有在<body>中写任何内容，因此这是一个空白的网页文档。我们可以看到在窗口的顶部显示了<title>里面的内容 hello，也就是标题。

接下来，我们就开始学习html标签语言中各种各样的标签（可以理解为编程语言代码）。

1. 标题标签

<h1>标题内容1</h1>
<h2>标题内容2</h2>
<h3>标题内容3</h3>
<h4>标题内容4</h4>
<h5>标题内容5</h5>
<h6>标题内容6</h6>

上面的HTML代码要放到<body>标签的里面，如下是完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello</title>
</head>
<body>

<h1>标题内容1</h1>
<h2>标题内容2</h2>
<h3>标题内容3</h3>
<h4>标题内容4</h4>
<h5>标题内容5</h5>
<h6>标题内容6</h6>

</body>
</html>

这个标题与<title>里面的标题是不一样的概念。这里的标题指的是<body>中的文本内容的标题。例如，如果当前网页是一篇新闻的话，那么新闻的标题就可以使用<h1>来定义。<h1>到<h6>的区别是大小不一样，并且它们的字体都被自动加粗了。效果如下：

我们回到Google Chrome浏览器中，点击红框标记的“刷新”按钮，或者按下键盘上面的“F5”键进行刷新操作，我们就能够看到“标题标签”的样子了。任何的代码修改，都需要进行“保存”和“刷新”操作后才能看到效果，请大家一定注意了。

2．段落标签

这里的段落标签主要就是显示文本内容，例如上文中的新闻正稿，就可以使用<p>来展示。

<p>段落内容1</p>
<p>段落内容2</p>
<p>段落内容3</p>
<p>段落内容4</p>
<p>段落内容5</p>
<p>段落内容6</p>

我们继续将上面html代码放置到body标签里面后保存代码文件，然后回到Google Chrome浏览器点击刷新按钮查看效果。

这里需要大家注意的是，标题标签<h1>和段落标签<p>都会占据一整行的。这是两者的特性决定的，并不是我们代码书写的原因。即使我们将两个<p>标签写在一行代码上：

<p>段落内容1</p><p>段落内容2</p>
<p>段落内容3</p><p>段落内容4</p>
<p>段落内容5</p><p>段落内容6</p>

最终的网页效果是不变的，即每个<p>标签还是会独占一行。

另外，我们在<body>中的空白也不会在网页中显示出来。浏览器解析的是我们的标签，而不是我们的空白。不仅仅是空白，包括空格在内，都不会在网页中显示出来。这里的空白和空格指的是标签外面的。我们在html代码中使用空白或者空格，只是为了让我们的html代码，看起来比较清晰。这就好比我们写作文时候用的缩格，只是美观，不能充当作文字数哦。

3. 超链接标签

它的作用就是点击后，浏览器会自动跳转到指定的网页地址（请求URL）。

<a href="https://www.baidu.com" target="_blank">百度</a>

上述代码就会调转到百度。超链接标签<a>通常用于发起URL请求，而URL请求地址则是通过href属性值来实现的。后面的target属性表示我们如何打开这个新的URL请求网页，"_blank"表示以新的浏览器窗口打开，而"_self"或者不写该属性则是在当前窗口打开。我们继续将上面的代码放置到<body>中保存，然后回到Google Chrome浏览器点击刷新按钮。

点击“百度”这个超链接

当然，我们也可以使用<a>标签指向其他的html页面，实际上我们日常开发也是这么做的。

4. 图片标签

该标签就是显示一张图片，当然你需要提前准备好一张图片。

<img src="html.png" width="200" height="200" />

该标签使用src属性来定义图片地址，图片的地址可以是相对路径，也可以是绝对路径。关于什么是相对路径和绝对路径，我们暂时不做详细介绍。我们这里使用相对路径，也就是说，图片文件“html.png”和网页文件“01_hello.html”是在同一个目录下的。

这样，<img>标签就能显示图片啦。在<img>标签的后面还有两个属性，就是图片要显示的宽度和高度（不一定是图片真实宽度和高度）。我们继续将上述代码添加到body标签里面，然后继续回到Google Chrome浏览器点击刷新按钮

我们可以看到这张图片了。但是，我们发现一个奇怪的问题。超链接标签<a>和图片标签<img>挤在同一行显示了，它们并没有像段落标签<p>那样独占一行。这也是超链接标签和图片标签特性决定的。那么，如果将它们分成两行显示呢？非常简单，我们只需要在图片标签的外面加一层段落标签<p>即可。当然，我们也可以给超链接标签外层添加段落标签<p>。

<p><a href="https://www.baidu.com" target="_blank">百度</a></p>

<p><img src="html.png" width="200" height="200" /></p>

请注意，标签与标签之间是可以相互嵌套的，而且还可以多层次的嵌套。实际上，在我们日常开发中也经常这么做。我们继续回到Google Chrome浏览器点击刷新按钮

我们发现，超链接标签<a>和图片标签<img>终于分开了，各自独占一行了。
还有另外一种方式，就是使用换行标签<br />，也就是在<a>和<img>之间添加一个<br />

<a href="https://www.baidu.com" target="_blank">百度</a>
<br />
<img src="html.png" width="200" height="200" />

两者的区别在于他们的上下间距不一样，大家可以自己试一试，这里不再给出效果图了。

在HTML中的标签一般可以分成 “行（hang）级标签” 和 “块级标签”。他们的区别就在于是否独占一行。块级标签的宽度默认为浏览器窗口的宽度，而行级标签就是自身的内容宽度。即便我们给块级标签（例如<div>，<p>标签）指定width宽度属性，它依然“霸占”一整行的空间。行级标签（例如<span>标签）则相反，即使我们给他设置width宽度属性，它仍然按照实际内容尺寸显示。还有一种“行内块标签”，结合的行内和块级的特点，不仅可以对宽高属性值设置，还可以多个标签并存在一行显示。<img>标签就是一个行内块标签。也就是说，如果我们连续写两个<img>标签的话，那么，这两张图片同样是在一行显示的。

5. 列表标签

接下来我们介绍两个复杂的列表标签，一个是<ul>标签，另一个是<ol>标签。
<ul>是无序列表标签，也就是没有序号的列表标签，如下所示：

<ul>
	<li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
</ul>

它有里外两层标签组成，外层是<ul>标签，里层每一行都是一个<li>标签，它的作用是展示列表集合数据。请注意，这里的缩格仍然不影响网页的显示效果，只是突显嵌套结构。

上面红色箭头所指的就是无序列表标签的显示效果，每一项上面都有一个黑点。
接下来，我们在看看<ol>有序列表标签，它会显示 1，2，3… 的序号，如下所示

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
</ol>

6. 表格标签

接下来我们看看<table>表格标签的使用，它是一个"行列"形式，类似于excel表格，它的子标签比较多，其中最重要的就是行标签<tr>和列标签<td>，一个完整的表格结构如下所示：

<table width="400" border="1">
<thead>
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>时间</th>
</tr>	
</thead>
<tbody>
<tr>
	<td>张三</td>
	<td>30</td>
	<td>2011-03-01 09:00:00</td>
</tr>
<tr>
	<td>李四</td>
	<td>31</td>
	<td>2011-03-01 09:00:00</td>
</tr>
<tr>
	<td>王五</td>
	<td>30</td>
	<td>2011-03-01 09:00:00</td>
</tr>
<tr>
	<td>赵六</td>
	<td>31</td>
	<td>2011-03-01 09:00:00</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td colspan="3">共计4条数据</td>
</tr>	
</tfoot>
</table>

上面的代码虽然很多，但是都非常简单。<table>标签下有三个子标签<thead>,<tbody>,<tfoot>，根据单词我们也能猜到就是头部，主体和尾部三个部分，他们从上到下依次展示出来。另外，我们还给<table>标签添加了一个宽度width属性，其属性值为400像素。然后是一个边框border为1像素的属性。接着在三个子标签中分别有<tr>和<td>标签，其中<tr>代表一行，<td>代表一列。在上面的代码中我们定义了一个六行三列的一个二维表格。其中第一行代表表格的标题，<th>也是列标签，它主要用来加粗和居中文字。然后第二行到五行是数据内容，最后一行是一个统计信息，该行只有一个<td>标签，但是使用了 colspan="3" 属性来占据三列的全部位置，相当于Excel中的合并单元格操作。我们说了这么多，还是看看其效果吧。

大家应该可以在很多网页中看到过类似的数据展示方式，当然我们还可以继续美化这个表格，但这不是本章节的课程。虽然<table>标签非常好用，但是由于其加载缓慢的问题，现在基本上都不再使用了。

接下来，我们介绍两个标签，一个是<div>，一个是<span>。前者是块级标签（独占一行），后者是行级标签（不独占一行）。这两个标签没有特定的含义，主要用来组织和布局其他标签。根据<div>和<span>的标签特性，我们可以对其他标签在网页中的位置进行调整。网页布局中最重要的一个工作就是，组织各个内容的位置和尺寸。使用<div>和<span>进行布局的时候，就类似于“搭建积木”的方式来放置内容的具体位置。

最后，我们来介绍在HTML文档中如何进行注释，其实也非常的简单，如下：

<!--  注释内容  -->

注释内容不会显示到网页上，其目的是对我们的代码进行解释（尤其是复杂的代码）。
关于HTML的标签我们就介绍到这里，当然还有很多其他标签，我们就不一一介绍了。大家可以通过其他方式来学习。例如，其他重点标签包括：<b>加粗文字标签，<center>居中文字标签，<em>斜体文字标签，<strong>加强文字标签，<font>文字标签，<hr>分割线标签，<i>斜体标签，<iframe>窗口标签等等。

本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/88962032