內(nèi)容
1.網(wǎng)絡(luò)階段學(xué)習(xí)思路與內(nèi)容介紹
2.簡(jiǎn)單地搭建一個(gè)網(wǎng)頁(yè)
一.網(wǎng)絡(luò)階段學(xué)習(xí)思路與內(nèi)容介紹
二.簡(jiǎn)單地搭建一個(gè)網(wǎng)頁(yè)
1.知識(shí)點(diǎn)
（1）網(wǎng)頁(yè)結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
(2)head
①<head>和</head>里面的內(nèi)容是網(wǎng)頁(yè)的名稱班缰，注意名稱要被<title></title>包圍
比如下面這個(gè)例子
head
那么打開(kāi)網(wǎng)頁(yè)的時(shí)候千绪，就會(huì)看到
②<meta charset="utf-8"/>是解決編碼問(wèn)題产舞。如果不在title上面寫(xiě)上這一行的話墨技，就會(huì)出現(xiàn)
（3）body
body里面就是內(nèi)容了耻台。這一塊內(nèi)容就比較多了，比如
①設(shè)置背景圖片
<body style="background-image:url(fabcf8851e981939c785a70331bf6a9b.jpg);">
注意要在第一個(gè)body里面加惠猿。url里面的就是與網(wǎng)站同路徑下的圖片名稱（全名）
②標(biāo)題
標(biāo)題（Heading）是通過(guò)<h1>-<h6> 標(biāo)簽進(jìn)行定義的偿警。
<h1> 定義最大的標(biāo)題。 <h6> 定義最小的標(biāo)題苛秕。
<h1 style="text-align:center;color:white;background-color:red;font-size:50;opacity:0.9">安卓開(kāi)發(fā)</h1>
注意：opacity是設(shè)置不透明級(jí)別肌访，1就是完全不透明，0就是全透明艇劫。比如我設(shè)置0.5（半透明）吼驶，就是這個(gè)效果
opacity
③段落
段落是通過(guò)** <p>** 標(biāo)簽定義的。比如
<p>這是一個(gè)段落 </p>
<p>這是另一個(gè)段落</p>
再比如
<p style="margin-left:500;color:gray;font-size:30">安卓開(kāi)發(fā)賊牛</p>
注意：margin-left是離頁(yè)面左端的距離
就會(huì)出來(lái)這樣的效果
④分塊
<div> 標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。<div> 元素經(jīng)常與 CSS 一起使用旨剥，用來(lái)布局網(wǎng)頁(yè)咧欣。
默認(rèn)情況下，瀏覽器通常會(huì)在 <div> 元素前后放置一個(gè)換行符轨帜。當(dāng)然魄咕，也可以通過(guò)使用 CSS 改變這種情況。
比如
<div style="width: 80%;">
<div class="video">
<video controls="controls" width="800%" style="margin-left:50"><!--能根據(jù)網(wǎng)頁(yè)大小進(jìn)行比例性的變化-->
<source src = "2019-07-05 21-40-18.mp4" type = "video/mp4">
</video>
</div>
<div class="desc">
<h4>視頻<a >點(diǎn)擊進(jìn)入百度網(wǎng)頁(yè)</a></h4>
這是視頻的具體描述內(nèi)容
<p>
姓名 <input type="text" name="user_name"><!--一個(gè)nbsp是一個(gè)空格-->
</p>
<p>
密碼 <input type="password" name="user_password">
</p>
<p>
<input type="submit" name="submit" value="登錄" style="background-color: orange;width:170;border-color:orange;color:white">
</p>
</div>
</div>
解釋：
Ⅰ：最上面的width是整個(gè)塊占整個(gè)寬度的百分之多少蚌父，比如我寫(xiě)100%那就是這樣的
而如果我寫(xiě)成80%哮兰，那就會(huì)變成下面這樣
Ⅱ:controls="controls"：是顯示視頻的相應(yīng)按鈕，否則視頻就只會(huì)變成一個(gè)圖片（只有一幀）苟弛，而加上這個(gè)之后喝滞，就會(huì)有如圖所示按鈕
Ⅲ:
<h4>視頻<a >點(diǎn)擊進(jìn)入百度網(wǎng)頁(yè)</a></h4>
這個(gè)功能是鏈接到相應(yīng)網(wǎng)站，效果在上圖已有
（2）代碼
其他的都很簡(jiǎn)單膏秫，這里把代碼拿過(guò)來(lái)右遭，就不多做解釋了
<html>
<head>
<meta charset="utf-8"/>
<title>我的第一個(gè)網(wǎng)頁(yè)</title>
</head>
<style type="text/css">
.video{
float:left;
width:80;
}
.desc{
float:right;
width:;
}
</style>
<body style="background-image:url(fabcf8851e981939c785a70331bf6a9b.jpg);">
<h1 style="text-align:center;color:white;background-color:red;font-size:50;opacity:0.5">安卓開(kāi)發(fā)</h1>
<p style="margin-left:500;color:gray;font-size:30">安卓開(kāi)發(fā)賊牛</p> <!--段落-->
<div style="width: 80%;">
<div class="video">
<video controls="controls" width="800%" style="margin-left:50"><!--能根據(jù)網(wǎng)頁(yè)大小進(jìn)行比例性的變化-->
<source src = "2019-07-05 21-40-18.mp4" type = "video/mp4">
</video>
</div>
<div class="desc">
<h4>視頻<a >點(diǎn)擊進(jìn)入百度網(wǎng)頁(yè)</a></h4>
這是視頻的具體描述內(nèi)容
<p>
姓名 <input type="text" name="user_name"><!--一個(gè)nbsp是一個(gè)空格-->
</p>
<p>
密碼 <input type="password" name="user_password"><!--有了password之后，輸入密碼就不會(huì)顯示出來(lái)缤削。-->
</p>
<p>
<input type="submit" name="submit" value="登錄" style="background-color: orange;width:170;border-color:orange;color:white"><!--border-color是邊界的顏色-->
</p>
</div>
</div>
</body>
</html>
（3）效果
總結(jié)
今天學(xué)的內(nèi)容我很感興趣窘哈，關(guān)于html這一塊我暫時(shí)先不求多，不求高大上亭敢。雖然很多知識(shí)很簡(jiǎn)單滚婉，但是只是看起來(lái)簡(jiǎn)單，還是不會(huì)敲帅刀。所以明天打算再自己設(shè)計(jì)一個(gè)網(wǎng)頁(yè)让腹，從而能夠復(fù)習(xí)今天學(xué)的知識(shí)。
