文章目录
  1. 1. 前端页面
    1. 1.1. 页面查看
      1. 1.1.1. 右键菜单
      2. 1.1.2. 控制台
    2. 1.2. 页面组成
  2. 2. 单页&&多页
    1. 2.1. 单页应用
    2. 2.2. 多页应用
  3. 3. 结束语

《前端入门》系列主要为个人对前端一些经验和认识总结。本文简单说明一下一个网页的结构,以及 HTML 和 CSS编写页面。

前端页面


打开浏览器,里面全都是网页或是网站。包括大家常用的百度、论坛、视频网站等等,当然现在使用 App 的占比上升了不少。不过对于常常需要搜索、或是某些应用的老用户来说,当然是大屏幕的视野要宽,键盘的输入要快啦。

页面查看

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

静态页面,里面主要是HTMLCSSjavascript这几种类型组成的。当然还有像xHTML/svg等待。

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

右键菜单

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

image

  • 查看网页源代码

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

  • 另存为

选择“另存为”,可以将该页面以及相关的一些静态资源打包下载,以前经常这样来“借鉴”别人的样式。

  • 检查

选择“检查”,可以检查当前选中的元素,同时打开控制台。接下里我们重点介绍控制台,因为你们以后会与他们为伴。

控制台

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

打开控制台

假设你们已经在使用 Chrome 浏览器看我的文章了,那么我们可以有三个方法打开控制台:

  1. 按键F12
  2. 右键菜单,选择“检查”。
  3. 快捷键Shift + Ctrl + I

控制台菜单
我们来看控制台:

image

这是控制台的菜单,这边简单做介绍(从左往右):

  1. 检查元素(箭头带个框框):与右键选择元素检查相似,后面讲。
  2. 屏幕切换(手机卡在框框上):该功能主要用于PC端和移动端屏幕切换,适合H5的开发,并且可匹配多种机型。
  3. Element:查看元素,能看到页面中所有存在的元素。
  4. Console:输出,常用来输出一些信息,或是错误信息。
  5. Source:查看源文件,可支持打断点调试。开启了source map后,更是可以浏览器直接更改本地文件。
  6. Network:查看网络请求信息,包括静态资源的下载、ajax请求等。

这里面主要介绍这几个,其他的等需要的时候你们就会自己去接触啦。

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

image

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

Console 输出
我们常用几种方式来调试,包括打断点、alert()console等。本骚年用console稍微多一些。

看看百度的页面,还藏了招聘信息:

image

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

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

image

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

页面组成

上面也提到过,我们的页面主要由HTMLCSSjs组成,如果只用于静态数据的展示,或许只需要前两者就好了,一些公司的主页/官网也常常是简单的页面。

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

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

最简单的莫过于:

1
2
3
4
5
6
7
<html>
<head></head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

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

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

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

  • DOM:像常用的pul/li等便是DOM匹配
  • class:类的匹配
  • id:id标识符的匹配

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

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

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

  1. 输出HTML。
  2. 处理事件(点击、输入等)。
  3. 改变HTML内容和样式。
  4. 处理Http请求。

其他的一些基础内容,这里面不详述了。推荐几个学习基础的网站:

单页&&多页


前端程序员越来越频繁提到“单页应用”、“多页应用”这些,那这又分别代表什么呢?

单页应用

其实很简单,单页应用与多页最简单的区别就是,单页应用,是一个HTML文件。

当我们需要更改页面的展示,我们会移除掉部分元素,然后将需要新增的内容填充进去,与画画的擦除重绘相似。

单页应用的好处是:

  1. 页面的数据状态都能维持着。
  2. 部分擦除重绘,比整个页面刷新的效果体验要好很多。

当然,单页应用也会有缺点:

  1. 不利于SEO。
  2. 请求等待时间长。

事物都是有利有弊,单页应用的最大痛处在于SEO。
搜索引擎优化(英语:search engine optimization,缩写为 SEO),是一种通过了解搜索引擎的运作规则来调整网站,以及提高目的网站在有关搜索引擎内排名的方式。

而关于单页应用的 SEO,也是有各种各样的方式优化的,大家也可以去了解。

多页应用

多页应用,更常见于相同的业务不同的页面的开发,这些页面或许没有很多的联系或者公用的数据,每个页面维护各自的状态。

如今H5的业务多了,直出渲染也多了些。而多页应用和直出也是不错的搭配。

直出和同构
直出,常常指代后端渲染,即我们请求的页面已经是把模版和数据组合好,直接吐出来给到浏览器。

与此相对的,是前端渲染。例如单页应用,我们拿到的只是一个简单的空<html>,然后浏览器解析发现需要一些请求的数据和资源,发起二次请求。
当然,这样一来一去,消耗和等待的时间便会长了。

同构又是什么呢?

直出渲染的后端可以有很多,像PHP、JSP、Node.js等都是可以的。而同构的意思是,前后端使用一套代码。所以简单来说,就是Node.js的胜出了,同构最明显的优势,则是方便维护。

结束语


本节简单介绍了关于前端页面的调试和组成,以及单页和多页应用的概念。对于HTMLCSSJavascript,后面我们再详细说明一下吧。

码生艰难,写文不易,给我家猪囤点猫粮了喵~

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 前端页面
    1. 1.1. 页面查看
      1. 1.1.1. 右键菜单
      2. 1.1.2. 控制台
    2. 1.2. 页面组成
  2. 2. 单页&&多页
    1. 2.1. 单页应用
    2. 2.2. 多页应用
  3. 3. 结束语