軟件測試的學習之路-----基本的 HTML

一：常見DOS命令

1. 切換盤符
   具體盤符名稱：
   

2. 返回上一級或根目錄
   cd … 返回上一級
   cd / 返回根目錄
   
   

   注意：
   (1). cd ：change directory 的首字母縮寫，表示切換目錄的意思
   (2). cd 命令不可以切換盤符
   (3). 根目錄指：某個盤符的一級目錄
   (4). 命令語句一定都是在 英文輸入法 下面書寫的，命令和參數之間往往都用 空格 隔開

3. 列表展示某個目錄下內容
   dir

4. 目錄及相關操作
   (1)．新建目錄： md 路徑
   (2)．新建文件： echo “內容”>文件名稱，通過這種方法間接得到一個文件
   (3)．刪除目錄： rd 路徑 【默認情況下只能刪除空目錄，如果想連帶它裏的文件一起刪除則 需要設置 /s 參數】
   (4)．刪除文件： del 文件名稱
   注意：
   A. md 只能新建目錄
   B. rd 默認只能刪除空目錄
   C. 參與與命令之間一定要用空格
   D. 如果 del 後面直接寫的不是文件，而是一個目錄，那麼它就會將這個目錄下的所有文件都刪除（ 前提是我們選擇 Y ）

5. 文件複製和剪切命令
   (1).copy 被複制文件路徑 將這個文件複製到哪裏
   copy aa/aa.txt c:\test\bb.txt [ 將目錄 aa 下在的 aa.txt 文件，複製 到 c 盤 test 目錄下，同時將名稱修改爲 bb ]
   注意：
   A. 複製操作語句，我們可以分爲三段，第一段就是命令 copy ，第二段就是被複制文 件的在地，第三段可以指明將當前文件複製到哪裏，三段之間都要用空格隔開
   B. 第三段可以省略，省略之後的結果就是會將相應的文件直接複製到我們的當前所在 位置。
   (2).move 被剪切文件所在地 將這個文件剪切到哪裏
   注意：
   A.對於剪切操作來說 必須要進入到想要操作文件所在目錄去執行命令
   B.第三段用來指明目標所在地的部分不能省略。

二：Web基本介紹

(1). web 就是 world wide web 的縮寫，稱之爲全球廣域網，俗稱 www。
(2). 我們可以將 web 理解爲就是當前的一種互聯網。對於我們來說更多的就是網站服務。
(3). 網站我們可以認是由多個網頁組合在一起而形成一種服務。
(4). web 前端就是來負責一個網站當中前臺網頁裏的內容。
(5). 網頁就是由前端工程師使用 HTML 語言編寫而成的一種文件，它裏面會包含 文字 圖 片 超鏈接 聲音 視頻…（ 網頁本質就是一個 html 文件 ）

三：HTML基本介紹

1. 定義
   HyperText markup language 超文本標記語言，其中的超指：它能表達的內容不僅僅只是文字。
2. HTML 語言發展歷史
   1．在互聯網最初的時候是沒有 HTML 的，我們只能通過網絡傳輸最簡單的文字內容
   2．隨着用戶的要求越來越多，同時也是我們的技術的不斷髮展，就出了一種可以表達文字 內容之外的語言—HTML1.0
   3．在最初的時候就是 html1.0----xhtml1.0( 過渡 )----xhtml2.0( 放棄 )------html5

四：HTML網頁骨架

(1). 網頁是我們通過 HTML 語言來書寫。
(2). 因爲我們需要使用 HTML 語言來書寫網頁所以我們要有相應的書寫代碼工作。 ( 用Hbuilder寫代碼 )
(3). 在我們使用 HTML 語言去書寫網頁的過程我們會發現有一些結構是默認必須存在的， 這個結構我們就叫做 網頁骨架

注意：
<1>. DOCTYPE html : 向瀏覽器聲明當前的文檔是 Html 類型。
<2>. html ： 它是網頁當中最大的一個標籤，我們稱之爲：根標籤
<3>.head : 網頁頭的部，它裏面的內容是寫給瀏覽器看的。
<4>. meta : 如果有 charset 那就表示在設置當前網頁的顯示編碼
<5>. title： 網頁的標題，它裏面的內容會在瀏覽器的標籤頁上顯示
<6>. body： 網頁主體，它裏面的內容會顯示在瀏覽器的空白區域內。

五：Hbuilder工具使用

1. 設置主題
   Hbuilder軟件裏找
   工具-----視覺主題設置

2. 設置字體
   工具-----視覺主題設置----如下圖
   

六：HTML語法和標籤基本介紹

1. html標籤
   所謂的標籤就是 HTML 語言的發明者人爲定義好的一些"單詞"，它就相當於我們漢語中的字。
2. 語法
   語法就是用來定義這些 “單詞” 應該如何去解析或者書寫的規則。
3. 常見標籤及基本語法
   (1)．我們人爲的將 HTML 標籤分爲 雙標籤 和 單標籤 二種
   雙標籤：<標籤名稱></標籤名稱> [在英文輸入法下輸入]
   單標籤：<標籤名 />
   (2)．常見的標籤：
   <1>.標題標籤 :在 html 當中人爲定義了六種標題分別 h1-h6,它們都是雙標籤。在一個網頁當中，我們只允許出現一個 h1。
   <2>.段落標籤：p 雙標籤
   <3>.換行標籤： br 單標籤
   <4>.空格：&nbsp；
   (3)．標籤書寫語法
   在 HTML 當中允許多個標籤互相嵌套使用，但是不允許交叉嵌套。

七：圖片標籤

2. 圖片常見的屬性
   (1)．src： 設置圖片所在位置
   (2)．alt： 當圖片加載失敗的時候會顯示它裏面的文字
   (3)．width/height: 設置圖片寬 和 高，如果只設置了寬度或者高度，那麼另外一邊會 自動縮放。
   (4)．title: 當鼠標懸停在圖片上的時候會顯示它裏面的文字

八：鏈接標籤

1. 語法
   
2. 作用
   可以實現在當前頁面向新頁面進行跳轉的操作
3. 屬性
   1．target 屬性：可以設置新頁面在哪個窗口打開，當值爲_blank 的時候可以在新窗口打開
   2．href 的屬性值設置爲 # 的時候，可以設置爲空鏈接，它的作用是：當用戶點擊的時候不會發生跳轉

九：路徑

所謂的路徑可以看做是在程序代碼中用來查找某個具體的資源所 "走"過的路。例如：
C:\Program Files (x86)\DingDing

1. 絕對路徑
   絕對路徑一般是以盤符爲起點來進行查找 ，或者就是一個絕對的URL地址 。 https://www.baidu.com/img/bd_logo1.png ，但是在實際工作中，不建議大家使用絕對路徑。
2. 相對路徑
   相對路徑就是相對某一個已知的文件爲起點進行資源的查找。

十：相對路徑用法

路徑是一個通用的存在，在實際工作中 相對路徑使用的頻率是最高的。人爲的將相對路徑分爲三種：同級路徑、下級路徑、上級路徑。 (以查找圖片爲例的含義就是我們要在一個 HTML 網頁中插入一張 HTML 文件之外的圖片， 同時採用的是相對路徑，所以這裏的相對起點就是 HTML 網頁)

1. 同級路徑：指HTML 網頁和目標圖片在同一級目錄下。對於同級路徑的使用，只需要在 src 中寫入目標圖片的名稱即可。
2. 下級路徑：指圖片在 html 文件的下級目錄中。此時我們需要使用一個 / 來向下進行穿透查找。
3. 上級路徑： 圖片在 html 文件的上級目錄裏時，需要使用 …/ 來向上回退進行查找
   注意：
   (1). 上述的路徑規則雖然都是以查找圖片爲例，但是總結的規律適用於其它類型資源的查找。
   (2): / 表示向下級查找，可以無限級穿透。 …/ 表示向上級返回，同樣可以無限級返回。

十一：表單基本介紹

表單就是一種在互聯網上用於收集用戶信息的一種結構，在 HTML 當中事先定義好 一 個標籤來完成這件事。標籤名稱叫 form ，它是一個雙標籤,我們稱之爲表單域。

<form action="" method=""></form>

注意：

• form 標籤是 HTML 當中定義好的一個用來表示整個表單結構的雙標籤，我們稱之 爲表單域
• form默認就相當於一張"白紙"，如果想讓它收集用戶的相關信息，HTML 裏又準備 了很多的表單標籤。這些標籤裏 使用最多的一個叫 input
• action 屬性值表示將當前表單中的數據提交到哪裏
• method 屬性值表示以什麼樣試來提交當前表單中的數據。最常見的就是 get post。其中 get 方式就是指將數據在 URL中進行提交，這種方式是明文。所以相對不安全。而POST 方式就是指將數據寫在 HTTP 請求的請求體當中

十二：常見表單元素

from 標籤只負責定義具體的表單整體，它裏面如果想要收集用戶數據，就必須再有一些能夠讓用戶進行輸入填寫的模塊，此時 HTML 當中就定義許多表單標籤來讓用戶完成輸入。
最常見的表單標籤就是 input ，因爲標籤名稱都叫 input ，所以 HTML 當中就通過設置 type 屬性來進行區分。

1. 文本輸入框： <input type="text" />
2. 密碼輸入框: <input type="password" />
3. 提交按鈕：<input type="submit" />
4. 單選框：<input type="radio" />
5. 複選框:<input type="checkbox" />
6. 文本域:<textarea rows="行數" cols="列數"></textarea>
7. 下拉框：<select><option value="">選項一</option></select>
8. 重置按鈕：<input type="reset" />
9. 普通按鈕:<input type="button" value="按鈕" />

十三：表單元素注意細節

1. name 屬性：form 表單通過不同的表單元素來收集數據，在這個過程中很多的表單元素名稱都叫 input,此時如果直接將這些數據提交到後臺，就會出現這些數據無法區分的問題,此時爲了分別哪個數屬於什麼樣的表單項。人爲的在input 身上設置 name 屬性。這樣一來數據到達後端之後就會變成以下格式：username=“syy” pwd=“123” gender=“男”…
2. value: 作用是定義某些表單元素的默認顯示內容（ 文本輸入框、提交按鈕、重置 按鈕、普通按鈕 ）
3. checked: 這是一個屬性並且它的屬性值就等於這個屬性名。用來設置單選和複選框中的默認被選中的某些。
4. selected：這也是一個屬性值等於屬性名的屬性，添加在下拉選項身上實現某個選項被默認選中。

十四：歡迎查看下篇文章：軟件測試的學習之路 ----- 神奇的 CSS

軟件測試的學習之路 ----- 神奇的 CSS