Java网络 Day01 2020-04-21

最新推荐文章于 2023-10-30 23:24:16 发布

独饮敌敌畏丶

最新推荐文章于 2023-10-30 23:24:16 发布

阅读量78

点赞数

分类专栏： Java笔记文章标签：网络 python css html web

本文链接：https://blog.csdn.net/afdafvdaa/article/details/109804886

版权

Java笔记专栏收录该内容

59 篇文章 0 订阅

订阅专栏

内容

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>
                            姓名&nbsp<input type="text" name="user_name"><!--一个nbsp是一个空格-->
                        </p>
                        <p>
                            密码&nbsp<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>
                            姓名&nbsp<input type="text" name="user_name"><!--一个nbsp是一个空格-->
                        </p>
                        <p>
                            密码&nbsp<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>