网络安全之前端学习（HTML篇）

前言：网络安全中有一个漏洞叫xss漏洞，就是利用网页引发弹窗，这就要求我们看得懂源码，所以我会持续更新前端学习，可以不精通，但是一定要会，主要掌握HTML，css，js这三项技术，今天就讲讲HTML入门。

本文学习自哔哩哔哩中的

【HTML+CSS+JS+Vue】比大学课程还详细的Web前端教程，整整180集，学完即可兼职就业！附学习文档PDF，随时都能学_前端开发_WEB入门_哔哩哔哩_bilibili

1.下载vscode

vscode作为一个快捷工具，十分的好用，这里先教大家如何下载。

先搜索vscode官网，

选择红框所选择的，进入后正常下载

下载之后根据提示一步步来，在选择路径可以自己选择，在一个选择附加任务时把所有的都选上，等待一段时间就可以了。接下来我们来下载一些要安装的插件。

选择扩展模块，第一个就是中文插件，我现在时应经下载好的，输入Chinese，选择中文简体，下载，同时下载HTML css support（后期写css使用），live server（快速编译HTML文件），最后一个auto rename tag，下载好后就完成了准备工作。

2.正式学习html

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的新一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

2.1一些基本标签

在讲标签之前，我们要知道一般的网页都包含什么

这是一个网页最开始的样子，包含head，body（网页所呈现的），html，接下来我们学习一些标签。首先说一下如果我们每一次都要手敲这段代码是非常难受且费事的，所以我们按住“!”在按tab键即可一键补全

2.1.1标题标签（<h1> ~<h6>标签）

从这个图中不难发现<h1>~<h6>   字体不断变小，这里要申明一点，就是h标签只有到h6，没有h7h8等东西。当然如果要一个一个敲似乎有点麻烦，这里给大家一个公式，h$*6即可一键生成h1到h6。在h1到h6中还可以添加属性，比如align，改变位置。

大家可以看到align是红色的，应为这是他不建议你这样用，一般都是用css进行改变，这个我们后面再说，不过也是可以用的。（这里讲一下，接下来的介绍中我不会在讲解属性的问题，关于标签属性我会单独拿出来来讲，同时在后期的css会解决大部分属性）。

2.1.2段落，换行，水平线。

首先是段落<p>标签。

可以看到输出了一个“我是一个段落标签”，这里大家就可能有疑问了，为什么要用段落标签，不是可以用h标签吗，其实是应为内容太短了，实际上在开发的过程中段落内容非常长，所以用p标签。

接下来是换行标签<br>

可以看到使用br之后就换行了，这里要提醒以下br是单标签，千万不能后面加一个</br>。当然br标签有两种写法，一个是<br> ,另一个是<br/>,所以要记住，这两个都代表换行，如果加上就是换两行。

接下来是水平线标签

<hr>为水平标签，可以在网页中创造一个水平线，同时换行。

可以看到这里创造了一个水平线同时换行。

2.1.3图片标签

大家在网上看到的网页，因该都是花里胡哨的，没有我的这么朴素的吧，那么接下来讲讲图片标签。<img src=”” alt=””>这就是图片标签，大家可能有点看不懂，这个src就是图片路径，这个路径可以是绝对路径，可以是相对路径，也可以是网络路径。而这和alt引号内则是图片加载不出来所要呈现的内容。

这里就是绝对路径，相对路径，还有网络路径的不同结果，这里要须知，绝对路径无法用liver server访问，所以我们要找到我们的网页访问。

在这里讲一下相对路径的级关系，分为同级关系，子级与父级关系，分别是/，./，../。

2.1.4超链接

在我们日常访问网页的时候，我们点击网页都会跳转，这里就涉及到超链接。接下来讲讲如何使用超链接。<a href=""></a>使用a标签达到超链接的目的，在href中输入我们要跳转到的网页url，比如百度，而在两个a标签中则是网页上展示的连接内容，

这里我点击百度就会跳转到百度的访问页面。这里讲一个内容叫做空跳转，在我们开发的时候，有时候会不知道要跳转到哪里，这时候我们在href中写入#即可实现空调转。

2.1.4常见的文本标签

<em>定义着重字

<b>定义粗体字

<i>定义斜体字

<strong>定义着重语气

<del>定义删除字

<span>没有实际意义，相当于一个容器，对内部的字体做属性变换

也可以嵌套使用

2.1.4列表

1.有序列表

<ol>

       <li>

       </li>

</ol>

这是有序列表的代码

大家以后在写代码时，可以在第一个li标签后按住键盘shift和alt键再按键盘上下键就可以快速编辑li标签了。

2.无序标签

<ul>

       <li>

       <li>

<ul>

这是无序标签的代码

同时无论是有序和无序都是可以嵌套的，这里拿无序的做演示

大家可以看到这里的嵌套形式发生改变，这个属性问题我会单独拿出来讲，这里就是告诉大家可以嵌套使用。

2.1.5表格标签

再我们的日常生活中，表格是非常常见的，那么如何再网页中制作网页呢，这就要讲讲表格标签。

<table>

   <tr>

<td></td>

       <td></td>

   </tr>

</table>

在这里大家可以清楚的看到tr是行标签，而td是列标签。

这里再给大家一个快捷方式table>tr*4>td*4{1}

给大家解释一下，这个是生成表格的快捷方式，生成4*4的表格，同时全部覆盖为1。

接下来讲讲单元格合并

为了大家看的方便，我先创建一个4*4的列表，接下来讲一讲合并单元格，

首先是横向合并

可以看到单元格2的位置没有了，大家看一下源代码，我们要删除单元格二，否则会被挤到旁边去。Colspan里面数是几，就合并几个单元格，不过要注意要删除掉多余的单元格。接下来讲讲竖着合并单元格

一样的删除，但大家可以看到，单元格9到了中间，应为单元格默认再左中位置，所以到了中间，如果我们删除9和13，保留5，则更明显

3.1.6 form表单

再我们的网页中有很多输入框，可以查询，这就是我们的form表单

<form>

       <input>

</form>

Form表单主要是form和input组成，其实这个需要讲一讲他的属性，from相当于一个容器，放置你的表单。实际就是你的input起作用。

大家看一下这段源代码，这个action其实就是我们要提交的地方，这里没有就可以空着，而input中type是比较重要的，所以我在这里讲一下。

1.单行输入框< input type=“text”/>

单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。

2.密码输入框< input type=" password"/>

密码输入框用来输入密码，其内容将以圆点的形式显示。就是你看不到密码，而是小圆点。

3.单选按钮< input type=" radio"/>

单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效.

4.复选框< input type=" checkbox"/>

复选框常用于多项选择，如选择兴趣、爱好等，可对其应用 checked属性，指定默认选中项。

5.普通按钮< input type=" button"/>

普通按钮常常配合JavaScript脚本语言使用，初学者了解即可。

6.提交按钮< nput type=" 'submit"/>

提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性，改变提交按钮上的默认文本。

7.重置按钮< input type=" reset"/>

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性，改变重置按钮上的默认文本。

8.图像形式的提交按钮< input type=" image"/>

图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。

9.隐藏域< input type=" hidden"/>

隐藏域对于用户是不可见的，通常用于后台的程序，初学者了解即可。

10.文件域< input type=“file”/>

当定义文件域时，页面中将出现一个“选择文件”按钮和提示信息文本，用户可以通过单击按钮然后直接选择文件的方式，将文件提交给后台服务器。

3.HTML5新增标签（以下内容来自百度）

新增标签

1. <article> - 定义文档、页面或站点内的独立内容区域。
2. <aside> - 定义与页面内容几乎无关的部分，例如侧边栏。
3. <audio> - 用于嵌入音频内容。
4. <canvas> - 用于通过JavaScript绘制图形。
5. <details> - 定义用户可以展开或折叠的细节部分。
6. <dialog> - 定义对话框或窗口。
7. <figcaption> - 定义<figure>元素的标题。
8. <figure> - 用于对文档中的独立内容进行分组，通常包含图片、图表、代码段等。
9. <footer> - 定义文档或节的页脚。
10. <header> - 定义文档或节的页眉。
11. <main> - 指定文档的主要内容区域。
12. <mark> - 定义高亮显示的文本。
13. <nav> - 定义导航链接的部分。
14. <section> - 定义文档中的一个区域（或节）。
15. <summary> - 与<details>标签一起使用，定义可展开或折叠部分的标题。
16. <video> - 用于嵌入视频内容。
17. <time> - 定义日期/时间。

其实这些了解即可，很多时候我们都是用老的标签，因为浏览器兼容问题导致一些新的标签用不了，所以大多时候都是用老标签。

4.结语

那么HTML入门的就讲这么多，希望大家都上手操作一下。本文仅仅记录重要内容，如果要学习，建议去看原视频，连接放在文章开头。