本文章主要會講解html
的一些基礎語法和使用,了解對應的基礎語法後會對後續的自動化測試有一定的幫助,除此之外下方有系列文章的傳送門,還在持續更新中,感興趣的小伙伴也可以前往查看,話不多說,讓我們一起看看吧~
系列文章:
系列文章1:【Python自動化測試1】遇見Python之美
系列文章2:【Python自動化測試2】Python安裝配置及PyCharm基本使用
系列文章3:【Python自動化測試3】初識數據類型與基礎語法
系列文章4:【Python自動化測試4】字符串知識總結
系列文章5:【Python自動化測試5】列表與元組知識總結
系列文章6:【Python自動化測試6】字典與集合知識總結
系列文章7:【Python自動化測試7】數據運算符知識合集
系列文章8:【Python自動化測試8】流程控制語句講解
系列文章9:【Python自動化測試9】函數知識合集
系列文章10:【Python自動化測試10】文件基礎操作
系列文章11:【Python自動化測試11】模塊、包與路徑知識合集
系列文章12:【Python自動化測試12】異常處理機制知識合集
系列文章13:【Python自動化測試13】類、對象、屬性與方法知識合集
系列文章14:【Python自動化測試14】Python自動化測試基礎與進階練習題
系列文章15:【Python自動化測試15】unittest測試框架的核心概念與作用
系列文章16:【Python自動化測試16】測試用例數據分離
系列文章17:【Python自動化測試17】openpyxl二次封裝與數據驅動
系列文章18:【Python自動化測試18】配置文件解析與實際應用
系列文章19:【Python自動化測試19】日志系統logging講解
系列文章20:【Python自動化測試20】接口自動化測試框架模型搭建
系列文章21:【Python自動化測試21】接口自動化測試實戰一_接口概念、項目簡介及測試流程問答
系列文章22:【Python自動化測試22】接口自動化測試實戰二_接口框架修改及用例優化
系列文章23:【Python自動化測試23】接口自動化測試實戰三_動態參數化與數據偽造
系列文章24:【Python自動化測試24】接口自動化測試實戰四_Python操作數據庫
系列文章25:【Python自動化測試25】接口自動化測試實戰五_數據庫斷言、接口關聯及相關管理優化
系列文章26:【Python自動化測試26】接口自動化測試實戰六_pytest框架+allure講解
系列文章27:【Python自動化測試27】Web自動化測試理論、環境搭建及常見操作
HTML的全稱為超文本標記語言,是一種標記語言。它包括一系列標簽,通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。
超文本是一種組織信息的方式,它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠的某台計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接,為人們查找,檢索信息提供方便。 – 百度百科
""" HTML基礎構成: 1、標簽名 <input> 2、屬性 <input id="kw"> 3、text 貼吧 <a href="http://tieba.baidu.com/" target="_blank" class="mnav c-font-normal c-color-t">貼吧</a> 4、內嵌標簽 span即內嵌標簽 <a>text <span><span> </a> """
整個網頁的構成,就是一個標簽,標簽是 <html> </html>
,有很多標簽,以下只列舉了11種常見的標簽,同時也在舉個例子,能夠比較清楚的、直觀的看到如何進行使用:
""" 常見標簽: 1、p 2、h1-h6 3、div 4、span 5、a 6、img 7、iframe 8、input、text、password、checkbox、radio、file 9、select 10、form 11、html """
新建一個html文件後默認的代碼段如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<p>段落1</p>
<p>段落2</p>
<div>空白塊,我會換行</div>
<span>空白塊,我不會換行</span>
<!-- img可以放本地圖片也可以放網絡圖片,還可以向下面一樣,圖片與網址搭配,點擊後則可以跳轉至百度界面 -->
<div>
<a href="https://www.baidu.com">
<img src="123.png"></a>
</div>
<iframe src="http://localhost:63342/CSDN_Python_Demo/123.html?_ijt=p8ashg72nflt31e5omkn101umc" width="300" height="300"></iframe>
<div>
用戶名:<input name="username" placeholder="請輸入用戶名" >
密碼:<input name="password" type="password" placeholder="請輸入密碼" >
<!-- readonly 不能輸入,disabled 完全鎖死 -->
用戶名:<input name="username" placeholder="請輸入用戶名" readonly>
密碼:<input name="password" type="password" placeholder="請輸入密碼" disabled>
</div>
<!-- 單選框 -->
<div>
請問你最喜歡的博客主是?
<input type="radio" name="fav" value="A:萌笑天">A:萌笑天
<input type="radio" name="fav" value="B:A">B:A
<input type="radio" name="fav" value="C:B">C:B
</div>
<!-- 多選框 -->
<div>
請問你覺得以下哪個食物是你喜歡吃的?
<input type="checkbox" name="food" value="牛腩">牛腩
<input type="checkbox" name="food" value="火鍋">火鍋
<input type="checkbox" name="food" value="壽司">壽司
<input type="checkbox" name="food" value="小龍蝦">小龍蝦
</div>
<!-- 文件上傳 -->
<div>
<input name="my_file" type="file">
</div>
<div>
<input name="my_date" type="date">
</div>
<div>
<input name="my_color" type="color">
</div>
<div>
<input name="my_range" type="range">
</div>
<div>
<input name="my_submit" type="submit">
</div>
<select name="sl">
<option>愛</option>
<option>老</option>
<option>虎</option>
<option>油</option>
</select>
</form>
</body>
</html>
運行結果: