「前端早读君010」重学前端day1: HTML基础

前言

鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。有鉴于此，加上又到了一年一度的春招时间，在接下来的一段时间内笔者将对整个前端体系的知识进行一些梳理，同时会附带上相关基础知识中常见的面试题。在笔者复习的同时也希望能给准备春招的前端同学们提供一点点资料，共勉。

基本的HTML结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

如代码所现，一般来讲，一段基础的HTML结构主要由两大部分组成

head
body

head主要存放的是页面的相关信息，比如场景的title标签，meta信息标签、style样式等。

body顾名思义就是身体主躯干的意思，页面所呈现的素材内容，就是存放在body里面，我们见到的页面内容，都来自body。

代码解读

<!doctype html>

html5头部的第一句是文档声明，该声明的作用是告诉浏览器用什么文档标准解析HTML文档，DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。目前我们见到的大部分页面都是HTML5标准文档。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

HTML4.01基于SGML, 所以需要对DTD进行引用，其开头的第一行是一个独立的文档声明，才能告知浏览器文档所使用的文档类型。

(SGML：SGML是国际上定义电子文档和内容描述的标准，大家了解即可)

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

此段代码表示的是HTML的视窗大小，在响应式开发和移动开发中，这个代码很重要，viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，上诉代码就限定了网页在不同端下的大小与缩放，具体的含义如下：

width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

大家看到这么多参数不用担心，一般来讲只需要了解即可，用到再查，无须死记硬背。

标准模式（严格模式）与兼容模式（混杂模式）

上文说到浏览器解析HTML有兼容模式与标准模式两种模式，那它们是什么呢，有什么区别？

标准模式：浏览器用浏览器支持得最高标准解析HTML和运行JS
兼容模式：在未声明DOCTYPE的情况下，为了保证页面能正常工作，浏览器以宽松向后兼容的模式运行该网站，防止老式站点无法工作。

闭合标签和自闭合标签

对于大部分HTML标签而言，他们都是成对出现的，譬如

<div></div>
<span></span>

但是也有部分标签不是成对出现的，称之为自闭合标签，譬如

<img />
<br />

我们可以看到他们后面自己带了/结尾，但是在HTML5标准处理以后，更建议不写/，如下

<img>
<br>

标签语义化

一个网页，做出来之后不仅仅是给人看的，同时也要让机器（爬虫）能够读懂上面的信息。这个时候就涉及到标签的语义化。如果把每个HTML标签比作一个容器，那么你书写的内容就是你要存放到容器中的物品。举个例子，在日常生活中，我们都知道鞋子就放在鞋柜里面，洗发水放在洗发水瓶里面，洗洁精放在洗洁精瓶子里面。我们根据瓶子就知道瓶子里面装的是什么。

同理，对于HTML而言，HTML的标签也是具有容器含义的，譬如footer标签顾名思义就是尾部标签，存放内容的结尾块，header标签表示头部。合理地使用HTML标签能让机器更容易读懂你的页面信息。