Skip to content

三小时前端快速入门

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 属性设置图片的宽高，可以只设定一个，另一个自适应（等比例缩放）。

块元素与行内元素

有的元素在浏览器显示中独占一行，有的则不是，这就区分出了块元素与行内元素。

块元素（block）

块元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等，它们用于创建页面的主要部分，将内容分割成逻辑块。

块元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

可以包含其他块元素和行内元素。

常见的块元素包括 <div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>、<form> （表单标签）等。

行内元素（inline）

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接或强调文本等。

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需的宽度，而不是整行的宽度。

行内元素不能包含块元素，但可以包含其他行内元素。

常见的行内元素包括 <span>、<a>、<strong>、<em>、<img>、<br>、<input>（输入标签） 等。

<div> 和 <span> 标签

<div> 是一个块级的双标签，通常用于创建一个可以包含其他 HTML 元素的容器块，通常无任何语意，仅用于组织内，故而经常用于创建页面的布局结构。创建块级容器。

这个布局结构包括：页眉、导航栏、侧边栏、（中间的）内容区域、页角等等。

<span> 标签相当于无特殊标签的 <a> 与 <img>，作用是把一小部分文本包装起来，以便于对其使用样式、CSS 或 JS 行为。内联样式化文本。

这两个标签通常都与 CSS 或 JS 一起使用。

导航：nav（navigator）、导航栏：nav bar (navigator bar)

快捷键：「.name + Tab」/「div.name + Tab」→「<div class="name"></div>」；「#name + Tab」/「div#name + Tab」→「<div id="name"></div>」；

示例：

...

<body>
  <div class="nav">
    <a href="#">link 1</a> 
    <a href="#">link 2</a> 
    <a href="#">link 3</a> 
    <a href="#">link 4</a> 
    <a href="#">link 5</a> 
  </div>

  <div class="content">
    <h1>Title</h1>
    <p>contents</p>
    <p>contents</p>
    <p>contents</p>
    <p>contents</p>
    <p>contents</p>
  </div>

  <span>here's the first span tag</span>
  <span>here's the second span tag</span>
  <span>here's the third span tag</span>
  <span>here's the fourth span tag</span>
  <hr>
  <span>clink the link here <a href="#">link</a></span>
</body>

HTML 表单

HTML 表单用于收集用户的输入信息，表现为一个区域，其包含交互控件，将用户收集到的信息发送到 Web 服务器，这些交互控件通常为：输入字段、复选框、单选按钮、下拉列表等。

<form> 标签是表单的容器，其有很多属性。