第01节：第一个网页

、内容概述

从本节我们开始正式学习前端开发的课程内容，首先我们从第一个网页开始了解html和css的基本概念，并通过创建第一个网页了解vscode的基本使用方法。

二、安装vscode插件

汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code
浏览器打开：open in browser

三、HTML概述

HTML的全称是【超文本标记语言】，，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它一个标记语言通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，示例代码

<!-- demo01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title> 
</head>
<body>
	<p>我的第一个网页</p>
</body>
</html>

HTML主要控制网页的内容，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果如下所示：

不同的标签具有不同的含义，HTML有上百个标签，有些是不常用的，有些甚至已经被废弃。很多初学者都会困惑，不知道自己到底要学习哪些标签。庆幸的是有了这本《前端开发学习手册》，只要掌握十几个标签，就能完成生动的网页。

在下一节我们会列举常用的HTML标签。

四、CSS概述

CSS全称【层叠样式表(英文全称：Cascading Style Sheets)】。刚才我们了解了，使用HTML可以设置网页中的内容（标准通用标记语言的一个应用）等文件样式的计算机语言，那么使用CSS就可以进一步装饰这些内容，录入设置文本的字体颜色，或是改变图片的尺寸等等。如下面的代码所示，CSS的代码是在style标签内部编写的。示例代码

<!-- demo02.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
		}
	</style>
</head>
<body>
	<p>我的第一个网页</p>
</body>
</html>

上面的代码我们可以将p标签的文字设置成红色。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

关于CSS的更多内容，我们会在后续章节继续讨论。

五、练习

上节我们简单地概括了什么是HTML和CSS，接下来大家可以在vscode中编写上面的两个例子，步骤如下：

打开vscode
点击菜单 File=> New File 创建文件。
点击菜单 Save 保存成后缀为html的文件，例如index.html
在文件中输入一个英文的感叹号（!），然后按tab键，就可以生成一个HTML文件的模板了。
接下来按照上面的代码示例编写自己的网页。
用浏览器打开此html文件。

通过上面的六步，我们就可以访问我们自己的第一个网页了。

人说“互联网中有50%以上的流量是爬虫”，第一次听这句话也许你会觉得这个说法实在太夸张了，怎么可能爬虫比用户还多呢？毕竟会爬虫的相对与不会爬虫的简直少之又少。

但是很多爬虫工程师或者反爬虫工程师讲了实话：50%？你在逗我？就这么少的量？然后他举出例子：

某个公司的某个页面的某个接口，每分钟访问量是1.2万左右，这里面有都少正常用户呢？50%？60%？正确答案是：500个以下，那我们来算算爬虫占比：（12000-500）/12000=95.8%

没错95.8%，这是一位反爬虫工程师给出的爬虫占比！！！

那这么多的爬虫它们在互联网上做什么呢？答案当然是：孜孜不倦的爬取爬取网页信息。今天我们就来讲讲组成互联网的重要部分之一：HTML网页。

一、起源与发展

前面我们介绍HTTP的时候，给大家讲过是万维网的发明者，互联网之父计算机科学家蒂姆·伯纳斯·李，在他最初的构想组成中就有：提出使用HTML超文本标记语言(Hypertext Markup Language)作为创建网页的标准。

大家千万记住HTML并不是一种编程语言，而是一种标记语言 (markup language)，由W3C（万维网联盟）制定标准，然后由个大浏览器厂商自己去实现支持！

下面我们来看看HTML标准的发展历史：

二、组成部分

我们常说的网页就是HTML页面，而构成HTML页面的东西有很多，如：html标签、数据、css样式、js等，那我们就主要讲讲以下这几个组成部分。

1.HTML标签

HTML标签是构成HTML页面的主要组成部分，我们来看一个HTML实际例子：

<!--注册页-->
<html>
	<!--网页头-->
	<head>
		<meta charset="utf-8" />
		<title>注册页</title>
	</head>
	<!--网页体-->
	<body>
		<!--表单标签-->
		<form action="/register" method="post">
			<div>用户名：<input type="text" name="username"/></div>
			<div>性 别：
				<input name="sex" type="radio" checked="checked"/>男
				<input name="sex" type="radio" />女
			</div>
			<div>密 码：<input type="text" name="password"/></div>
			<br/>
			<input type="submit" value="注册" style="width:150px;" />
		</form>
	</body>
</html>

上面是一个非常简陋的用户注册页面（用于教学），用户可以输入用户名性别和密码然后点注册就提交到服务器，下面我们来稍微讲解以下这个页面。

html标签对限定了文档的开始点和结束点，所有的元素和标签都应该放在他们之间。
head标签对表示网页头部信息，其中包含了网页标题、网页编码、网站ico、网站引入的一些静态资源（css、js）以及网站关键字SEO相关信息等。
body标签对表示网页体，几乎所有的网页内容都在这里展现。
form标签对表示创建表单，表单用于向服务器传输数据，能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
div标签对是目前网页中比较流行的标签，在七八年年流行使用table来构思一个网页，把一个网页想象成多少行多少列，这种构思灵活性和维护性极差，并且Table标签构思的网页对google爬虫和百度等这种搜索引擎收录性很差，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。所以目前前端流行使用div+css来构思网页，这样的优点是代码精简、有很好的灵活性和可维护性。
input标签用于搜集用户信息，它可以根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

其他的HTML标签猪哥就不多讲，希望大家自己去网上学习。

在有些初级web工程师面试中，面试过程中可能会让你手写一个用户注册功能，这里猪哥给大家讲讲大概的流程：

用户点击注册连接（一般是get请求/register），然后服务器响应此请求返回一个注册页面
用户输入用户名密码、图形验证码等信息，提交注册信息（一般是post请求/register）
服务端收到信息后对信息做校验（一般是前后端双校验），然后存入数据库，返回注册成功提示

2.数据

互联网主要起到了信息交流的作用，而网页作为主要的信息交换载体，标签的主要作用就是包裹数据，让数据能够以人类可视的方式展现。

尤其是一些新闻网站，他们主要以展示新闻信息为主，我们以头条网页来讲讲：

在红色框中圈出来的这些新闻，他们是把数据包裹在html标签中，然后以列表的形式展示给用户，接着我们来看看网页代码：

我们可以看到新闻标题被a标签包围，还有一些如缩略图、评论数、时间等信息构成了一条新闻简述，然后多个新闻（li标签）构成了一个列表（ul）。

那服务器是如何将数据与封装到页面中去的呢？

前后端未分离：前后端没有分离的公司，一般是先由前端工程师写好页面（数据写死），然后由后端程序员合页面（就是将写死的数据去掉，然后加上数据字段）。
前后端分离：前后端没分离最大的问题就是同一个页面可能前后端开发同学都会去修改，修改的人少还行，但是如果开发人员一多，大家改来改去全乱了，而且发布也会有一定的限制，所以目前流行前后端分离，后端同学只需要提供数据，前端同学搭一个nodejs后台自己渲染页面。

拿上面我们的简陋的注册页面来讲讲前后端未分离时具体返回页面步骤，假设我们用户注册成功然后登录，登录成功我们直接跳转用户主页展示用户名和性别，页面如上图，步骤如下：

用户登录成功，在数据库中读取用户信息。
读取到用户数据后进行页面渲染
返回渲染后的页面给浏览器

3.CSS样式

html标签+数据构成了整个网页的骨架，但是只有数据和html标签的网页是奇丑无比的

层叠样式表(英文全称：Cascading Style Sheets 简称CSS)是一种用来表现HTML等文件样式的计算机语言。css可以定义html现实的样式，可以实现很多不同的效果、排版等等，html中所有的元素几乎都需要css来管理样式，而且现在越来越流行div+css搭配控制页面排版和样式，css主要通过三大选择器来修饰html标签。

没有css的页面将会是杂乱无章或缺少美感的页面，我们以上面简单的用户主页为例子演示如何使用css以及css的功能。

效果：

代码：

css：

4.js

css使页面有了很好看的样式，但是却没有很好的交互性，何为交互性？就是用户在使用产品时的浏览、点击、切换使之方便、快捷、平滑都很合理，很友好。

而js（JavaScript）则是增加网页的动态功能，它定义了网页的行为，提高用户体验。比如js可以监控到用户的点击，滑动等动作，然后根据用户的这些动作来做一些操作。

我们还是以上面简单的用户主页为例子，用js（或jquery）来实现用户修改用户名或者性别信息。

代码：

效果：

一个大概的修改用户信息流程：

点击修改后通过js现实出输入框
在用户输入的时候用js监听输入框内容，及时提醒用户新的用户名是否可用
再用户点击提交后，用ajax提交，并且做防止重复提交的操作
服务端反馈后用js做提示即可

上面只是给大家做了一个非常简单的js效果，给零基础的朋友演示js是什么，有什么功能，但是js的功能远不止这些，现在的js已经在前端、后端以及app中占据着重要的地位，当然还有使用在反爬虫的js混淆。

三、总结

由于篇幅原因，猪哥这里只给大家演示一些非常基础非常简单的功能，如果想学习网页的制作同学们可以自己去网上学习，这里推荐一个学习网站：菜鸟教程，希望大家都学习一些前端知识，因为爬虫的第一步就是分析网页，然后再根据网页数据是内嵌在html标签中，还是js动态加载，或者网站使用加密或混淆的反扒技术。当遇到反扒高手时，我们就需要去仔仔细细的分析js，这也被称为解毒的过程（反扒工程师在代码里投毒）。所以爬虫与反扒的斗争可谓其乐无穷！

本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！

01 HTML简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。

02 HTML实例

我们现在创建一个典型的HTML结构具体如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML实例</title>  
6. </head>  
7. <body>  
8.   <h1>我是标题</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上页面中各个标签代表的意思如下：

1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面

2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束

3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题

4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落

我们现在通过游览器打开编写的HTML内容，具体内容如下

在HTML中的内容可以通过以下格式进行内容注释具体如下：

03 HTML标签、元素、属性、实体编码与事件

（1）HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：

1）标签一般是成对出现的如:<div></div>;也有空标签如:<br />

2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)

3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母

标签的示列如下：

标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。

1）双标签

双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：

1. <标记名></标记名>

常见的双标签有如下几种：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 块级元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超链接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）单标签

单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

1. <标记名/>

常见的单标签有如下几种：

1. <!-- 换行标签 -->  
2. <br />  
3.   
4. <!-- 分隔线标签 -->  
5. <hr />  
6.   
7. <!-- 图片标签 -->  
8. <img />

（2）HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：

1. <div>  
2.   <h1>我是标题</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML属性

属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href="http://www.baidu.com">搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:

（4）HTML实体编码

对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格。

（5）HTML事件

通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：

04 HTML常用标签示列

（1）h标签

h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1标题</h1>  
9.   <h2>H2标题</h2>  
10.   <h3>H3标题</h3>  
11.   <h4>H4标题</h4>  
12.   <h5>H5标题</h5>  
13.   <h6>H6标题</h6>  
14. </body>  
15. </html>

我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。

（2）p标签

p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>标题一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>标题二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a标签

a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">点我跳转到百度页面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">点我跳转到腾讯页面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div标签

div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表标签

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）

1）有序列表ul

有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默认方式数字排列 -->  
10.   <p>有序列表默认方式数字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大写字母排列 -->  
18.   <p>有序列表大写字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）无序列表ol

无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>无序列表默认type样式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>无序列表方块样式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定义列表dl

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定义列表</p>  
10.   <dl>  
11.     <dt>东岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>华山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它标签

1）换行标签<br/>

在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：

2）分割线标签<hr/>

<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是张三</p>  
10.   <!-- 分割线标签 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 总结

至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

一文秒懂Web框架基础之WSGI协议
IT工程师都需要掌握的容器技术之扫盲篇

在线咨询

上一篇：调试 LNK1123 转换到 COFF 期间失败：文
下一篇：婚礼网页设计方案：个人也能做好

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商