学习资料】

导语

什么是Web安全？我又该如何入门学习它呢？学习过程中又应注意哪些问题呢？...或许你的心中有着这样的疑问、不过别着急，本文会为你一一解答这些问题。

正文

定义

Web安全，顾名思义便是由保障Web应用能够持续安全运行而衍生出的一个分支领域。

Web应用指的是一个网站的前端页面到后端服务，可以粗略的理解为一个网站及其配套的相关服务，该领域中常见的漏洞有SQL注入漏洞，XSS漏洞，CSRF漏洞等等，漏洞种类多样，趣味性强，较为适合新手入门。

下面为你介绍Web安全方面的常见漏洞，以下讲解主要从原理角度出发，旨在帮助新手朋友更好的理解相关漏洞，具体技术细节暂不讨论。

常见漏洞

SQL注入（SQL Injection）

网站，也就是web应用中往往会涉及到数据的查询与修改，对数据进行操作则需要用到SQL语言（结构化查询语言(Structured Query Language)简称SQL，是一种特殊目的的编程语言）。

网站在使用SQL查询数据时，用户输入的信息或提交的参数（比如你在使用百度时输入的“关键词”，登录某些网站时提交的账户密码..）将会参与到SQL数据查询的过程中，一旦用户提交了有害数据，便有可能对网站运行产生危害。

将有害数据“注入”到SQL查询过程之中，这也正是“SQL注入”得名的缘由。

SQL注入漏洞往往会导致数据泄露,例如前些年爆出的沸沸扬扬的”社工库"，”人rou"搜索，全球数十亿密码泄露等事件，他们的背后或多或少有着SQL注入的影子。

SQL注入的定义为：

当Web应用向后台数据库传递SQL语句进行数据库操作时。如果对用户输入的参数没有经过严格的过滤处理，那么攻击者就可以构造特殊的SQL语句，直接输入数据库进行执行，获取或修改数据库中的数据。

XSS跨站脚本攻击（Cross-Site Scripting，XSS）

同样是由于网站对于用户的输入内容没有进行严格的过滤处理，一些恶意的脚本代码被用户的浏览器执行而引发了XSS漏洞。

一个网站的呈现是基于HTML,CSS,JS等脚本语言的，浏览器的作用是什么？简单来说便是将只有计算机才能“读懂”的脚本语言及代码渲染成我们所看到的的图像与文字。

这里以百度为例。

在与架设着网站的服务器通信时，我们实际上收到的是使用HTML等语言编写的源代码，浏览器会将该源代码“翻译”出来。

(浏览器将下方的源代码“翻译”成“百度搜索”的页面)

如果我们能利用网站的某些缺陷，将自行构造的恶意脚本代码‘’注入”到网站源代码之中，在别的用户在浏览网页时，我们构造的恶意代码便会被浏览器“翻译”出来，造成危害（Cookie泄露，键盘记录等），这便形成了XSS漏洞。

CSRF跨站请求伪造（Cross Site Request Forgery）

该漏洞往往不直接攻击网站服务器，而是冒充用户在站内的正常操作以达到攻击目的。我们在与网站进行交互操作时，绝大多数操作是基于浏览器与网站服务器的通信请求的，比如我们会在某些购物网站下商品订单，给指定用户转账，或者查询自己的考试成绩。

如果能够在用户没有察觉的情况下，“悄无声息”通过浏览器伪造一些请求操作，进而产生对用户有害的攻击行为，那么便形成了CSRF漏洞。

上文提到过，XSS漏洞可以在用户不知情的情况下执行恶意操作，如果我们在XSS攻击代码中包含伪造好的特定请求呢？这便与CSRF漏洞不谋而合。所以，XSS与CSRF常相配合使用，威力巨大。

防范CSRF漏洞，需要添加 token 或 referer 来防御，云影安全后续会对此进一步讲解。

DDOS 分布式拒绝攻击(Distributed Denial of Service)

起源于二十世纪九十年代，历经二十多年发展而经久不衰，DDoS攻击已经成为网络安全领域影响最为深远的威胁之一。

严格地来讲，DDOS并不完全归属于Web安全的范畴，凡是对外提供服务的服务器或主机都存在被DDOS攻击的风险，但DDOS攻击在Web领域较为常见且危害大，我们在这里加以讲解。

那么什么是DDOS攻击呢？如果多台主机对目标网站或服务器发送大量请求，超出了该网站或服务器的处理能力上限，导致服务瘫痪，这种行为便可以称作DDOS攻击。

举一个较为经典的例子，假设一个餐厅最多可以同时容纳50人就餐，假设在极短时间内该餐厅涌入成百上千的顾客，该餐厅的正常就餐秩序必然会受到毁灭性的冲击。

DDOS攻击如今已发展出多种攻击模式与手段，目前还没有一个较为完美的应对策略，关键点在于精心发动的DDOS攻击往往会利用合理的服务请求来占用过多的服务资源，难与正常用户的请求相区分，从而使服务器无法处理合法用户的指令。

方法论

孤帆终究要起航，侠客也要去闯荡。在你开始踏上Web安全之路前，我们愿与你分享一些在探索学习中可能会有所帮助的心得与经验。

1.亲手实践

纸上得来终觉浅，绝知此事要躬行。在学习漏洞原理或是利用技巧时，最好不要止步于只看懂技术文章。相关的介绍文章往往以讲解思路为主，为保证文章整体的连贯性，部分技术细节会被忽略掉。例如程序的运行环境，设备的网络情况以及相关应用组件的具体版本号。然而对于初学者来说，这些技术细节同样至关重要，如果没有亲手实践过，亲手复现出相同的漏洞或利用技巧，你永远不会接触到那些被忽视的种种细节。而细节决定成败，对漏洞利用过程的残缺理解会对进一步的学习探索造成难以估量的影响。同时，动手操作也有利于巩固对于所学知识的理解与记忆，加深印象。漏洞种类繁多，差异化的利用条件同样决定着漏洞利用的成功与否，因此在动手实践复现漏洞的同时，还需要完整的笔记记录。

2.构建体系

什么是体系？体系的本质是各个知识点的灵活串联与应用。在体系里，知识不再是孤零零散落在大脑各处信息点，而是互相补充互相协作而成的系统化的有机整体。其实这并不难理解。举个简单的例子，假如现在有一篇中文技术文档放在面前，虽然我们并不是专业人士，但将这份文档读完还是可以做到的，但如果换一个不懂中文的外国人来看这篇文章，那么他连阅读都无法完成。我们之所以可以将一篇不能完全理解的专业文章看完，是因为我们有一定的语文基础知识。也就是说，在我们的大脑里，储存着识字的能力。我们可以将这些已经拥有的能力整合在知识体系中。这样的话，当我们去学习新知识时，完全可以从构建好的体系里，找到已经形成的能力。 好处即，完全陌生的知识会被分解形成一些小的知识点。然后再联系体系中已有的能力，去逐一攻克这些陌生的难题。

3.分享交流

什么是黑客？真正的黑客可能与大多数人所理解的有所差异。黑客，由英语Hacker音译出来的，狭义是指专门研究、发现计算机和网络漏洞的计算机爱好者。根据黑客的原始定义，黑客对计算机有着狂热的兴趣和执着的追求，不断推动着计算机和网络的发展与完善。显而易见，黑客与网络安全紧密相关。 黑客精神是关于开放的精神。而黑客行为是基于团队的，只有开放才能让参与者们发挥出最大的能量，去修补，去改造。互联网上最有价值行为就是「奉献」，技术在奉献中获得了进步，知识在共享中得到了丰富。“分享交流”无疑是构成互联网这座大厦的基石，只有知识共享才能推动我们不断向前走。逛一逛社区，分享些自我学习的心得，于人于己，都是大有裨益的。

点击查看【黑客学习资料·攻略】

CSDN编者按】本文的作者是一名软件开发工程师，在读过《大教堂与市集》的作者、《新黑客词典》的维护人、著名黑客ESR（Eric Steven Raymond）的博客文章《如何成为一名黑客》之后，对计算机程序产生浓厚兴趣，并受此影响走向软件开发的职业道路。来了解下他的故事和对于黑客的见解吧！

作者 | Zach Alberico

译者 | 苏本如，责编 | 夕颜

头图 | CSDN付费下载自视觉中国

出品 | CSDN（ID:CSDNnews）

以下为译文：

为什么要写这篇文章？

当我十三岁开始上高中的时候，我读了ESR写的这篇博客文章：如何成为一名黑客（http://www.catb.org/~esr/faqs/hacker-howto.html）。这篇文章让我了解了程序员们一起在互联网上构建东西的社区，这让我很兴奋。我试着开始着手安装Fedora Core 4，最终安装成功了Ubuntu 6.06，通过这一过程，我自己学到了很多关于故障排除的知识，并且努力尝试着让系统真正工作起来。这个过程对于培养帮助我获得现在这份工作的技能至关重要。我读了关于Python的书，写了一些小程序，然后决定学习计算机科学，了解计算机是如何工作的。在我不确定自己将来想做什么的时候，这对我来说是一个相当有影响力的文章。

在布法罗郊区长大的我，在纽约可能感到相当孤独。虽然我很幸运，我父亲在大学里因为好玩而编写了一个Apple II程序（所以我应该有一些编程背景/黑客精神），但他对更现代的软件开发知之甚少。我喜欢电脑，也喜欢玩电脑，但我不知道什么是计算机可以做到的，甚至不知道在哪里可以了解更多计算机知识。当搜索空间如此之大，并且有许多未知的信息时，你甚至很难找到好的信息来源来学习。有能力选择好的信息来源需要一些现有的知识，如果没有经验丰富的人的指导，这可能会很困难。我认为，现在互联网更发达，情况可能会更好，但在某种程度上说，现在比过去可能更加困难，因为有更多的选择需要筛选。

16年后，我想写我自己的版本的《如何成为一名黑客》，来对ESR的原著进行补充，这一定是件很有趣的事。我想在这篇文章加入那些我在13岁时想读到的一些东西，并且重点关注那些我觉得很有帮助的其他内容。现在很多关于编程及其相关主题的文章都在拼命鼓噪，试图说服你采用特定的编程语言、框架、操作系统、或者特定的编程方法。本文在这些方面着墨不多，尽管我也提出了一些建议，但它们只是一些温和的观点。本文的主要目标是填补那些在ESR的原始文章未曾触及而我非常想了解的空白（所以你应该先读ESR的那篇文章）。

要学习的东西有很多

记得在刚开始的时候，我读过一些文章和书，但对其中的很多行业术语不甚理解 - 这很正常。随着你接触到了更多的事情，并深入到每一件你不理解的事情中去，那些一开始看起来不可理解的事情会慢慢变得可以理解。保持继续阅读并且挺过这段艰难时期是很好的方法，当你不理解的时候就去查找，当你可以提问的时候就去问问题（ESR也有一篇关于如何问好问题的文章）。

每个人都会在某个时候第一次学到一些东西，然后这些东西就会慢慢地积累起来，直到你掌握了那些基本知识为止。我记得一开始我不懂任何细节（比如：我不知道如何在终端中输入命令来运行它们，或者cd代表“change directory”）。你从接触中获得这些知识，你玩得越多，你接触得就越多，你积累的知识和经验也就越多。如果你有幸生活在一个地区有一群对软件感兴趣的人，你就能够更快地学习。

不要害怕你不理解的事情

学习一些复杂的新事物开始时往往会感到困难 - 如果感觉很容易，那么它可能是你已经知道的东西，或者它可能不是真正考验你的知识（阅读如何解决一个物理问题并认为“它很合理”，比你自己用刚刚学会的工具解决一个问题要容易得多）。感觉吃力是个好现象 - 这意味着你真的在学习，集中精力一直坚持做下去，当你感觉变好的时候你的学习就会变得更容易。

我认为，一个新人在这方面甚至有一点优势：当你积累了一点经验后，只做你已经知道怎么做的事情，而不是学习新的东西，会让你感觉容易和舒适。这会导致你陷入一个停滞期，在那里你只是重复做你已经知道怎么做的事情，就像一个人只能用吉他弹一首歌，并且他总是弹同一首歌一样。对于一个新人来说，一切都很难，但这样做不应该是一个新人真正的选择。

第一次学习一些复杂的东西应该会感觉有点痛苦 - 你应该习惯这种感觉，因为这是件好事，意味着你在成长。不要因此觉得自己不够聪明而被吓跑了。因为有太多东西要学，有太多不同的途径要走（仅就计算机科学来说，就有很多东西，像计算机图形学、计算机安全、机器学习、算法、移动、网络、基础设施等等分支），所以有一个让自己成长并走出舒适区去学习新事物的心态是至关重要的。

学习编程 - 边做边学

仅仅通过阅读一本关于编程的书来学习编程，就像仅仅通过阅读一本关于跳伞的书来学习跳伞一样。你可能需要读一本书（而且在开始的时候你需要用它作为一个起点），但是除非你同时也在写一些小程序，否则你从中得到的有限。木匠通过建造东西来使技术变得更熟练，作家通过撰写文章来使文笔变得更优美，而程序员则通过编写代码来提高编码水平。这并不意味着你不应该读书，也不意味着一本好书不能给你带来价值。但是仅仅这样做会很容易让你陷入一个误区：你只是在那里读关于编程的书而不是自己做任何事情，会让你觉得读起来容易，做起来也容易。然而，当你真正开始编程的时候，你会发现凭空想象出来一些程序是很困难的。

我同意ESR的观点，Python是一种很好的作为编程起点的语言，而且有一个很好的学习网站，名为苦学Python，专门针对初学者，并在教学过程中使用一些练习。

一开始，你会觉得语法很难理解，当你开始学习的时候，很多时间都花在了语法上。因为每种编程语言都有不同的语法，它们看起来非常不同。当你开始掌握语法后，你更多的精力就会放在关于如何解决问题和使用什么数据结构的通用知识上。最终，你对于使用常见的数据结构已经相当娴熟，然后你的重点将会转向更高层次的抽象和更通用的设计或基础架构，这些设计或基础架构使得软件开发更易于在规模上管理或在将来更易于更改。

在掌握了一门编程语言的语法并且能够编写简单的程序之后，学习数据结构是最重要的下一步。Cracking the Coding Interview这本书对一些核心的数据结构有很详细的描述（并且还附带有一些示例问题）。令人困惑的是，不同的语言在实现相同的数据结构时往往有不同的名称（比如，Python称哈希表(hash table)为‘字典( dictionary)’），但大多数语言都会实现一些核心数据结构，即使它们都有一个不同的名称。

故障排除或调试也是一项核心编程技能 - 大多数编程时间实际上都是在调试，因此，如果你喜欢调试代码，这可能是一个好现象。当你不得不到处搜索以试图理解某件事情，或者当你正在阅读的文档不起作用，或者当你在环境中遇到一些意外错误时，不要气馁 ，记住这是正常的，而且这也不是你能力低下的反映。

大多数软件都不工作，而且经常有未记录的error、bug和一些难以纠正的琐碎问题。例如，Github上的大多数开源项目都有某种构建系统，用于处理将软件配置为运行的问题。这将执行诸如拉入依赖项（需要与之配合工作的其他代码）之类的操作，以及执行任何必要的命令来实际运行它。如果你要在Github上下载一个有趣的项目并尝试运行它，你可能会在这个过程中遇到很多意外的错误，而这些错误通常没有文档记录。

运行时遇到这些错误并且将问题解决是很正常的事情，经验丰富的程序员也必须处理这些问题（如果幸运的话，我们以前也见过这种类型的问题）。我见过有人遇到这样的错误，并且认为自己做错了什么，但实际上错不是你，而是编程就是这样的过程。围绕着构建系统并试图使其更好，有很多相互竞争的工具甚至行业（这可能会使初学者更加困惑，因为没有真正的标准化，并且配置软件使之运行的正确方法也因为编程环境和语言的不同而各不相同）。

计算机实际上是如何工作的？

我记得那时我很沮丧，因为我很难找到关于计算机实际工作方式的信息。我能找到的关于计算机的一切都是用毫无用处的过于简单的类比（比如，磁盘是“存放文件的柜子”），我找不到任何我可以阅读并且帮助我真正理解计算机是如何工作的，并且如果把我转移到过去，我就能真正解释如何构建出一个计算机的东西。这些是比软件更具体的电子或计算机工程，它们在帮助理解硬件方面仍然有很多价值（这很有趣！）。

我愿意推荐的最好的书是Charles Petzold撰写的《Code》。它引导你从电子位开始，一直到布尔逻辑和电路设计的历史，再到简单电路的实际图形，以及如何将位存储在内存中。这是知识依照发现的历史背景一步步地介绍给你，直到构建出一个真正的小CPU。Charles Petzold还学习了一些汇编和基本的计算机图形学。他是一个逻辑非常清楚的作家和老师，所以这本书的细节具备令人惊讶的可读性。

关于计算机的更多的历史背景，我推荐Mitchell Waldrop的《梦幻机器》和Steven Levy的《黑客》。书中的叙述性的故事使学习和记忆更容易，我认为这些发现的背景有助于学习事物的实际工作方式。

软件工具：代码编辑器，编程环境

工具是有趣的，了解你的工具是件好事，但是你可以永远定制一些东西，争论一些无关紧要的小细节。当你刚开始的时候，定制工具是一个有趣的学习方式，但是我看到人们花了大量的时间在这个上面，与实际编写解决问题的程序或者学习更多的通用编程技巧相比，它产生的价值相对较小（关于这点的一本很好的书是设计数据密集型应用程序）。过于专注于定制工具会束缚你前进的脚步。

不要太担心Vim或Emacs之类的工具，也不要太担心你正在使用何种操作系统 -你可以在任何地方学习这些核心技能（这是我与ESR原始文章的最大分歧）。也就是说，玩Linux对我来说是一个非常有价值的学习故障排除的方法 - 主要是因为我的Linux没有很好地工作，我不得不花上几个小时来尝试让无线互联网正常工作，让笔记本电脑成功挂起，甚至让用户界面出现（现在情况稍微好一点）。

我开始尝试安装Gentoo（实际上从未成功）。这种故障排除技巧对于我获得现在的工作非常有帮助，所以如果你喜欢玩不同的操作系统，我肯定会鼓励你，我只是不认为这是必要的。不过，在macOS或Linux上学习可能更容易，因为大多数现有的工具都是针对这些环境，而且大多数程序员都在使用这两种工具中的一种。

值得一提的另外一个特定工具是版本控制，特别是git。花点时间熟悉其基本知识是值得的，但它可能是在你编程一段时间之后才需要关注的东西。

不要没完没了地研究

在开始一个项目之前，进行没完没了地“研究”会导致项目容易拖延 - 阅读和探索可用的选项（研究）会很有趣，花一点时间做一点这样的事情会很好，但你也可能永远被困在这样的事情中。当有疑问的时候，只需选择一个已经开始了一段时间并且最受欢迎的项目。使用这个项目，如果它很受欢迎，它可能有一个像样的社区，你可以向它学习，如果它存在一段时间，它可能会更稳定（或者至少它会更充实，不太可能被抛弃）。

计算机科学

我真的很喜欢学习计算机科学，并且认为这可能仍然是获得最大机会的最佳途径（尤其是如果你像我一样住在郊区，周围没有很多软件人员的话）。如果可能的话，我认为尝试学习最好的计算机科学课程是很好的。网上也有很多好的课程，但是如果你的生活和我高中时一样，在家里很难真正利用这些。

编程面试

如果说学习是获得好成绩的天然解决方案，那么做好一个酷项目编程就是在编程面试中表现出色的天然解决方案。要想在竞争激烈的公司的编程面试中处于有利地位，你需要对leetcode网站上和Cracking the Coding Interview这本书中提到的编程问题非常熟悉。编程面试需要大量的实践，并且它是一个可以让自身能力得以发展的独特技能。

你可以获得一个完整的计算机科学学位，但仍然不知道如何编程。你也可以获得一个计算机科学学位，但仍然不能通过编程面试（这两个可能是默认情况）。学会编程，学会在编程面试中做得更好，你需要自己集中精力在这些方面。计算机科学学位可能有助于一些方向和重点项目（Lambda School可能更适合培养编程人员，也许最终会更适合），但你必须自己掌握很多这方面的知识。

角色和职位

除了“软件工程师”之外，还有很多不同的角色。SRE（网站可靠性工程师）关注代码运行的基础设施，并为其编写软件。内部工具和devops开发人员专注于自动化软件构建和测试所需的所有工具（阅读The Phoenix Project，了解一个有趣的故事来说明这一点）。除此之外，有些角色和用户有密集的交互，如开发者支持工程师（developer support engineer）帮助用户处理API、解决bug或配置问题）。还有些角色重点关注游戏引擎，有些角色重点关注虚拟现实或计算机图形。有些角色则关注编写新的计算机语言和新的编译器。

在所有这些角色中，根据使用的产品和使用的为解决新问题而创建的新工具的不同，有更多的专业化。计算机安全也是一个有趣的领域，对此领域我所知不多，并且我认为ESR在他的文章中对此是持轻视态度的，但我认为它也是一个很难开始的地方，因为它需要对事物是如何工作的已知理解的基础上才能知道事物是如何被打破的。我记得我很早就开始读Hacking: The Art of Exploitation这本书，但当时我对这个领域还是一知半解。

当然，你也可以创办自己的公司，建立自己的创始人角色。

还有很多东西要学（再来一次）

一辈子是很长的一段时间，而专业化并不是永远的，所以要深入到不同的事物中去。你可以接触很多新事物，一路玩得开心。

奖励：社区

ESR在他的文章中谈到加入一个本地Linux用户组，但是至少对我来说，当我读到他的文章的时候，这是不现实的，一方面是因为这个用户组真的没有那么多人，另一方面是因为我太小了不能开车，我自己也没法那么容易地到达任何地方。有一些在线社区我觉得很有趣，如果换在那时我想我也会觉得很有趣。

Hacker News：Ycombinator的新闻网站（海湾地区的创业孵化器）。对它的评价有好有坏，但好处在于它确实很好，很多业内人士都在那里出现。Paul Graham和Jessica Livingston是Ycombinator的创始人，Paul写了很多有趣的文章。

Twitter：很大程度上取决于你在关注谁，但如果你想的话，它可以成为一个好地方。很难知道你应该从谁开始关注，但你可以看看我从谁开始关注。

Less Wrong：不是注重编程的社区，但是理性社区和编程社区之间有相当多的重叠，我喜欢那里的很多文章，这肯定是我在发现如何成为黑客的同时，希望找到的东西。这里有一个我非常喜欢的例子：Disputing Definitions

欢迎联系我

我有更多的文章和书，都链接在我自己网站的about网页上。

我记得在我读到他的文章时，ESR回复了我发给他的一封关于让iPod在Fedora Core 4工作的邮件，我很确定Richard Stallman也回复了我当时发的一些邮件。我觉得那样做对初学者来说很好。本着以他们为榜样的精神，如果你愿意的话，请随时向我提出任何具体的问题。

原文链接：

https://zalberico.com/essay/2020/04/19/how-to-become-a-hacker.html

本文为CSDN翻译文章，转载请注明出处。

?Facebook 公司：如何清除 960 万句“脏话”？
?Linux 之父怒删工程师提交的补丁，称“太蠢了”网友：怼得好！
?张一鸣是如何练就字节跳动的
?性能超越最新序列推荐模型，华为诺亚方舟提出记忆增强的图神经网络
?DevOps 在移动应用程序开发中扮演什么角色？
?稳定币经济：十大稳定币简史

天我们继续看看html的学习笔记。

文本标签

标题标签<hn>

将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鸟小白</h1>
<h2>你们的好朋友</h2>
<h3>  让我们一起学习吧！！！</h3>
</body>
</html>

显示效果如下：

字体修饰标签

对文字的格式做相应的变化，如粗体、斜体、底线、上标、下标等。常用的字体修饰标签有以下几种。

• <b>……</b>:指定文字为粗体字
• <i>……</i>:指定文字为斜体字
• <u>……</u>:指定文字为带有下划线
• <tt>……</tt>:指定文字为打字机效果
• ^……:指定文字为上标
• _……:指定文字为小标
• <em>……</em>:对某段文字进行强调，通常用斜体字显示出来
• <strong>……</strong>:对文本进行强调，通常用粗体字显示出来我们看下加粗前后对比，其它效果类似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鸟小白呀</b>
我是菜鸟小白呀
</body>
</html>

显示效果如下：

字体标签<font>

设置文档的字体，改变其属性，对文本进行不同的设置，包含字体、大小、颜色等

• size
• face
• color

我们看看大小的对比区别

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鸟小白
<font size="20px">我是菜鸟小白呀</font>
</body>
</html>

显示效果如下：

超链接标签

超链接的定义

在不同文档、同一个文档的不同段落之前相互跳转。html链接包含两部分：锚标和目标点。锚标就是链接的源点，当鼠标被移动到锚标处时会变成小手状。此时，用户通过点击鼠标就可以到达链接的目标点。目标点可以是一张图片、一个网络文件、一个多媒体文件等。

属性href（hypertext reference）

用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。其中URL地址可以为下面内容：

• 网站：可以设置ip地址或者是网站的网址。

<a href="http://www.baidu.com">百度地址</a>

点击页面的百度地址可直接跳转到百度页面

• 网页：链接到本机的网页。

<a href="cainiao-跳转后页面.html">跳转</a>

跳转前页面

点击跳转后直接跳转到新的本机页面

• 可执行文件：当文件扩展名不是html、asp等时，会将链接到的文件下载到本地计算机或直接执行。如果是文本文件（如word格式），则在浏览器中打开文件并进行编辑。

<a href="index.txt">txt文件，打开进行编辑</a>
<a href="index.wav">播放声音</a>

• 网页上的书签：通常使用在网页的长度超过屏幕时，可以使用书签直接跳转到该书签指向的具体内容，节省移动滚动条的时间。

属性target

• 属性值分别为_blank、_self、_parent、_top。
• target=_blank：在新的浏览器窗口中打开连接的文档，同时保持当前窗口不变
• target=_self：将链接的文档载入链接所在的同一框架或窗口，默认设置为_self
• target=_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。
• target=_top：将链接的文档载入整个浏览器窗口，从而删除所有框架我们以“_blank”为例，可以按照如下方式编写：

<!--在新的窗口中打开百度首页-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

属性title

浏览器会以浮动提示的方式显示解释信息

<a href="http://www.baidu.com" target=_blank title="百度欢迎你">百度地址</a>

实际效果展示：

属性name

利用name属性作为锚定位，可以实现文档内部的定位。这个需要我们在两个<a>标签中，一个写明name，作为一个锚点；另外一个写明herf，用于指向锚点。如下面的示例，点击“百度地址”会跳转到“这是测试跳转处”（当页面超过一页长度时，测试效果更明显）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>这是测试跳转</a>
<a href="#ceshi" title="百度欢迎你">百度地址</a>
?
</body>
</html>

图像标签

图片标签<img 属性=“属性值”>

• 属性src：来定义图片的URL（统一资源定位符）地址，是图片必不可少的属性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

• 属性height和width：规定图片的大小。属性值都是数字，表示图像宽度和高度所占的像素点数。默认是浏览器窗口将自动调整图像显示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

• 属性align：设置图片对齐方式，垂直对齐（居上、居中和居下）和水平对齐（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

• 属性border：默认图片是没有边框的，可以利用border属性添加边框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格标签

表<table>

创建一个表格，有属性width（宽度）、height（高度）、border（边框）、bordercolor（边框颜色）、cellspacing、cellpadding

行<tr>

创建表格中的每一行，有属性align、valign、bgcolor

列<td>

创建表格的中每一列，有属性

表头<th>

设置表头

我们现在建造一个表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
?
<table border>
<th>测试表头</th>
?
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
</table>

</body>
</html>

显示如下：

框架标签

框架<frame>

一个浏览器文档窗口一般只能显示一个网页文件，但是使用框架标签就可以将一个浏览器文档窗口分割成多个子窗口，每个子窗口中都可以显示一个独立的网页文件。

框架集<frameset>

多个框架组成了一个框架集（Frameset），定义了各个框架如何排列的。有属性rows和cols，两个属性至少选择一个，否则浏览器只显示第一个定义的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
?
</html>

最终我们将三个页面在同一个web窗口展示出来了

表单标签

表单标签<form>

主要用于采集和提交用户输入的信息，使网页具有交互功能。有属性：

• action（处理提交数据的页面）
• method（提交方式（get、post、request））
• target（）

用户输入区域标签<input type="">

这个标签必须放在<form>……</form>标签之间。有属性type，具体参数值有：

• text（单行文本输入框）
• textarea（多行输入框）
• password（密码输入框）
• radio（单选框）
• checkbox（复选框）
• select（下拉框）
• submit（提交）
• reset（重置）
• image（图片提交）
• file（上传文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鸟小白的学习分享</title>
</head>
?
<body>
<p>用户名<input type="text"></input></p>
<p>多行输入框<textarea></textarea></p>
<p>密  码<input type="password"></input></p>
<p>单选框<input type="radio"></input></p>
<p>复选框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>图片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
?
</body>
</html>

实现效果：

好了，今天的内容就分享完了，如有什么意见和建议可以私信菜鸟小白哦，我们下期再会~