[6]Web編程-「5」HTML

TML（Hypertext Markup Language）是一種用于創建網頁的標記語言。在Web開發中，HTML是構建網頁結構和內容的基礎。本篇學習教程將為您介紹HTML的基本語法和常見標簽，幫助您入門HTML編程。

步驟1：創建HTML文檔

HTML文檔是由一系列標簽（Tag）組成的文本文件，以.html作為文件擴展名。以下是創建一個簡單HTML文檔的步驟：

打開文本編輯器，例如Notepad、Sublime Text等。
創建一個新文件，并將文件擴展名設置為.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>
</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文檔通常包含以下幾個部分：

<!DOCTYPE html>：定義文檔類型和版本。
<html>：表示HTML文檔的根元素。
<head>：包含文檔的元信息，如標題、樣式表和腳本等。
<title>：定義文檔的標題，將顯示在瀏覽器的標題欄或標簽頁上。
<body>：包含文檔的主要內容，如文本、圖像、鏈接和表單等。
注釋：用于添加注釋，不會在網頁中顯示。

以下是一個完整的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形式展現的塊級元素不會被嵌套進內聯元素中，但可以嵌套在其它塊級元素中。

效果：

屬性

一個屬性必須包含如下內容：

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 >示例站點鏈接</a>
 
<a >示例站點鏈接</a>

但你應該注意單引號和雙引號不能在一個屬性值里面混用。下面的語法是錯誤的：

<a >示例站點鏈接</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 rel="stylesheet" href="my-css-file.css">

<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 
 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）提交按鈕和重置按鈕

提交按鈕的作用步驟:

對表單數據進行編碼并發送到服務器
請求指定的網頁或程序

重置按鈕的作用:將所有的控件恢復到初始條件下的狀態.

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

表單數據的提交

1.先通過瀏覽器將表單數據包裝成表單數據集

表單數據集形式:

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

2.表單數據集經過編碼然后在發送到服務器.編碼方法有form元素的enctype屬性指定

在線咨詢

上一篇：史上最全！圖解瀏覽器的工作原理
下一篇：CSS3實現可展開收縮的彈性動畫菜單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商