前端基礎(chǔ)

前端基礎(chǔ)學(xué)習(xí)

學(xué)習(xí)方法:聽-->寫-->分享

學(xué)習(xí)目標(biāo): 基礎(chǔ)靜態(tài)代碼網(wǎng)頁布局-->首頁/注冊/列表頁面

HTML5標(biāo)簽 CSS3樣式

HTML

HTML:超文本標(biāo)記語言 (Hyper Text Markup Language) 用來描述網(wǎng)頁的一種語言 網(wǎng)頁元素

網(wǎng)頁 網(wǎng)站是網(wǎng)頁的集合 網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素 俗稱HTML文件

常用瀏覽器

Web標(biāo)準(zhǔn) 結(jié)構(gòu)(html) 表現(xiàn)(css) 行為(javascript)

瀏覽器內(nèi)核

W3C 萬維網(wǎng)聯(lián)盟

語法規(guī)范

標(biāo)簽:

  • 文檔聲明標(biāo)簽 <!DOCTYPE html> 聲明使用的html版本

  • 語言種類標(biāo)簽 <html lang ="zh-CN"> 給瀏覽器識別用 不影響顯示內(nèi)容

  • 標(biāo)題標(biāo)簽 <h1>這里是 </h1> head的縮寫 1-6級標(biāo)題啊標(biāo)簽

  • 段落標(biāo)簽 <p>

  • 換行標(biāo)簽 單標(biāo)簽 break 相比于段落標(biāo)簽沒有上下行間距 <br />

  • 文本格式化標(biāo)簽 加粗String 傾斜em 刪除線 del 下劃線 ins

  • 布局標(biāo)簽 div 獨占一行 division span一行可以放多個 可以看成一個盒子

  • 注釋標(biāo)簽

  • 特殊字符

    • 空格 &nbsp
    • 大于號 &lt
    • 小于號 &gt

  • 超鏈接 <a href="跳轉(zhuǎn)目標(biāo)" target="_self">描述文字<a />

    target 打開窗口方式 _blank新建窗口 _self當(dāng)前窗口打開 (默認(rèn))

    外部鏈接 內(nèi)部鏈接 空連接(#) 下載鏈接(文件或壓縮包) 網(wǎng)頁元素鏈接(圖片 音頻 視頻) 錨點鏈接(快速定位到網(wǎng)頁的位置 1.herf="#自己命名" 2.給目標(biāo)標(biāo)簽添加id="自己命名")

  • 圖像標(biāo)簽

    <h4>圖像標(biāo)簽:img 寬高之設(shè)置一個屬相 另一個等比例伸縮 src必須先寫 其他屬相無先后順序 中間空格分開</h4>

     <img src="人間不值得.jpg" alt="替換文本 當(dāng)圖片無法顯示時展示" title="提示文本 title" width="500" height="500" boder="10"/>

  • 表格標(biāo)簽

    主要用于顯示\展示數(shù)據(jù) <table> <rt><td>

    • table 表格

    • tr 行 table row

    • td 單元格 table data

    • th 表頭單元格

    • thead 頭部區(qū)域

    • tbody 主題區(qū)域

  • 列表標(biāo)簽

    無序列表

    有序列表

    自定義列表

  • 表單標(biāo)簽

    收集用戶信息

    表單域 <form> 把范圍內(nèi)的信息提交給后臺

    表單控件

    提示信息

目錄文件加

根目錄

路徑

  • 相對路徑 同級路徑 下一級路徑(文件夾名/) 上一級路徑(../)
  • 絕對路徑 很少用 自己電腦中的圖片和網(wǎng)上的圖片

CSS層疊樣式表

CSS簡介

網(wǎng)頁的美容師 解決html本身的局限性

由html專注去做結(jié)構(gòu)呈現(xiàn),實現(xiàn)結(jié)構(gòu)(html)與樣式(css)相分離

編碼規(guī)范

選擇器{樣式}

給誰用(用什么樣式)

p{

color:red;

font-size:12px

}

CSS基礎(chǔ)選擇器

  • 標(biāo)簽選擇器

    使用標(biāo)簽名做選擇器

  • 類選擇器

    樣式點定義 結(jié)構(gòu)類調(diào)用 一個或多個 開發(fā)最常用

    多類名調(diào)用 相同的抽取

  • id選擇器

    樣式#號定義,結(jié)構(gòu)id調(diào)用.只能調(diào)用一次

    經(jīng)常與js搭配使用

  • 通配符選擇器

    星號 影響頁面中所有的標(biāo)簽和元素

CSS字體屬性

font-family:

font-size: 16px

font-weight: 700-->400等同于normal,700等同于bold;

font-style:italicc(傾斜) normal(修改成正常字體)

復(fù)合屬性 需要嚴(yán)格遵守順序 font: font-style font-weight font-size/line-height font-family -->size和family不能省略

font: italic 700 16px 'Microsoft yahei'

CSS文本屬性

  • 文本顏色: text-color 預(yù)定義顏色值 十六進(jìn)制 rgb

  • 對齊文本 text-align center right left 水平對齊

  • 裝飾文本 text-decoration none(去掉超鏈接的下劃線) underline line-through

  • 文本縮進(jìn) text-indent: 2em; 段落的首行縮進(jìn)

  • 行間距 line-height (上間距+文字本身高度+下間距) 行高 文字垂直居中 : 文字行高等于盒子高度

CSS的引入方式

根據(jù)書寫的位置(或者引入方式)分為三大類

  • 行內(nèi)樣式表(行內(nèi)式)

    修改一些簡單的少的樣式 直接在標(biāo)簽內(nèi)聲明使用 權(quán)重中 完全無分離(結(jié)構(gòu)與樣式)

  • 內(nèi)部樣式表(嵌入式)

    style 理論上可以放在頁面的所有地方,但習(xí)慣上放在head 部分分離

  • 外部樣式表(引入式)

    單獨使用css文件 使用最多

    <link rel="stylesheet" herf="style.css">

Chrome調(diào)試工具

箭頭選擇網(wǎng)頁中的元素 -- >左面html 右面style --> 檢出出沒有使用到的代碼

emmet語法

快速生成標(biāo)簽/樣式的語法 vocode自帶集成

  • 標(biāo)簽名+tab鍵 快速生成標(biāo)簽

  • 標(biāo)簽名*要批量生成的標(biāo)簽個數(shù)+tab鍵 批量生成標(biāo)簽

  • 標(biāo)簽名>變簽名 父子關(guān)系快速生成

  • 標(biāo)簽名+標(biāo)簽名 兄弟關(guān)系快速生成

  • 標(biāo)簽名.類名(#id名) 快速生成帶樣式的標(biāo)簽 默認(rèn)成生成div標(biāo)簽可以省略標(biāo)簽名

  • $自增符號 批量生成時使用

  • {文字}生成帶文字的標(biāo)簽

  • 樣式元素書寫 w100等效于 width:100px 首字母+賦值

  • 快速格式話代碼 格式化文檔 修改成保存頁面的時候自動個格式化代碼

    1.文件-->首選項-->設(shè)置;2.搜索emmet.include;3.settings.json[用戶]中添加代碼 "editor.formatOnType":true,"editor.formatOnSave":true

css復(fù)合選擇器

  • 后代選擇器

    元素1 元素2 {樣式聲明} 元素2生效元素1必須是父類 可以是任意基礎(chǔ)選擇器的組合

  • 子選擇器

    元素1>元素2(樣式聲明) 親兒子選擇器

  • 并集選擇器

    元素1,元素2{樣式聲明} 集體聲明 可以任意選擇器組合 語法規(guī)范:豎著寫

  • 偽類選擇器的使用規(guī)范

    用于向默寫選擇器添加特殊的效果,比如給鏈接天界特殊效果,或選擇第n個元素

    :表示 :frist-child(第一個子元素)

    • 鏈接 a:link{}--沒有點擊過的鏈接 a:visited{}--已經(jīng)點擊過的鏈接 a:hover{}(光標(biāo)當(dāng)前指向) a:active{}--鼠標(biāo)按下時的

      開發(fā)常用a{}和a:hover{}結(jié)合使用

      注意聲明順序 鏈接中的樣式需要單獨指定

    • 獲取焦點 :focus

元素的顯示模式與相互轉(zhuǎn)換

元素以什么方式進(jìn)行顯示

  • 塊元素

    • 獨占一行
    • 寬高間距都可以定義控制
    • 默認(rèn)和父類寬相同
    • 注意 文字元素內(nèi)不要再放塊元素 p h

  • 行內(nèi)元素

    • 一行可以顯示多個
    • 寬高無法直接賦值
    • 默認(rèn)的寬度是本身文本的寬度
    • 行內(nèi)元素只能放文本元素或其他行內(nèi)元素

  • 行內(nèi)塊元素

    • 一行上可以放多個元素 中間會有間隔
    • 默認(rèn)寬度是文本本身
    • 可以設(shè)置寬高
    • <img/> <input/> <td>

  • 顯示模式轉(zhuǎn)換

    a標(biāo)簽增加觸發(fā)范圍---->display:block 使用最多

    display:inline display:inline-block

背景圖片的設(shè)置方式

  • 背景顏色 background-color:transparent|color;

  • 背景圖片 background-image:url();

    超大或裝飾性圖片或logo 優(yōu)點是便于控制位置

    • background-repeat 背景平鋪
    • background-position:方位名詞|
css的三大特性
注釋
PS

snipaste 工具 截圖置頂取色

javascript

基礎(chǔ)知識

編程語言 (標(biāo)記語言html)

腳本語言就是不用編譯 逐行解釋

作用:表單動態(tài)驗證 網(wǎng)頁特效 服務(wù)端開發(fā)(node.js) 桌面程序(electron) app(cordova) 硬件物聯(lián)網(wǎng)(Ruff) 游戲開發(fā)(cocos2d-js)

組成部分

  • ECMSScript JavaScript語法

  • DOM 網(wǎng)頁文檔對象模型 API 對元素操作

  • BOM 瀏覽器對象模型 API 對瀏覽器窗口操作

常用輸出語句
  • alert(msg) 瀏覽器彈出警示框
  • console.log(msg) 瀏覽器控制臺打印輸出信息
  • prompt(info) 瀏覽器彈出輸入框,用戶可以輸入
變量

變量的本質(zhì)是在內(nèi)存中申請一塊用來存放數(shù)據(jù)的空間.

變量的聲明 var age; variable

變量的賦值 age = 10;

變量的初始化 var age = 10;

聲明多個變量 ,號分割

undfined 未定義的

邏輯性:怎么實現(xiàn)目標(biāo)的思路-->先怎么做,再怎么做

數(shù)據(jù)類型

不同的數(shù)據(jù)所占用的存儲空間不同

javaScript是一種弱類型或者動態(tài)語言(變量的數(shù)據(jù)類型會隨著賦值的改變而改變) 聲明的時候不用聲明變量類項,程序運行的時候根據(jù)賦值自動確認(rèn)

  • 簡單數(shù)據(jù)類項

    • Number 整數(shù)和小數(shù) Mumber.MAX_VALUE infinity(無窮大) NAN(not a number 非數(shù)字) 方法isNAN()

    • String 單引號和雙引號都可以 為了區(qū)別于html中的雙引號js中建議使用單引號 嵌套的時候外單內(nèi)雙

      轉(zhuǎn)義符 \n(換行)

      長度 str.length 拼接:+

    • Boolean 參與加法運算的時候true當(dāng)0來看 false1

    • Undined 未定義數(shù)據(jù)類型

    • null

  • 復(fù)雜數(shù)據(jù)類項 object

獲取數(shù)據(jù)類項:typeof 變量

控制臺的顏色區(qū)分?jǐn)?shù)據(jù)類項

字面量 根據(jù)數(shù)據(jù)的書寫方式知道數(shù)據(jù)的數(shù)據(jù)類型

  • 數(shù)據(jù)類項的轉(zhuǎn)換
    • 裝換成字符串 三種 常用+''方式(隱式轉(zhuǎn)換)
    • 轉(zhuǎn)換成數(shù)字形 四種 常用兩種 parseInt(變量) parseInt(120px)可以去除單位 parseFloat(變量)
    • 轉(zhuǎn)換成Boolean Boolean() 代表空和未定義的值會變成false,剩余的都轉(zhuǎn)換成true
運算符

操作符

  • 算數(shù)運算符 不能直接判斷浮點數(shù)是否相等

    表達(dá)式(數(shù)字\運算符\變量組成的式子) 返回值

  • 遞增和遞減運算符 ++num(前置遞增) 變量(后置遞增) (先返回原值后自增) num--;

  • 比較運算符

    == 運算符判斷是否相等的時候會默認(rèn)轉(zhuǎn)換數(shù)據(jù)類項后再比較

    === 全等判斷 要求值和數(shù)據(jù)類項都相同

  • 邏輯運算符

    布爾值參與的邏輯運算

    && || !

    短路運算 非布爾值參與 邏輯中斷

    空或者否定為false 其他為true

    • && 表達(dá)式1&&表達(dá)式2-->如果表示式1為真 則返回表達(dá)式2, 如果表達(dá)式1為加假 則返回表達(dá)式2
    • || 表達(dá)式1||biaods2-->如果表達(dá)式1結(jié)果為真 則發(fā)揮表達(dá)式1, 如果表達(dá)式1結(jié)果為假 則發(fā)揮表達(dá)式2

  • 賦值運算符

    = += -= *= /= %=

運算符的優(yōu)先級 按權(quán)重排列

  1. 小括號
  2. 一元運算符 ++ -- !
  3. 算數(shù)運算符 先*?%后+-
  4. 關(guān)系運算符 < > >= <=
  5. 相等運算符 == != === !==
  6. 邏輯運算符 先&&后||
  7. 賦值運算符 =
  8. 逗號運算法 ,

流程控制

控制代碼按照什么結(jié)構(gòu)順序來執(zhí)行

順序結(jié)構(gòu)
分支結(jié)構(gòu)

  1. if語句

    三元表達(dá)式 條件表達(dá)式?表達(dá)式1:表達(dá)式2

  3. switch語句

  4. 循環(huán)

    for 常用

    while

    do while

    \
    數(shù)組

    一組數(shù)據(jù)的集合 存在單個變量中

    數(shù)組的索引號從0開始

    訪問

    有點意思

    遍歷

    修改length長度 擴容

    追加

    篩選

循環(huán)結(jié)構(gòu)

編譯語言(java 先編譯再運行 做好整桌菜后再吃) 解釋語言(逐行解釋執(zhí)行 吃火鍋)

AJAX

無刷新的和服務(wù)器進(jìn)行交互

DOM

dom是一種文檔對象模型，同時也是用于html編程的接口，通過dom來操作頁面中的元素

HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。

換言之，HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。

Vue.js

漸進(jìn)式j(luò)avascript框架

核心是使用簡單的模板語法聲明式的方式把數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)

使用：標(biāo)簽引入或者cli快速生成復(fù)雜項目

可以在輸出臺直接修改屬性值頁面也會立即響應(yīng)

Vue基礎(chǔ)

  • JavaScript框架

  • 簡化Dom操作

  • 響應(yīng)式數(shù)據(jù)驅(qū)動

.vue文件 -->vue的單文件組件

常用指令 attribute

指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute

  • v-bind <span v-bind:title="message"> 將這個元素節(jié)點的 title attribute 和 Vue 實例的 messageproperty 保持一致”。
  • v-if <p v-if="seen"> 通過控制屬性seen達(dá)到控制元素p的顯示或隱藏
  • v-for 循環(huán) <li v-for="todo in todos"> {{ todo.text }} </li> 將數(shù)組todos中的text中的數(shù)據(jù)列表展示
  • v-on <button v-on:click="ReverseMessage">reverse</button> 按鈕的點擊事件調(diào)用ReverseMessage方法 this.message = this.message.split('').reverse().join('')
  • v-model 表單輸入和應(yīng)用狀態(tài)之間的雙向綁定 <input type="text" v-model="message">

vue的組件概念

一個可以復(fù)用的擁有預(yù)定義選項的vue實例

眾多獨立的組件構(gòu)成一個大的應(yīng)用

小型 獨立 可復(fù)用

非常類似于自定義元素

數(shù)據(jù)與方法 實例property

除了數(shù)據(jù) property，Vue 實例還暴露了一些有用的實例 property 與方法。它們都有前綴 $，以便與用戶定義的 property 區(qū)分開來

生命周期

  • crtated 在實例創(chuàng)建完成后被立即調(diào)用
  • beforeMount 在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用
  • mounted 實例被掛載后調(diào)用
  • beforeUpdate 數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。
  • updated 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。
  • activiated 被 keep-alive 緩存的組件激活時調(diào)用。
  • deactivated 被 keep-alive 緩存的組件停用時調(diào)用。
  • beforeDestroy 實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。
  • destoryed 實例銷毀后調(diào)用。該鉤子被調(diào)用后，對應(yīng) Vue 實例的所有指令都被解綁，所有的事件監(jiān)聽器被移除，所有的子實例也都被銷毀。
  • errorCaptured 2.5.0+ 新增 當(dāng)捕獲一個來自子孫組件的錯誤時被調(diào)用。此鉤子會收到三個參數(shù)：錯誤對象、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播。

本地應(yīng)用

網(wǎng)絡(luò)應(yīng)用

綜合應(yīng)用

1.標(biāo)題語法: # 注意空格分隔

段落語法: 使用空白行將文字分隔 不要使用空格縮進(jìn)

換行語法: 結(jié)尾空格 結(jié)尾處兩個或以上空格加回車鍵 等效于html的

強調(diào)語法: 粗體Bold(前后加兩個星) 斜體Italic(前后加一個星)

引用語法:段落前加>

this is example.

那這個考研干部?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容