iOS Club和你一起学Vue（2）
在上一节，我们创建了Vue项目，并且了解了项目构架，并且我们运行了应用
这一节，我们将正式开始我们的学习。我们会先学习基础知识——HTML，CSS，JS
那我们开始吧
一个页面的构成
在Vue中，当我们直接创建一个Vue界面时，会直接帮我们生成好基础的框架：
<script setup>
</script>
<template>
</template>
<style scoped>
</style>
我们不难发现，一共分为三个部分：
- 脚本(script) ：这里可以写一些页面的逻辑
- 模板(template) ：这里规定了页面要显示什么东西
- 样式(style) ：这里规定了控件的样式
而这些背后的语言就是JS、HTML、CSS。也就是前端三件套。
HTML
HTML是超文本标记语言（HyperText Markup Language）的缩写，它是一种用来创建网页的标准标记语言。HTML 不是一种编程语言，而是一种标记语言，它使用一系列预定义的标记标签（markup tags）来描述文档的结构和内容。
我们可以看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 这是一个注释 -->
<!-- 这里是头部，用来描述网页信息 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 这里是主体，当然在Vue中，我们在写页面的时候，只需要写下面这些，也就是被boby所包含的内容 -->
<h1>Hello World</h1>
</body>
</html>
这就是一个HTML文件，它包含了一个标题和一段文字。
那么这里我们也可以看出来了，HTML的"语法"其实很简单——就是大标签包小标签，然后可以在标签上写一些属性。
那还学什么？还不如来看看HTML的标签。
HTML的标签有很多，我们这里只介绍一些常用的标签（不过我建议各位就先简单看看，主要是这些东西就跟查字典差不多，不如收藏一下先）：
1. 文档结构标签
<!DOCTYPE html>: 定义文档类型为 HTML5。<html>: 根标签，包含整个 HTML 页面的内容。<head>: 包含文档的元数据，如标题、字符集、样式表和脚本等。<title>: 定义文档的标题，显示在浏览器的标题栏或标签页上。<meta>: 提供关于文档的元信息，如字符集、视口设置等。<link>: 连接到外部资源，如 CSS 文件。<script>: 定义客户端脚本，如 JavaScript 代码。
2. 内容标签
<body>: 包含网页的主要内容。<header>: 定义文档或节的页眉。<footer>: 定义文档或节的页脚。<nav>: 定义导航链接的部分。<article>: 定义独立的自包含内容，如博客文章或新闻故事。<section>: 定义文档中的独立部分，如章节、页眉、页脚或文档中的其他部分。<aside>: 定义其内容与页面主要内容相关但可独立分离的内容，如侧边栏。<main>: 定义文档或应用程序的主要内容。
3. 文本内容标签
<p>: 定义段落。<h1>至<h6>: 定义标题，<h1>是最重要的标题。<br>: 插入换行符。<hr>: 插入水平线。<strong>: 强调文本的重要性。<em>: 强调文本的语气或语义。<a>: 创建超链接。<img>: 插入图片。<span>: 用于应用样式或添加 JavaScript 功能到文本的一部分。<div>: 定义文档中的一个区块或部分。
4. 列表标签
<ul>: 定义无序列表。<ol>: 定义有序列表。<li>: 定义列表项。
5. 表格标签
<table>: 定义表格。<tr>: 定义表格中的行。<th>: 定义表格中的表头单元格。<td>: 定义表格中的标准单元格。
6. 表单标签
<form>: 定义用户输入的表单。<input>: 定义输入字段，如文本框、按钮等。<label>: 定义输入字段的标签。<button>: 定义按钮。<select>: 定义下拉列表。<option>: 定义下拉列表中的选项。
CSS
CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，它允许我们为网页元素添加颜色、字体、布局、动画等。CSS 的语法很简单，通过选择器（selector）和属性（property）来定义样式。
我们这里可以先看一个例子:
body {
background-color: #f0f0f0;
color: #333;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
font-size: 24px;
}
#app{
padding: 20px;
border: 1px solid #ccc;
margin: 20px;
background-color: #fff;
}
这里我们写了三个选择器，不过这三个的用处却不太一样。
body选择器：它选择文档的 body 元素，并应用样式。.header选择器：它选择具有 class="header" 的元素，并应用样式。#app选择器：它选择具有 id="app" 的元素，并应用样式。
也就是说第一个是强制每个body的标签都规定成这些样式，而第二个可以自由选择，只要将class设置成"header"就行。而第三个是强制选择id为app的标签，并规定成这些样式。
我们现在可以简单的介绍一些CSS的属性：
常用属性
background-color: 用于设置元素的背景颜色。color: 用于设置元素的文本颜色。font-family: 用于设置元素的字体。margin: 用于设置元素的外边距。padding: 用于设置元素的内边距。text-align: 用于设置元素的文本对齐方式。font-size: 用于设置元素的字体大小。display: 用于设置元素的显示方式。border: 用于设置元素的边框。width: 用于设置元素的宽度。height: 用于设置元素的高度。box-shadow: 用于设置元素的阴影。transition: 用于设置元素的过渡效果。border-radius: 用于设置元素的圆角。
伪类
那我想写一个样式，当鼠标悬停在链接上时，就会改变链接的颜色、下划线、字体加粗等样式。
这个时候我们使用伪类。伪类是选择器中的一种特殊类型，它允许我们选择元素在特定状态下的样式。例如，我们可以选择一个链接在鼠标悬停时的样式，或者选择一个表单字段在错误时的样式。
举个例子：
a:hover {
color: red;
text-decoration: underline;
font-weight: bold;
}
这个就是当鼠标悬停在链接上时，就会改变链接的颜色、下划线、字体加粗等样式。
现在我们来介绍一下常用的伪类：
动态伪类
:hover: 当用户将鼠标指针悬停在元素上时激活。:active: 当元素被激活时（例如，鼠标点击时）激活。:focus: 当元素获得焦点时（例如，通过键盘导航）激活。:target: 当元素被 URL 锚点选中时激活。
链接伪类
:link: 未访问过的链接。:visited: 已访问过的链接。
结构性伪类
:first-child: 元素是其父元素的第一个子元素。:last-child: 元素是其父元素的最后一个子元素。:only-child: 元素是其父元素的唯一子元素。:nth-child(n): 元素是其父元素的第 n 个子元素。:nth-last-child(n): 元素是其父元素从后向前数的第 n 个子元素。:nth-of-type(n): 元素是其父元素的第 n 个同类型子元素。:nth-last-of-type(n): 元素是其父元素从后向前数的第 n 个同类型子元素。:first-of-type: 元素是其父元素的第一个同类型子元素。:last-of-type: 元素是其父元素的最后一个同类型子元素。:only-of-type: 元素是其父元素的唯一同类型子元素。:not(selector): 选择不是由给定的选择器匹配的所有元素。
用户行为伪类
:checked: 选中的单选按钮或复选框。:indeterminate: 复选框或一组单选按钮中没有选中的值时的状态。:enabled: 可用的表单控件。:disabled: 不可用的表单控件。:read-only: 只读的表单控件。:read-write: 可读写的表单控件。
其他伪类
:root: 选择文档的根元素（通常是<html>）。:empty: 选择没有任何子节点的元素。:lang(language): 选择具有指定语言属性的元素。
这些伪类可以帮助你在 CSS 中实现更复杂的样式控制和交互效果。
练习
- 创建一个简单的 HTML 页面，包含一个标题、一个段落和一个按钮。
- 写一个卡片，要求使用到圆角，当其悬停时，其边框显现，并且是蓝色的
结尾
这一次我们介绍了HTML、CSS，以及它们的基本用法。
下一节我们将开始学习JS。
