么是HTTP

HTTP 传输的内容就是超文本：

1）我们先来理解文本：在互联网早期的时候只是简单的字符文字，但随着技术的发展，现在文本的涵义己经可以扩展为图片、视频、压缩包等，在 HTTP 眼里这些都算做文本。

2）再来理解超文本：它就是超越了普通文本的文本，它是文字、图片、视频等的混合体。最关键有超链接，能从一个超文本跳转到另外一个超文本。 HTML 就是最常见的超文本了，它本身只是纯文字文件，但内部用很多标签定义了图片、视频等的链接，在经过浏览器的解析，呈现给我们的就是一个文字、有画面的网页了。

下面我们正式介绍什么是 HTTP ?

HTTP ：超文本传输协议（ HyperText Transfer Protocol ）是当今互联网上应用最为广泛的一种网络协议。所有的 WWW （万维网）文件都必须遵守这个标准。 HTTP 和 TCP / IP 协议簇中的众多协议一样，用于客户端和服务器端之间的通信。

章先介绍一些HTML最基础的考点，很多大长面试官喜欢由浅入深地考察知识。而对于一些基础问题的回答，很多同学反而因组织不好语言而给面试官留下不好的印象。本章节我们就带大家一一整理和回顾。

1.1 DOCTYPE的作用

面试官：我们现在写HTML代码第一行通常是 !<DOCTYPE HTML>，请介绍一下DOCTYPE的作用（基础题）

DOCTYPE标签是一种标准通用标记语言的文档类型声明，且必须声明在文档的第一行，来告知浏览器用何种文档标准来解析这个网页，不同的渲染模式会影响浏览器对CSS和JavaScript的解析标准。

面试官：浏览器解析文档有哪几种解析模式呢？（拓展题）

文档的解析模式目前主要有 *两种（注意：还有一种“准标准模式”只在IE8浏览器里，目前主流浏览器已无需考虑）：

1. 怪异模式（quirks mode）：此种模式会模拟更旧的浏览器的行为。如果没有声明DOCTYPE，浏览器默认会以这种模式解析文档。
2. 标准模式（standards mode）：浏览器使用W3C的标准解析渲染页面。

面试官：如何快速检查页面的解析模式？（发散题）

HTML文档对象有个 compatMode 属性，用于记录页面的解析模式：

• 如果文档处于“混杂模式”，则该属性值为 BackCompat
• 如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为 CSS1Compat

const mode=document.compatMode; // 页面的解析模式
if (mode==="BackCompat") {
  // 渲染模式为混杂模式
}

1.2 HTML的语义化

面试官：什么是HTML语义化，语义化的作用是什么？（基础题）

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义；比如<p>标签就代表段落，<article>代表正文内容等等。语义化的作用有两点：

• 开发者友好：使用语义类标签增强代码的可读性，开发者也能够清晰地看出网页的结构，易维护；
• 机器友好：带有语义的标签适合搜索引擎的爬虫爬取有效信息，能快速生成网页骨架或文章提纲，SEO友好。

面试官：你平时有哪些语义化的建议或最佳实践？（发散题）

根据语义化的优点，对于富文本内容类的网站（如门户、新闻网站），语义化利于SEO，对网站内容的传播有很大帮助，此类网站应该重视和实践语义化标准。而对于一些系统类网站的搭建，语义化就没有那没重要了，甚至刻意做语义化反而会影响开发者的效率，此类网站可以对页面骨架做语义化，至于模块的交互组件和表单等则无需刻意做语义化。

1.3 HTML5新增内容考察

面试官：你知道HTML5有哪些新增的东西吗？（基础题）

HTML5新增的内容确实不少，面试官不会要求你全部记下来，我们可以挑重要的东西来回答：

• 新的文档解析顺序：不再基于 *SGML；
• 全面支持CSS3：
• 加了一些语义化元素：<header>、<mainer>、<footer>、<section>、<nav>等
• 删了一些样式类元素：<font>、<big>、<center> 等
• 表单能力加强：<input>的新类型（date、email、url等）、新属性（autocomplete、autofocus等）
• 新的属性：ping（用于a与area）、charset（用于meta）、async（用于script）等
• 定位能力：navigator.geolocation
• 多媒体支持：<video>（视频）、<audio>（音频）等
• 2D/3D 制图支持：支持svg、canvas绘图和动画等
• 新的缓存策略：Localstorage、SessionStorage、IndexedDB等
• 新的网络协议：WebSocket
• 新的跨域通信方案：XHTMLHttpRequest2、PostMessage......

拓展：什么是SGML

• SGML 即Standard Globalized Markup Language 是用来定义标准的标记语言，简单的说，就是定义文档的元语言。
• HTML 是基于SGML 的超链接语言，可以用于创建Web页面。在DTD 内部定义了标签的规则，DTD就是使用SGML 语言创建的。
• HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言

1.4 meta标签

面试官：介绍一下<meta>标签的用途 （基础题）

meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name

面试官：移动端适配的viewpoint，能否手写一下？（拓展题）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的区别

面试官：介绍一下src和href的区别（基础题）

• src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如JS脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般JS脚本会放在底部而不是头部。

• href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理

1.6 img标签的srcset

面试官：介绍一下<img>标签的srcset和sizes属性的作用（基础题）

可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源

• srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小

• sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择

所以，有了这些属性，浏览器会：

• 查看设备宽度
• 检查 sizes 列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载 srcset 列表中引用的最接近所选的槽大小的图像
• srcset提供了根据屏幕条件选取图片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script标签的defer和async

面试官：介绍一下<script>标签的defer和async的作用（基础题）

• defer：浏览器指示脚本在文档被解析后执行，<script>被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行

• async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于<script>有先后依赖关系的情况，并不适用

  如下图：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析

1.8 前端数据存储的方式

面试官：前端有哪几种数据存储方式？（基础题）

主要的存储方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它们的优缺点如下：

• Cookie：在HTML5标准前本地储存的主要方式
  • 优点是兼容性好，请求头自带cookie方便可以和服务端进行交互
  • 缺点是大小只有4k，请求头携带cookie浪费流量，每个domain限制20个cookie，JS无法直接操作，需要自行封装

• LocalStorage：以键值对为标准的数据存储方式
  • 优点是操作方便，永久性储存（除非手动删除），大小为5M
  • 缺点是兼容IE8+

• SessionStorage：与localStorage基本类似，区别是**sessionStorage当页面关闭后会被清理
  • 优点是会话级随存随取，不占用本地空间，操作方便
  • 缺点是不能在所有同源窗口中共享，是会话级别的储存方式，兼容IE8+

• IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作
  • 优点是存储量更大，非常适合web场景，同时支持JS进行操作，非常方便
  • 缺点是兼容性IE8+

• WebSQL：类似SQLite，是真正意义上的关系型数据库，用sql进行操作
  • 优点是关系型数据库，适合大型的离线web应用
  • 缺点是JS需要通过transaction操作sql，火狐浏览器不支持

拓展：如何操作webSql

// WebSql操作实例
var db=openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表=> 插入=> 删除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg='<p>数据表已创建，且插入了两条数据，然后又删除了第一条。</p>';
  document.querySelector('#status').innerHTML=msg;
});

1.9 WebSocket考点

面试官：介绍一下webSocket的特点和作用（基础题）

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

本文由博客一文多发平台 OpenWrite 发布！

位小伙伴好，黑客技术离不开代码，做为一个渗透测试工程师，也一定要有一些代码基础。网络安全行业，现在人才缺口大，再加上就业形势又很严峻，介于这些，我们想培养一批优秀的网络安全人才，将对网络安全行业、黑客技术，以及渗透测试技术感兴趣的小白培养成精英。

跟随我们，不管你有多白，都可以逐步进入网络安全行业，并最终在这个行业找到高薪职业。

然后呢，我要说一句，关于“黑客”可能并不是大多数人所了解的那样。关于这些，可以参考：什么是黑客？什么是渗透测试？2分钟看完这800多字你就懂了

那么，我们就先从代码基础——HTML的基本语方开始。

首先给大家描述三个概念：语言、程序、代码之前的关系。

语言

首先我们就要搞清楚什么是语言？可能说HTML语言不太好理解，那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流，是不是叫做汉语呢？所以说汉语就是一门语言。

那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合，包括我们如何发音，如何写字，这些字如何拼在一起，能够产生具体的意义，有一定的含义，这些所有所有的集合在一起，形成了一套规则，然后大家都去遵循这套规则，就能够彼此交流，那么这就叫做语言。

我们再举一个例子，比如说英国人或者美国人，他们也有自己的语言，叫做英语，那么我在这里就是换了另一种语言，

代码

了解了语言之后，我们就再来看一看，什么是代码，那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢？

我们还是拿汉语来做比喻哈，我们说汉语就是一种交流沟通的一种规则，它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文，对吧。那么我们上语文课的时候，就要学一些最基础的有关语言的东西，比如说汉语拼音生字词，当时要记很多的这种生字生词，那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构？

那么英语呢？我们在学习英语的时候也会去记一些东西啊，就比如英文字母，紧接着就是背各种各样的单词，是不是当我们单词量有了一定的积累之后，我们对这个语言呢就掌握得更深刻了。

那么汉语要背生字词，英语呢要背单词，这些最基本的组成结构。那么在程序语言里面，代码就可以理解成是生字词或者是单词。

程序

最后，我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起，能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。

那么我们对照一下自然的这种语言，比如说汉语英语呢它是什么样？好多的文字放在一起，是不是句子？或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书，

那么汉语能写文章，用英语英文也能写文章，这个文章可大可小，可能几千字能大一点儿的一本书，也可以理解成是文章，那么用生字词组成的这种集合就成了文章了。然后我们再谈程序，它是什么呢？对照一下大家可能就理解了，它就是一个由代码组成的文章。

HTML叫做超文本标记语言

那么回过头来我们看我们要学的HTML语言，它也是一门语言，只不过呀它跟我们理解的汉语和英语有一定的区别。

汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛，是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言，只不过它不是人和人之间去交流的语言，那么它到底是做什么用的呢？我们来看一下HTML的概念。

HTML中文名称叫做超文本标记语言，用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台，使用HTML语言将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，即现在所见到的网页。

那么从中我们能看到什么呢？首先我们知道它的中文名称了。HTML叫做超文本标记语言。

那么再往下我们看他提到了。

在这里浏览器是吧？提到了浏览器，那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码，那么写这些代码的目的是什么呢？目的就是为了和浏览器去交流，只要我们写的这个东西浏览器能看得懂，他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。

HTML的语法规则

（1）HTML中的各种元素都是通过标记（标签）来表示。

（2）HTML当中的标签分为单标签和双标签。

（3）单标签格式为<名称/>，双标签格式为<名称></名称>。

（4）HTML对大小写不敏感。

然后，我们可以对照一下HTML的基本结构

HTML网页基本结构需要如下标签组成：

（1）<html></html>

（2）<body></body>

（3）<head></head>

（4）<title></title>

首先，我们打开一个记事本。

然后在记事本中输入<html></html>,这表示告诉浏览器，这是一个标准的HTML网页。

那么为什么是两个呢？前面1个，后面1个，这就有点类似于我们标点符号里边的括号，前面有一个开始，左半边括号后面有一个结束。右半边括号在这里也是前面的HTML表示网页从这儿开始，那么后边这个-html表示网页呢至此结束。

那我们网页这才刚开始就结束了呢，别着急，我们来看我在这里敲了几次回车把它分开了。那么表示什么意思呀？表示中间呀是有很多内容的，就是在网页开始到网页结束的中间是会有其他的东西的。

我们接着往下看，第二个标签呢叫做<body></body>,里面的单词呢表示的是身体，那么它呢表示的就是网页的主体，这个网页的主体也属于基本结构，那么它在哪儿呢？注意啊网页的主体也属于网页，那么它呀要放在<html></html>的中间。

下面，我们开始将第3个标签<head></head>写入记事本，它代表头部。他表示头是吧？我们可以想象一下，这个脑袋注意它和身体之间到底应该是个什么样的关系呢？就我们想象有一个人站在那儿，脑袋应该是在上面，身子应该是在下边哈。所以注意我们这个<head>标签呀要放在<body></body>标签的上方。注意！它们之间没有包含关系！是一上一下的。

最后一个叫做<title></title>这个单词的意思呢叫做标题。那么这个标题你应该放在哪？告诉大家，它属于网页的头部，在头部的里边。

好了，整理一下格式

我们来看4个基本结构的组成标签，我们都已经写到了这个文档里面了。

大家需要注意的是，我写的这种结构啊这个包含的关系非常重要。最外边是html表示网页开始，到网页结束，中间呢有头、身子，还有标题，那么头和身子是一上一下的关系，那么标题呢属于头部里边儿。要记住这个格式！

那么到现在为止呀我们这个网页的基本结构就算是真正写完了，我们把它保存一下。现在这个文档里边啊我们写的是网页的程序，虽然很简单，但它也是一个完整的网页了。

那么既然是一个网页，那我们如何能打开它看这个网页呢？注意这个HTML写出来的这个程序啊需要放在HTML文件里边，

那么我们怎么做呢？直接把这个记事本改后缀，他现在是个.txt文档，我们把这个文件的后面的txt扩展名改成html。

双击“网页.html”，就会打开一个网页。

果然是用浏览器打开的一个网页，但是里边呢还没有东西是吧？空白的。

那么我们就来看一下，重新用记事本的方式把它打开。

我现在要想在里边简单的写点文字，哎我看看我这个网页是否能够正常显示。

那么在哪儿能够写文字呢？跟大家说一下，

在我们这个基本结构里啊有两个地方是可以写内容的，一个就是<body></body>主体，另外一个呢就是<title></title>标题，这两个地方中是可以写文字内容的。

右键单击这个html文件，选择打开方式→打开其他应用，然后找到记事本，用记事本打开。

然后在<title></title>中间写上“我的第一个网页”，<body></body>中间写上“这里是主体文字”

好了，写完之后我们再保存。关闭这个窗口，重新打开看一下效果。那么大家看这会儿在网页里面显示出来了。首先呢在网页主体里边显示出了“这里是主体文字”，并且在页面的上方的标签呢显示的是“我的一个网页”。

那么我们今天的讲解你看懂了么？

带你学代码、学编程、学语言、学网络安全、学黑客技术、学渗透技术，逐步成为网络高手，拿到年薪30W+的offer，在网络江湖，从小刀客变成大侠。如果感兴趣，请关注我，私信我，可获得更多学习资料。