自動化測試第三節(jié)課

Web

**HTML**
-  網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)
**CSS**
-  網(wǎng)頁的樣式
**JavaScript**
-  網(wǎng)頁的交互效果

拓展知識,

1.平面設(shè)計(ps, dw(dreamweaver), coredraw)
2.前端(html, css, js)
3.后端(服務(wù)器+數(shù)據(jù)庫)
4.測試(漏洞檢測，能不能發(fā)版)

HTML

基本概念
HTML（超文本標(biāo)記語言），是為了發(fā)送Web上的超文本開發(fā)的標(biāo)記語言
他可以理解為文本，然后瀏覽器負(fù)責(zé)進(jìn)行解析
HTML5 考慮到在手機也能正常運行使用榴芳。

HTML骨架

HTML由標(biāo)簽
1.雙標(biāo)簽的書規(guī)則:<雙標(biāo)簽名稱></雙標(biāo)簽名稱>
2.單標(biāo)簽的書寫規(guī)則:<但標(biāo)簽名稱 />
3.嚴(yán)格的html語法要求歉井，不管單雙標(biāo)簽都必須要正確的關(guān)閉躏嚎，單標(biāo)簽通過/關(guān)閉，雙標(biāo)/標(biāo)簽關(guān)閉
4.可嵌套使用虚茶，但是不能交叉嵌套

3.課堂練習(xí)答案.jpg

HBuilder
1.HBuilder默認(rèn)字符編碼為utf8，所以不加<meta charset="UTF-8">不會亂碼。

2.代碼從上至下

HTML內(nèi)常見標(biāo)簽整理

h1 h2 h3 等等為字體的大小如下
段落標(biāo)簽為p

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第二個網(wǎng)頁</title>
    </head>
    <body>
<!--        這是一些內(nèi)容文字 <br />
        我想換一個行 <br />
        
        我想空行 &nbsp;  空三個行 -->
        
        <h1>我是標(biāo)題標(biāo)簽,最大的</h1>
        <h2>我是標(biāo)題標(biāo)簽,比h1標(biāo)簽小一點</h2>
        <p>我是文章段落標(biāo)簽</p>  
        
        <b>文字加粗</b>
        <strong>文字是strong的加粗文字</strong> <br />
    
        <i>傾斜的文字i標(biāo)簽</i>  <br />
        <em>傾斜的文字標(biāo)簽</em>
    </body>
</html>

上述代碼中為空格和換行仰泻，空格使用? 想換一個行 <br />
容器標(biāo)簽:div, span;（用來容納其他標(biāo)簽）


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div和span標(biāo)簽</title>
    </head>
    <body>
        <!-- div容器標(biāo)簽, 會獨占一行,所以會自動換行 -->
        <div>我是一個很大的容器, 大的塊標(biāo)簽</div>
        <div>我是一個很大的容器, 大的塊標(biāo)簽</div>
        <div>我是一個很大的容器, 大的塊標(biāo)簽</div>
        
        <span>我是一個容器標(biāo)簽, 文字容器</span>   <br />
        <span>我是一個容器標(biāo)簽, 文字容器</span>  <br />
        <span>我是一個容器標(biāo)簽, 文字容器</span>  <br />
    </body>
</html>

可以注意到容器標(biāo)簽連續(xù)使用要用br才能換行，div大的標(biāo)簽不用滩届。

img 圖片標(biāo)簽(單標(biāo)簽)
1.可通過屬性src來插入圖片集侯，屬性寫在<>標(biāo)簽內(nèi)被啼，格式: 屬性名=屬性值，如src="01.jpg"

<img src="images/image3.jpeg" width="200" height="200" />
        
        <!-- 按比例縮小,只需要設(shè)置一個值 -->
        <img src="images/image3.jpeg" width="300" />
        
        <!-- 里面可以設(shè)置title標(biāo)簽(圖片標(biāo)題)  alt屬性(圖片的提示文字)-->
        <img src="images/image3.jpeg" width="300" title="漂亮的小姐姐" />
        <img src="image3.jpeg" width="300" title="漂亮的小姐姐" alt='女孩' />
        
        <img src="/Users/James/Desktop/03.軟件測試-HTML基礎(chǔ)/02.資料/images/image3.jpeg" />

title將鼠標(biāo)懸浮會出現(xiàn)其中的內(nèi)容棠枉，alt圖片報錯出現(xiàn)提示的內(nèi)容浓体。

2.絕對路徑：目錄下的絕對的位置，直接到達(dá)目標(biāo)位置辈讶，通常是從盤符開始的路徑命浴，不推薦使用，一般使用相對路徑

鏈接標(biāo)簽 a 可跳轉(zhuǎn)到目標(biāo)位置

        <a href="04圖片標(biāo)簽.html">這是一個a標(biāo)簽,它是鏈接標(biāo)簽</a>  <br />
        <a >這是一個a標(biāo)簽,它是鏈接標(biāo)簽, 跳轉(zhuǎn)百度</a> <br />
        
        <a  target="_blank">新建一個頁面, 跳轉(zhuǎn)百度</a>
        <a href="#">點擊之后,跳轉(zhuǎn)到當(dāng)前頁面最前面(屬于空鏈接的寫法)</a> <br />
        <a href="javascript:;">點擊之后,跳轉(zhuǎn)到當(dāng)前頁面最前面(屬于空鏈接的寫法)</a>

form表單

        <form action="某一個后臺程序" method="get"> 文本輸入框
            <input type="text" />
        </form>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者