三小时前端快速入门

resource: https://www.bilibili.com/video/BV1BT4y1W7Aw by 罗大富Bigrich @bilibili

前端简介

前端无处不用，入门门槛低，见效快，是转码的最佳选择。

网页右键->查看源代码（或按快捷键 H12）打开开发者工具，能看到不同页面元素对应的代码块。

前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容；而网页是在浏览器中呈现内容的文档或页面。通常网页是使用 HTML、CSS、JavaScript (JS) 组成。HTML 定义了页面的结构和内容，包括文本、图像、链接；CSS 用于定义页面的样式和布局，开发者工具右栏 Styles（样式）等就是 CSS 代码；JS 用于添加交互性和动态功能作用。

安装 VSCode 开发环境

下载并安装 VSCode，运行之。

左侧栏 extensions -> 搜索 Chinese -> 安装语言包，安装完后重启 VSCode.

左侧栏 extensions -> 搜索 HTML CSS Support -> 安装，用于写 CSS.

左侧栏 extensions -> 搜索 Live Server -> 安装，用于在浏览器中实时预览页面变化。

左侧栏 extensions -> 搜索 Auto Rename Tag -> 安装，其可以让你在修改 HTML 标签的时候，同步修改与之匹配的另一个标签。

HTML 简介及环境搭建

HTML 全称为 hypertext markup language（超文本标记语言），用于为网页提供结构，告诉浏览器哪些是标题，哪些是段落，哪些是列表，等等。

HTML 标签

HTML 通过一系列的标签（也称为元素）来通过属性提供信息，定义文本、图像、链接等，HTML 标签是由尖括号括起的关键字。

标签通常成对出现，包括开始标签和结束标签，合称双标签，内容位于这两个标签之间，例如：

<p>这是一个段落。</p>
<hl>这是一个标题。</hl>
<a href="#">这是一个超链接。</a>

不过单标签也是存在的，例如：

<input type="text">
<br>
<hr>

单双标签的差别在于是否无文本内容。

HTML 文件结构

<!DOCTYPE html> 用于告诉浏览器，这是一个 HTML 文件。

<html></html> 标签对，是这个 HTML 文档的根元素，表明 HTML 文档的起始点和这个文档的最外层容器，包含了整个文档的结构。

<head></head> 标签对，表示文档的头部，包含了一些文件的元信息，比如文档的标题、文件的编码格式、一些外部样式表（包含 CSS 和 JS 文件）。

<body></body> 标签对，包含了实际显示在浏览器页面内的内容。我们接下来的练习都是在该标签对内编写。

<!-- 这里防止文档的元信息 -->
<!DOCTYPE html>
<html>
  <head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <meta charset="UTF-8">
    <!-- 链接外部样式表或脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- 这里放置页面内容 -->
    <hl>这是一个标题。</hl>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个超链接。</a>
  </body>
</html>

现在 new 一个文件夹，Windows 下 cmd 命令行（Win+R 输入 cmd 进入）进入之：cd `.

使用命令 code . 使用 VSCode 打开当前目录，即将其添加到工作区。

在文件夹下创建一个 html 文件，比如 demo.html/

你当然可以手动打一遍 html 模板，也可以在空白文件开头打一个或三个感叹号后 tab 补全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo_test</title>
</head>
<body>

</body>
</html>

然后我们可以在文件区域鼠标右键后选择 Open with Live Server 在浏览器中观察我们这个页面。

常用文本标签

标题标签：HTML 中标题标签共六级，分别使用双标签 h1 至 h6，显然 h 取自标题（heading），另外请灵活使用 HTML 的 Tab 键补全功能。

（左上角 -> 自动保存，右键运行的时候 -> open with live server，就可以实时更新了）

（Auto Rename Tag 可以让你同步修改双标签）

段落标签：使用双标签为 p，显然 p 取自段落（paragraph）。

文本加粗：使用双标签 b，取自 bold（adj. 加粗的），其与 strong 标签等价。

文本斜体：使用双标签 i，取自 italic（adj. 斜体的）。

文本下划线：使用双标签 u，取自下划线（underline）。

文本删除线：使用双标签 s，取自删除线（strikethrough，也称为中划线），也可以使用 del.

如果想要改变字体大小，请找 CSS.

无序列表：使用双标签 ul，取自无序列表（unordered list），也可以使用双标签 dl（取自 disorder list），在该双标签内使用双标签 li（取自 list item）来展示其列表内容。

有序列表：使用双标签 ol，取自有序列表（ordered list），其余同无序列表。

表格：最外层使用双标签 table，接下来每一行使用 tr 双标签（table row），在其内再多次使用 td 标签（table data），特别地，如果该行作为标题行，可以使用 th 双标题（table header）代替 td.

表格边框：在 <table></table> 双标签中的开始标签中添加 border 属性：<table border="1"></table>，其中 1 表示边框宽度，可以改成其他数字。

HTML 标签属性

属性在 HTML 中起到很重要的作用，用于定义元素的行为和外观，以及与其他元素的关系。

基本语法：（属性值也可以用单引号括起来，但是惯例是双引号）

<开始标签 属性名="属性值"></结束标签>

以下是一些例子：

<p id="describe" class="section">这是一个段落标签</p>
<a href="http://www.baidu.com">这是一个超链接</a>
<img src="example.jpg" alt=""></img>

属性名称不区分大小写，属性值大小写敏感。

适用于大多数 HTML 元素的属性：class：为 HTML 元素定义一个或多个类名（类名从样式文件中引入），id：定义元素唯一的 ID，style：规定元素的行内样式，这几个一般与 CSS 配合使用。

a 标签：a 常用于表示超链接，其中可以使用 href 属性；还可以使用 target 属性，此属性用于链接的打开方式，属性值常见四种：_blank、_parent、_self、_top

_blanck：在新标签页打开。

_parent：在父窗口/父框架中打开。

_self：在当前标签页打开。

_top：在顶层窗口/顶层框架中打开。

换行标签：使用单标签 br（line BReak）。

水平分割线：使用单标签 hr（horizontal rule）.

img 标签：用于插入图片，其中使用 src 属性（source），属性值为图片路径，绝对路径、相对路径、URL 均可，还有 alt 属性（alternative），表示图片无法加载时的替代文本，可以留白；width 和 height 属性设置图片的宽高，可以只设定一个，另一个自适应（等比例缩放）。