內容
1.網絡階段學習思路與內容介紹
2.簡單地搭建一個網頁
一.網絡階段學習思路與內容介紹
網絡階段學習思路與內容介紹
網絡階段學習思路與內容介紹
二.簡單地搭建一個網頁
1.知識點
（1）網頁結構
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
(2)head
①<head>和</head>里面的內容是網頁的名稱，注意名稱要被<title></title>包圍
比如下面這個例子
head
那么打開網頁的時候，就會看到
②<meta charset="utf-8"/>是解決編碼問題。如果不在title上面寫上這一行的話，就會出現
（3）body
body里面就是內容了。這一塊內容就比較多了，比如
①設置背景圖片
<body style="background-image:url(fabcf8851e981939c785a70331bf6a9b.jpg);">
注意要在第一個body里面加。url里面的就是與網站同路徑下的圖片名稱（全名）
②標題
標題（Heading）是通過<h1>-<h6> 標簽進行定義的。
<h1> 定義最大的標題。 <h6> 定義最小的標題。
<h1 style="text-align:center;color:white;background-color:red;font-size:50;opacity:0.9">安卓開發</h1>
注意：opacity是設置不透明級別，1就是完全不透明，0就是全透明。比如我設置0.5（半透明），就是這個效果
opacity
③段落
段落是通過** <p>** 標簽定義的。比如
<p>這是一個段落 </p>
<p>這是另一個段落</p>
再比如
<p style="margin-left:500;color:gray;font-size:30">安卓開發賊牛</p>
注意：margin-left是離頁面左端的距離
就會出來這樣的效果
④分塊
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分。<div> 元素經常與 CSS 一起使用，用來布局網頁。
默認情況下，瀏覽器通常會在 <div> 元素前后放置一個換行符。當然，也可以通過使用 CSS 改變這種情況。
比如
<div style="width: 80%;">
<div class="video">
<video controls="controls" width="800%" style="margin-left:50"><!--能根據網頁大小進行比例性的變化-->
<source src = "2019-07-05 21-40-18.mp4" type = "video/mp4">
</video>
</div>
<div class="desc">
<h4>視頻<a >點擊進入百度網頁</a></h4>
這是視頻的具體描述內容
<p>
姓名 <input type="text" name="user_name"><!--一個nbsp是一個空格-->
</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是整個塊占整個寬度的百分之多少，比如我寫100%那就是這樣的
而如果我寫成80%，那就會變成下面這樣
Ⅱ:controls="controls"：是顯示視頻的相應按鈕，否則視頻就只會變成一個圖片（只有一幀），而加上這個之后，就會有如圖所示按鈕
Ⅲ:
<h4>視頻<a >點擊進入百度網頁</a></h4>
這個功能是鏈接到相應網站，效果在上圖已有
（2）代碼
其他的都很簡單，這里把代碼拿過來，就不多做解釋了
<html>
<head>
<meta charset="utf-8"/>
<title>我的第一個網頁</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">安卓開發</h1>
<p style="margin-left:500;color:gray;font-size:30">安卓開發賊牛</p> <!--段落-->
<div style="width: 80%;">
<div class="video">
<video controls="controls" width="800%" style="margin-left:50"><!--能根據網頁大小進行比例性的變化-->
<source src = "2019-07-05 21-40-18.mp4" type = "video/mp4">
</video>
</div>
<div class="desc">
<h4>視頻<a >點擊進入百度網頁</a></h4>
這是視頻的具體描述內容
<p>
姓名 <input type="text" name="user_name"><!--一個nbsp是一個空格-->
</p>
<p>
密碼 <input type="password" name="user_password"><!--有了password之后，輸入密碼就不會顯示出來。-->
</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）效果
網頁
總結
今天學的內容我很感興趣，關于html這一塊我暫時先不求多，不求高大上。雖然很多知識很簡單，但是只是看起來簡單，還是不會敲。所以明天打算再自己設計一個網頁，從而能夠復習今天學的知識。
