Web自動化測試二 ----- HTML

時間 2019-12-08

標籤 web 自動化測試 html 欄目 HTML 简体版

原文原文鏈接

HTML

1、結構

html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題
<p> 與 </p> 之間的文本被顯示爲段落

　　<html>
　　　　<head>
　　　　快遞單
　　　　</head>
　　　　<body>
　　　　郵寄的東西
　　　　</body>
　　</html>css

2、概念

HTML(Hyper Text Markup Language)：超文本標記型語言,方便快速查找。'
HTML 不是一種編程語言，而是一種標記語言 (markup language)

HTML標籤html

HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>
HTML 標籤一般是成對出現的，好比 <b> 和 </b>,有些是單個出現的。有些是沒有內容的。
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤
看到的網頁 == HTML

3、與XML的區別

HTML：<key>value</key> key標籤是指定的
XML：<key>value</key> key標籤能夠本身定義

4、HTML頭部元素

<head> 元素是全部頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處能夠找到樣式表，提供元信息，等等。python

如下標籤均可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。web

一、<title> 標籤

定義文檔的標題。編程

二、<base> 標籤

頁面上的全部連接規定默認地址或默認目標（target）。後端

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

三、<link> 標籤

定義文檔與外部資源之間的關係。瀏覽器

四、<style> 標籤

用於爲 HTML 文檔定義樣式信息。服務器

五、<meta> 標籤

提供關於 HTML 文檔的元數據。編程語言

meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。post

元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。

六、<script> 標籤

用於定義客戶端腳本，好比 JavaScript。

5、HTML實體

一、<p> 元素

<p> 元素定義了 HTML 文檔中的一個段落。

<p>This is my first paragraph.</p>

二、<body> 元素

定義了 HTML 文檔的主體。

三、<html> 元素

定義了整個 HTML 文檔。

四、<h1> - <h6> 標籤

<h1> 定義最大的標題。<h6> 定義最小的標題。

五、<hr /> 標籤

在 HTML 頁面中建立水平線。

六、HTML註釋

<!-- This is a comment -->

七、 <br /> 標籤

在不產生一個新段落的狀況下進行換行。

八、HTML連接

<a href ="www.baidu.com"> 這是一個連接</a>

target屬性：使用target屬性，可使連接在新窗口打開。

九、HTML圖像

十、HTML表格

表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

<table border="1">
<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>

在瀏覽器顯示以下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

border屬性（border=「1」）：顯示一個帶有邊框的表格。

表頭使用 <th> 標籤進行定義。

十一、HTML列表

無序列表：無序列表始於 <ul> 標籤。每一個列表項始於 <li>。

　　<ul>
　　<li>Coffee</li>
　　<li>Milk</li>
　　</ul>

有序列表：有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

　　<ol>
　　<li>Coffee</li>
　　<li>Milk</li>
　　</ol>

十二、<iframe>標籤

用來在一個HTML頁面上顯示另外一個HTML頁面。

1三、<input>標籤

        用戶名： <input type="text">
        用戶名： <input type="text" readonly>
        用戶名： <input type="text" disabled>

        <!--單選框-->
        <p> 我最喜歡的歌手
        <input type="radio" name="favor_singer" id="zjl" value="周杰倫" readonly>周杰倫
        <input type="radio" name="favor_singer" id="ljj" value="林俊杰" checked>林俊杰
        <input type="radio" name="favor_singer" id="zhm" value="張惠妹"disabled>張惠妹
        </p>

        <!--多選框-->
        <p> 我愛聽的歌手
        <input type="checkbox" name="listen" value="周杰倫">周杰倫
        <input type="checkbox" name="listen" value="林俊杰" checked>林俊杰
        <input type="checkbox" name="listen" value="張惠妹">張惠妹
        </p>
        <!--不管單選或者多選同一個問題必須加name屬性-->

        <input type="button">
        <input type="color">
        <input type="time">
        <input type="email"> <!--只能輸入email格式的數據-->
        <input type="file">
        <input type="number">
        <input type="password">

        <!--文本域-->
        <p>
        <textarea> </textarea>
        </p>

        <p>
        <p style="color:red">最喜歡的水果</p>
        <!--select裏只顯示option元素，備註信息放到select外-->
        <select>
            <option></option>
            <option>草莓</option>
            <option>香蕉</option>
            <option>蘋果</option>
        </select>
        <input type="submit">
        </p>

屬性總結：

id必需要惟一，不惟一瀏覽器不會識別到，可是會產生嚴重的影響，是編程人員的問題
for設同一個id name不是惟一的，當a有兩個相同的name，錨會定位到第一個。name的做用很是有用，做爲可與服務器交互數據的HTML元素的服務器端的標識，分組，錨點
value值很重要，向後端傳輸的數據就是value
style一般被css文件代替
class一般用來作樣式分離，能夠同時又多個值，用空格分開
readlonly和disabe的區別：
- readonly只針對input（text/password）和textarea有效，而disabled對於全部的表單元素有有效，包括select、radio、checkbox、button等，可是表單若是在使用了readonly後，當咱們將表單以post或get的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將值傳遞出去（這種狀況出如今當咱們將某個表單中的textarea元素設置爲disabled或readonly，可是submit button確實可使用的）
checked，默認值