探针一号的Web基础学习笔记

最新推荐文章于 2024-05-13 16:48:33 发布

ProbeN1

最新推荐文章于 2024-05-13 16:48:33 发布

阅读量247

点赞数 1

分类专栏：学习笔记文章标签： html5 css web

本文链接：https://blog.csdn.net/m0_51792282/article/details/110730646

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web基础学习笔记

文章目录

Web基础学习笔记

1.html

超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言（markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

但是有个地方很有意思，就是它不是编程语言，而是一种标记语言，也就是说不进行逻辑运算。
甚至可以在记事本上写，就很强。
在这里插入图片描述
附一段练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Second</title>
    <!-- <style>
        h1{
            color:purple;
        }
    </style> -->
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <!-- <h1 style="color:purple">Hello World</h1> -->
    <div class="container">
        <h1>Hello World !</h1>
        <div class="box1">  
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. At alias doloremque sed impedit laborum assumenda, nihil ullam dolores eius fuga cupiditate dignissimos quia fugiat molestiae aliquam eaque obcaecati minus voluptatem inventore aperiam neque harum ipsum consectetur! Veritatis laboriosam vero atque unde dolores error commodi officia voluptatem est quos asperiores distinctio expedita mollitia modi, a totam sequi, et tempora fugiat laudantium enim odio molestiae repellendus. Beatae ab consectetur delectus quasi, facilis quidem repellendus quibusdam velit? Voluptatem explicabo nobis laborum ad iusto, vitae quasi porro enim. Ipsum cumque adipisci, labore delectus nisi vitae mollitia beatae quas quisquam veniam qui unde ipsam sit.
                
            </p>
            <button>click me </button>
        </div>

        <div class="list">
            <ul>
                <li><a href="https://www.baidu.com" target="blank">第一点</a></li>
                <li><a href="https://www.baidu.com" target="blank">第二点</a></li>
                <li><a href="https://www.baidu.com" target="blank">第三点</a></li>
                <li><a href="https://www.baidu.com" target="blank">第四点</a></li>
                <li><a href="https://www.baidu.com" target="blank">第五点</a></li>
                
            </ul>
        </div>
       
        <div class="block">
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa doloribus enim dignissimos, beatae repudiandae minima ad nostrum reiciendis natus ea veritatis officia ipsum? Nam aut ullam in suscipit repellendus vero!
            </p>
        </div>
        <div class="block">
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa doloribus enim dignissimos, beatae repudiandae minima ad nostrum reiciendis natus ea veritatis officia ipsum? Nam aut ullam in suscipit repellendus vero!
            </p>
        </div>
        <div class="block">
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa doloribus enim dignissimos, beatae repudiandae minima ad nostrum reiciendis natus ea veritatis officia ipsum? Nam aut ullam in suscipit repellendus vero!
            </p>
        </div>

        <div class="clearfix"></div>

        <div id="main-block">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate esse qui eum! Cupiditate ad harum quam a, aspernatur eum nemo provident deleniti placeat praesentium laborum est quos corporis, amet quisquam.
        </div>
        <div id="side-block">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam maxime aliquid, quam commodi necessitatibus accusantium sapiente aliquam voluptate culpa ratione est nam assumenda quidem, deleniti nihil. Repellendus porro dolorem quis!
        </div>
        <div class="clearfix"></div>

        <div class="position">
            <h2>
                芜湖！
            </h2>
        </div>

        <button id="fixed">click me </button>


    </div>
<div style="margin-top: 1000px;"></div>
</body>
</html>

2.css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

配合html，让你的网页酷炫起来。
同样也没有逻辑运算。
有些像计算机里的文科。
感觉需要一些艺术细胞。
附一段练习，很基础（笑哭）。

.clearfix{
    clear: both;
}

body{
    background-color: #f4f4f4;
}

button{
    padding: 10px 10px;
}

button:hover{
    background-color: darkorchid;
}

button:active{
    background-color: white;
}

a{
    color: black;
    text-decoration: none;
}

a:hover{
    color: tomato;
}

.box1{
    background-color: cornsilk;
    color: rgb(19, 1, 1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;

    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-left: 10px;
    
    border: 5px dotted #cccccc;
    border-radius: 35px;

    padding: 20px 20px;
    /* border: 5px grey; */
}

.container{
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
}
.container h1{
    text-align: center;
    border: 5px rgb(255, 0, 0) solid;
    position: sticky;


}
.list li{
    list-style: square;
    
}

.block{
    float: left;
    width: 33.3%;
    padding: 10px 10px;
    border: 1px solid ;
    box-sizing: border-box;
}

#main-block{
    float: left;
    width: 70%;
    border: 1px solid ;
    box-sizing: border-box;

}

#side-block{
    float: right;
    width: 30%;
    border: 1px solid ;
    box-sizing: border-box;
}

.position{
    width: 300px;
    height: 100px;
    border: 1px solid black ;

}

#fixed{
    position: fixed;
    right: 10%;
    bottom: 10%;
}

然后是它们俩合在一起的成果
在这里插入图片描述

3.网络

互联网是如何工作的

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

4.http

超文本传输协议(HTTP)是用于从万维网服务器传输超文本到本地浏览器的传送协议。超文本传输协议(HTTP)是面向事务的（Transaction-oriented），应用层协议规定了在浏览器和服务器之间的请求和响应的格式和规则，它是万维网上能够可靠交换文件（包括文本、声音、图像等各种多媒体文件）的重要基础。

有两个阶段
request和response

自制一个request
在这里插入图片描述
request的动词
其中GET和POST是重点

一些response的状态
没错，我们熟悉的也最不想看到的404就在这里面

5.Web服务器

什么是Web服务器
在这里插入图片描述
常用的Web服务器

Apache   可以运行在Windows，Linux，Mac
 Nginx   Linux、Unix
 IIS     Internet Information Services， Windows

Apache
一个著名的开源组织

Apache HTTP Server
上文的Web服务器

6.对上文http内容的一些补充

先上图
在这里插入图片描述
在浏览器按下F12打开调出开发人员工具
在Network选项中，可以看到http的请求和响应。
嗯，就这个，挺神奇的。

ProbeN1

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
探针一号的Web基础学习笔记

Web基础学习笔记1.html超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言（markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。但是有个地方很有意思，就是它不是编程语言，而是一种标记语言，也就是说不进行逻辑运算。甚至可以在记事本上写，就很强。附一段练习<!DOCTYPE html>&l
复制链接

扫一扫