首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 1 章 准备知识
1.1 前端技术简介
1.2 HTML入门
1.2.1 准备开发工具
1.2.2 HTML中的基础标签
1.3 CSS入门
1.3.1 CSS选择器入门
1.3.2 CSS样式入门
1.4 JavaScript入门
1.4.1 我们为什么需要JavaScript
1.4.2 JavaScript语法简介
1.4.3 从JavaScript到TypeScript
1.5 渐进式开发框架Vue
1.5.1 第一个Vue应用
1.5.2 范例：一个简单的用户登录页面
1.5.3 Vue 3的新特性
1.5.4 我们为什么要使用Vue框架
第 2 章 TypeScript基础
2.1 重新认识TypeScript
2.1.1 安装TypeScript
2.1.2 TypeScript语言版本的HelloWorld程序
2.1.3 使用高级IDE工具
2.2 TypeScript中的基本类型
2.2.1 布尔、数值与字符串
2.2.2 特殊的空值类型
2.2.3 数组与元组
2.3 TypeScript中有关类型的高级内容
2.3.1 枚举类型
2.3.2 枚举的编译原理
2.3.3 any、never与object类型
2.3.4 关于类型断言
2.4 函数的声明和定义
2.4.1 函数的类型
2.4.2 可选参数、默认参数和不定个数参数
2.4.3 函数的重载
第 3 章 TypeScript中的面向对象编程
3.1 理解与应用“类”
3.1.1 类的定义与继承
3.1.2 类的访问权限控制
3.1.3 只读属性与存取器
3.1.4 关于静态属性与抽象类
3.1.5 类的实现原理
3.2 接口的应用
3.2.1 接口的定义
3.2.2 使用接口约定函数和可索引类型
3.2.3 使用接口来约束类
3.2.4 接口的继承
3.3 TypeScript中的类型推断与高级类型
3.3.1 关于类型推断
3.3.2 联合类型与交叉类型
3.3.3 TypeScript的类型区分能力
3.3.4 字面量类型与类型别名
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(一)
小册名称：TypeScript和Vue从入门到精通(一)
### 1.2.2 HTML中的基础标签 在Web开发的世界里，HTML（HyperText Markup Language，超文本标记语言）是构建网页和Web应用程序的基石。它定义了网页内容的结构，通过一系列的标签（Tags）来告诉浏览器如何显示页面上的文本、图片、链接、表格等内容。在《TypeScript和Vue从入门到精通(一)》这本书中，我们虽然主要聚焦于TypeScript和Vue.js的深入学习，但了解HTML的基础知识对于构建任何Web应用都是至关重要的。本节将详细介绍HTML中一些基础且常用的标签，帮助读者打下坚实的Web开发基础。 #### 1.2.2.1 文档结构标签 任何HTML文档都始于`<!DOCTYPE html>`声明，它告诉浏览器这是一个HTML5文档。紧接着是`<html>`标签，它包裹了整个HTML文档的内容。`<html>`标签内部通常包含两个主要部分：`<head>`和`<body>`。 - **`<!DOCTYPE html>`**：文档类型声明，告诉浏览器文档使用HTML5标准。 - **`<html>`**：HTML文档的根元素，包含整个页面的内容。 - **`<head>`**：包含了文档的元（meta）数据，如字符集定义（`<meta charset="UTF-8">`）、文档的标题（`<title>`）、链接到CSS文件（`<link>`）或JavaScript文件（`<script>`）等，但不包含可见的页面内容。 - **`<body>`**：包含了网页的所有可见内容，如文本、图片、视频、游戏、可点击的按钮以及可交互的表单等。 #### 1.2.2.2 文本格式化标签 在HTML中，可以通过一系列标签来改变文本的外观，如加粗、斜体、下划线等。 - **`<h1>`到`<h6>`**：标题标签，`<h1>`是最高级别的标题，`<h6>`是最低级别的。这些标签用于定义HTML文档中的标题或子标题，`<h1>`通常用于主标题，而`<h6>`则用于最不重要的子标题。 - **`<p>`**：段落标签，用于定义文本的一个段落。浏览器会在段落前后自动添加一些空白。 - **`<b>`** 和 **`<strong>`**：加粗文本。`<b>`是简单的加粗，而`<strong>`表示内容的重要性。 - **`<i>`** 和 **`<em>`**：斜体文本。`<i>`用于纯粹的样式效果，而`<em>`表示内容的强调。 - **`<u>`** 和 **`<ins>`**：下划线文本。`<u>`是简单的下划线，而`<ins>`表示被插入的文本。 - **`<s>`** 和 **`<del>`**：删除线文本。`<s>`表示不再准确或不再相关的内容，而`<del>`表示被删除的文本。 #### 1.2.2.3 链接与图片 在Web上，链接和图片是不可或缺的元素。 - **`<a>`**：超链接标签，用于创建从一个页面到另一个页面的链接。它可以通过`href`属性指定链接的目标地址，如`<a href="https://www.example.com">访问Example网站</a>`。 - **`<img>`**：图片标签，用于在网页中嵌入图片。它通常需要`src`（图片来源）、`alt`（替代文本，用于图片无法显示时）等属性，如`<img src="image.jpg" alt="描述性文本">`。 #### 1.2.2.4 列表标签 列表是展示信息的有序或无序集合，HTML提供了三种列表类型。 - **无序列表**：使用`<ul>`（unordered list）标签和`<li>`（list item）标签来创建。列表项前默认带有项目符号（如圆点）。 - **有序列表**：使用`<ol>`（ordered list）标签和`<li>`标签来创建。列表项前会带有数字或字母序号。 - **定义列表**：使用`<dl>`（definition list）标签、`<dt>`（definition term）标签和`<dd>`（definition description）标签来创建。通常用于术语及其定义的列表。 #### 1.2.2.5 表格标签 HTML表格用于在网页上显示表格化数据。 - **`<table>`**：定义表格。 - **`<tr>`**：定义表格中的一行（table row）。 - **`<th>`**：定义表格中的表头单元格（table header），内容默认加粗并居中显示。 - **`<td>`**：定义表格中的标准单元格（table data）。 - **`<caption>`**：定义表格的标题，通常位于表格的上方或下方。 #### 1.2.2.6 表单标签 表单是Web页面上用于收集用户输入的部分，HTML提供了多种表单控件。 - **`<form>`**：定义表单的容器，可以通过`action`属性指定表单提交后数据的处理页面，通过`method`属性指定提交数据的方式（GET或POST）。 - **输入控件**：如`<input>`，根据`type`属性的不同，可以创建文本框、密码框、单选按钮、复选框、提交按钮等多种输入控件。 - **`<textarea>`**：多行文本输入控件，允许用户输入任意数量的文本。 - **`<select>`**：下拉选择菜单，与`<option>`标签结合使用来定义菜单中的选项。 - **`<button>`**：按钮控件，可以定义点击按钮时执行的操作，如提交表单。 #### 1.2.2.7 语义化标签 HTML5引入了许多新的语义化标签，旨在让网页的结构更加清晰，便于搜索引擎理解和索引。 - **`<article>`**：表示页面上的独立内容区域或一篇完整的文章。 - **`<section>`**：表示文档中的一个区域（或节），通常包含一组内容及其标题。 - **`<nav>`**：表示导航链接的部分。 - **`<aside>`**：表示与页面主要内容稍微独立的内容，如侧边栏。 - **`<header>`**：表示页面或页面内某个区域的头部。 - **`<footer>`**：表示页面或页面内某个区域的底部。 了解并熟练使用这些基础HTML标签，是构建任何Web应用的第一步。在后续学习TypeScript和Vue.js的过程中，你会发现这些HTML知识将是你构建动态、交云Web应用的坚实基础。随着你对这些技术的深入理解，你将能够创建出既美观又功能强大的Web应用程序。
上一篇：
1.2.1 准备开发工具
下一篇：
1.3 CSS入门
该分类下的相关小册推荐：
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(四)
Vue.js从入门到精通(二)
Vue原理与源码解析
Vue.js从入门到精通(一)
TypeScript和Vue从入门到精通(五)
TypeScript和Vue从入门到精通(二)
VUE组件基础与实战
Vue面试指南
vue项目构建基础入门与实战
Vue3技术解密
Vue源码完全解析
