HTML零基础教程（超详细）
一、什么是HTML
HTML，全称超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过一系列标签来定义网页的结构、内容和格式。HTML文档是由HTML元素构成的文本文件，这些元素包括标题、段落、图片、链接、列表以及其他内容。浏览器读取HTML文档，并将其渲染成可视化网页。
HTML的基本结构通常包含以下几个部分：
1. `<!DOCTYPE html>`：声明文档类型，告诉浏览器这是HTML5文档。
2. `<html>`：根元素，所有其他的HTML元素都包含在它之内。
3. `<head>`：包含了如文档的标题、链接到样式表、脚本和元数据等信息。
4. `<body>`：包含了可见的页面内容，如文本、图片、链接、视频等。
HTML标签通常成对出现，一个开始标签（如`<p>`）和一个结束标签（如`</p >`），它们之间的内容会被浏览器解析为特定的元素。例如，段落标签`<p>`用于定义文本的段落。
HTML的最新版本是HTML5，它引入了更多的语义化标签（如`<article>`, `<section>`, `<nav>`等），增强了表单元素，并支持多媒体（如视频和音频）以及图形（如`<canvas>`）。
二、HTML入门
1. 标签 又称 元素，是HTML的基本组成单位
标签分为：双标签 与 单标签 （绝大多数都是双标签）。
标签名不区分大小写，但推荐小写，因为小写更规范。
<h1>主体标签</h1>
<p>段落标签</p>
<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 --><title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body><h1>欢迎来到我的网页</h1> <!-- 主标题 --><p>这是我的第一个 HTML 页面！</p> <!-- 段落 -->
</body>
</html>
效果展示
<h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
2.段落和文本格式化
使用 <p> 标签创建段落，使用其他标签格式化文本。
<p>这是一个段落。</p>
<p><strong>这是加粗文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p><u>这是下划线文本。</u></p>
效果展示
3. 列表
可以使用无序列表和有序列表。
<ul> <!-- 无序列表 --><li>项目 1</li><li>项目 2</li>
</ul><ol> <!-- 有序列表 --><li>第一项</li><li>第二项</li>
</ol>
效果展示
4. 超链接和图像
使用 <a> 标签创建链接，比如我们访问百度
<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 --><title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body><a href="https://www.baidu.com" target="_blank">访问示例网站</a> <!-- target="_blank" 在新窗口打开 --></body>
</html>
点击 访问示例网站 进入百度
5.图像
使用 <img> 标签插入图像
<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 --><title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body><img src="/Path_test/beaa0418c666182dae2f40357e99ac0f.jpg" alt="" width="300" height="200"> <!-- src 为图像路径，alt 为替代文字 -->
// 使用width和height设置图片的大小
</body>
</html>
6. 表单
表单用于收集用户输入
<form>：定义表单。<label>：为输入框提供标签。<input>：用于用户输入的字段。required属性表示该字段为必填。
<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 设置语言 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适应不同设备 --><title>我的第一个网页</title> <!-- 网页标题 -->
</head>
<body><form action="/submit" method="POST"> <!-- action 指定表单提交的 URL --><label for="name">姓名:</label><input type="text" id="name" name="name" required> <!-- 文本输入 --><label for="email">电子邮件:</label><input type="email" id="email" name="email" required> <!-- 电子邮件输入 --><input type="submit" value="提交"> <!-- 提交按钮 --></form>
</body>
</html>
7.语义元素
- 这些元素提供了更清晰的文档结构，有助于 SEO 和可访问性。
-
<header>头部内容</header> <nav>导航链接</nav> <article>文章内容</article> <aside>侧边栏内容</aside> <footer>页脚内容</footer>希望这个模块对你学习 HTML 有所帮助！如果你有任何问题，欢迎随时提问。