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

2024年2月21日 117次阅读 来源: nextBoy

媒介

鉴于一样平常平凡营业代码写多了，笔者对前端的一些基本学问都最先陌生。有鉴于此，加上又到了一年一度的春招时刻，在接下来的一段时刻内笔者将对全部前端系统的学问举行一些梳理，同时会附带上相干基本学问中常见的面试题。在笔者温习的同时也愿望能给预备春招的前端同学们供应一点点材料，共勉。

基本的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标签能让机械更轻易读懂你的页面信息。

    原文作者：nextBoy
    原文地址: https://segmentfault.com/a/1190000018382184
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞