1. HTML概述
HTML（Hyper Text Markup Language）是一种用于创建web页面的标记语言。它包含一系列的标签（tag），通过不同的标签表示不同的页面内容。HTML页面由多个标签组合而成，浏览器在读取HTML文件时，将标签转化为可视化的内容，显示在网页上。HTML有很多版本，随着新技术的推广，HTML也不断更新升级，目前最新的版本是HTML5。
1.1 常用HTML标签
下面列举一些常用的HTML标签及其用途：
<html> 标记文档的开始和结束。
<head> 包含元数据，例如 <title>、<link>、<meta> 等。
<title> 定义文档的标题，显示在浏览器的标题栏上。
<body> 包含可见的页面内容。
<h1> 到<h6> 标签表示标题，大小依次递减。
<p> 表示段落，将文本分组。
<a> 定义一个超链接，可以让用户点击进入到其他页面或位置。
<img> 插入图片，通过src属性指定图片的路径。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Home</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>My name is Jessy. </p>
<p>Please visit my <a href="https://www.github.com/jessy"<strong>GitHub</a></p>
<img src="jessy.jpg">
</body>
</html>
上面的代码用了一些常用HTML标签，定义了一个简单的网页，包含了标题、段落、超链接、图片等内容。
1.2 HTML文档结构
HTML文件通常包括两个部分：head和body。head部分包括一些元信息，例如页面标题（title）、引用的CSS文件、引用的JS文件等。body部分包括页面的可见内容，例如文字、图片、表格等。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Home</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>My name is Jessy. </p>
<p>Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>
<img src="jessy.jpg">
</body>
</html>
上面的代码所组成的HTML文档结构如下：
<!DOCTYPE html><html>
<head>
<title>Welcome to my Home</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>My name is Jessy. </p>
<p>Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>
<img src="jessy.jpg">
</body>
</html>
2. HTML标签属性
HTML标签通常包含一个或多个属性，属性是用来提供更多信息的，例如图片路径、超链接地址、样式等等。属性用来修改一个标签的行为或外观。
2.1 常用HTML属性
下面是一些常用的HTML属性：
class 用来指定一组元素的样式类，可以以命名的方式来管理样式。（与CSS搭配使用，文本只看不用）。
id 定义元素的唯一标识符（针对某个元素）。（与CSS搭配使用，文本只看不用）。
href 指定超链接目标URL。
src 指定图片/媒体的路径。
alt 描述图片/媒体的文本。
width/height 指定图片/媒体的宽度/高度。
style 可以定义元素的样式，例如字体、颜色等。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Home</title>
<style>
.header {
font-size: 24px;
color: blue;
}
.description {
font-size: 16px;
color: black;
}
</style>
</head>
<body>
<h1 class="header">Welcome to my website</h1>
<p class="description">My name is Jessy. </p>
<p class="description">Please visit my <a href="https://www.github.com/jessy">GitHub</a></p>
<img src="jessy.jpg" alt="My profile photo" width="200" height="200">
</body>
</html>
上面的代码中，使用了class属性实现了特定元素的样式定义。
2.2 链接
超链接是HTML中最常用的元素之一。超链接用于在页面中链接到另一个页面或文件。在HTML中，超链接通过a标签来创建。
<a href="https://www.github.com/jessy">GitHub</a>上面的代码创建了一个指向GitHub的超链接，用户单击该链接时，浏览器会自动跳转到该页面。
对于本地页面，可以使用相对路径来指定链接目标。如果一个页面与目标页面在同一目录下，则只需提供目标页面的文件名。例如：
<a href="about.html">About me</a>上面的代码在当前目录下查找about.html文件，并创建一个链接。
3. 表单
表单是向服务器提交用户输入数据的主要途径之一。用户可以在表单中输入文本、选择选项等数据，通过提交表单向服务器发送这些数据。在HTML中，表单通过form标签来定义。
3.1 常用表单元素
下面是一些常用的表单元素：
<input> 用于输入文本、选择、文件上传、单选框等。（type属性指定类型）
<textarea> 用于多行文本输入。
<select> 用于下拉菜单。
<button> 表示按钮。
<form action="" method="post">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>Email:</label>
<input type="email" name="email">
<br><br>
<label>Gender:</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="unknown">Not sure</option>
</select>
<br><br>
<button type="submit">Submit</button>
</form>
上面的代码创建了一个表单，包含了名字、邮箱、性别等选项。当用户单击提交按钮，表单会将数据传递到服务器。
3.2 表单验证
表单验证是指在用户提交表单之前，检查表单数据是否符合要求。在HTML中，可以通过required属性指定表单字段是否必填，也可以通过type属性指定数据类型，例如email、number等。除此之外，我们也可以使用JavaScript来自定义表单验证。
<form action="" method="post" onsubmit="return validate()">
<label>Name:</label>
<input type="text" name="name" required>
<br><br>
<label>Email:</label>
<input type="email" name="email" required>
<br><br>
<label>Age:</label>
<input type="number" name="age" min="18" max="99" required>
<br><br>
<button type="submit">Submit</button>
</form>
<script>
function validate() {
var form = document.forms[0];
var name = form.name.value;
var email = form.email.value;
var age = form.age.value;
if (name == "") {
alert("Name cannot be empty");
return false;
}
if (email == "") {
alert("Email cannot be empty");
return false;
}
if (age < 18 || age > 99) {
alert("Age must be between 18 and 99");
return false;
}
return true;
}
</script>
上面的代码创建了一个表单，并使用JavaScript实现表单验证。validate()函数用来检查表单数据是否符合要求，如果不符合，将弹出提示框提示用户。在表单标签中的onsubmit属性中调用该函数。
4. 总结
本文介绍了HTML的基础知识，包括HTML的概述、常用HTML标签及其属性、表单等内容。HTML是创建web页面的基础，在web前端开发中扮演着重要的角色。掌握HTML基础知识后，可以更好的理解和操作HTML页面，为更好的开发web应用奠定良好的基础。