全网最权威的HTML基础语法集锦，另附详细web前端视频教程，限免

述

HTML文档由HTML元素组成，一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性，属性以名称和值成对出现。Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。

HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示等，这些都是利用Html标记来实现。

HTML标签是由尖括号（“<”和“>”）包围的关键词，如标签 <p>。标签不区分大小写，故 <p> 和 <P> 的含义相同，不过推荐使用小写。

HTML标签通常成对出现，一个是开始标签，一个是结束标签。开始标签告诉浏览器，从这里开始执行该标签所表示的功能；结束标签告诉浏览器，该功能到这里结束。在开始标签前加一个斜杠（/）即成为结束标签。如，html 元素的开始标签是 <html>，结束标签是</html>。也就是说，一个HTML 元素由开始标签、内容、结束标签组成。开始标签是放在一对尖括号中的元素名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。语法格式为：<开始标签>内容</结束标签>。如，em 元素的开始标签为<em>，结束标签为 </em>，在<em> 和 </em> 标签之间是元素的内容。如下图所示：

HTML的文档结构

所有的网页文件，通过都是四对标记来构成文档的骨架，它们是：

小结：

<html>…</html>标识网页文件的开始与结束，所有的Html元素，都要放在这对标记中。
<head>…</head>标识网页文件的头部信息，如标题、搜索引擎关键字等
<title>…</title>标识网页文件的标题
<body>…</body>标识网页文件的主体部分

常见的HTML的标记语法

1. 单标记

一．<标记名称>

单一型，无属性值

如：<br/>——表示换行符

二．<标记名称属性=”属性值”>

单一型，有属性值

如：<hr width=”80%”/>

2. 双标记

三．<标记名称>…</标记名称>

没有属性值

如：<title>…<title>

四．<标记名称属性=”属性值”>…</标记名称>

有属性值

如：<body bgcolor=”red”>…</body>

注释

格式：

<!—注释内容-->

Body属性

<font>标记

语法：

字符格式

段落标记

格式：

HTML中的特殊字符

修饰标记

水平直线<hr/>

最后：

有小伙伴私信小编，零基础入门前端很吃力，许多地方根本不知道应该怎么进行下去。

因此小编收集了一套前端零基础入门的视频教程（学完就可以去找工作哦）今天免费分享给大家。

希望小伙伴们可以对照着小编文中提到的知识点一步步学习，最终可以找到适合自己的工作！但还是那句话，如果你不努力，就算有千万个人帮助你，最终也会一事无成！

获取方式：转发关注+私信小编 “ web学习 ”，即可免费带走这套学习教程了。

教程目录大纲：

TML基本语法

认识网页

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

常见浏览器内核介绍

浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。

浏览器内核（理解）

浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

（1）Trident(IE内核)

国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。

代表： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。可惜这几年已经没落了，比如打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。

代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Chromium/Blink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。二次开发

（5） Presto(Opera)

Presto（已经废弃）是挪威产浏览器 opera 的 "前任" 内核，为何说是 "前任"，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

Web标准（重点）

通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。

Web 标准的好处

1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

Web 标准构成

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是

理想状态我们的源码： .HTML .css .js

HTML 初识

一般先学习HTML+CSS，这里我们先定一个小目标，先学HTML,后学习CSS。

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

<h1> 我是一个大标题 </h1>

注意：体会文本标签语言几个词语

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

用文字来描述网页标签

HTML骨架格式

日常生活的书信，我们要遵循共同的约定。

同理：HTML 有自己的语言语法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

1 HTML标签：

作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签： 文档的头部

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签： 文档的标题

作用：让页面拥有一个属于自己的标题。

4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 <body>我是文字  </body>

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如  <br />

HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系

<head>  <title> </title>  </head>

2.并列关系

<head></head>
<body></body>

倡议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

文档类型<!DOCTYPE>

<!DOCTYPE html>

同学你用啥手机？你咋回答？

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义，使用做合适的标签做做合适的事，比如标题用 h 标签而不是 div 标签。

为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签 (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

标题标签语义：  作为标题使用，并且依据重要性递减

其基本语法格式如下：

<hn>   标题文本   </hn>

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。一般h1 都是给logo使用，或者页面中最重要标题信息。

段落标签( 熟记)

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

span, 跨度，跨距；范围

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签属性

属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。

手机的颜色是黑色手机的尺寸是 8寸

水平线的长度是 200

图片的宽度是 300 键值对

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取键值对的格式 key="value" 的格式

比如:

<hr width="400" />

属性是宽度

值是 400

提倡：尽量不使用样式属性。

图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

base 标签基本的

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

把所有的连接都默认添加 target="_blank"

特殊字符标签（理解）

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

    <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + /

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径(重点、难点)

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如
“http://www.itcast.cn/images/logo.gif”

列表标签

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表格 table(会使用)

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格属性

三参为0
即：border cellpadding cellspacing 为 0

表头标签

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

表格的标题： caption

定义和用法

caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。

只存在表格里面

您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

合并的顺序先上后下先左后右

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格
删除单元格删除的个数 = 合并的个数 - 1

总结表格

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的作用。

表单标签(掌握)

表单目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

input 输入的意思

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性类型，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

type 说明了属于那种表单

radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

label标签(理解)

label 标签为 input 元素定义标注（标签）。

table

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

text 文本框只能写一行文本呢

textarea 文本域

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下 select 选择

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
用于设置表单数据的提交方式，其取值为get或post。
name
用于指定表单的名称，以区分同一个页面中的多个表单。

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

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

然后呢，我要说一句，关于“黑客”可能并不是大多数人所了解的那样。关于这些，可以参考：什么是黑客？什么是渗透测试？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网页。

在记事本中输入<html></html>

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

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

分开html开始和结束标签

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

将<body></body>标签插入到<body></body>中

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

在<body></body>标签的上方插入<head></head>

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

好了，整理一下格式

插入<title></title>标签

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

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

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

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

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

将.txt格式改成.html格式

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

用代码创建的第1个初始网页

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

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

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

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

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

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

用记事本打开html文件

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

标签中间插入文字，让网页中有内容

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

用代码创建的第1个网页

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

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

在线咨询

上一篇：思维导图markdown互转！2个必备的格式转换工具推荐：AI+插件！
下一篇：HTML网页编程之自动刷新

您的项目需求

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

整合营销服务商