HTML 是超文本标记语言(HyperText Markup Language)的缩写,是用来描述网页结构的标记语言。在这篇教学中,我们将介绍一些 HTML 基础知识,帮助新手快速学习并掌握如何编写简单的网页。
第一部分:HTML 基础
1. 标签(Tags)
HTML 使用标签来描述页面的结构,每个标签由尖括号包围,如<tagname>
。标签通常是成对出现的,包括开始标签和结束标签,如<tagname>内容</tagname>
。有些标签是自闭合的,不需要结束标签,如<br>
用来表示换行。
2. 基本结构
一个最简单的 HTML 页面结构如下:
html
<!DOCTYPE html>
这是一个标题
这是一个段落
-
<!DOCTYPE html>
:声明文档类型为 HTML5。
-
<html>
:HTML 页面的根元素。
-
<head>
:包含页面的元信息,如标题、样式表和脚本等。
-
<title>
:定义页面标题,显示在浏览器标签上。
-
<body>
:包含页面的内容。
-
<h1>
:定义标题级别为一级标题。
-
<p>
:定义段落。
#### 3. 常用标签
以下是一些常用的 HTML 标签:
- 标题:
<h1>
到
<h6>
,分别表示一级标题到六级标题。
- 段落:
<p>
。
- 链接:
<a>
,用来创建超链接。
- 图像:
<img>
,用来显示图片。
- 列表:
<ul>
、
<ol>
、
<li>
,分别表示无序列表、有序列表和列表项。
- 表格:
<table>
、
<tr>
、
<td>
,分别表示表格、表格行和表格单元格。
- 表单:
<form>
、
<input>
、
<button>
,用来创建表单及输入框。
### 第二部分:实例演示
#### 1. 创建一个简单网页
让我们一起创建一个简单的网页,包含标题、段落和链接。
html
<!DOCTYPE html>
欢迎来到我的网页!
这是一个使用 HTML 创建的简单网页。
点击访问示例网站
//代码效果参考: https://www.vipwb.com/sitemap/post.html
//代码效果参考: https://www.257342.com/sitemap/post.html
//代码效果参考: https://www.uagu.cn/sitemap/post.html
#### 2. 插入图片
让我们再给网页添加一张图片。
html
<!DOCTYPE html>
欢迎来到我的网页!
这是一个使用 HTML 创建的简单网页。
点击访问示例网站
3. 创建表格
最后,我们来创建一个简单的表格。
html
<!DOCTYPE html>
欢迎来到我的网页!
这是一个使用 HTML 创建的简单网页。
点击访问示例网站
项目
描述
项目1
这是项目1的描述。
项目2
这是项目2的描述。