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操作。

HTML：网页的骨架 — 入门详解教程