前端入門

時間 2019-12-09

標籤前端入門简体版

原文原文鏈接

diaHTML初識

△HTML:css

超文本標記語言，是一種用於建立網頁的標記語言，不是編程語言,沒有邏輯
本質上是瀏覽器可識別的規則
咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm（沒有區別）html

網頁文件的擴展名：.html或.htm（沒有區別）前端

咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）python

網頁文件的擴展名：.html或.htm（沒有區別）web

△css：
層疊樣式表是一種用來表現HTML等文件樣式(效果)的計算機語言編程

JavaScript：
簡稱「JS」，是一種屬於網絡的腳本語言
經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果
一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的bootstrap

△jQuery：
jQuery是一個快速、簡潔的JavaScript框架，它封裝JavaScript經常使用的功能代碼後端

△boodstarp(JQ+css):
bootstrap：簡潔、直觀、強悍的前端開發框架
它在jQuery的基礎上進行了更爲個性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。瀏覽器

△B/S (前端/後端)服務器

Web服務的本質：
瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 -->
服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面
瀏覽器內嵌了一個socket客戶端，默認TCP連接

△瀏覽器自帶socket客戶端，本身編寫的服務端也能夠爲瀏覽器服務

from socket import *
jd_server = socket()

jd_server.bind(("",8001))
jd_server.listen(5)
conn,client_add = jd_server.accept()
from_client_msg = conn.recv(1024)
print(from_client_msg.decode())
conn.send("nihao".encode())
conn.close()
jd_server.close()

按照HTTP協議加載瀏覽器能看懂的數據：

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

HTTP/1.1 200 OK:
HTTP/1.1 是一個規範
200 表明請求成功
OK 表示一切正常

conn.send(b"<h1>nihao</h1>")  #用標題包裹數據，更好看一些

標籤通常造成一個結構寫在文件裏，這個文件就是HTML文件

HTTP/1.1 是一個規範

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
conn.send(b"nihao")

pycharm中建立一個html文件（英文名，不要空格）
你會發現，整個結構都直接生成好了,由於無論什麼瀏覽器，文檔結構都是這樣的

html文件能夠在pycharm中就能打開

△本身寫一個服務器
當瀏覽器來連服務器時,把HTML文件發送給瀏覽器

from socket import *

s = socket()
s.bind(("",8881))
s.listen(5)
new_s, addr = s.accept()
data = new_s.recv(1024)
print(data.decode())
new_s.send(b"HTTP/1.1 200 OK\r\n\r\n")

with open("test.html","rb") as f:
    data = f.read()
    new_s.send(data)
new_s.close()
s.close()

HTML文檔結構

△最基本的HTML文檔：

<!DOCTYPE html>     
<html lang="zh-CN">   
<!--這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文爲主-->
<!--若是以英文爲主，就寫成lang='en'，用谷歌之類打開，它會認爲是英文的，自動給翻譯（若是設置了自動翻譯的話）-->
<head> 
  <meta charset="UTF-8">
  <title>標題</title>
</head>
<body> 
</body>
</html>



<!DOCTYPE html>:HTML文件聲明，聲明爲HTML5文檔
<html>、</html>:是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）

<head>、</head>:定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據，配置信息等，是給瀏覽器看的，你看到的是在body標籤裏面寫的

<title>、</title>:定義了網頁標題，在瀏覽器標題欄顯示
<body>、</body>:之間的文本是可見的網頁主體內容

注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼
有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">

△瀏覽器頁面調試工具 F12
Elements（元素）：對瀏覽器看來，全部標籤都是元素
標籤對文本進行了標記，因此HTML叫超文本標記語言
瀏覽器有識別標籤的機制

HTML標籤格式

標籤分類定義

塊級/內聯:判斷依據爲顯示的web中獨佔至少一行的body中的標籤

塊級標籤(行外標籤,獨佔一行):

塊級標籤可以包含內聯標籤,和某些塊級標

<h1>一級標題</h1>        標題標籤 
<br>     換行標籤
<hr>     換行橫線標籤

<p>              段落標籤
    第一章內容
</p>


<div style="color:green">  </div>        換行文檔分區標籤


<ul>           無序列表標籤
     <li>茶</li>    列表內容標籤
</ul>


<ol type="I" start="2">  有序列表標籤
    li>梅</li>             
</ol>


<dl>                 無標識標籤
    <dt>河北省</dt>    
    <dd>邯鄲</dd>       
</dl>


<table border="1">   表格線框寬度      表格標籤    
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

內聯標籤(行內標籤,不獨佔一行):
不能包含塊級標籤

<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標籤
<a href="">跳到底部</a>  超連接標籤
<span style="color:blue">藍色</span>  文檔標籤

全封閉標籤:

<title>網頭</title>     網頭標籤
<h1>一級標題</h1>        標題標籤 
<a href="">跳到底部</a>  超連接標籤

<p>個人車是 <span style="color:blue">藍色</span> 的。</p>   段落標籤  文檔分區標籤
<div style="color:green">  </div>        換行文檔分區標籤


<p>              段落標籤
    第一章內容
</p>



<ul>           無序列表標籤
     <li>茶</li>
</ul>


<ol type="I" start="2">  有序列表標籤
    li>梅</li>             
</ol>


<dl>                 無標識標籤
    <dt>河北省</dt>    
    <dd>邯鄲</dd>       
</dl>



<table border="1">   表格線框寬度      表格標籤    
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

自封閉標籤:

<meta>   元信息標籤
<link rel="icon" href="圖標文件路徑">  網頭圖標標籤
<br>     換行標籤
<hr>     換行橫線標籤
<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"> 圖片標籤

head內經常使用標籤（瞭解）：

`<meta />` 標籤元信息

用處:標籤位於文檔的頭部,提供的信息是用戶不可見的,是一個自封閉標籤,全封閉標籤,可提供有關頁面的元信息（meta-information）

有一下關鍵字:

charset=

ontent="3"

定義文檔字符編碼和更新頻度的描述:

<meta charset="utf-8"   content="3"/> 
                          三秒刷新
<meta http-equiv="Refresh"  content="2;url=https://www.baidu.com"/>
                                           自動跳轉

http-equiv=

瀏覽器內核（渲染引擎）：渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息
渲染引擎是兼容性問題出現的根本緣由，大部分渲染效果差很少

<meta http-equiv="Refresh">

<meta http-equiv="X-UA-Compatible" cotent="IE=edge">
IE比較個色

name="keyword" content="搜索關鍵字"

"keywords" 是一個常常被用到的名稱。它爲文檔定義了一組關鍵字
某些搜索引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類

<meta name="keywod" content="古風，武俠，悟道"/>

name="description" content="網站描述信息"

設置網站描述信息，用於在搜索引擎搜索時，顯示網站基本描述信息

<meta name="description" content="這是一個古風網站"/>

觸屏縮放

name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>

device-width：設備寬度
- initial-scale=1.0，初始顯示縮放比例。
- minimum-scale=0.5，最小縮放比例。
- maximum-scale=1.0，最大縮放比例。
- user-scalable=yes，是否支持可縮放比例（觸屏縮放）

`<title>網頭</title>` 標籤

link 標籤網頭圖標

<link rel="icon" href="圖標文件路徑"/>

body內經常使用標籤

`<h1> <h1>`標籤標題

<body>
    hehe  #body中沒有包裹的就是普通文本顯示
    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題,大聖</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>
</body>

br標籤換行

<h1>123</h1>
<br>
<h2>4<br>5</h2>
 
 123
 
 4
 5

注意點:直接回車、空格等空白內容都被認爲是一個空格

hr 標籤一行橫線

<h2>1<hr>2</h2>

1
----------------------------------
2

form標籤表單

使用 <form> 標籤能夠經過瀏覽器向服務器傳輸數據
<form action="http://127.0.0.1:8001">
</form>
action屬性: 指定提交路徑,提交到哪裏去

<form action="http://192.168.3.18:8001">
用戶名：<input type="text" name="uname">   <!--uname:輸入的內容 -->
密碼: <input type="password" name="pw">     <!--pw:輸入的內容 -->
    <input type="submit" value="登錄">
    <!--submit 生成提交按鈕-->
</form>

input標籤輸入框

用戶名：<input type="text"> 
<!--普通文本輸入框-->

密碼: <input type="password">
<!--密文輸入框-->


<input type="reset">        <!--生成重置按鈕，清空輸入內容-->

<input type="button" value="按鈕">     <!--普通按鈕，不會觸發提交-->

 <input type="date">、                  <!--時間日期輸入框-->

<input type="file">        <!--文件輸入框，瞭解便可後面講，須要特殊設置-->

<input type="number">                 <!--純數字輸入框-->

textarea標籤多行文本輸入框

多用於評論

<textarea name="攜帶用戶輸入"></textarea>

select標籤下拉框

單選
<select name="city" id="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">惠州</option>
</select>

多選
ctrl鍵多選
    <select name="citys" id="citys" multiple="multiple">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">惠州</option>
    </select>

a 標籤超連接

錨點：頁面內容進行跳轉（在本身的頁面跳）

<body>

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>

<h1 id="i1">第一章 XXX</h1>
<p>   #段落標籤
    第一章內容
</p>

不加href屬性,就是普通文本顯示

<a>古風</a>

加上href屬性,不加值文字有顏色效果,還有下劃線,而且點擊後會刷新當前的html頁面

<a href="# ">跳到底部</a>

加上href屬性,而且加上值

<a href="http://www.baidu.com" target="_self" >baidu</a>

跳轉對應網址的頁面
未訪問以前是藍色的字體顏色
訪問以後是紫色的字體顏色
target屬性:
_self:在當前標籤頁打開 href屬性值的那個網址
_blank:在新的標籤頁打開 href屬性值的那個網址

p標籤段落

<p>  
    第一章內容
</p>

span標籤文檔分區

<p>個人車是 <span style="color:blue">藍色</span> 的。</p>
若是不對 div和span 應用樣式，那麼 span 元素中的文本與其餘文本不會任何視覺上的差別

div標籤換行文檔分區

div是一個塊級元素。這意味着它的內容自動地開始一個新行
能夠把文檔分割爲獨立的、不一樣的部分

<div style="color:green">  #字體爲綠色
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<div style="background: red">內容</div> #背景爲綠色

ul標籤無序列表

興趣愛好:
    <ul>               #<ul>做爲無序列表的聲明
        <li>茶</li>
        <li>酒</li>
        <li>棋</li>
    </ul>

ol標籤有序列表

君子:
    <ol type="I" start="2">     #<ol> 標籤訂義有序列表,有序列表的各個列表項有前後順序，
        <li>梅</li>             #因此會使用數字進行標識
        <li>蘭</li>
        <li>竹</li>
        <li>菊</li>
    </ol>

dl標籤無標識表(縮進)

<dl>
        <dt>河北省</dt>    表頭
        <dd>邯鄲</dd>      內容 
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>

河北省
    邯鄲
    石家莊
山西省
    太原
    平遙

tble標籤表格

<table border="1">   表格線框寬度
  <tr> 定義行   第一行
    <th>Month</th>  表頭加粗的內容
    <th>Savings</th>
  </tr>
  <tr>  第二行
    <td>January</td>  表內容
    <td>$100</td>
  </tr>
</table>

表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元

border:規定表格邊框的寬度


寫法二：
第二種寫法:
<table>

<thead>
    <!--表頭-->
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    </thead>
    
    <tbody>
    <!--表內容-->
    <tr>
        <td>1</td>
        <td>xiaoming</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>xiaoli</td>
        <td>18</td>
    </tr>
    </tbody>
   
</table>

img標籤圖片

<img width="200" height="200" src="timg.jpg" alt="稍等片刻" title="李孝利"/>

src屬性:圖片路徑  必須寫
alt屬性:圖片加載失敗或者正在加載時提示的內容
title屬性:鼠標懸浮時顯示的內容

# 不經常使用,經過css來控制
width:設置寬度
height:設置高度

css

層疊樣式表,做用是爲標籤加效果

<div style="background: red">123</div>

基本選擇器

元素選擇器

標籤名稱{css屬性:值}

div{width:100px;}

id選擇器

id{}

html代碼:
<div id="d1">

    </div>

css寫法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

類選擇器

.class1{屬性:值}

html代碼:
<div id="d1" class="c1">
    baby
</div>

<div id="d2" class="c2">
   熱巴
</div>

<div id="d3" class="c1">
    唐藝昕
</div>


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

屬性選擇器

html代碼:
<div id="d5" class="c1" xx="ss">
    baby
</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;
}

後代選擇器

html代碼:

div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" class="c1">
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>

div a{    color: yellow;}

組合選擇器

div,a{ color: yellow;}

html代碼:
div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" class="c1">
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
    
    
css代碼: 
注意:a標籤字體顏色設置,必須找到a標籤才能設置
    #d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

css樣式引入方式

head標籤中引入

<style>
    /* 選擇器{css屬性名稱:屬性值;css屬性名稱:屬性值;} */
    div{                               用了基本選擇器中的元素選擇器
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
給全部div標籤加樣式

外部文件引入

（工做中經常使用的）

建立一個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>

multiple="multiple"?

css樣式相關

display屬性

改變標籤屬性:
inline: 將塊級標籤變成了內聯標籤
block:將內聯標籤變成塊級標籤
inline-block: 同時具有內聯標籤和塊級標籤的屬性,也就是不獨佔一行,可是能夠設置高度寬度
none: 設置標籤隱藏（瞭解，後面用）

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;*/  同時具有內聯標籤和塊級標籤的屬性
         }

顏色設置

英文單詞:red;
十六進制: #ff746d;
rgb: rgb(155, 255, 236);

背景顏色透明度: rgba(255, 0, 0,0.3);      
單純的就是顏色透明度

標籤透明度（例如背景圖片透明度）: opacity: 0.3;         
0到1的數字,這是整個標籤的透明度

盒子模型

標籤佔空間總大小=margin+border+padding+content

html代碼

<div>
    窗前明月光
</div>

css寫法

div{ width: 200px;                           內容寬度
     height: 100px;                          內容高度
     background-color: rgba(255, 0, 0,0.3);  內容背景顏色
     background-image: url("fage.png");      內容背景圖片 url寫圖片路徑,也能夠是網絡地址路徑
     margin: 10px 15px              外邊距:上下 左右  距離無顏色
     border: 4px solid red;         邊框:大小 樣式 顏色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  內邊距       
}

margin 外邊距

距離其餘標籤或者本身父級標籤的距離

html代碼

<div>
        窗前明月光
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css寫法

.c1{
        background-color: red;
        height: 100px;
        width: 100px;
     /*margin: 10px 15px;*/     上下10，左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

border 邊框

html代碼

<div>
    窗前明月光
</div>

css寫法

邊框簡寫方式,對四個邊框進行設置
<div style="border:1px solid red; ">           /*寬度/樣式/顏色*/
窗前明月光
</div>                                         

order-left: 1px solid green;  單對左邊邊框設置   
border-top: 1px solid blue;   上邊邊框       


細寫
border-width: 5px;  邊框寬度
border-style: dashed;  邊框樣式
border-color: aqua; 邊框顏色

padding 內邊距

內容和邊框之間的距離

html寫法

<div style="padding:1px solid red; ">   /*寬度/樣式/顏色*/
窗前明月光
</div>

padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 內容部分

背景

html代碼

<div>
    窗前明月光
</div>

css寫法

background-color: #ff746d;            背景顏色
background-color: rgba(255, 0, 0,0.3);背景顏色
background-image: url("fage.png");   url寫圖片路徑,也能夠是網絡地址路徑

background-repeat: no-repeat;        不重複
background-repeat: repeat-y;         y方向上
background-position: right top;      右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px;     離左邊邊多少,離右邊多少  通常經過css設置

簡寫方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;

高度寬度

css寫法:
    div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{                        ！！！行級標籤不能設置高度寬度
        height: 100px;
        width: 100px;
        background-color: green;
    }

能夠設置百分比，會按照父級標籤的高度寬度來計算

<div class="c1"><div class="c2">234</div></div>

css寫法:
        .c1{
        width: 200px;
        height: 100px;
        background: red;
    }
        .c2{
            width: 50%;
            height: 50%;
            background: gold;
        }

字體相關

html代碼

<div>
    窗前明月光
</div>

css寫法

font-size: 50px;    /* 默認字體大小是16px */
color:green;        /* 字體顏色 */

font-family:        '楷體', '宋體';      瀏覽器若是不支持第一個選第二個。。。

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

字體對齊

html代碼:
    <div>
        窗前明月光
    </div>

css寫法

div{  height: 100px;
      width:200px;
      background-color: yellow;
      text-align: center;  水平居中  
      line-height: 100px;  和height高度相同,標籤文本垂直居中
        /*垂直居中*/ 
      text-align: right;右對齊