1.2 HTML入门
在踏上TypeScript与Vue的旅程之前，掌握HTML（HyperText Markup Language，超文本标记语言）的基础知识是至关重要的。HTML不仅是网页的骨架，也是前端开发的基石，它定义了网页的结构和内容。在本章中，我们将从零开始，深入了解HTML的基本概念、元素、属性以及文档结构，为后续学习TypeScript和Vue打下坚实的基础。
1.2.1 HTML简介
HTML是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，通过使用一系列预定义的标签（tags）来告诉浏览器如何显示内容，如文本、图片、链接、表格等。HTML文档通常具有.html或.htm的扩展名，并且可以被任何支持HTML的浏览器打开和显示。
1.2.2 HTML文档结构
一个基本的HTML文档由几个关键部分组成，包括<!DOCTYPE html>声明、<html>根元素、<head>头部元素和<body>主体元素。下面是一个简单的HTML文档示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。</p></body></html>
<!DOCTYPE html>：声明了文档类型和HTML版本，告诉浏览器这是一个HTML5文档。<html>：根元素，包含了整个页面的内容。lang="en"属性指定了页面的主要语言为英语，有助于搜索引擎优化和屏幕阅读器的准确性。<head>：包含了文档的元数据（metadata），如字符集声明、视口设置、页面标题等，这些信息不会直接显示在网页上。<body>：包含了可见的页面内容，如标题、段落、图片等。
1.2.3 HTML基本元素
HTML元素是构成网页的基本单位，它们通过标签来表示。标签分为开始标签（如<p>）、结束标签（如</p>）以及自闭合标签（如<img />）。下面是一些常用的HTML元素：
- 标题（Heading）：
<h1>到<h6>定义了六级标题，<h1>是最高级别的标题。 - 段落（Paragraph）：
<p>标签定义了一个文本段落。 - 链接（Link）：
<a>标签用于定义超链接，可以链接到其他网页、文件、邮箱地址或页面内的某个部分。 - 图片（Image）：
<img>标签用于在HTML文档中嵌入图片，其src属性指定图片的路径。 - 列表（List）：
- 无序列表：
<ul>标签定义了一个无序列表，列表项用<li>标签表示。 - 有序列表：
<ol>标签定义了一个有序列表，列表项同样用<li>标签表示。
- 无序列表：
- 表格（Table）：
<table>标签用于创建表格，<tr>定义表格行，<td>定义表格单元格。 - 表单（Form）：
<form>标签用于收集用户输入，包括文本输入、选择框、按钮等。
1.2.4 HTML属性
HTML元素可以包含属性，属性提供了元素的额外信息。属性总是以名称/值对的形式出现，比如class="example"。一些常用的HTML属性包括：
id：为元素指定一个唯一的标识符。class：为元素指定一个或多个类名，用于CSS样式和JavaScript操作。style：直接在元素上定义CSS样式。src（常用于<img>、<script>等标签）：指定资源的URL。href（常用于<a>标签）：指定链接的目标URL。alt（常用于<img>标签）：为图像提供替代文本，以便在图像无法显示时提供信息。
1.2.5 HTML语义化
HTML5引入了更多语义化标签，旨在更清晰地描述网页内容的结构。使用语义化标签不仅有助于提升网站的可访问性，还有利于搜索引擎优化（SEO）。一些常见的语义化标签包括：
<article>：定义独立的、可复用的内容块，如博客帖子或新闻文章。<section>：将文档划分为独立的部分或章节。<nav>：定义导航链接的容器。<aside>：定义与页面内容稍微独立的内容，如侧边栏。<header>：定义页面或内容区块的头部。<footer>：定义页面或内容区块的底部。
1.2.6 实战演练
为了巩固所学知识，我们可以尝试创建一个简单的网页，包含标题、段落、图片、列表和链接。以下是示例代码：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>我的个人简介</title></head><body><header><h1>张三的个人简介</h1></header><section><p>我是一位前端开发爱好者，擅长HTML、CSS和JavaScript。</p><img src="profile.jpg" alt="我的照片" style="width:200px;"></section><section><h2>技能列表</h2><ul><li>HTML/HTML5</li><li>CSS/CSS3</li><li>JavaScript/ES6+</li><li>Vue.js</li><li>TypeScript</li></ul></section><footer><p>联系方式：<a href="mailto:zhangsan@example.com">发送邮件</a></p></footer></body></html>
通过本节的学习，你应该已经对HTML有了基本的了解，掌握了HTML文档的结构、常用元素和属性，以及HTML语义化的重要性。这将为你在后续学习TypeScript和Vue时，更好地理解和应用前端技术打下坚实的基础。在接下来的章节中，我们将进一步深入学习CSS和JavaScript，为构建动态和交互式的Web应用做好准备。
