Web基礎學習筆記

ProbeN1發表於2020-12-06
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的請求和響應。
嗯，就這個，挺神奇的。

相關文章