整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

[6]Web编程-「5」HTML

TML（Hypertext Markup Language）是一种用于创建网页的标记语言。在Web开发中，HTML是构建网页结构和内容的基础。本篇学习教程将为您介绍HTML的基本语法和常见标签，帮助您入门HTML编程。

步骤1：创建HTML文档

HTML文档是由一系列标签（Tag）组成的文本文件，以.html作为文件扩展名。以下是创建一个简单HTML文档的步骤：

  1. 打开文本编辑器，例如Notepad、Sublime Text等。
  2. 创建一个新文件，并将文件扩展名设置为.html。
  3. 在文件中输入以下内容作为HTML文档的基本结构：
<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
</body>
</html>

上面的代码是一个简单的HTML文档，包含了<!DOCTYPE>声明、<html>元素、<head>元素和<body>元素。<!DOCTYPE>声明定义了HTML文档的类型和版本，<html>元素是HTML文档的根元素，<head>元素用于定义文档的头部信息，<body>元素用于定义文档的主体内容。

步骤2：使用HTML标签

HTML标签是用于定义网页元素的关键。标签通常由<和>符号组成，可以包含属性（Attributes）和内容（Content）。以下是一些常见的HTML标签和它们的作用：

  • <h1>到<h6>：定义标题，其中<h1>为最高级标题，<h6>为最低级标题。
  • <p>：定义段落。
  • <a>：定义链接，用于创建超链接。
  • <img>：定义图像，用于在网页中显示图片。
  • <ul>和<ol>：定义无序列表和有序列表。
  • <li>：定义列表项。
  • <table>：定义表格。
  • <tr>：定义表格的行。
  • <td>：定义表格的单元格。
  • <div>：定义文档中的一个区域，用于组织和布局内容。
  • <span>：定义文档中的一个内联元素，用于设置文本样式。

以下是一个使用常见HTML标签的例子：

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tags Example</title>
</head>
<body>
  <h1>My First HTML Page</h1>
  <p>This is a paragraph.</p>
  <a href="https://www.example.com">Visit our website</a>
  <img src="example.jpg" alt="Example Image">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
  <table>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
    </tr>
  </table>
  <div>
    <h2>Section 1</h2>
    <p>This is a section of content.</p>
  </div>
  <span style="color: red;">This is a red text.</span>
</body>
</html>

在上面的例子中，使用了<h1>、<p>、<a>、<img>、<ul>、<ol>、<li>、<table>、<tr>、<td>、<div>和<span>等HTML标签，展示了如何创建标题、段落、链接、图像、列表、表格、区域和内联元素等不同类型的内容。

步骤3：使用HTML属性

HTML属性用于为HTML标签添加额外的信息，例如控制标签的样式、行为和属性等。以下是一些常见的HTML属性和它们的作用：

  • href：定义链接的URL地址，用于设置超链接的目标。
  • src：定义图像的URL地址，用于设置图像的来源。
  • alt：定义图像的替代文本，用于在图像无法显示时显示的文本。
  • style：定义元素的内联样式，用于设置元素的样式属性，如颜色、字体大小、背景颜色等。
  • class：定义元素的类名，用于标识元素，并与CSS样式表中的样式类关联。
  • id：定义元素的唯一标识，用于在文档中唯一地标识一个元素。
  • type：定义输入元素的类型，如文本框、复选框、按钮等。
  • value：定义输入元素的初始值，如文本框中的默认文本、复选框的默认选中状态等。

以下是一个使用HTML属性的例子：

<!DOCTYPE html>
<html>
<head>
  <title>HTML Attributes Example</title>
</head>
<body>
  <h1>My First HTML Page</h1>
  <a href="https://www.example.com" target="_blank">Visit our website</a>
  <img src="example.jpg" alt="Example Image">
  <input type="text" value="Enter your name">
</body>
</html>

在上面的例子中，使用了href、src、alt、type和value等HTML属性，展示了如何设置链接的目标、图像的来源、输入框的初始值等。

步骤4：学习HTML文档结构和语言

HTML文档通常包含以下几个部分：

  1. <!DOCTYPE html>：定义文档类型和版本。
  2. <html>：表示HTML文档的根元素。
  3. <head>：包含文档的元信息，如标题、样式表和脚本等。
  4. <title>：定义文档的标题，将显示在浏览器的标题栏或标签页上。
  5. <body>：包含文档的主要内容，如文本、图像、链接和表单等。
  6. 注释<!-- ... -->：用于添加注释，不会在网页中显示。

以下是一个完整的HTML文档结构的例子：

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
  <a href="https://www.example.com" target="_blank">Visit our website</a>
</body>
</html>

在上面的例子中，<!DOCTYPE html>声明了文档类型为HTML，<html>标签表示HTML文档的根元素，<head>标签包含了文档的元信息，包括标题，<body>标签包含了文档的主要内容，包括标题和段落，并且使用了<a>标签创建了一个超链接。

步骤5：学习HTML的基本语法和规范

HTML有一些基本的语法和规范，包括：

  • 标签：HTML使用标签来定义不同类型的元素，标签通常使用尖括号< >包围，如<h1>、<p>、<a>等。
  • 元素：标签和标签之间的内容组成了HTML的元素，如<h1>Hello, World!</h1>中的<h1>标签和其中的Hello, World!文本内容。
  • 嵌套：可以将一个元素放置在另一个元素的内部，形成嵌套关系，如<p><strong>Hello, World!</strong></p>中的<strong>标签嵌套在<p>标签内。
  • 属性：可以为标签添加属性，属性用于为元素提供额外的信息或设置，如<a href="https://www.example.com">Visit our website</a>中的href属性用于定义链接的目标。
  • 标签闭合：有些标签需要在结束时进行闭合，如<p>、<a>等，而有些标签是自闭合的，如<img>、<br>等。
  • 注释：可以使用注释<!-- ... -->在HTML中添加注释，注释不会在网页中显示，可用于添加说明和注解。

以下是一个示例展示了HTML的基本语法和规范：

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>

</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first HTML page.</p>
  <a href="https://www.example.com" target="_blank">Visit our website</a>
  <img src="image.jpg" alt="An example image">
</body>
</html>

在上面的示例中，<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<a>标签定义了一个超链接，并使用了href属性来指定链接的目标，<img>标签定义了一个图像元素，并使用了src属性来指定图像的来源，alt属性用于指定图像无法加载时的替代文本。

步骤6：学习HTML的常用标签和属性

HTML有很多常用的标签和属性，可以用于创建不同类型的元素和设置元素的属性。以下是一些常用的HTML标签和属性的示例：

  • <h1>到<h6>：用于定义标题，分别表示一级到六级标题，其中<h1>最大，<h6>最小。
  • <p>：用于定义段落。
  • <a>：用于创建超链接，可以使用href属性指定链接的目标，可以使用target属性指定链接的打开方式（如"_blank"表示在新窗口打开）。
  • <img>：用于显示图像，可以使用src属性指定图像的来源，可以使用alt属性指定图像无法加载时的替代文本。
  • <ul>和<ol>：用于创建无序列表和有序列表，分别表示无序和有序的列表。
  • <li>：用于定义列表项，在<ul>或<ol>内部使用。
  • <table>：用于创建表格，可以使用<tr>定义表格行，<td>定义表格单元格。
  • <form>：用于创建表单，可以使用action属性指定表单提交的目标地址，可以使用method属性指定表单提交的方式（如"post"或"get"）。
  • <input>：用于创建输入框，可以使用type属性指定输入框的类型，如文本框、密码框、复选框、单选框等。
  • <textarea>：用于创建多行文本输入框。
  • <button>：用于创建按钮。
  • <div>和<span>：用于创建容器，可以用于对元素进行分组和布局。
  • <style>和<script>：分别用于添加样式和脚本。

以上只是HTML中的一部分常用标签和属性，还有很多其他标签和属性可以用于创建不同类型的元素和实现不同的功能。学习和掌握这些常用标签和属性将帮助你更好地构建复杂的HTML页面。

步骤7：学习CSS和JavaScript

HTML的学习是必不可少的，但单独的HTML只能创建简单的静态网页。要创建更丰富、动态和交互性的网页，你还需要学习CSS（层叠样式表）和JavaScript（JS）。

学习CSS

CSS是一种用于控制网页样式和布局的标记语言。它允许你为HTML元素设置样式，如颜色、字体、边距、背景等，从而实现网页的美化和布局控制。以下是一个简单的CSS样式的示例：

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
  }

  h1 {
    color: #ff0000;
  }

  p {
    font-size: 16px;
    margin-bottom: 10px;
  }

  a {
    color: #0000ff;
    text-decoration: none;
  }

  img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-top: 10px;
  }
</style>

在上面的示例中，<style>标签用于定义CSS样式，body、h1、p、a、img是选择器，用于选中HTML元素，并为其设置样式。例如，body选择器设置了网页的字体和背景颜色，h1选择器设置了标题的颜色，p选择器设置了段落的字体大小和底部边距，a选择器设置了链接的颜色和文本装饰，img选择器设置了图片的宽度、最大宽度、高度和顶部边距。

学习JavaScript

JavaScript是一种用于为网页添加交互性和动态功能的脚本语言。它可以在网页上执行代码，从而实现网页的动态变化、用户交互、数据处理等功能。以下是一个简单的JavaScript示例：

<script>
  function greet() {
    var name = prompt("What's your name?");
    alert("Hello, " + name + "!");
  }
</script>

在上面的示例中，<script>标签用于包裹JavaScript代码，greet()是一个JavaScript函数，当调用它时，会弹出一个提示框让用户输入姓名，并通过弹出框显示一条问候消息。

学习和掌握CSS和JavaScript将使你能够创建更加丰富和交互性的网页，并为用户提供更好的用户体验。

步骤8：深入学习HTML5和其它进阶技术

除了基本的HTML、CSS和JavaScript外，还有许多其他的HTML5和进阶技术可以学习和应用，如HTML5新的语义化标签（如<header>、<nav>、<aside>、<section>等），响应式设计（Responsive Design），多媒体处理（如音频、视频等），Canvas绘图，Web存储（如Web Storage和IndexedDB），地理定位（Geolocation），Ajax等。深入学习这些技术可以让你在前端开发领域中更加专业和有竞争力。

步骤9：实践和项目

学习HTML最重要的一步是进行实践和项目。通过实际的项目经验，你将更好地理解HTML的应用和实际运用，锻炼你的编码技能和解决问题的能力。你可以创建自己的网站、博客、在线简历，或者参与开源项目、团队项目等，从而将所学的HTML知识付诸实践。

步骤10：不断学习和更新

前端技术在不断发展和更新，新的HTML标准、新的CSS特性、新的JavaScript库和框架不断涌现。因此，作为前端开发者，需要保持持续学习和更新的态度。通过阅读技术文档、参与技术社区、参加培训课程等方式，不断提升自己的前端技能，并紧跟技术的发展潮流。

总结

希望这篇HTML学习教程对你入门学习HTML有所帮助。HTML是现代Web开发的基础，掌握了HTML，你将能够创建出各种精美、丰富和交互性的网页。记住，不断实践和不断学习是掌握HTML的关键，祝你在学习HTML的过程中取得成功！

者：hetu666

来源：CSDN

概述

HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。

HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等

一个元素

元素的主要部分有：

1开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

2结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。

3内容（Content）：元素的内容，本例中就是所输入的文本本身。

4元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

块级元素

块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。

<p>第四</p><p>第五</p><p>第六</p>

效果：

属性

一个属性必须包含如下内容：

1，在元素和属性之间有个空格space (如果已经有一个或多个属性，就与前一个属性之间有一个空格.)

2属性后面紧跟着一个“=”符号.

3，有一个属性值,由一对引号“ ”引起来.

  • href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：href="***/"。
  • title: 标题title属性为超链接声明额外的信息，比如你将链接至那个页面。例如：title="***"。当鼠标悬浮时，将出现一个工具提示。
  • target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。

布尔

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>
 
<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

单引号或者双引号？

在目前为止，本章内容所有的属性都是由双引号来包裹。也许在一些HTML中，你以前也见过单引号。这只是风格的问题，你可以从中选择一个你喜欢的。以下两种情况都可以：

<a href="http://www.example.com">示例站点链接</a>
 
<a href='http://www.example.com'>示例站点链接</a>

但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的：

<a href="http://www.example.com'>示例站点链接</a>

HTML结构

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>我的测试站点</title>
 </head>
 <body>
 <p>这是我的页面</p>
 </body>
</html>

1，<!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。

2，<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。

3，<head></head>: <head>元素. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。

4.<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。

5.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。

6.<body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

空白

代码中包含的空格是没有必要的；下面的两个代码片段是等价的：

<p>狗 狗 很 呆 萌。</p>
 
<p>狗 狗 很
 呆 萌。</p>

渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

那么为什么我们会使用那么多的空白呢? 可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码。

特殊字符

注释

为了将一段HTML中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来， 比如：

<p>我在注释外！</p>
 
<!-- <p>我在注释内！</p> -->

头部

HTML 头部是包含在<head> 元素里面的内容。不像 <body>元素的内容会显示在浏览器中，head 里面的内容不会在浏览器中显示，它的作用是包含一些页面的元数据。

元数据

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 。有很多不同种类的 <meta> 可以被包含进你的页面的<head>元素，比如。

指定字符的编码

<meta charset="utf-8">

这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。

添加作者和描述

  • name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。
CSS和JavaScript

如今，几乎你使用的所有网站都会使用css让网页更加炫酷，使用js让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用<link>元素以及 <script> 元素。

<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="my-js-file.js"></script>

标题和段落

在HTML中，每个段落是通过<p>元素标签进行定义的, 比如下面这样：

<p>我是一个段落，千真万确。</p>

每个标题（Heading）是通过“标题标签”进行定义的：

<h1>我是文章的标题</h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等。

列表

<ol>
 <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
 <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
 <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
 <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
 <ul>
 <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
 <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
 </ul>
 </li>
</ol>

标记

<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……

<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……

<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

<strong>强调重要的词

超链接

通过将文本转换为<a>元素内的链接来创建基本链接， 给它一个href属性（也称为目标），它将包含您希望链接指向的网址。

<p>I'm creating a link to
<a href="https://www.***.com/">***</a>.
</p>

使用title属性添加支持信息

<p>I'm creating a link to
<a href="https://www.baidu.com"
 title="这是百度">百度</a>.
</p>

I'm creating a link to 百度.

块级链接

可以将一些内容转换为链接，甚至是块级元素。例如你想要将一个图像转换为链接，你只需把图像元素放到<a></a>标签中间。

文档片段

超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id属性。例如，如果你想链接到一个特定的标题，可以这样做：

<h2 id="Mailing_address">Mailing address</h2>

然后链接到那个特定的id，可以在URL的结尾使用一个哈希符号（#）指向它，例如：

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

表单 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>增加学生</title>
</head>
<body>
 
 <form method="post" action="/community/alpha/student">
 
 <p>
 姓名：<input type="text" name="name">
 
 </p>
 <p>
 年龄：<input type="text" name="age">
 
 </p>
 <p>
 <input type="submit" value="保存">
 </p>
 </form>
</body>
</html>

后台：

 //post
 @RequestMapping(path = "/student",method = RequestMethod.POST)
 @ResponseBody
 public String saveStudent(String name,int age){
 System.out.println(name);
 System.out.println(age);
 return "success";
 }

大部分用来定义表单小部件的元素都有一些他们自己的属性。然而，在所有表单元素中都有一组通用属性，它们可以对这些小部件进行控制。下面是这些通用属性的列表:

密码框

通过设置type属性值为password来设置该类型框：

<input type="password" id="pwd" name="pwd">

搜索框

通过设置 type属性值为 search 来设置该类型框：

<input type="search" id="search" name="search">

电话号码栏：

通过 type属性的 tel 值设置该类型框：

<input type="tel" id="tel" name="tel">

URL 栏

通过type属性的url 值设置该类型框：

<input type="url" id="url" name="url">

多行文本框

多行文本框专指使用<textarea>元素，而不是使用<input>元素。

<textarea cols="30" rows="10"></textarea>

按钮

在HTML表单中，有三种按钮：

Submit

将表单数据发送到服务器。对于<button>元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.

Reset

将所有表单小部件重新设置为它们的默认值。

Anonymous

没有自动生效的按钮，但是可以使用JavaScript代码进行定制。

每次向服务器发送数据时，都需要考虑安全性。到目前为止，HTML表单是最常见的攻击路径(可能发生攻击的地方)。这些问题从来都不是来自HTML表单本身，它们来自于服务器如何处理数据。

根据你所做的事情，你会遇到一些非常有名的安全问题：

XSS 和 CSRF

跨站脚本(XSS)和跨站点请求伪造(CSRF)是常见的攻击类型，它们发生在当您将用户发送的数据显示给这个用户或另一个用户时。

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

CSRF攻击类似于XSS攻击，因为它们以相同的方式开始攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将权限升级到特权用户(比如站点管理员)的级别，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站对其用户的信任。

为了防止这些攻击，您应该始终检查用户发送给服务器的数据(如果需要显示)，尽量不要显示用户提供的HTML内容。相反，您应该对用户提供的数据进行处理，这样您就不会逐字地显示它。当今市场上几乎所有的框架都实现了一个最小的过滤器，它可以从任何用户发送的数据中删除HTML<script>、<iframe> 和<object>元素。这有助于降低风险，但并不一定会消除风险。

SQL注入

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常发生在应用服务器试图存储由用户发送的数据时）。这实际上是攻击网站的主要途径之一。

其后果可能是可怕的，从数据丢失到通过使用特权升级控制整个网站基础设施的攻击。这是一个非常严重的威胁，您永远不应该存储用户发送的数据，而不执行一些清理工作(例如，在php/mysql基础设施上使用mysql_real_escape_string()

HTTP数据头注入和电子邮件注入

这种类型的攻击出现在当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时。这些不会直接损害您的服务器或影响您的用户，但它们会引发一个更深入的问题，例如会话劫持或网络钓鱼攻击。

这些攻击大多是无声的，并且可以将您的服务器变成僵尸。

偏执:永远不要相信你的用户

那么，你如何应对这些威胁呢?这是一个远远超出本指南的主题，不过有一些规则需要牢记。最重要的原则是:永远不要相信你的用户，包括你自己；即使是一个值得信赖的用户也可能被劫持。

所有到达服务器的数据都必须经过检查和消毒。总是这样。没有例外。

远离有潜在危险的字符转义。应该如何谨慎使用的特定字符取决于所使用的数据的上下文和所使用的服务器平台，但是所有的服务器端语言都有相应的功能。

限制输入的数据量，只允许有必要的数据。

沙箱上传文件(将它们存储在不同的服务器上，只允许通过不同的子域访问文件，或者通过完全不同的域名访问文件更好)。

最后，我自己是一名从事了多年开发的JAVA老程序员，辞职目前在做自己的java私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的java学习干货，可以送给每一位喜欢java的小伙伴，想要获取的可以关注我的头条号并在后台私信我：交流，即可免费获取。

.超链标记

超链标记通过标记<a>指定,是一个行内标记,href指定了链接的目标文档。

格式为: 

<a href="URL 记号名">热点文本</a>

如果目标文档和链接所在文档是同一个文档,那么href属性值就是在id属性值的前面加一个"#",如下所示: 

<a href="#avio">what is avio</a>

签名在name属性中定义：

<a name="记号名">目标文本</a>

链接到一个电子邮件：

<a href="mailto: E-mail地址>热点文本</a>

7.图片

格式如下:

<img src="c2013.jpg" alt="picture of 2013">

以图片作为背景

<body background="图片名">

用图片作为超链接

<a href="URL"><img src="文件名"></a>

8.列表

（1）无序列表:<ul>标记和<li>表项标记

（2）有序列表:用<ol>标记

9.HTML表单

（1）form标记

一个表单的所有组件都必须在标记<form>的内容中指定,标记<form>是一个块内标记,它有多个不同的属性,但是只有action是必需的,属性指定了Web服务器上一个应用程序的url.属性method通常取值为get和post.默认情况下是get,它是不安全的,他将表单中的数据按照属性:属性值的形式添加到URL后面,且传输量小;post则是将表单的数据放在form的数据体中.它可以传输大量的数据,还能上传文件.

（2）input标记

标记<input>指定常用的控件,它是行内的,他可以指定文本,密码框,复选框,单选按钮和两种特殊按钮(分别为提交和重置),格式为:

<input type="value">

一般情况下,控件还需要属性name,复选框和单选框控件还需要属性value.

（3）select标记

两种类型的菜单

  • 一次只能选择一个菜单项的菜单类型(类型单选框),默认是这个
  • 一次可以选择多个菜单项的菜单类型(类型复选框),通过添加属性multiple并将其属性值设置为”multiple”实现的.

菜单的每一个条目通过标记<option>指定,属性selected值为”selected”表示预选中.

（4）textarea标记

<textarea>标记用于创建一个能输入多行文本的区域,属性rows和cols控制大小

（5）提交按钮和重置按钮

提交按钮的作用步骤:

  1. 对表单数据进行编码并发送到服务器
  2. 请求指定的网页或程序

重置按钮的作用:将所有的控件恢复到初始条件下的状态.

<input type="submit value="submit">
<input type="reset" value="reset>

表单数据的提交

1.先通过浏览器将表单数据包装成表单数据集

表单数据集形式:

<controll.name>+"="+<controll.value>+"&"+..........

2.表单数据集经过编码然后在发送到服务器.编码方法有form元素的enctype属性指定


在线咨询
上一篇：史上最全！图解浏览器的工作原理
下一篇：CSS3实现可展开收缩的弹性动画菜单

您的项目需求

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

推荐阅读
友情链接 广安 新干县 玉环县 肃南裕固族自治县 雁山区 濮阳县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服