整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多人都说我是一门很简单的语言，看看书，看看视频就能读懂我。但是，如果你完全没有接触过我，就想通过看一遍教程，背背标签，想要完全了解我，真的有点太天真了。
我叫“超文本标记语言"，英文名字叫HTML，我没有变量，没有循环，没有函数，我只是单纯的一门静态语言而已。你可以用我来描述静态的东西，比如标题、段落、图片。
工作的时候，浏览器大叔是播放器，我是资源，你们看到的影片是大叔根据我收藏的内容播放出来的。
我们来看一张图，试着用语言描述一下：
在页面的顶部有一栏标题栏，下面有张大图，大图下面三张图和图片介绍，图文下面有一个标题，标题下面有三个图文链接介绍。
这只是结合图片来直观的描述，但是对于浏览器来说，需要一个精确的描述。比如：大图下面三张图和图片介绍，介绍中哪些文字需要强调？图文下面的标题是主标题还是二级标题？
这些都是我作为HTML要表述的。配上CSS来精确的描述字体的颜色，粗细，大小，图片的宽高，按钮的位置。
其实了解我并不是一件难事，什么时候学习都不晚。这取决于你是否有足够的兴趣和毅力去坚持你的选择问题。如果你要学习的话，那要确定自己是否坚定地走“敲代码”这条不归路。
入门容易，精通难，且学且珍惜。
在这里推荐一个我认为比较好的练习HTML的方法：抛开CSS，做纯粹的代码练习。其实就是单纯的书写HTML，最终的目的是他人可以通过阅读这个HTML文件理解到页面是怎样的结构，甚至可以通过HTML代码来画出大概的页面。
以下是HTML基本（常用）标签的整理，希望对你有帮助。
基本
<html>…</html> 定义 HTML 文档
<head>…</head> 文档的信息
<meta> HTML 文档的元信息
<title>…</title> 文档的标题
<link> 文档与外部资源的关系
<style>…</style> 文档的样式信息
<body>…</body> 可见的页面内容
<!--…--> 注释
文本
<h1>...</h1> 标题字大小（h1~h6）
<b>...</b> 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i> 斜体字
<em>...</em> 斜体字(强调)
<u>...</u> 下划线
<del>...</del> 删除线(表示删除)
<center>…</center> 居中文本
<ul>…</ul> 无序列表
<ol>…</ol> 有序列表
<li>…</li> 列表项目
<a href=”…”>…</a> 超链接
<font> 定义文本字体尺寸、颜色、大小
<sub> 下标
<sup> 上标
<br> 换行
<p> 段落
图形
<img src=’”…”> 定义图像
<hr> 水平线
表格
<table>…</table> 定义表格
<th>…</th> 定义表格中的表头单元格
<tr>…</tr> 定义表格中的行
<td>…</td> 定义表格中的单元
其它
<form>…</form> 定义供用户输入的 HTML 表单
<frame> 定义框架集的窗口或框架
这一节以及以后几节我们将对HTML中<body>标签中的各种元素进行一个概述，并对一些基本元素进行练习。
HTML元素：指的是从开始标签到结束标签的所有代码。
举个例子，在《第一个HTML页面如何写？——零基础自学网页制作》这一节中，我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h>第一个网页</h>
<p>千里之行始于足下</p>
</body>
</html>其中"<h>第一个网页</h>"整个代码就可以看做是一个html元素，<h></h>叫做标题标签，加上"第一个网页"这段文字共同构成一个HTML元素。
HTML元素非常多，因为我们可以在页面中显示各种各样的信息，不同的信息载体对应不同的元素。
下面我们就介绍几个常用的html元素。
HTML常用元素使用练习1
NO.1:<h></h>与<hr>
<h></h>这个用来添加标题的元素大家比较熟悉了，这里要介绍一个新的用法。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1>
<h2>第一个网页</h2>
<h3>第一个网页</h3>
<h4>第一个网页</h4>
<h5>第一个网页</h5>
<h6>第一个网页</h6>
<p>千里之行始于足下</p>
</body>
</html>页面显示效果如图：
大家通过观察可以看出h后面的编号用来控制标题字号大小，仅仅是标题有这种预设，其他元素如果要调整字号的话我们放在以后CSS里讲。
下面看<hr>,示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>第一个网页</h2><hr>
<h3>第一个网页</h3><hr>
<h4>第一个网页</h4><hr>
<h5>第一个网页</h5><hr>
<h6>第一个网页</h6><hr>
<p>千里之行始于足下</p><hr>
</body>
</html>效果如下：
<hr>标签可以为它前面的元素添加分割线，大家注意的是分割线不是下划线，添加下划线的操作我们会在CSS样式表中详细讲解。
NO.2:<p></p>与<br>
<p></p>元素是添加段落的。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<p>千里之行始于足下值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元素及属性的指定形成一
个整体认识，以后可以根据需求通过查询手册来自己学习其他元素及其属性的用法。</p><hr>
</body>
</html>效果如图所示：
通过观察发现，即使我们在代码中对段落的文字进行回车操作，但是出现在页面中是没有回车的效果的，文字按照顺序长长的排列在显示器上，非常不利于阅读，因此我们就要介绍常常和p标签连用的<br>换行标签。
示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<p>千里之行始于足下<br>
值得注意的是我们没有必要一一讲解HTML中的所有元素以及每个元素的各个属性，<br>
因为每个元素的使用都是大同小异，我们完全可以通过几个常用案例对HTML全部元<br>
素及属性的指定形成一个整体认识，以后可以根据需求通过查询手册来自己学习其他<br>
元素及其属性的用法。</p><hr>
</body>
</html>效果如图所示：
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
位小伙伴好，黑客技术离不开代码，做为一个渗透测试工程师，也一定要有一些代码基础。网络安全行业，现在人才缺口大，再加上就业形势又很严峻，介于这些，我们想培养一批优秀的网络安全人才，将对网络安全行业、黑客技术，以及渗透测试技术感兴趣的小白培养成精英。
跟随我们，不管你有多白，都可以逐步进入网络安全行业，并最终在这个行业找到高薪职业。
然后呢，我要说一句，关于“黑客”可能并不是大多数人所了解的那样。关于这些，可以参考：什么是黑客？什么是渗透测试？2分钟看完这800多字你就懂了
那么，我们就先从代码基础——HTML的基本语方开始。
首先给大家描述三个概念：语言、程序、代码之前的关系。
首先我们就要搞清楚什么是语言？可能说HTML语言不太好理解，那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流，是不是叫做汉语呢？所以说汉语就是一门语言。
那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合，包括我们如何发音，如何写字，这些字如何拼在一起，能够产生具体的意义，有一定的含义，这些所有所有的集合在一起，形成了一套规则，然后大家都去遵循这套规则，就能够彼此交流，那么这就叫做语言。
我们再举一个例子，比如说英国人或者美国人，他们也有自己的语言，叫做英语，那么我在这里就是换了另一种语言，
了解了语言之后，我们就再来看一看，什么是代码，那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢？
我们还是拿汉语来做比喻哈，我们说汉语就是一种交流沟通的一种规则，它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文，对吧。那么我们上语文课的时候，就要学一些最基础的有关语言的东西，比如说汉语拼音生字词，当时要记很多的这种生字生词，那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构？
那么英语呢？我们在学习英语的时候也会去记一些东西啊，就比如英文字母，紧接着就是背各种各样的单词，是不是当我们单词量有了一定的积累之后，我们对这个语言呢就掌握得更深刻了。
那么汉语要背生字词，英语呢要背单词，这些最基本的组成结构。那么在程序语言里面，代码就可以理解成是生字词或者是单词。
最后，我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起，能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。
那么我们对照一下自然的这种语言，比如说汉语英语呢它是什么样？好多的文字放在一起，是不是句子？或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书，
那么汉语能写文章，用英语英文也能写文章，这个文章可大可小，可能几千字能大一点儿的一本书，也可以理解成是文章，那么用生字词组成的这种集合就成了文章了。然后我们再谈程序，它是什么呢？对照一下大家可能就理解了，它就是一个由代码组成的文章。
那么回过头来我们看我们要学的HTML语言，它也是一门语言，只不过呀它跟我们理解的汉语和英语有一定的区别。
汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛，是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言，只不过它不是人和人之间去交流的语言，那么它到底是做什么用的呢？我们来看一下HTML的概念。
HTML中文名称叫做超文本标记语言，用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台，使用HTML语言将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，即现在所见到的网页。
那么从中我们能看到什么呢？首先我们知道它的中文名称了。HTML叫做超文本标记语言。
那么再往下我们看他提到了。
在这里浏览器是吧？提到了浏览器，那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码，那么写这些代码的目的是什么呢？目的就是为了和浏览器去交流，只要我们写的这个东西浏览器能看得懂，他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。
（1）HTML中的各种元素都是通过标记（标签）来表示。
（2）HTML当中的标签分为单标签和双标签。
（3）单标签格式为<名称/>，双标签格式为<名称></名称>。
（4）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，在网络江湖，从小刀客变成大侠。如果感兴趣，请关注我，私信我，可获得更多学习资料。
*请认真填写需求信息，我们会在24小时内与您取得联系。
