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

时间 2019-11-21

标签前端 day1 day html 基础栏目 HTML 繁體版

原文原文链接

前言

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

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是国际上定义电子文档和内容描述的标准，你们了解便可)ui

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

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

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

你们看到这么多参数不用担忧，通常来说只须要了解便可，用到再查，无须死记硬背。scala

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

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

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

闭合标签和自闭合标签

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

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

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

<img />
<br />

咱们能够看到他们后面本身带了/结尾，可是在HTML5标准处理之后，更建议不写/，以下

<img>
<br>

标签语义化

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

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