HTML：网页的骨架 — 入门详解教程
HTML：网页的骨架 — 入门详解教程
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言，负责定义网页的结构和内容。无论是简单的个人博客，还是复杂的企业网站，HTML都是不可或缺的组成部分。
目录
HTML：网页的骨架 — 入门详解教程
HTML简介
HTML文档结构
脚本嵌入方式说明：
样式表嵌入方式说明：
常用HTML标签
标题标签
段落标签
超链接标签
图像标签
列表标签
表格标签
表单标签
HTML属性
HTML简介
HTML是一种标记语言，用于创建网页和Web应用。它通过使用标签（Tag）来描述网页的结构和内容。HTML文件是以.html或.htm为扩展名的纯文本文件，可以被浏览器解析并呈现为可视化的网页。
HTML文档结构
一个标准的HTML文档由以下部分组成：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<!-- 样式表嵌入方式 -->
<!-- 1. 内部样式表 -->
<style>
h1 {
color: blue;
}
</style>
<!-- 3. 外部样式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="text-decoration: underline;">主标题</h1> <!-- 2. 内联样式 -->
<p>这是一个段落。</p>
<!-- 脚本嵌入方式 -->
<!-- 1. 内联脚本 -->
<button onclick="alert('按钮被点击！')">点击我</button>
<!-- 2. 内部脚本 -->
<script>
document.querySelector('p').textContent = "这个段落被JavaScript修改了！";
</script>
<!-- 3. 外部脚本 -->
<script src="app.js"></script>
</body>
</html>脚本嵌入方式说明：
-
<!DOCTYPE html>：声明文档类型，告知浏览器使用HTML5标准解析页面。 -
<html>：HTML文档的根元素。 -
<head>：包含文档的元数据，如字符编码、标题、样式表链接等。 -
<meta charset="UTF-8">：设置文档的字符编码为UTF-8，支持多语言字符。 -
<title>：定义网页的标题，显示在浏览器的标签页上。 -
<body>：网页的主体，包含可见的内容，如文本、图片、链接等。 -
内联脚本
直接在HTML事件属性中编写JavaScript代码（如onclick） -
内部脚本
在<script>标签中直接编写JavaScript代码，通常放在<body>底部 -
外部脚本
使用<script src="...">引入外部JS文件 -
外部样式表
使用<link>标签引入外部CSS文件
样式表嵌入方式说明：
-
内部样式表
<style>标签写在<head>中，用于包含CSS代码 -
内联样式
直接在HTML标签中使用style属性添加样式
常用HTML标签
HTML提供了多种标签，用于定义不同类型的内容。以下是一些常用的HTML标签：
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>到<h6>用于定义标题，<h1>为最高级别，依次递减。标题标签有助于结构化内容，并对SEO友好。
段落标签
<p>这是一个段落。</p>
<p>用于定义段落，浏览器会在段落前后添加空行。
超链接标签
<a href="https://www.example.com">访问示例网站</a>
<a>用于创建超链接，href属性指定链接的目标地址。
图像标签
<img src="image.jpg" alt="示例图片">
<img>用于在网页中嵌入图像，src属性指定图像路径，alt属性提供图像的替代文本。
列表标签
无序列表
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<ul>和<ol>用于创建无序和有序列表，<li>定义列表项。
表格标签
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
<table>创建表格，<tr>定义行，<th>定义表头单元格，<td>定义普通单元格。
表单标签
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
<form>用于创建表单，action属性指定提交地址，method属性指定提交方式。<input>用于接收用户输入。
HTML属性
HTML标签可以包含属性，用于提供额外的信息。属性通常以键值对的形式出现，如：
<a href="https://www.example.com" target="_blank">打开新窗口</a>
常见属性包括：
-
id：元素的唯一标识符。 -
class：元素的类名，可用于CSS样式或JavaScript操作。