首先明确一点学习的最根本原则： - 预习：是不可能预习的 - 复习：是不可能复习的那么如何能够教女朋友快速从零基础上手写代码，将成为本课时的最关键内容。前端的基础主要包括三个部分，HTML、CSS、JS，其中 HTML 和 CSS 是前端的基础，JS 是前端的核心。本课时主要讲解 HTML 和 CSS，JS 将在下一阶段重点讲解。简单来说，HTML 是网页的骨架，CSS 是网页的皮肤，JS 是网页的灵魂。 ## HTML HTML 指的是超文本标记语言: **H**yper**T**ext **M**arkup **L**anguage ![](https://www.runoob.com/wp-content/uploads/2013/06/02A7DD95-22B4-4FB9-B994-DDB5393F7F03.jpg) > 图片来自 [Runoob.com](https://www.runoob.com/html/html-intro.html) ### 通用声明 HTML 5： ```html ``` 目前最常见的也是最简单的声明方式，其他还有 html 4.01、 xhtml 1.0 等，具体可以参考： [https://www.runoob.com/tags/tag-doctype.html](https://www.runoob.com/tags/tag-doctype.html) （`可以忽略不看`）目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 `UTF-8` 或 `GBK`。整体页面结构： - `DOCTYPE` 声明 - `` 页面元素 - `` 头部信息元素（不会显示，内部元素顺序可以随意调整） - `` 页面标题 - `<meta>` 元数据 - 其他头部信息 - `<body>` 网页主体 - 各元素内容示例代码： ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>页面标题

我的第一个标题

我的第一个段落。

``` > [在线体验](https://www.runoob.com/try/try.php?filename=tryhtml_headers) ### head 元素 | 标签 | 描述 | | :

Sponsors

Donation Method

Income and expenditure details

Sponsors