前端知識

来源:https://www.cnblogs.com/wylshkjj/archive/2020/06/28/13205728.html
-Advertisement-
Play Games

前端知識 web服務的本質: 基於B/S網路架構,瀏覽器和服務端的交互 瀏覽器發送請求,服務端接收請求,服務端響應請求,服務端吧HTML文件內容發給瀏覽器,瀏覽器渲染頁面 發送請求通過OSI網路七層模型:應用層,表示層,會話層,傳輸層,網路層,數據鏈路層,物理層 一、HTML介紹 html是超文本標 ...


前端知識

web服務的本質:

基於B/S網路架構,瀏覽器和服務端的交互

瀏覽器發送請求,服務端接收請求,服務端響應請求,服務端吧HTML文件內容發給瀏覽器,瀏覽器渲染頁面

發送請求通過OSI網路七層模型:應用層,表示層,會話層,傳輸層,網路層,數據鏈路層,物理層

一、HTML介紹

html是超文本標記語言,用於創建網頁的標記語言

本質是瀏覽器能識別的規則,不過容易出現瀏覽器的相容問題導致渲染效果不同

網頁文件的拓展名:.html或htm

註:html不是編程語言,只是一種標記語言;標記語言是不存在邏輯的

1、html文檔結構

html文件的創建:

​ 在pycharm中創建html文件,找到html文件直接創建

​ 在其它編譯軟體中創建html文件,和在pycharm中類似

​ 手動創建就先先創建一個.txt文件,然後把文件尾碼名改成.html文件,然後在文件中寫入固定格式

1.<!DOCTYPE html>聲明文件為html5文檔
2.<html></html>是文檔的開始標記和結束標記。是HTML頁面的根元素,在它們之間是文檔的頭部(head)和主體(body)
3.<head></head>定義了HTML文檔的開頭部分,他們之間的內容不會在瀏覽器的視窗直接顯示。包含了文檔的元(meta)數據,配置信息等,是給瀏覽器的用的,用戶看到的直接效果是body裡面寫的。
4.<title></title>定義了網頁標題,在瀏覽器的標題欄顯示。
5.<body></body>之間的文本是可見的網頁主體內容

註:在中文網頁需要使用<meta charset="utf-8">聲明編碼,否則會出現亂碼。有些網站的預設編碼是gbk,所以把utf-8改成gbk即可

2、html標簽格式

html的標簽格式是嚴格封閉的

html的標簽是成對出現的
全封閉標簽
    標簽的開始是尖括弧<>加關鍵字
    標簽的結尾是尖括弧和斜杠</>加關鍵字
    例:<p></p>、<div></div>
    這種標簽叫全封閉標簽
自封閉標簽
	只有單獨的前面部分
	例:<img>、<hr>、<br>
全封閉標簽還有另一種寫法,就是在前半部分的>前面加一個斜杠
	例:<span />
3、html常用標簽
<title></title>:定義網頁標題
<style></style>:定義內部樣式
<script></script>:引入js代碼或引入外部js文件
<link />:引入外部樣式文件
<meta/>:定義網頁原信息

meta標簽的三個參數

name="keywords":搜索關鍵字

name="description":顯示欄後面的介紹內容

http-equiv="refresh" content="2;URL=https://www.oldboyedu.com":在2秒後頁面自動跳轉到百度

<meta name="keywords" content="30期">
<meta name="description" content="體彩">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
4、瀏覽器的內核

  瀏覽器內核:

    瀏覽器 內核

    IE trident

    chrome blink

​ 火狐 gecko

    Safari webkit

註:瀏覽器內核是瀏覽器採用的渲染引擎,宣言引擎決定了瀏覽器如何顯示網頁內容以及頁面的格式信息。渲染引擎也是相容性問題出現的根本原因

二、body內常用的標簽

(1)塊級標簽(行外標簽):塊級標簽單獨用頁面一快空間,單獨占用一行空間可設置寬度和高度

(2)內聯標簽(行內標簽):內聯標簽不會單獨占用一塊空間,不能單獨占用一行空間無法設置寬度和高度

內聯標簽
    <b>加粗</b>
    <i>斜體</i>
    <u>下劃線</u>
    <s>刪除</s>
塊級標簽
    <p>段落標簽</p>
    <h1>標題1</h1>
    <h2>標題2</h2>
    <h3>標題3</h3>
    <h4>標題4</h4>
    <h5>標題5</h5>
    <h6>標題6</h6>
    <br>換行
    <hr>線

(3)特殊字元

空格 &nbsp;
> &gt;
< &lt;
& &amp;
&yen;
版權標識符() &copy;
註冊(®) &reg;

(4)div標簽:div標簽是塊級標簽,通過塊級標簽可以對塊以極快內的元素進行樣式的修改與設定

(5)span標簽:span標簽是內聯標簽,可進行針對段落的微調與設定

但要註意div與span使用時的嵌套關係,div內可多層嵌套使用div,也可使用span,但是span內不能嵌套span或者div等塊級標簽

(6)img標簽:超鏈接標簽;所謂的超鏈接是指從一個網頁指向一個目標的連接關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程式。

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
_blank:表示以新頁面打開鏈接
_self:表示在當前標簽頁中打開目標網頁

(7)列表

​ 無序列表

​ type屬性:

​ disc(實心圓點,預設值)

​ circle(空心圓圈)

​ square(實心方塊)

​ none(無樣式)

​ 有序列表

​ type屬性:start是從數字幾開始

​ 1數字列表,預設值

​ A 大寫字母

​ a 小寫字母

​ Ⅰ大寫羅馬

​ ⅰ小寫羅馬

無序列表
<ul type="disc">
	<li></li>
</ul>
有序列表
<ol>
	<li></li>
</ol>

標題列表
<dl>
	<dt></dt>
	<dd></dd>
</dl>

(8)表格

​ 表格是一個二維數據空間,一個表格由若幹行組成,一個行又有若幹單元格組成,單元格裡可以包含文字、列表、圖案、表單、數字元號、預置文本和其它的表格等內容。
​ 表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式(即按行和列組織)的數據。
​ 表格的基本結構:

<table border='1'>
  <thead> #標題部分
      <tr> #一行
        <th></th> #一個單元格,自動加粗
      </tr>
  </thead>
  <tbody> #內容部分
  <tr> #一行
    <td></td> #一個單元格
  </tr>
  </tbody>
</table>

​ 屬性:

​ border: 表格邊框.

​ cellpadding: 內邊距 (內邊框和內容的距離)

​ cellspacing: 外邊距.(內外邊框的距離)

​ width: 像素 百分比.(最好通過css來設置長寬)

​ rowspan: 單元格豎跨多少行

​ colspan: 單元格橫跨多少列(即合併單元格)

(9)input標簽

type屬性 表現形式 代碼
text 單行輸入文本 <input type=text" />
password 密碼輸入框(不顯示明文) <input type="password" />
date 日期輸入框 <input type="date" />
checkbox 覆選框 <input type="checkbox" checked="checked" name='x' />
radio 單選框 <input type="radio" name='x' />
submit 提交按鈕 <input type="submit" value="提交" /> #發送瀏覽器上輸入標簽中的內容,配合form表單使用,頁面會刷新
reset 重置按鈕 <input type="reset" value="重置" /> #頁面不會刷新,將所有輸入的內容清空
button 普通按鈕 <input type="button" value="普通按鈕" />
hidden 隱藏輸入框 <input type="hidden" />
file 文本選擇框 <input type="file" /> (等學了form表單之後再學這個)

​ 屬性說明:

​ name:表單提交時的“鍵”,註意和id的區別

​ value:表單提交時對應項的值

​ type="button", "reset", "submit"時,為按鈕上顯示的文本年內容

​ type="text","password","hidden"時,為輸入框的初始值

​ type="checkbox", "radio", "file",為輸入相關聯的值

​ checked:radio和checkbox預設被選中的項

​ readonly:text和password設置只讀

​ disabled:所有input均適用

(10)select標簽

<select name="city" id="city">
	<option value="1"></option>
    <option selected="selected" value="2"></option> #預設選中,當屬性和值相同時,可以簡寫一個selected就行了

</select>

​ 屬性說明:

​ multiple:布爾屬性,設置後為多選下拉框,否則預設單選

​ disabled:禁用

​ selected:預設選中該項

​ value:定義提交時的選項值

(11)label標簽

  定義:

​ 說明:label 元素不會向用戶呈現任何特殊效果。但是點擊label標簽裡面的文本,那麼和他關聯的input標簽就獲得了游標,讓你輸入內容;<label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。

<label for="username">用戶名</label>  # 只能是id屬性
<input type="text" id="username" name="username">

(12)textarea多行文本

​ 可設置是否允許手動拉伸:resize: none;

<textarea name="memo" id="memo" cols="30" rows="10">
</textarea>

​ 屬性說明:

​ name:名稱

​ rows:行數 #相當於文本框高度設置

​ cols:列數 #相當於文本框長度設置

​ disabled:禁用

​ maxlength:顯示字元數,例如:maxlength='10' 最多輸入十個字元

(13)form表單

<from action="http://127.0.0.1:8000" method=""></form>
action屬性:指定提交路徑
method屬性:提交方式
form表單會將form表單裡面的數據全部提交到指定路徑

1、css

​ css的文件的引入方式

# 第一種引入方式
head標簽中引入
head標簽中引入
<style>
    /* 選擇器{css屬性名稱:屬性值;css屬性名稱:屬性值;} */
    div{
        /* css註釋 */
        width: 200px;
        height: 200px;
        background-color: red;
    }

</style>

# 第二種引入方式
外部文件引入  工作中常用的
創建一個css文件,stylesheet文件,比如test.css文件
裡面寫上以下代碼
div{
    /* css註釋 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用這些css樣式的html文件的head標簽中寫上下麵的內容
<link rel="stylesheet" href="test.css"> href對應的是文件路徑

# 第三種引入方式
內聯樣式:
<div style="background-color: red;height: 100px;width: 100px;"></div>

2、css選擇器

基本選擇器:元素選擇器、id選擇器、類選擇器

屬性選擇器、後代選擇器、組合選擇器(通過逗號連接)

(1)元素選擇器

div{width:100px;}
標簽名稱{css屬性:值}

(2)id選擇器

html示例代碼:
	<div id="d1">
    </div>
css寫法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

(3)類選擇器

html代碼:
<div id="d1" class="c1">
    李晨浩
</div>

<div id="d2" class="c2">
    李海煜
</div>

<div id="d3" class="c1">
    張建志
</div>

css寫法
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

(4)屬性選擇器

HTML代碼
<div id="d1" class="c1" xx="ss">
    李晨浩
</div>

<div id="d2" class="c2" xx="kk">
    李海煜
</div>

css寫法:
[xx]{  屬性查找
    background-color: green;
    width: 100px;
    height: 200px;
}

[xx='ss']{ 屬性帶屬性值查找
    background-color: green;
    width: 100px;
    height: 200px;
}

(5)後代選擇器

html代碼示例:
	<div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        張建志
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>
css代碼:
    div a{	
        color:orange; /* 字體顏色 */
    }

(6)組合選擇器(通過逗號連接)

html代碼
    <div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
        <span>
            <span>xxx222</span>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        <a href="">張建志</a>
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>

    <span>官人,你好!</span>
    
css代碼: 註意:a標簽字體顏色設置,必須找到a標簽才能設置
	#d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

3、css樣式

高度寬度、字體、字體格式、顏色、背景、邊框、盒子模型、內邊距、外邊距、display屬性、浮動

(1)高度寬度

html代碼:
	<div>
        div1
    </div>
    <span>span1</span>
css寫法:
	div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{
        height: 100px;
        width: 100px;
        background-color: green;
    }
    
width: 50%; 寬度高度可以設置百分比,會按照父級標簽的高度寬度來計算

(2)字體

html代碼:
    <div>
        窗前明月光,地上鞋三雙!
    </div>
	
css寫法:
	font-size: 20px; /* 預設字體大小是16px */
    color:green; /* 字體顏色 */
    /*font-family: '楷體','宋體'; !* 字體格式 *!*/

	font-weight: 400;  /* 字體粗細 100-900,預設是400 */

(3)字體格式

html代碼:
    <div>
        隻身赴宴雞毛裝!!!
    </div>

css代碼:
	height: 100px;
    width: 200px;
    background-color: yellow;
    text-align: center;  水平居中
    /*text-align: right;*/
    line-height: 100px;  和height高度相同,標簽文本垂直居中

(4)顏色

三種方式:
	英文單詞:red;
	十六進位: #ff746d;
	rgb: rgb(155, 255, 236);
	帶透明度的: rgba(255, 0, 0,0.3);  單純的就是顏色透明度
	標簽透明度:opacity: 0.3;  0到1的數字,這是整個標簽的透明度

(5)背景

html代碼:
    <div class="c1">

    </div>

css寫法:
    /*background-color: #ff746d;*/
    /*background-color: rgb(155, 255, 236);*/
    /*background-image: url("fage.png");*/ url寫圖片路徑,也可以是網路地址路徑
    /*background-repeat: no-repeat;*/
    /*background-repeat: repeat-y;*/
    /*background-position: right top;*/
    /*background-position: 100px 50px;*/
    /* 簡寫方式 */
    background: #ff0000 url("fage.png") no-repeat right bottom;

(6)邊框

html代碼
    <div>
        都是同學裝雞毛!
    </div>
css寫法:

    /* 邊框簡寫方式,對四個邊框進行設置 */
    /*border:1px solid red;*/
    /*border-left: 1px solid green;*/
    /*border-top: 1px solid blue;*/
    border-width: 5px;  邊框寬度
    border-style: dashed;  邊框樣式
    border-color: aqua; 邊框顏色

(7)盒子模型

占用空間大小
margin: 外邊距  距離其他標簽或者自己父級標簽的距離
padding: 內邊距  內容和邊框之間的距離
border: 邊框  
content: 內容部分  設置的width和height

(8)內邊距

html代碼:
	<div>
        英姿颯爽雄雞裝,飛上枝頭變鳳凰!
    </div>

css寫法:
    width: 200px;
    height: 100px;
    border: 4px solid red;
    /*padding: 6px 8px;*/
    /*padding: 4px 2px 6px 8px;*/
    /*padding-left: 20px;*/
    /*padding-top: 20px;*/
    /*padding-right: 20px;*/
    /*padding-bottom: 20px;*/

(9)外邊距

html代碼:
    <div>
        英姿颯爽雄雞裝,飛上枝頭變鳳凰!
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css寫法:
    .c1{
        background-color: red;
        height: 100px;
        width: 100px;
        /*margin-left: -1000px;*/
        /*margin: 10px 15px;*/
    }

    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

(10)display屬性

示例:
html代碼:
    <span>
        我是span標簽
    </span>
    <div class="c1">
        鵝鵝鵝,曲項向天歌!

    </div>

    <div class="c2">
        拔毛燒開水,鐵鍋燉大鵝!
    </div>
css寫法:
	span{
            /*display: block;*/
        }
    .c1{
        background-color: red;
        height: 100px;
        width: 100px;
        /*display: inline;*/
        /*display: inline-block;*/
        display: none;
    }
    .c2{
        background-color: green;
        height: 100px;
        width: 100px;
    }

display的幾個值:
inline: 將塊級標簽變成了內聯標簽
block:將內聯標簽變成塊級標簽
inline-block: 同時具備內聯標簽和塊級標簽的屬性,也就是不獨占一行,但是可以設置高度寬度
none: 設置標簽隱藏

(11)浮動

浮動的元素,不獨占一行,並且可以設置高度寬度

html代碼
	<div class="cc">
        <!--<div>吟詩作對</div>-->
        <div class="c1"></div>
        <div class="c2"></div>

    </div>

    <div class="c3"></div>
	
css樣式
		body{
            margin: 0;
        }
        .c1{
            background-color: red;
            height: 100px;
            width: 200px;
            float: left;
        }
        .c2{
            background-color: brown;
            height: 100px;
            width: 200px;
            float: right;
        }
        .c3{
            background-color: pink;
            height: 100px;
            width: 100%;
        }

浮動,造成父級標簽塌陷的問題,沒有高度了

解決父級標簽塌陷問題:

方式1:
	給父級標簽加高度
方式2:
	清除浮動:clear屬性
方式3: 常用
	.clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
	
html代碼:
    <div class="cc clearfix">
        <!--<div>吟詩作對</div>-->
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>
方式4: 給父級標簽css屬性設置overfloat:hidden

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前兩天文章說了海南IT互聯網相關數據提到公司數量很多,但招聘的崗位很少的問題,但由於只是簡單截圖了相關招聘數據做就吐槽招聘數據少。可能數據維度太少、沒做橫向對比,導致看上去不太不太科學、客觀。但該篇文章的結論是否有問題呢? 公司增、稅收增、人員不增的說法是否站得住腳,這篇文章將主流招聘網站的數據全部 ...
  • 本文更新於2019-06-29,使用MySQL 5.7,操作系統為Deepin 15.4。 數值函數 函數 作用 ABS(x) 絕對值 CEIL(x) 向上取整 FLOOR(x) 向下取整 MOD(x, y) 取餘,等同x%y RAND() [0, 1)區間的隨機數 ROUND(x[, n]) 四舍 ...
  • 第一種形式: decode(條件,值1,返回值1,值2,返回值2,…值n,返回值n,預設值) ​ 實現數據的彙總: 源數據: ​ 彙總後的數據:使用decode函數處理數據後對dname欄位進行彙總。 ​ 第二種形式: decode(欄位或欄位的運算,值1,值2,值3);當欄位或欄位的運算的值等於值 ...
  • 1、coalesce函數的用法 1.1 取出第一個不為空的列的數據。 ​ 1.2 coalesce函數裡面的數據類型,必須全部都跟第一列的數據類型一致。 ​ 原因為第一個參數為數值,第二個參數為字元串;可通過轉換數據類型來使用,如下圖: ​ ...
  • 一、隱式Intent 1.如何配置 AndroidManifest.xml配置intent-filter內容 響應actioncom.example.activitytest.ACTION_START並且響應category才可以 在FirstActivity.java中進行設置Intent. 每個 ...
  • 前言: 這是許多矽谷公司用來衡量iOS候選人資歷水平的一系列問題。 這些問題涉及iOS開發的各個方面,旨在觸及對平臺的廣泛理解。 畢竟,高級開發人員應該能夠從頭到尾地發佈完整的iOS產品。 這絕不是一個詳盡的列表,但它可以幫助你為即將到來的技術iOS面試做準備。 目錄 你使用的最新版本的iOS是什麼 ...
  • Charles安裝 HTTP抓包 HTTPS抓包 1. Charles安裝 官網下載安裝Charles: https://www.charlesproxy.com/download/ 2. HTTP抓包 (1)查看電腦IP地址 (2)設置手機HTTP代理 手機連上電腦,點擊“設置->無線區域網->連 ...
  • 最近在這裡總結一些iOS開發中的小技巧,能大大方便我們的開發。 UITableView的Group樣式下頂部空白處理 //分組列表頭部空白處理 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0.1)]; self.t ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...