开头提示语

这是我所写的第二篇文章，结合一下课上学习到的部分内容与自己在github上所学习到的东西所写的一篇文章或者说叫有思考的课堂笔记。

前端页面

打开浏览器，里面全都是网页或是网站。

页面查看

近年来，单页应用的出现率涨高了。要说明什么是单页应用呢，我们先从最初的静态页面说起。

静态页面，里面主要是HTML、CSS和javascript这几种类型组成的。当然还有像xHTML/svg等待。

废话少说，我们先来看看百度首页。

右键菜单

在定位某个元素的时候，我们也可以在该元素上右键选择“检查”，菜单如下：

查看网页源代码

选择“查看网页源代码”，能看到当前页面的整个HTML文档，里面包括一些当前页面的代码。

另存为

选择“另存为”，可以将该页面以及相关的一些静态资源打包下载。

检查

选择“检查”，可以检查当前选中的元素，同时打开控制台。

控制台

这里顺便讲讲，前端常用的调试工具。首先，必备第一个就是 Chrome 浏览器啦。

打开控制台

我们可以有三个方法打开控制台：

按键F12。
右键菜单，选择“检查”。
快捷键Shift + Ctrl + I。

控制台菜单

我们来看控制台：

这是控制台的菜单，这边简单做介绍（从左往右）：

Element：查看元素，能看到页面中所有存在的元素。
Console：输出，常用来输出一些信息，或是错误信息。
Source：查看源文件，可支持打断点调试。开启了 source map 后，更是可以浏览器直接更改本地文件。
Network：查看网络请求信息，包括静态资源的下载、ajax 请求等。

Element 查看元素

我们看看元素的查看，这里很方便的是，当我们选中 Element 里面某个元素，Chrome 便会突显出来，并且伴有常用的元素信息，宽高、padding、margin 等等。

同时，我们也可以看到下方的 Style，里面会有当前元素匹配中的一些 CSS 样式，我们也可以尝试在这里调整，调整成想要的样式之后，再贴进我们的代码里。

Console 输出

我们常用几种方式来调试，包括打断点、alert()和console等。

看看百度的页面，还藏了招聘信息：

当然现在好像越来越流行了，有时候有趣得网站也会藏些解码游戏在里面。

Network

我们在搜索框里面输入内容，便能看到百度页面发起的请求：

我们能在这里查看请求的内容、状态、服务端返回的内容等等。

页面组成

我们的页面主要由HTML、CSS和js组成

HTML

HTML，指超文本标签语言。它被称为通向 WEB 技术世界的钥匙，因为我们的CSS和Javascript，其实也属于HTML中的<style>和<script>标签而已。

但更多时候，我喜欢用HTML指代元素，例如<div>、<p>等。

最简单的莫过于：

<html>
  <head></head>
  <body>
    <h1>我的一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

我们的<html>里面包括两个子模快：

<head>：常包括一些样式、<meta>标签、甚至是<script>，不展示到页面
<body>：包括展示在页面的内容

CSS

CSS 主要是给我们的HTML元素添加样式，可以通过几个方式匹配：

DOM：像常用的p、ul/li等便是DOM匹配
class：类的匹配
id：id 标识符的匹配

class针对一类元素的匹配，id则是唯一标识符，若页面内有多个相同的id，则只有第一个生效。给元素添加样式，像是绘画的过程，绘制边框、大小、颜色等，都是通过样式来设置的。

Javascript

JavaScript 是可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。

我们常常使用 Javascript 来做以下事情：

输出 HTML。
处理事件（点击、输入等）。
改变 HTML 内容和样式。
处理 Http 请求。

其他的一些基础内容，推荐几个学习基础的网站：

结束语

本节简单介绍了关于前端页面的调试和组成。对于HTML、CSS和Javascript，后面会有详细说地明。

学习HTML与编写页面 | 青训营