1.2 HTML入门 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 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文档示例：

```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 实战演练

为了巩固所学知识，我们可以尝试创建一个简单的网页，包含标题、段落、图片、列表和链接。以下是示例代码：

```html
<!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应用做好准备。

该分类下的相关小册推荐：

Vue.js从入门到精通(四)

VUE组件基础与实战

Vue源码完全解析

移动端开发指南

Vue原理与源码解析

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(一)

Vue面试指南

Vue3技术解密

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(二)

vue项目构建基础入门与实战