html-head-body
ps:大師兄的博客鏈接http://www.imdsx.cn/
http://ui.imdsx.cn/html/
html 相當于一個人
css 相當于為這個人穿上漂亮的衣服，化妝
js? ? 相當于是讓這個人動起來
學習目標：
??? 學習UI自動化
??????? web自動化
??????? 主要模擬人來進行業務操作，測試ui的功能
??????? HTML
??????????? 能看懂 前端代碼的含義
??????????? Html 是可以被瀏覽器所解析的一套規則
??????????? 我們學習html的話 應該學習什么？
??????????????? 能夠被瀏覽器所解析的這套規則
??????????? 學習前端 需要學習三大塊
??????????? 1、HTML（學一套規則）在前端展示
??????????? 2、CSS（樣式，給前端頁面化妝）
??????????? 3、JS（前后臺交互、增加動作）
??????????? JavaScript 和 java 沒有一毛錢關系
學習內容：
??????? CSS
??????? JS
??????? DOM
??????? XPATH 寫法
??????? Css Selector 寫法
??????? app自動化
?一、初識HTML
<!DOCTYPE html> <!--指定標準的html代碼 格式-->
<html lang="en">
二、head
1、<meta charset="UTF-8"> meta用作配置html字符集；寫在標簽中的charset等叫做屬性
2、自閉合標簽：它沒有另一對，自己就是一個整體
3、主動閉合標簽：成對出現
4、修改瀏覽器tab頁的名字：<title>水瓶座</title>
<!DOCTYPE html> <!--指定標準的html代碼 格式--> <!--一個標簽 通過<> 來定義--> <html lang="en"> <head><!--head標簽中大部分的標簽都是不可見 前端頁面不可見--><!--配置html字符集--><!--寫在標簽中的 叫做屬性 --><meta charset="UTF-8"><!--每隔一秒鐘 刷新一次--><!--<meta http-equiv="refresh" content="1;http://www.baidu.com">--><!--關鍵字檢索--><meta name="keywords" content="xxxx"><!--描述--><meta name="description" content="xxxx"><!--修改瀏覽器tab頁的名字的--><title>水瓶座</title><!--鏈接標簽 rel指定 要展示要鏈接的功能 href 路徑--><link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"><!--鏈接樣式表 rel指定 要展示要鏈接的功能 href 路徑 --><link rel="stylesheet" href=""><!--自閉合標簽--><!--它沒有另一對，自己就是一個整體--><!--主動閉合標簽--><!--成對出現--> </head> <body> <a>水瓶座</a> </body> </html>
三、body
1、span標簽：
span標簽是html中的 白版標簽（沒有任何css的樣式），它是html中出場率最高的標簽。
<span>年輕,就是拿來折騰的。</span>2、div標簽：
div標簽是偽白版標簽。<div>年輕,就是拿來折騰的。</div>
3、行內標簽和塊級標簽：
行內標簽（內聯標簽）：自己有多大，就占多大空間，如：span標簽
塊級標簽：無論自己有多大 都占一整行，如div標簽
4、段落標簽：上下換行 段落標簽
<p>年輕,就是拿來折騰的。讓自己具備獨立生活的能力，具備一技之長的資本，是需要無數個夜晚的靜思，無數寂寞時光的堆積而成的。</p>5、標題標簽
標題標簽 一共有6個。<h1>我是標題標簽h1</h1> <h2>我是標題標簽h2</h2> <h3>我是標題標簽h3</h3> <h4>我是標題標簽h4</h4> <h5>我是標題標簽h5</h5> <h6>我是標題標簽h6</h6>
6、多行文本：
<textarea>行內標簽（內聯標簽）塊級標簽</textarea> 7、input輸入框：
（1）單行文本框 也叫 input框;
（2）placeholder 提示文案；
（3）type代表當前input的類型，默認是text；
<!--name代表傳遞給后端JSON的key 輸入的字符串就是傳遞給后端的value--> <input name="user" value="123456" placeholder="請輸入用戶名" type="text"> <input name="password" placeholder="請輸入密碼" type="password">8、特殊符號：
（1）<代表小于號<
（2）>代表大于號>
（3） 代表空格；若直接輸入多個空格，瀏覽器只會識別一個空格，故需要使用特殊符號 
<div> <!–特殊符號–> <!--<p>--> <span>百    測</span> </div>9、多選框
checkbox 多選框 checked代表默認勾選<input type="checkbox" name="sex" value="1" checked="checked"> <input type="checkbox" name="sex" value="2"> <input type="checkbox" name="sex" value="3">
10、單選框： radio 單選 name相同則互斥
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2"> 11、上傳文件：
<!-- *****對于ui自動化來說 如果你需要上傳文件的操作時，如果是input的方式實現的文件上傳則可以通過sendkey直接搞--> <input type="file" name="file"> <!--button只是一個單純的按鈕 需要和js聯動綁定事件來才可以進行動作操作--> <input type="button" value="登錄1">12、表單標簽：
<!--表單標簽 理解為一張白紙 他是一個載體 承載的數據--> <form action="http://www.baidu.com" method="get"> <div> <!--<!–label擴展input可點擊的范圍–>--> <label for="i1">用戶名：</label> <input id="i1" type="text" name="username" placeholder="請輸入用戶名"> </div> <div> <label for="i2">密碼：</label> <input id="i2" type="password" placeholder="請輸入密碼" name="passwd"> </div> <!--如果submit和form連用則會點擊時自動觸發請求--> <div> <input type="submit" value="登錄Submit"> </div> <!--button必須和js連用--> <div> <input type="button" value="登錄button"></div> <!--如果不和form表單連用 那將毫無作用 重置form中所有input變為默認模式--> <input type="reset"> </form> ?13、html向后端發送請求的兩種方式：
1、通過ajax進行異步請求：每次提交不會刷新頁面 如果驗證通過才會跳轉 2、通過form表單進行請求：提交時整個頁面進行刷新提交；會導致用戶填寫的數據被清空。
14、selected設置默認選擇項：
<!--select選擇框 在寫value 具有層級關系 selected默認選擇那一項--> <select name="area">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected="selected">深圳</option>
</select>
<!--{“area”：“3”}--> 15、label分組名：
<select> <!--<!–label分組名–>--> <optgroup label="黑龍江"> <option value="1">牡丹江</option> <option value="2">哈爾濱</option> </optgroup> <optgroup label="河北"> <option value="3">秦皇島</option> <option value="4">石家莊</option> </optgroup> </select>16、超鏈接標簽：
超鏈接標簽 href 連接地址設置target，點擊鏈接會新建tab打開 <a href="http://www.besttest.cn" target="_blank">跳轉besttest官網</a>
17、圖片標簽：
圖片標簽：
alt->當圖片加載失敗后顯示的文字;
title->鼠標懸浮到圖片時顯示的文字.
18、表格：
<!--表格--> <table border="1"><thead><tr><th>id</th><th>name</th><th>method</th><th colspan="2">操作</th></tr></thead><tbody><tr><td>1</td><td rowspan="4">dsx</td><td>post</td><td>執行</td><td>修改</td></tr><tr><td>1</td><td>post</td><td>執行</td><td>修改</td></tr><tr><td>1</td><td>post</td><td>執行</td><td>修改</td></tr><tr><td>1</td><td>post</td><td><a href="s.html">執行</a></td><td>修改</td></tr></tbody> </table>?
四、span、div、p、h1/h2/h3/h4/h5/h6、塊級標簽、多選、單選、提示文案、上傳文件
1、什么是塊級標簽？
?? ?不管多長占一行 比較霸道
2、行內標簽的特點是什么？
?? ?自己有多長就占多長 不可以應用寬 高 外邊距? 內邊距
3、自閉和標簽有哪些？
自閉和標簽內容引自https://blog.csdn.net/huatek_wp/article/details/59587527
◆<hr/>：表示畫一條線。?
◆<base/>：標簽為頁面上的所有鏈接規定默認地址或默認目標。?
◆<embed/>：可以在頁面中嵌入任何類型的文檔。?
◆<keygen/>：標簽規定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。?
◆<source/>：為媒介元素，定義媒介資源。?
◆<command/>： 元素表示用戶能夠調用的命令。標簽可以定義命令按鈕，比如單選按鈕、復選框或按鈕。只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。?
◆<track/>：標簽為諸如 video 元素之類的媒介規定外部文本軌道。用于規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。?
◆<wbr/>： 規定在文本中的何處適合添加換行符。如果單詞太長，或者您擔心瀏覽器會在錯誤的位置換行，那么您可以使用?<wbr>?元素來添加 Word Break Opportunity（單詞換行時機）。
4、input 有多少種類型、分別是哪些？
text? password button submit checkbox? radio reset file
button js連用
submit 如果和form表單連用 會直接提交
ajax
??? ?異步
form
?? ?刷新整個頁面
?
轉載于:https://www.cnblogs.com/Noul/p/9594338.html
總結
以上是生活随笔為你收集整理的html-head-body的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hash——字符串匹配（求s1在s2中出
- 下一篇： 08.form组件