网络编程（1）——使用HTML搭建一个网页

本节内容

1.html结构介绍

2.显示文字和视频

3.显示输入框和登录按钮

一、html结构介绍

1.html5和html的区别：

• html5 写静态的网页：数据不会变化，就是纯粹的展示数据

• html 写动态网站：内容在变化

2.html是什么：html就是一个标记性的语言（通过标签来识别），必须成对出现。例如：标签的开始，标签的结束

3.html、css、js各自扮演的角色

• html负责数据

• css 负责显示的样式

• js(JavaScript)需要和用户交互

4.开发html的工具

• 原始方法：点击右键->新建->文本文档->编写html代码->保存格式为index.html

• 中级方法：高级的文本编辑器 Sublime Text

• 高级方法：DW（DreamWeaver）

5.html的结构介绍，以下为一个html的基本结构

我们将这段代码保存为html文件，然后用浏览器的方式打开，那么网站的名字就会显示在最上面

QQ图片20200426182930.png

6.html的基本使用

• 显示文本

• 设置文本颜色、对齐方式、背景图片或者背景颜色

• 插入链接

• 插入视频

• 使用css样式进行左右布局

• 添加输入框

• 添加按钮

二、显示文字和视频

1.可以自己在网上自学html语言，推荐一个网站https://www.runoob.com/html/html-headings.html，在这里面分门别类的详细介绍了使用html语言写的各种功能

2.首先可以添加以下网页最顶上显示的文字，然后再设置一下它的文字颜色，背景颜色，还有位置。要在网页上显示的代码都由包裹

• 在<>里面先写一个style=""，然后再分号里面进行我们的操作

• text-align: center;说明文字的位置在置顶那一行的中间

• color: white;表示文字颜色为白色

• background-color: red;表示该段文字所在的背景为红色

 

有钱人的生活就是这么朴实无华且枯燥
 

3.插入背景图片：先将这个图片和我们保存的html文件放在一个文件夹里面，然后在里面将其添加为背景图片，这样才能覆盖整个页面

4.可以通过font-size:50;设置文字大小，还可以通过 font-size:50;设置整体的透明度（0表示全透明，1表示完全不透明）

5.通过

添加段落

有钱人的生活有时就是一念之间，处事的随意非常朴
实无华，理由十分枯燥却让人快乐。透过老板的视角，我们能真实感
受到有钱与没钱这两个字之间的差距，朱一旦可以让员工为自己扇扇
子，让二流子对自己点头哈腰，让帮助过的人忍不住为自己下跪，让
自己的下属如痴如狂。这很无厘头，很夸张，也很轻描淡写，但这像极了生活。
 

6.插入一段视频：autoplay="autoplay"表示一打开网页就播放，controls="controls"表示添加一个暂停键，width="500"表示视频的长宽大小，也可以使用百分数。

三、显示登录框和输入按钮

1.为了让视频和右边的文字对整齐，可以使用

布局

        

          
        
        

            
视频描述
        
      

然后通过style给它们调整占比等数据

2.显示登录和输入按钮

视频描述
            这是视频的具体描述内容！
            

                姓名 
            
            

                密码 
            
            

                
            

 表示一个空格，type="text"表示输入的东西的类型，这个是文本，下面的就是密码，最后面的是按钮。然后还可以设置按钮的宽度和大小。

3.插入链接，使用，在前面那个a 里面添加相应网址，中间添加点击的内容

点击进入百度网页

完成了以上代码后，可以看看网页显示效果

QQ图片20200426204852.png

欧克儿，以上就是我们今天的全部内容，再见。

另：完整的html代码见下

    
        
    
    

    
   

有钱人的生活就是这么朴实无华且枯燥
      
有钱人的生活有时就是一念之间，处事的随意非常朴实
无华，理由十分枯燥却让人快乐。透过老板的视角，我们能真实感受
到有钱与没钱这两个字之间的差距，朱一旦可以让员工为自己扇扇
子，让二流子对自己点头哈腰，让帮助过的人忍不住为自己下跪，让
自己的下属如痴如狂。这很无厘头，很夸张，也很轻描淡写，但这像
极了生活。
 

      

        

          
        
        

            
点击进入百度网页
            这是视频的具体描述内容！
            

                姓名 
            
            

                密码