摘要：前言鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。同理，对于而言，的标签也是具有容器含义的，譬如标签顾名思义就是尾部标签，存放内容的结尾块，标签表示头部。
前言
鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。有鉴于此，加上又到了一年一度的春招时间，在接下来的一段时间内笔者将对整个前端体系的知识进行一些梳理，同时会附带上相关基础知识中常见的面试题。在笔者复习的同时也希望能给准备春招的前端同学们提供一点点资料，共勉。
基本的HTML结构
Document
如代码所现，一般来讲，一段基础的HTML结构主要由两大部分组成
head
body
head主要存放的是页面的相关信息，比如场景的title标签，meta信息标签、style样式等。
body顾名思义就是身体主躯干的意思，页面所呈现的素材内容，就是存放在body里面，我们见到的页面内容，都来自body。
代码解读html5头部的第一句是文档声明，该声明的作用是告诉浏览器用什么文档标准解析HTML文档，DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。目前我们见到的大部分页面都是HTML5标准文档。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
HTML4.01基于SGML, 所以需要对DTD进行引用，其开头的第一行是一个独立的文档声明，才能告知浏览器文档所使用的文档类型。
(SGML：SGML是国际上定义电子文档和内容描述的标准，大家了解即可)
此段代码表示的是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标签而言，他们都是成对出现的，譬如
但是也有部分标签不是成对出现的，称之为自闭合标签，譬如
我们可以看到他们后面自己带了/结尾，但是在HTML5标准处理以后，更建议不写/，如下
标签语义化![]()
一个网页，做出来之后不仅仅是给人看的，同时也要让机器（爬虫）能够读懂上面的信息。这个时候就涉及到标签的语义化。如果把每个HTML标签比作一个容器，那么你书写的内容就是你要存放到容器中的物品。举个例子，在日常生活中，我们都知道鞋子就放在鞋柜里面，洗发水放在洗发水瓶里面，洗洁精放在洗洁精瓶子里面。我们根据瓶子就知道瓶子里面装的是什么。
同理，对于HTML而言，HTML的标签也是具有容器含义的，譬如footer标签顾名思义就是尾部标签，存放内容的结尾块，header标签表示头部。合理地使用HTML标签能让机器更容易读懂你的页面信息。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102346.html
摘要：前言鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。同理，对于而言，的标签也是具有容器含义的，譬如标签顾名思义就是尾部标签，存放内容的结尾块，标签表示头部。 前言 鉴于平时业务代码写多了，笔者对前端的一些基础知识都开始生疏。有鉴于此，加上又到了一年一度的春招时间，在接下来的一段时间内笔者将对整个前端体系的知识进行一些梳理，同时会附带上相关基础知识中常见的面试题。在笔者复习的...
摘要：什么是是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。利用元素的这个开放策略，网页可以得到从其他来源动态产生的资料，而这种使用模式就是所谓的。 什么是jsonp JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说...
摘要：什么是是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于的网页无法与不是的服务器沟通，而的元素是一个例外。利用元素的这个开放策略，网页可以得到从其他来源动态产生的资料，而这种使用模式就是所谓的。 什么是jsonp JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说...
摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...
摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...
阅读 1329·2023-04-25 18:56
阅读 1060·2021-10-14 09:42
阅读 1287·2021-09-29 09:34
阅读 1501·2021-09-22 15:51
阅读 3266·2021-09-14 18:03
阅读 950·2021-07-23 17:54
阅读 1899·2019-08-29 18:38
阅读 2804·2019-08-29 12:38
