内容
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 href="http://www.baidu.com">点击进入百度网页</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 href="http://www.baidu.com">点击进入百度网页</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 href="http://www.baidu.com">点击进入百度网页</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这一块我暂时先不求多，不求高大上。虽然很多知识很简单，但是只是看起来简单，还是不会敲。所以明天打算再自己设计一个网页，从而能够复习今天学的知识。
