[教女朋友从 0 到 1 学编程系列] 二、快速掌握前端基础

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个专门讨论 idea 的地方。

每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。

那这个时候，不妨可以把那些 idea 分享出来，启发别人。

这是一个创建于 819 天前的主题，其中的信息可能已经有所发展或是发生改变。

首先明确一点学习的最根本原则：

预习：是不可能预习的
复习：是不可能复习的

那么如何能够教女朋友快速从零基础上手写代码，将成为本课时的最关键内容。

前端的基础主要包括三个部分，HTML 、CSS 、JS ，其中 HTML 和 CSS 是前端的基础，JS 是前端的核心。本课时主要讲解 HTML 和 CSS ，JS 将在下一阶段重点讲解。

简单来说，HTML 是网页的骨架，CSS 是网页的皮肤，JS 是网页的灵魂。

HTML

HTML 指的是超文本标记语言: HyperText Markup Language

图片来自 Runoob.com

通用声明

HTML 5：

<!DOCTYPE html>

目前最常见的也是最简单的声明方式，其他还有 html 4.01 、xhtml 1.0 等，具体可以参考： https://www.runoob.com/tags/tag-doctype.html （可以忽略不看）

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

整体页面结构：

DOCTYPE 声明
<html> 页面元素
- <head> 头部信息元素（不会显示，内部元素顺序可以随意调整）
  - <title> 页面标题
  - <meta> 元数据
  - 其他头部信息
- <body> 网页主体
  - 各元素内容

示例代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <!-- 这是一段注释，不会显示到页面中 --> </body> </html>

在线体验

head 元素

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了 HTML 文档中的元数据
`<script>`	定义了客户端的脚本文件 (也可以放在 `<body>` 中)
`<style>`	定义了 HTML 文档的样式文件 (也可以放在 `<body>` 中)

body 元素

常见元素

标签	描述
`<h1>`,`<h2>`,`<h3>` ... `<h6>`	定义 HTML 标题
`<p>`	定义一个段落
`<br>`	插入单个折行（换行）
`<a>`	定义一个超级链接
`<div>`	定义了文档的区域，块级 (block-level)
`<span>`	用来组合文档中的行内元素，内联元素(inline)

除此之外，常见元素还有表格、列表、HTML 5 新增标签等。

表格 Table

标签	描述
`<table>`	定义表格
`<tr>`	定义表格的行
`<th>`	定义表格的表头
`<td>`	定义表格单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性

示例代码：

<table border="1"> <!-- 定义表头 --> <thead> <tr> <th>标题 1</th> <th>标题 2</th> <th>标题 3</th> </tr> </thead> <!-- 定义内容 --> <tbody> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </tbody> </table>

在线体验

有序列表 ol 和无序列表 ul

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定列表项的描述

示例代码：

<h4>有序列表：</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>无序列表：</h4> <ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>嵌套列表：</h4> <ul> <li>Coffee</li> <li> Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> <h4>一个自定义列表：</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

在线体验

更多 HTML 元素参考清单： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element （放到收藏夹，在开发过程中可以参考）

理解区块元素（ block-level ）和内联元素（ inline ）

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table>, <div>
内联元素在显示时通常不会以新行开始。实例: <td>, <a>, <img>, <span>

示例代码：

<h1>标题</h1> <!-- h1 和 p 分别显示成两块（上下分开） --> <p> 这是一个段落。 <!-- 这个 a 显示在行内 --> <a href="https://www.runoob.com">这是一个链接</a>。 <!-- 这个 span 显示在行内 --> 这是一个<span style="color:red">内联元素</span>。 </p>

显示效果如下：

进阶使用

HTML5 添加了很多语义元素，用于代替 <div> 元素，比如 <header>、<footer>、<nav>、<section> 等。

标签	描述
`<article>`	定义页面独立的内容区域。
`<aside>`	定义页面的侧边栏内容。
`<footer>`	定义 section 或 doument 的页脚。
`<header>`	定义了文档的头部区域
`<nav>`	定义导航链接的部分。
`<section>`	定义文档中的节（ section 、区段）。

示例代码：

<article> <header> <h1>标题</h1> <p>作者：张三</p> <p>日期：2023-07-25</p> </header> <section> <p>这是一篇文章。</p> <p>这是一篇文章。</p> <p>这是一篇文章。</p> </section> <!-- 其他 section --> <footer> <p>版权所有：张三</p> <p>联系方式：123456789</p> <nav> <!-- 上一篇、下一篇的链接等 --> </nav> </footer> </article>

TBD. 待更新。