前端基礎

時間 2019-11-30

標籤前端基礎简体版

原文原文鏈接

web

（World wild web）即全球廣域網，也稱爲萬維網，它是一基於超文本和HTTP的、全球性的、動態交互的、跨平臺的分佈式圖形信息系統。是創建在Internet上的一種網絡服務，爲瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易於訪問的直觀界面，其中的文檔及超級連接將Internet上的信息節點組織成一個互爲關聯的網狀結構。css

1、超文本（Hyper text）超文本是一種用戶接口方式，用以顯示文本及與文本相關的內容。html

2、超媒體（hypermedia）是超文本（hypertext）和多媒體在信息瀏覽環境下的結合。用戶不只能從一個文本跳到另外一個文本，並且能夠激活一段聲音，顯示一個圖形，甚至能夠播放一段動畫。前端

3、超文本傳輸協議（HTTP，HyperText Transfer Protocol)是互聯網上應用最爲普遍的一種網絡協議。web

網頁，是網站中的一個頁面，一般是網頁是構成網站的基本元素，是承載各類網站應用的平臺。通俗的說，網站就是由網頁組成的。
所謂網站(Website)，就是指在因特網上，根據必定的規則，使用HTML等工具製做的用於展現特定內容的相關網頁的集合。簡單地說，網站是一種通信工具，就像布告欄同樣，人們能夠經過網站來發布或收集信息。
構成元素
文字與圖片是構成一個網頁的兩個最基本的元素。你能夠簡單的理解爲：文字，就是網頁的內容，圖片，就是網頁的美觀。除此以外，網頁的元素還包括動畫、音樂、程序等等。
網頁的類型
一般咱們看到的網頁，都是以 htm 或html後綴結尾的文件，俗稱 HTML文件。不一樣的後綴，分別表明不一樣類型的網頁文件，例如以 CGI 、 ASP 、 PHP 、 JSP 甚至其餘更多。
網頁的分類
網頁有多種分類，咱們傳統意義上的分類是動態和靜態的頁面，原則上講靜態頁面多經過網站設計軟件來進行從新設計和更改,相對的比較滯後，固然有網站管理系統，也能夠生成靜態頁面，咱們稱這種靜態頁面爲靜態。動態頁面經過網頁腳本與語言自動處理自動更新的頁面，比方說貼吧，就是經過網站服務器運行程序，自動處理信息，按照流程更新網頁。編程

一個簡單的示例能夠幫助咱們認識web 與http後端

就結果而言 ,使用套接字基礎上使用瀏覽器輸入相應ip/端口後對正在運行的後端 socket對象發送連接請求,而後依據代碼,向申請連接者 .瀏覽器

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面安全

HTTP是一個簡單的請求-響應協議，它一般運行在TCP之上。它指定了客戶端可能發送給服務器什麼樣的消息以及獲得什麼樣的響應。請求和響應消息的頭以ASCII碼形式給出；而消息內容則具備一個相似MIME的格式。這個簡單模型是早期Web成功的有功之臣，由於它使得開發和部署是那麼的直截了當。服務器

超文本標記語言(Hyper Text Markup Language)，標準通用標記語言下的一個應用。HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁製做所必備的。「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。超文本標記語言(或超文本標籤語言)的結構包括「頭」部分和「主體」部分，其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容。websocket

HTTP協議
超文本傳輸協議
規定了瀏覽器與服務端之間消息傳輸的數據格式

四大特性:
1.基於請求響應
2.基於TCP/IP之上的做用於應用層的協議
3.無狀態(服務端沒法保存用戶的狀態,一我的來一千次我都記不住還當你如初見)
4.無鏈接(請求來一次我響應一次以後立馬斷開鏈接二者之間就再也不有任何關係了)
websocket 至關因而HTTP協議的一個大的補丁它支持長鏈接

請求數據格式
請求首行(標識HTTP協議版本,當前請求方式)
請求頭(一大堆k,v鍵值對)
/r/n
請求體(攜帶的是一些敏感信息好比密碼,身份證號...)

響應數據格式
響應首行(標識HTTP協議版本,響應狀態碼)
響應頭(一大堆k,v鍵值對)
/r/n
響應體(返回給瀏覽器頁面的數據一般響應體都是html頁面)

請求方式
1.get請求
朝服務端要資源(好比瀏覽器窗口輸入www.baidu.com)
2.post請求
朝服務端提交數據(好比用戶登陸提交用戶名和密碼)

URL:統一資源定位符(就能夠理解爲網址)

url是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。

HTML

註釋
寫網頁的一套標準

超級文本標記語言文檔製做不是很複雜，但功能強大，支持不一樣數據格式的文件鑲入，這也是萬維網（ WWW）盛行的緣由之一，其主要特色以下：

簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。
可擴展性：超級文本標記語言的普遍應用帶來了增強功能，增長標識符等要求，超級文本標記語言採起子類元素的方式，爲系統擴展帶來保證。
平臺無關性：雖然我的計算機大行其道，但使用 MAC等其餘機器的大有人在，超級文本標記語言可使用在普遍的平臺上，這也是萬維網（WWW）盛行的另外一個緣由。
通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它容許網頁製做人創建文本與圖片相結合的複雜頁面，這些頁面能夠被網上任何其餘人瀏覽到，不管使用的是什麼類型的電腦或瀏覽器。

註釋是代碼之母


通常狀況下 html的註釋都會按照下面的方式書寫

HTML文檔結構
<html>
<head></head>:head內的標籤不是用來展現給用戶看的而是定義一些配置主要是給瀏覽器看的
<body></body>:body內的標籤就是瀏覽器展現給用戶看的內容
</html>

常見實體

顯示結果	描述	實體名稱	實體編號
`	空格
<	小於號	<	<
>	大於號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分	¢	¢
￡	鎊	£	£
￥	日元	¥	¥
€	歐元	€	€
§	小節	§	§
©	版權	©	©
®	註冊商標	®	®
™	商標	™	™
×	乘號	×	×
÷	除號	÷	÷

打開html頁面的兩種方式
1.找到文件路徑選擇瀏覽器打開
2.文本編輯器快捷方式直接打開

標籤的分類1:
1.雙標籤(<h1></h1> <a></a>)
2.單標籤(自閉和標籤 <img/>)

head內經常使用標籤
title用來顯示網頁標題
style用來控制樣式的內部支持寫css代碼
script內部支持寫js代碼也支持導入外界的js文件
link專門用來引入外部的css文件

標籤的分類2
1.塊兒級標籤(獨佔瀏覽器一行)
div p h
1.塊兒級標籤能夠修改長寬
2.塊兒級標籤內部能夠嵌套任意的塊級標籤
可是p標籤雖然是塊兒級標籤可是他不可以其餘塊兒級標籤包括自身
能夠嵌套行內標籤
總結:
只要是塊兒級標籤均可以嵌套行內標籤
p標籤只能嵌套行內其餘塊兒級能夠嵌套任意的塊兒級標籤
2.行內標籤(自身文本多大就佔多大)
span b s i u

div和span一般都是用來構建網頁佈局的

body內經常使用標籤
基本標籤
h標籤:標題標籤
p標籤:段落標籤

符號

經常使用標籤
div
span
p

img
src存放的是圖片的路徑(該路徑能夠是本地的也能夠是網上的)
1.也能夠放url(會自動請求該url獲取相應數據)
2.也能夠直接放圖片的二進制數據會自動轉換成圖片

alt當圖片加載不出來的時候顯示的提示信息

title當鼠標懸浮在圖片上提示的信息

height,width 當你只指定一個參數的時候另一個會等比例縮放

a 常做爲連接

href後面存放url的時候點擊跳轉到該url
若是該連接沒有被點過那麼默認是藍色,只要點過依次以後都是紫色

target 默認是_self當前頁面跳轉
_blank新建頁面跳轉

錨點功能(回到頂部)
href還能夠寫另外一個a標籤的id值,點擊就會跳到id值所對應的a標籤

每個標籤都應該有三個比較重要的屬性
1.id值該值就相似於人的身份證號在用一個html文檔id應該保證惟一不重複
2.class值該值就相似於面向對象裏面的繼承能夠寫多個
3.style(不是必備) 支持在標籤內直接寫css代碼屬於行內樣式優先級最高
補充任何標籤都支持自定義屬性!!!

列表標籤

表格標籤(*****)
<table>
<thead></thead>
<tbody></tbody>
</table>

tr表示一行
th和td都是文本
建議在thead內用th
tbody內用td

colspan表示的水平方向
rowspan表示的豎直方向

表單標籤(******)
可以接收用戶輸入(輸入選擇上傳)並將其發送給後端

標籤分類:

雙標籤：

p段落標籤、h1-h6標題標籤、b/strong字體加粗標籤、i/em字體傾斜標籤、pre換行標籤、small字體變小標籤、bdo文字方向、div/span無心義、Itr左到右/rtl右到左（文本方向的屬性值）、sub下標文本、sup上標文本、a連接標籤

以註冊實例位例講解form表單

單標籤：

br換行符標籤、hr水平線標籤、img圖片標籤、input文本輸入框標籤、link連接標籤

按區域大小分

塊級標籤：

div、p、ul、li、ol、dd、dt、address、dir、table、dl、fieldset、form、menu、noframe、h1-h六、hr、pre

行內標籤：

a、b/strong、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、sub、sup、textarea

行內塊標籤

img、input

控制標籤類型的樣式

display：block塊級/inline行內/inline-block行內塊/none隱藏

給標籤設置基點

vertical-align：top/middle/bottom

action控制數據提交的目的地
1.不寫的狀況下默認提交到當前頁面所在的路徑
2.寫全路徑(https://www.baidu.com)
3.路徑後綴(/index/)

input input標籤使用狀況很是豐富

但一般咱們將其和label配合使用

<label> 標籤爲 input 元素定義標籤（label）。

label 元素不會向用戶呈現任何特殊的樣式。不過，它爲鼠標用戶改善了可用性，由於若是用戶點擊 label 元素內的文本，則會切換到控件自己。

<label> 標籤的 for 屬性應該等於相關元素的 id 元素，以便將它們捆綁起來。

例如

<form>

<input type="radio" name="sex" id="male" />
<br />

<input type="radio" name="sex" id="female" /> </form><label for="male">Male</label><label for="female">Female</label>

type
text:普通文本
password:密文不展現明文
date:日期
submit:觸發提交動做
button:普通按鈕沒有實際意義可是能夠經過js綁定事件實現自定義動做
reset:重置表單內容
radio:單選能夠經過checked控制默認選擇(當屬性值和屬性名相同的狀況下能夠簡寫 checked) checked="checked"
checkbox:多選同上能夠設置默認值
file:獲取用戶上傳的文件

select標籤
默認是單選能夠經過multiple變成多選
若是想默認選擇用selected (selected="selected")

textarea標籤
獲取用戶輸入的大段文本

form表單默認是get請求你須要經過method參數換成post提交
form表單中要想觸發提交動做
只有兩種狀況能夠
1.input標籤type指定成submit
2.直接寫button標籤

獲取用戶輸入(輸入選擇上傳...)的標籤都必須有一個name屬性
這個name屬性就相似於字典的key,而標籤獲取到的用戶寫入的值就相似於字典的value

<input type="text" id="d1" name="username" value="默認值">
name就至關因而字典的key
value就是字典的值
獲取都的用戶輸入都會被放入value屬性中

form表單傳文件的時候須要指定enctype參數

表單元素指的是不一樣類型的 input 元素、複選框、單選按鈕、提交按鈕等等。

什麼時候使用 GET？

您可以使用 GET（默認方法）：

若是表單提交是被動的（好比搜索引擎查詢），而且沒有敏感信息。

當您使用 GET 時，表單數據在頁面地址欄中是可見的：

在傳輸敏感數據的表單時

應該使用 POST：

若是表單正在更新數據，或者包含敏感信息（例如密碼）。

POST 的安全性更加，由於在頁面地址欄中被提交的數據是不可見的。

emmet插件

是一款功能豐富的代碼自動補全插件

Emmet是一款Web前端開發工具Sublime很是有用的插件，使用仿CSS選擇器的語法來生成代碼，大大提升了HTML和CSS代碼編寫的速度。只需按住Tab鍵便可把一個簡寫展開成HTML和CSS的代碼塊防呆措施(Poka-yokes) 防止不可避免的錯誤出現，成爲服務的缺點之程序必須能適時用於顧客及服務做業人員,簡單來講 ,就是將程序的操做限定在必定範圍類,使用戶可以便利的的使用產品,而不用擔憂由於錯誤操做而致使的程序錯誤或崩潰

相關標籤/搜索

每日一句

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