自動化測試平臺
- 前言
- 第1章 HTML介紹
- 第2章 HTML標籤
- 第3章 HTML基本標籤
- 3.4 換行
- 第4章 HTML格式
- 第5章 HTML實體
- 第6章 HTML連結
- 第7章 HTML框架
- 第8章 HTML表格
- 第9章 HTML列表
- 第10章 HTML表單
- 第11章 HTML背景
- 總結
前言
學習HTML是必須的，關乎WEB那麼就少不了HTML，具體的就往下看吧
第1章 HTML介紹
1.1 HTML是什麼
HTML表示超文字標記語言（Hyper Text Markup Language）。
HTML檔案是一個包含標記的文字檔案。
這些標記保速瀏覽器怎樣顯示這個頁面。
HTML檔案必須有htm或者html副檔名。
HTML檔案可以用一個簡單的文字編輯器建立。
注：解壓開發環境中sublime軟體，綠化後開啟使用，新建檔案，寫入內容，儲存的檔案字尾名需要是.html結尾，再使用瀏覽器開啟即可。
1.2 HTML標籤解釋
HTML文件中，第一個標籤是。這個標籤告訴瀏覽器這是HTML文件的開始。HTML文件的最後一個標籤是，這個標籤告訴瀏覽器這是HTML文件的終止。
在<head>和</head>標籤之間文字的是頭資訊。在瀏覽器視窗中，頭資訊是不被顯示的。
在<title>和</title>標籤之間的文字是文件標題，它被顯示在瀏覽器視窗的標題欄。
在<body>和</body>標籤之間的文字是正文，會被顯示在瀏覽器中。
在<b>和</b>標籤之間的文字會以加粗字型顯示。
第2章 HTML標籤
2.1 什麼是HTML標籤
HTML使用不同的標籤來實現不同的功能。
2.2 HTML標籤書寫格式
1.成對出現<>，例如
<b>和</b>。
2.第一個表示開始，第二個表示結束。
3.開始標籤和結束標籤之間的文字是內容。
4.標籤大小寫無所謂，<b>和<B>表示的意思一樣。
2.3 HTML標籤的屬性
正常的主體標籤是：
<body>
但是我現在想讓頁面的背景變成紅色，那麼可以這麼樣寫：
<body bgcolor="red">
再舉個例子，我想建立一個表格，但是這個表格不希望他有邊框，可以這樣寫:
<table border="0">
第3章 HTML基本標籤
3.1 HTML基本標籤組成
HTML中最重要的標籤是定義標題元素，段落和換行的標籤。
下面的例子一個簡單的HTML組成:
<html>
<body>
我的第一個HTML網頁
</body>
</html>
3.2 標題元素
解釋：
1.標題元素由標籤
<h1>到<h6>定義。
2.<h1>定義了最大的標題元素
3.<h6>定義了最小的標題元素
舉例：顯示6個標籤
<html>
<body>
<h1>1級標題</h1>
<h2>2級標題</h2>
<h3>3級標題</h3>
<h4>4級標題</h4>
<h5>5級標題</h5>
<h6>6級標題</h6>
</body>
</html>
3.3 段落
解釋：
1.段落是用
<p>標籤定義的。
2.HTML自動在一個段落前後各新增一個空行。
舉例：
<html>
<body>
<p>這是第1段話</p>
<p>這是第2段話</p>
<p>這是第3段話</p>
<p>這是第4段話</p>
</body>
</html>
3.4 換行
解釋：
當需要結束一行，並且不想開始新段落時，使用
<br>標籤。<br>標籤不管放在什麼位置，都能夠強制換行。
舉例：
<html>
<body>
主體內容
<br>
換行啦啦啦
<br>
</body>
</html>
3.5 居中的標題
<html>
<body>
<h1 align="center">這是居中的標題</h1>
<p>這是一段文字,沒什麼意義,反正我也不知道自己在打什麼哈哈哈</p>
</body>
</html>
3.6 插入水平線
解釋：
使用
<hr>表示插入一條水平線
舉例：
<html>
<body>
<p>插入水平線</p>
<hr>
<p>這是一條線</p>
<hr>
<p>還是一條線</p>
<hr>
</body>
</html>
3.7 背景顏色
解釋：
通過給
<body>標籤新增屬性來控制背景顏色
舉例：
<html>
<body bgcolor="yellow">
<h2>看，黃色的背景！</h2>
</body>
</html>
第4章 HTML格式
4.1 什麼是HTML格式
HTML定義了很多元素用來格式化輸出，比如加粗和傾斜文字。
4.2 格式化文字
<html>
<body>
<strong>文字加粗</strong>
<br>
<big>文字放大</big>
<br>
<small>文字縮小</small>
<br>
<i>文字傾斜</i>
<br>
文字<sup>上標</sup>
<br>
文字
<sub>下標</sub>
<br>
</body>
</html>
4.3 格式化程式碼
<html>
<body>
<b>預處理格式用來顯示程式碼非常好</b>
<pre>
for i in {1..10}
do
echo $i
done
</pre>
</body>
</html>
4.4 文字倒著輸出
<html>
<body>
<bdo dir="rtl">
這段文字是倒著的
</bdo>
</body>
</html>
第5章 HTML實體
5.1 什麼是HTML實體
1.有些字元，比如說“<”字元，在HTML中有特殊的含義，因此不能在文字中使用。
2.想要在HTML中顯示一個小於號“<”，需要用到字元實體。
5.2 舉例
<html>
<body>
<p>
小於號 < < <br>
大於號 > > <br>
and符號 & & <br>
引號 " " <br>
單引號 ' <br>
</p>
</body>
</html>
第6章 HTML連結
6.1 什麼是HTML連結
就是通過點選連結跳轉到其他頁面或其他的網站
6.2 跳轉到網站的其他頁面
<html>
<body>
<a href="lastpage.htm">點選跳轉</a>到網站的其他頁面<br>
</body>
</html>
6.3 跳轉到其他網站
<html>
<body>
<a href="http://www.baidu.com/">點選跳轉</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">點選圖片跳轉到百度百科<img border="0" src=".\Linus.jpg"></a><br>
</body>
</html>
6.5 跳轉時新開啟一個頁面
<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.6 跳轉到本頁面的某個位置
<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>
第7章 HTML框架
7.1 什麼是HTML框架
使用框架，可以在一個瀏覽器視窗中顯示不止一個HTML文件。
這樣的HTML文件被稱為框架頁面，它們是相互獨立的。
在這裡插入程式碼片
7.2 標籤解釋
frameset標籤
1.
<frameset>標籤定義瞭如何將視窗拆分成框架。
2.每個frameset標籤定義了一組行和列。
3.行/列的值指明瞭每個行/列在螢幕上所佔的大小
frame標籤
<frame>標籤定義了每個框架中放入什麼檔案。
7.3 垂直分欄
舉例：
<html>
<frameset cols="25%,75%>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
解釋：
1.第一個被設定成視窗寬度的25％，第二個被設定成視窗寬度的75％。
2.頁面“frame_a.htm”被放在第一個分欄中，“frame_b.htm”被放在第二個分欄中。
7.4 水平分欄
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
7.5 不可改動的分欄
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<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表格
HTML 中的表格和 Excel 中的表格是類似的,都包括行、列、單元格、表頭等元素
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>
第11章 HTML背景
11.1 圖片背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body background="xxx/img/bg.jpg">
<!-- 這裡的圖片請指定電腦上圖片的正確路徑 -->
<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>
</body>
</html>
11.2 背景顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body bgcolor="#E6E6FA">
<h1>Hello world!</h1>
<p><a href="https://www.baidu.com/">百度</a></p>
</body>
</html>
總結
以上便是有關HTML的基礎內容，需要掌握，建議不會的朋友多多練習，有關HTML更多的內容可以檢視HTML手冊，可以前往：菜鳥教程，w3School等等。
這裡HTML稍微掌握能看懂HTML程式碼就好，畢竟如果不是專業前端不用太過深入。如果你想看網頁程式碼：滑鼠右鍵點選檢視網頁原始碼或者F12開啟開發者模式都可以。