day 42

時間 2019-11-12

標籤 day 简体版

原文原文鏈接

前端

什麼是前端

任何與用戶直接打交道的操做界面均可以稱之爲前端html

eg：電腦界面手機界面平板界面前端

什麼是後端

真正的幕後操做者python

web服務的本質

請求響應程序員

瀏覽器輸入網址回車發生了哪些事web

1.朝着指定的服務器地址發送請求後端

2.服務端接收請求並處理瀏覽器

3.返回相應的響應服務器

4.瀏覽器接收並渲染出好看的頁面給用戶看websocket

請求方式

1.get請求

朝服務器要資源

eg:敲www.baidu.com

2.port請求

朝服務器提交數據

eg:登陸功能

HTTP協議

超文本傳輸協議

規定了服務端與瀏覽器數據傳輸的數據格式

1.四大特性

1.基於TCP/IP做用與應用層之上的協議

2.基於請求響應

請求對應響應

3.無狀態

不保存客戶端狀態

不管來多少次都當你如初見

cookie session

4.無鏈接

長鏈接 websocket 聊天室

2.數據格式

請求格式

請求首行（請求方式協議版本）

請求頭（一大堆k:v鍵值對）

請求體（敏感信息密碼身份證號）

響應格式

響應首行（請求方式協議版本）

響應頭（一大堆k:v鍵值對）

響應體（給用戶看的數據）

響應狀態碼

用數字來表示一串文字須要表達的意思

1XX：服務端已經成功接收到你的請求正在處理你能夠繼續提交其餘數據

2XX：服務端成功響應了相應的數據（200）

3XX：重定向

4XX：（404請求資源不存在）（403你當前不符合某一些條件沒法正常訪問）

5XX：服務器內部錯誤（500）

HTML

超文本標記語言，是一種標識性的語言，包括一系列標籤。

文件的後綴名

文件的後綴名是給人看的，對於計算機來講，全都是二進制；之因此不一樣的後綴名有不一樣的功能，是程序員人爲定製的

HTML的註釋

==註釋是代碼之母==

<!--單行註釋-->

<!--

多行註釋1

多行註釋2

多行註釋3

-->

在搭建頁面的時候，一般會利用註釋來劃分區域
<!--導航條開始-->

<!--導航條結束-->
<!--側邊欄開始-->

<!--側邊欄結束-->

HTML的文檔結構

<html>
        <head></head>  不是給人看的 給瀏覽器看的
        <body></body>  body內的代碼纔是給人看的
    </html>

<h1>
    hello world
</h1>

<a href="https://www.baidu.com">click me</a>

<img src=src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566230133&di=590ab12707a1d494be7ec784801076d8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201207%2F04%2F20120704211148_3UWwd.jpeg"/>

標籤的分類1

1.雙標籤（h1,a）

2.自閉合標籤（img）

head內經常使用標籤

title   定義網頁標題
style   內部支持寫css代碼
link    引入外部css樣式文件
script  內部能夠直接寫js代碼，也能夠引入外部js文件
meta    定義網頁源信息
    <meta name="keywords" content="meta總結，html meta,meta屬性，meta跳轉">
    <meta name="description" content="老男孩python學院">

瀏覽器上所看到的花裏胡哨的頁面，背後都是HTML代碼而已

body內經常使用標籤

h1-h6   標題標籤
p       段落標籤    一個p就是一行內容
s       刪除線
b       加粗
u       下劃線
i       斜體
br      換行
hr      一條分割線

body內特殊符號

&nbsp;  空格
&amp；   &
&yen;   ￥
&gt;    >
&lt;    <
&copy;  ©
&reg;   ®

標籤的分類2

1.塊兒級標籤

h1-h六、p、br、hr、div

獨佔一行

塊兒級標籤內能夠嵌套其餘塊兒級的行內標籤
注意：p標籤雖然是塊兒級標籤，可是他的內部不能嵌套任何塊兒級標籤，只能嵌套行內標籤(***)

2.行內標籤

s 、i、u、b、span

內部文本多大，就佔多大

行內不能嵌套行內和塊兒級標籤

********************************************************
標籤一般應該有兩個屬性
id  就相似於身份證號，每個標籤，都應該有id值，而且在同一個html文檔中，標籤的id不能重複
class   類屬性，有點相似於面向對象的繼承，class = 'c1 c2 c3' 。這個標籤就會擁有c1 c2 c3的全部樣式
********************************************************

body內重要的標籤

div     一塊區域，能夠往這塊兒區域內填寫任何內容
span
div和span是前期構建網頁的基本骨架

a 連接標籤

1.跳轉功能

href參數控制跳轉的地址

這個地址若是在你的機器上若是沒有被點擊過那麼默認是藍色

只要點過一次以後，以後顏色都是紫色

<!--<a href="https://www.sogo.com">點我點我</a>-->

a標籤默認是在當前窗口跳轉
你能夠指定，新建窗口打開
target = "_self"
target = "_blank"

2.錨點功能

給a標籤設置id值
而後再href中書寫對應的a標籤id值，點擊便可跳轉到對應的位置
<a href="" id>文章開頭</a>
<div style="background_color: red;height: 1000px"></div>
<div style="background_color: green;height: 1000px"></div> 
<div style="background_color: orange;height: 1000px"></div> 

<a href="" id>文章中部</a>
<div style="background_color: black;height: 1000px"></div> 
<div style="background_color: green;height: 1000px"></div> 
<div style="background_color: orange;height: 1000px"></div> 

<a href="#a1">回到頂部</a>
<a href="#a2">回到中部</a>

img 圖片標籤

src

1.圖片地址，網上的地址也能夠是你的本地圖片地址

2.url(網址) 自動超該網址發送get請求，獲取圖片資源

alt

當圖片加載不出來的時候，展現的提示信息

title

鼠標懸浮上去展現的提示信息

width和height

這兩個參數，只需設置一個，就能夠默認是等比例縮放

兩個全都調整的話，圖片就會失真

列表標籤

無序列表(***************)

ul
    li

type參數
    disc(實心圓點，默認值)
    circle(空心圓圈)
    square(實心方塊)
    none(無樣式)

有序列表(瞭解)

ol
    li

type參數
    1   數字列表，默認值
    A   大寫字母
    a   小寫字母
    I   大寫羅馬
    i   小寫羅馬

標題列表(瞭解)

dl  
    dt  小標題
    dd  小章節

表格標籤

展現數據    通常都用到表格標籤
<table>
    <thead>
        <tr>
            <th>username</th>
            <th>password</th>
            <th>hobby</th>
            <th>is delete</th>
        </tr>
    </thead>
</table>

<tbody>
    <tr>
        <td>tank</td>
        <td>886</td>
        <td>love</td>
        <td>DBJ</td>
    </tr>
</tbody>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。