《前端早读Jun010》重温前端day1：HTML基础

前言鉴于本人平时写的业务代码过多，笔者对前端的一些基础知识变得陌生——结尾。鉴于此，又是一年一度的春招时间，在接下来的一段时间里，笔者会对整个前端系统的知识进行梳理，并在相关基础知识中附上常见的面试题。笔者在复习的同时，也希望能给正在准备春招的前端同学提供一点信息，互相鼓励。基本HTML结构如代码所示，一般来说，一个基本的HTML结构主要由两部分组成。headbodyhead主要存储页面的相关信息，如场景的title标签、meta信息标签、style样式等。body顾名思义就是body的主干。页面呈现的素材内容存储在正文中。我们看到的页面内容来自body。代码解释html5标头的第一句是文档声明。这条语句的作用是告诉浏览器使用什么文档标准来解析HTML文档。如果DOCTYPE不存在或格式不正确，文档将以兼容模式呈现。目前我们看到的大部分页面都是HTML5标准文档。HTML5不是基于SGML，所以不需要引用DTD，但是需要doctype来规范浏览器的行为（让浏览器按照应该的方式运行）；HTML4.01基于SGML，所以DTD需要引用，开头第一行是一个独立的文档声明，告诉浏览器文档使用什么doctype。（SGML：SGML是定义电子文档和内容描述的国际标准，大家看得懂）这段代码表示HTML的窗口大小。这段代码在响应式开发和移动开发中非常重要。viewport是设备的屏幕，可以用来显示我们的网页的那个区域，上诉代码限制了网页在不同终端下的大小和缩放比例。具体含义如下：width：可见区域的宽度，取值可以是数字或关键字.如果该值为1.0，页面将按实际大小显示，不作任何缩放。Zoom-in程序，1.0将禁止用户放大到超出实际大小。user-scalable：页面是否可以缩放，禁止缩放。您无需担心看到这么多参数。一般来说，你只需要了解它。标准模式（严格模式）和兼容模式（混合模式）上面说到浏览器解析HTML有两种模式，兼容模式和标准模式，那么它们分别是什么，有什么区别呢？标准模式：浏览器使用浏览器支持的最高标准来解析HTML和运行JS兼容模式：在没有声明DOCTYPE的情况下，为了保证页面能够正常工作，浏览器以松散的方式向后运行网站兼容模式防止老式网站无法工作。对于大多数HTML标签来说，结束标签和自闭标签都是成对出现的，比如

，但是也有一些标签不是成对出现的，叫做Self-closing标签，比如
，我们可以看到他们最后都有/，但是经过HTML5标准处理后，建议不要写/，语义上如下
标签一个网页，做出来之后，不仅是给人看的，也是让机器（爬虫）理解上面的信息。这个时候涉及到标签的语义。如果把每一个HTML标签比作一个容器，那么你写的内容就是你要存放在容器中的项目。比如在日常生活中，我们都知道鞋子放在鞋柜里，洗发水放在洗发水瓶里，洗洁精放在洗洁精瓶里。我们从瓶子里就知道瓶子里装的是什么。同样，对于HTML来说，HTML标签也有容器的含义。比如footer标签，顾名思义就是tail标签，存放的是内容的结束块，header标签表示头部。合理使用HTML标签可以让机器更容易理解你的页面信息。