整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、新建項目
1、新建===web項目===輸入項目名稱====完成
二、新建html文件
在新建項目中新建html模板
輸入文件名稱：
三、認識基本格式
聯想出基本格式：
四、編輯html文件
運行html，選擇瀏覽器
五、html常用的快捷鍵
（1）ctrl+n+w web項目創建
（2）ctrl+n+h html文檔創建
（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）
（4）ctrl+r html運行
（5）ctrl+z 撤回
（6）！+tab鍵 聯想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標滾輪， 字體方大和縮小
六、認識標簽
（1）H標簽（標題標簽）
（2）p標簽 （段落標簽）
（3）img 標簽（圖片標簽）
兩種：第一種widows上傳圖片，第二種：網上圖片鏈接
第一種
img中顯示圖片
img中引入圖片
第二種：網上圖片的鏈接：
（4） 標簽（空格）
（5）em 標簽表示斜體
（6）i 標簽表示斜體
（7）br 表示換行
（8）b 標簽表示加粗
（9） strong 標簽表示加粗
（10）s 標簽（刪除線）
（11）u 標簽 （下劃線）
（12）font 顏色
（13）sub下標
（14）sup上標
1）背景樣式屬性，用于定義 HTML 元素的背景色、背景圖片，同時還可以進行背景定位、背景圖片重復、背景圖片固定。
background-color 屬性可以給指定標簽元素設置背景色。
舉個例子！ 我們給 body 元素設置一個背景顏色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: yellowgreen;
}
</style>
</head>
<body></body>
</html>background-image 屬性可以把圖像插入背景。background-size 屬性可以給背景圖設置大小。
舉個例子！ 我們給 body 元素設置一個背景圖像。
wget https://labfile.oss.aliyuncs.com/courses/3773/moon.jpg<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
}
</style>
</head>
<body></body>
</html>通過 background-position 屬性，可以改變圖像在背景中的位置。
background-position 屬性，設置屬性值為居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
}
</style>
</head>
<body></body>
</html>background-repeat 屬性是用來設置背景圖像是否平鋪。
下表列出了 background-repeat 屬性的一些可取值以及每個可取值的含義。
可 取 值 | 描 述 |
repeat | 背景圖像將在垂直方向和水平方向重復（默認值） |
repeat-x | 背景圖像將在水平方向重復 |
repeat-y | 背景圖像將在垂直方向重復 |
no-repeat | 背景圖像將僅顯示一次 |
我們規定應該從父元素繼承 background-repeat 屬性的設置。
background-repeat 屬性并設置值為不平鋪:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body></body>
</html>（2）文本相關的屬性：
文本屬性用于定義文本的樣式，通過文本屬性，可以改變文本的顏色、字間距、對齊方式、文本修飾和文本縮進等。常用文本屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
line-height | normal、number、length、% | 設置行高 |
text-indent | length、% | 設置文本縮進 |
text-align | left、right、center、justify、start、end | 設置對齊方式 |
letter-spacing | normal、length | 設置字符間距 |
text-decoration | line、color、style、thickness | 設置文本修飾 |
white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 規定如何處理空白 |
line-break | auto、loose、normal、strict、anywhere、unset | 處理如何斷開帶有標點符號的文本的行 |
line-height 用于設置多行元素的空間量，可取值具體說明如下：
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-height 的使用</title>
<style>
div {
width: 300px;
height: 400px;
border: 1px solid;
font-size: 15px;
display: inline-block;
vertical-align: top;
}
.div1 {
line-height: 2; /*15 * 2*/
}
.div2 {
line-height: 30%; /*15 * 30% */
}
</style>
</head>
<body>
<div class="div1">
<p>“海水呀，你說的是什么？”</p>
<p>“是永恒的疑問。”</p>
<p>“天空呀，你回答的話是什么？”</p>
<p>“是永恒的沉默。”</p>
</div>
<div class="div2">
<p>“海水呀，你說的是什么？”</p>
<p>“是永恒的疑問。”</p>
<p>“天空呀，你回答的話是什么？”</p>
<p>“是永恒的沉默。”</p>
</div>
</body>
</html>
顯示為，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><ul>
<li></li>
<li></li>
</ul>霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程，通過提升從業人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導，BAT 級別的測試管理大咖量身打造職業規劃。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
