網路安全之html
一、HTML價紹
1.HTML表示超文字標記語言（Hyper Text Markup Language）
HTML是一個包含標記的文字檔案，它必須有htm或html副檔名，可以用一個簡單的文字編輯器建立
2.標籤解釋
<html>這個標籤是告訴瀏覽器這是html 的開始，</html>這個是文件的終止
<head></head>這個標籤是頭資訊，在瀏覽器視窗中，頭的資訊是不被顯示的
<title></title>是文件的標題，被顯示在瀏覽器視窗的標題欄
<body></body>這個標籤之間是正文，會被顯示在瀏覽器中
<b></b>這個標籤之間的文字會以加粗字型顯示
二、HTML標籤
1.html使用不同的標籤來實現不同的功能
2.標籤書寫格式
2.1 成對出現<> 例如：<b></b>
2.2 第一個表示開始，第二個表示結束
2.3 開始標籤和結束標籤之間是文字內容
2.4 標籤大小寫無所謂<b></B>表示的意思一樣
3.標籤屬性
標籤可以擁有屬性，屬效能夠為頁面上的HTML元素提供附加屬性
例如<body></body>是正常的主體標籤，但是如果想讓他顏色發生變化的話，則
<boay bgcolor="red"></body>
建立個表格，不希望表格有邊框<table border="0"></table>
三、HTML基本標籤組成
1.最重要的標籤是定義標題元素，段落和換行的標籤
例：
<html>
<body>
這就是一個簡單的網頁
</body>
</html>
2.標題元素
2.1標題元素由標籤<h1>到<h6>定義
2.2<h1>定義了最大的標題元素
2.3<h3>定義可最小的標題元素
例
<html>
<body>
<h1>這就是一個簡單的網頁<h1>
<h2>這就是一個簡單的網頁<h2>
<h3>這就是一個簡單的網頁<h3>
<h4>這就是一個簡單的網頁<h4>
<h5>這就是一個簡單的網頁<h5>
<h6>這就是一個簡單的網頁<h6>
</body>
</html>
3.段落
<p>就是用來定義段落的
HTML自動在一個段落前後各新增一個空行
<html>
<body>
<p>這就是一個簡單的網頁<p>
<p>這就是一個簡單的網頁<p>
</body>
</html>
4.換行
<br>就是換行，就是結束一行，但是不想開始新段落的時候用，這個標籤不管放在什麼位置都能夠強制換行
<html>
<body>
這是主體
<br>
開始換行啦
<br>
</body>
</html>
5.居中的標題
<html>
<body>
<h1 algin="center">居中標題</h1>
<p>其實就是想展示一下這是在換行</p>
</body>
</html>
6.插入水平線
<hr>
<html>
<body>
<h1 algin="center">居中標題</h1>
<hr>
<p>插入水平線</p>
<hr>
<p>插入水平線</p>
</body>
</html>
7.背景顏色
給<body>標籤新增屬性來控制背景顏色
<html>
<body bgcolor="yellow">
<h1 algin="center">黃色背景</h1>
<hr>
<p>插入水平線</p>
<hr>
<p>插入水平線</p>
</body>
</html>
四、HTML格式
4.1 HTML定義了很多元素來格式化輸出，比如加粗或者傾斜
<html>
<body>
<strong>文字加粗</strong>
<br>
<big>文字放大</big>
<br>
<small>文字縮小</small>
<br>
<i>文字傾斜</i>
<br>
文字<sup>上標</sup>
<br>
文字
<sub>下標</sub>
<br>
</body>
</html>
4.2格式化程式碼
<html>
<body>
<b>預處理格式用來顯示程式碼非常好</b>
<pre>
for i in {1..10}
do
echo $i
done
</pre> //<pre>是用來保持原有格式的，如果去掉的話程式碼就成為一行顯示
</body>
</html>
4.3 文字倒著輸出
<html>
<body>
<bdo dir="rt1">
人在讀文字的時候會自動將文字順序排列
</bdo>
</body>
</html>
五、HTML實體
想要在HTML中引用特殊字元，比如"<",就需要用到字元實體
<html>
<body>
<p>
小於號 < < <br>
大於號 > > <br>
and符號 & & <br>
引號 " " <br>
單引號 ' <br>
</p>
</body>
</html>
六、HTML連結
6.1通過點選跳轉到其他頁面或網站
<html>
<body>
<a href="lastpage.htm">點選跳轉</a>到網站的其他頁面<br> // href後面的就是連結的地址
</body>
</html>
6.2 跳轉到其他網站
<html>
<body>
<a href="http://www.baidu.com/">點選跳轉</a> 到其他網站<br>
</body>
</html>
6.3圖片跳轉
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin">點選圖片跳轉到百度百科<img border="0" src=".\Linus.jpg"></a><br>
</body>
</html>
6.4跳轉時新開啟一個頁面
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin" target="_blank">點選圖片新開一個視窗跳轉到百度百科<img border="0" src=".\Linus.jpg"></a>
</body>
</html>
6.5跳轉到本頁面的某個位置
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
七、HTML框架
7.1框架頁面之間是相互獨立的
1.<frameset>標籤定義瞭如何將視窗拆分成框架。
2.每個frameset標籤定義了一組行和列。
3.行/列的值指明瞭每個行/列在螢幕上所佔的大小
7.2垂直分欄
<html>
<frameset cols="25%,75%> // rows是水平分欄
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
7.3不可改動
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm"> //noresize="noresize" 不可改動
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
7.6 使用導航框架跳轉到指定章節
<html>
<frameset cols="200,*">
<frame src="frame_linksection.htm">
<frame src="frame_section.htm" name="showframe">
</frameset>
</html>
第8章 HTML表格
8.1 什麼是HTML表格
8.2 有邊框的表格
<html>
<body>
<b>表格</b>
<br>
<table border="1">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>
第9章 HTML列表
9.1 什麼是列表
HTML支援有序、無序和自定義列表。
9.2 無序列表
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
9.3 有序列表
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
第10章 HTML表單
10.1 什麼是HTML表單
HTML表單用來選擇不同種類的使用者輸入。
10.2 文字框
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
10.3 密碼框
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
10.4 單選按鈕
<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
10.5 複選框
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
10.6 下拉框
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
10.7 文字框
<html>
<body>
<p>
This example demonstrates a text-area.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
10.8 按鈕
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>