网络编程（1）——使用HTML搭建一个网页
2020-04-26 本文已影响0人
让时间走12138
本节内容
1.html结构介绍
2.显示文字和视频
3.显示输入框和登录按钮
一、html结构介绍
1.html5和html的区别：
html5 写静态的网页：数据不会变化，就是纯粹的展示数据
html 写动态网站：内容在变化
2.html是什么：html就是一个标记性的语言（通过标签来识别），必须成对出现。例如：标签的开始<table>，标签的结束</table>
3.html、css、js各自扮演的角色
html负责数据
css 负责显示的样式
js(JavaScript)需要和用户交互
4.开发html的工具
原始方法：点击右键->新建->文本文档->编写html代码->保存格式为index.html
中级方法：高级的文本编辑器 Sublime Text
高级方法：DW（DreamWeaver）
5.html的结构介绍，以下为一个html的基本结构
<!DOCTYPE html>
<html><!--网页的开始-->
<head><!--头部信息-->
<title> 我的第一个网页</title><!--标题-->
</head>
<body><!--网页的具体内容-->
</body>
</html><!--网页的结束-->
我们将这段代码保存为html文件，然后用浏览器的方式打开，那么网站的名字就会显示在最上面
QQ图片20200426182930.png
6.html的基本使用
显示文本
设置文本颜色、对齐方式、背景图片或者背景颜色
插入链接
插入视频
使用css样式进行左右布局
添加输入框
添加按钮
二、显示文字和视频
1.可以自己在网上自学html语言，推荐一个网站https://www.runoob.com/html/html-headings.html，在这里面分门别类的详细介绍了使用html语言写的各种功能
2.首先可以添加以下网页最顶上显示的文字，然后再设置一下它的文字颜色，背景颜色，还有位置。要在网页上显示的代码都由<body></body>包裹
在<>里面先写一个style=""，然后再分号里面进行我们的操作
text-align: center;说明文字的位置在置顶那一行的中间
color: white;表示文字颜色为白色
background-color: red;表示该段文字所在的背景为红色
<body>
<h1 style="text-align: center;color: white;background-color: red; ">
有钱人的生活就是这么朴实无华且枯燥</h1>
</body>
3.插入背景图片：先将这个图片和我们保存的html文件放在一个文件夹里面，然后在<body>里面将其添加为背景图片，这样才能覆盖整个页面
<body style="background-image: url(青海油菜花田.jpg);">
4.可以通过font-size:50;设置文字大小，还可以通过 font-size:50;设置整体的透明度（0表示全透明，1表示完全不透明）
5.通过<p></p>添加段落
<p style="margin-left: 50;margin-right: 50;color: green;
font-size: 30;">有钱人的生活有时就是一念之间，处事的随意非常朴
实无华，理由十分枯燥却让人快乐。透过老板的视角，我们能真实感
受到有钱与没钱这两个字之间的差距，朱一旦可以让员工为自己扇扇
子，让二流子对自己点头哈腰，让帮助过的人忍不住为自己下跪，让
自己的下属如痴如狂。这很无厘头，很夸张，也很轻描淡写，但这像极了生活。</p>
6.插入一段视频：autoplay="autoplay"表示一打开网页就播放，controls="controls"表示添加一个暂停键，width="500"表示视频的长宽大小，也可以使用百分数。
<video autoplay="autoplay" controls="controls" width="500">
<source src="test.mp4" type="video/mp4">
</video>
三、显示登录框和输入按钮
1.为了让视频和右边的文字对整齐，可以使用<div></div>布局
<div >
<div class="video">
<video autoplay="autoplay" controls="controls" width="70%" style="margin-left:50">
<source src="test.mp4" type="video/mp4">
</video>
</div>
<div class="desc">
<h4>视频描述</h4>
</div>
</div>
然后通过style给它们调整占比等数据
<style type="text/css">
.video{
float: left;
width: 80%;
}
.desc{
float: right;
width: 20%;
}
</style>
2.显示登录和输入按钮
<h4>视频描述</h4>
这是视频的具体描述内容！
<p>
姓名 <input type="text" name="user_name">
</p>
<p>
密码 <input type="password" name="user_password">
</p>
<p>
<input type="submit" name="user_submit"
value="登录" style="background-color: orange;
width: 170;border: orange;color: white">
</p>
 表示一个空格，type="text"表示输入的东西的类型，这个是文本，下面的就是密码，最后面的是按钮。然后还可以设置按钮的宽度和大小。
3.插入链接，使用<a></a>，在前面那个a 里面添加相应网址，中间添加点击的内容
<h4><a href="https://www.baidu.com">点击进入百度网页</a></h4>
完成了以上代码后，可以看看网页显示效果
QQ图片20200426204852.png
欧克儿，以上就是我们今天的全部内容，再见。
另：完整的html代码见下
<!DOCTYPE html>
<html>
<head>
<title> 我的第一个网页</title>
</head>
<style type="text/css">
.video{
float: left;
width: 70%;
}
.desc{
float: right;
width: 30%;
}
</style>
<body style="background-image: url(青海油菜花田.jpg);">
<h1 style="text-align: center;color: white;background-color:
red;font-size:5000; opacity: 0.9">
有钱人的生活就是这么朴实无华且枯燥</h1>
<p style="margin-left: 500;margin-right: 50;color: green; font-
size: 3000">有钱人的生活有时就是一念之间，处事的随意非常朴实
无华，理由十分枯燥却让人快乐。透过老板的视角，我们能真实感受
到有钱与没钱这两个字之间的差距，朱一旦可以让员工为自己扇扇
子，让二流子对自己点头哈腰，让帮助过的人忍不住为自己下跪，让
自己的下属如痴如狂。这很无厘头，很夸张，也很轻描淡写，但这像
极了生活。</p>
<div >
<div class="video">
<video controls="controls" width="70%" style="margin-left:50">
<source src="test.mp4" type="video/mp4">
</video>
</div>
<div class="desc">
<h4><a href="https://www.baidu.com">点击进入百度网页</a></h4>
这是视频的具体描述内容！
<p>
姓名 <input type="text" name="user_name">
</p>
<p>
密码 <input type="password" name="user_password">
</p>
<p>
<input type="submit" name="user_submit"
value="登录" style="background-color: orange;
width: 170;border: orange;color: white">
</p>
</div>
</div>
</body>
</html>
