2. 程式人生 > >Web前端幻術（持續更新）

Web前端幻術（持續更新）

阿新 • • 發佈：2018-12-01

title: 前端法術
tags: 前端,Html!][1],Css,JavaScript
grammar_cjkRuby: true
---

跳轉到文章結尾
前端被我稱為幻術，這篇文章還是待完善的。其他我有空會寫。

目錄:

目錄還沒寫，有空會寫。

Web幻術

  • 作業系統:Windows10

    編譯器：sublime

    常用操作：
  • 新增資料夾到當前介面 Project>Add Folder to Project
  • 開啟資料夾到新的介面 File>Open Folder
  • 從Sublime中移除 右鍵>Remove Folder from Project
  • 顯示或開啟控制檯 Ctrl+`
  • 開啟命令面板 Tools > Command Palette/Ctrl+Shift+P
  • sublime建立h5 !+Tab/html:5+Tab
  • sublime建立xthml html:xt+Tab

  • 安裝外掛：在命令面板中輸入install,然後輸入外掛名稱

推薦書單：《HTML佈局之路》

前端說的就是網頁的前端

  • 前端工程師是新興職業
  • 最初的撥號上網，連線簡單的網頁
  • 網頁從最初的頁面顯示已經發展到應用程式，技術含量越來越大。職位由美工演變成了UI設計師和前端工程師。
  • 互動效果，處理資料，頁面改口為介面
  • 技術更新特別快
  • 前端三大塊
    1. HTML：頁面結構
    2. CSS：頁面表現：元素大小、顏色、位置、隱藏或顯示、部分動畫效果
    3. JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能

HTMl

  • 單標籤與雙標籤
  • 標籤的巢狀
  • 學習html語言就是學習標籤的用法

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，超文字指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。

  • 文件宣告：頂格寫
<!DOCTYPE html>
  • meta宣告：宣告，編碼方式，快取，關鍵詞(位於頭部標籤內)
<meta charset="UTF-8">
  • lang的en與zh-CN文件語言宣告,可以不寫，主要用於統計
<!--<html lang="en">-->
<html lang="zh-CN">
  • Ctrl+S儲存是一個好習慣
  • 不論大廠還是小廠，檔案就是工程師的產出物

H5(html)與XHTML1.0

  • 兩者的文件宣告和編碼宣告不同，H5比xhtml更精簡，而且向下相容，
  • H5新增了更多標籤

html文件規範

xhtml制定了文件的編寫規範，html5可部分遵守，也可全部遵守，看開發要求。

  1. 所有的標籤必須小寫
  2. 所有的屬性必須用雙引號括起來
  3. 所有標籤必須閉合
  4. img必須要加alt屬性(對圖片的描述)

註釋

  • 上線的時候，把註釋中無意義的東西刪掉，包括沒用的空格刪掉，這對於網路傳輸是有意義的。
  • html中的註釋：
<!--我是註釋-->

html標題與段落

  • h標籤與p標籤均是雙標籤
  • 搜尋引擎會使用標題將網頁的結構和內容(根據網頁的排版和優化)編制索引，所以網頁上使用標題是很重要的。
  • <h1>用作主標題（最重要的），其後是<h2>（次重要的），再其次是 <h3>，以此類推最多至<h6>。
  • p標籤不會自動換行

修飾標籤，div標籤與span標籤

  • <br />是單標籤：換行
  • &nbsp;與&emsp;空格實體和縮排實體
  • 網頁中寫"<"或是">"會被轉義，所以寫做"&gt;“與”&lt;“
  • <span></span>行內標籤，沒有具體語義，表示一行內的一小段內容，在我看來span標籤是div的兒子，但是兩者沒有可替代性。
  • <div></div>標籤是塊級標籤，是最常用的標籤之一。表示一塊內容，沒有具體語義。
  • 語義化標籤：
    1. em標籤 行內元素，表示語氣中的強調詞
    2. i標籤 行內元素，原本沒有語義，w3c強加了語義，表示專業詞彙
    3. b標籤 行內元素，原本沒有語義，w3c強加了語義，表示文件中的關鍵字或者產品名
    4. strong標籤 行內元素，表示非常重要的段落內容
      語義化的標籤是方便所搜引擎能認識這些標籤，理解文件結構，方便網站的收錄、被搜尋。

圖片新增、超連結、絕對路徑與相對路徑

  • 圖片新增的img標籤是單標籤，行內標籤src與alt我們約定必填
  • a標籤中的html檔案絕對路徑前，加上"file:///"或者"\"("/"也可以)就可以訪問，title屬性是標籤的提示，
    • 空連結的兩種寫法：herf="#"號是空連結，作用是連線到當前頁面頂部。
    • 第二種寫法:herf="JavaScript:;"這表示告訴js什麼也不做
    • 錨點跳轉，也叫頁面內部跳轉。就是herf指定一個標籤的id，比如herf="#title01".
    • target屬性的預設值是在當前視窗開啟頁面target="_self",修改為在新的視窗開啟頁面：target="_blank"
  • 絕對位置是相對於磁碟的根目錄去尋找的位置，絕對路徑的相容性不好，就是遷移不好。
  • 相對位置是相對於當前資料夾的位置去尋找的位置，相對路徑遷移性比較好
  • 超文字連結"a"是雙標籤，行內標籤，支援巢狀。

列表

  • dl>(dt+dd)*3 生成自定義列表
  • ol>li*3 生成有序列表
  • ul>li*3 生成無序列表

html表格

  • 曾作為主流佈局方法應用在網頁上
  • table>((tr>th3)+(tr>td3))生成兩行三列的表格
  • table是表格,tr是行，th是表頭,td是普通單元格:巢狀關係是:table>tr>th/td
  • table常用屬性：
    1. border 定義表格的邊框
    2. cellpadding 定義單元格內內容與邊框的距離（內邊距）
    3. cellspacing 定義單元格與單元格之間的距離(外邊距)
    4. align 設定單元格中內容的水平對齊方式,設定值有：left | center | right
    5. valign 設定單元格中內容的垂直對齊方式 top | middle | bottom
    6. colspan 設定單元格水平合併
    7. rowspan 設定單元格垂直合併

舊版table佈局方式

  • 製作網頁是根據UI設計師的圖紙來參照製作的，而不是憑空想出來的。

html表單

  • 表單用於蒐集不同型別的使用者輸入，表單由不同型別的標籤組成，實現一個特定功能的表單區域（比如：註冊），首先應該用<form>標籤來定義表單區域整體，在此標籤中再使用不同的表單控制元件來實現不同型別的資訊輸入.
  • form定義表單區域
  • label標籤定義表單控制元件的文字標註，提高使用者體驗的細節
    • for屬性：for="某標籤的id"，用於操作啟用標籤，比如Inpu輸入框，選擇框等
  • input設定資訊輸入框
  • textarea定義多行文字輸入（大文字）
  • select>option定義下拉列表選擇框

  • post提交方式資料不會暴露在URL中

    input的屬性

  • input標籤是一個單標籤，行內標籤。也是表單中最常用的控制元件，它擁有很多屬性，為表單提供了豐富的控制元件。
    • text文字
    • password密碼
    • radio單選
    • checkbox多選
    • file檔案型別
    • submit提交內容
    • reset重置內容
    • hidden隱藏標籤

html內嵌框架

  • <iframe>標籤會建立包含另外一個html檔案的內聯框架（即行內框架），src屬性來定義另一個html檔案的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條
    <iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

Javascript

歷史：

1.源於網景公司，初衷是為了表單快速驗證，通過瀏覽器解釋
2.起初前臺後臺都不太願意學
3.flash一度鼎盛，遊戲，動畫，網頁。幾乎能取代html和JavaScript。但是對外掛依賴。後來因為一些歷史的原因。
4.V8引擎由谷歌公司發明，加速了JavaScript的解析速度
5.隨之而來出現了ajax技術：實現無重新整理、區域性重新整理。
6.全世界的Flash網頁幾乎都被JavaScript取代了。
7.ActionScript語言主要用於操作視訊中的操作（.flv），源於Adobe公司。
8.Jscript是上不了檯面的語言

  • JavaScript的執行環境試在瀏覽器上的，相當於買了的電腦都有解釋的能力。
  • JavaScript是嵌入到html中執行的，而不是單獨執行，它是一把寶劍，它也沒有劍柄。

JavaScript介紹

JavaScript是執行在瀏覽器中的解釋性指令碼語言，它3主要解決的是前端與使用者互動。前端指令碼語言還有JScript（微軟，IE獨有），ActionScript( Adobe公司，需要外掛)等。

  • jQuery是一個前後臺都通的JS庫，全球百分之四十二的網站在使用jQuery。jQuery是JavaScript語言課程內的重點分支。
  • 學習原生JavaScript是為了熟悉和深入瞭解它的語法，另一方面也是為了面試。
  • jQuery是一個經常被初學者遺忘的，但是它實際上是非常重要的東西，所以要重點學習和練習。
  • 大學裡也沒有開JavaScript的課程，我這裡補充一句，好多大學連python語言都沒有開。

  • JavaScript也是完整的程式語言，巨有高階語言的特性：面向物件、類等。

    JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。那麼問題來了，為什麼我們要學JavaScript？尤其是當你已經掌握了某些其他程式語言如Java、C++的情況下。簡單粗暴的回答就是：因為你沒有選擇。在Web世界裡，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與使用者互動。——廖雪峰

    JavaScrtipy的誤解

    很多人認為，寫JavaScript程式碼很簡單。並且編寫它只是為了在網頁上新增一點互動和動畫效果。但是這是完全錯誤的理解，它的精髓不為大多數開發人員所熟知。

ECMAScript標準

因為網景開發了JavaScript，一年後微軟又模仿JavaScript開發了JScript，為了讓JavaScript成為全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定製了JavaScript語言的標準，被稱為ECMAScript標準。

所以簡單說來就是，ECMAScript是一種語言標準，而JavaScript是網景公司對ECMAScript標準的一種實現。

那為什麼不直接把JavaScript定為標準呢？因為JavaScript是網景的註冊商標。

不過大多數時候，我們還是用JavaScript這個詞。如果你遇到ECMAScript這個詞，簡單把它替換為JavaScript就行了。

JavaScript嵌入頁面的方式

  • JavaScript嵌入頁面的方式與CSS極度相似，分為行間（行內）事件，頁面內部（嵌入）事件，外鏈事件
  • 每一個標籤都有自己的事件屬性
  • 第一種行間屬性，不推薦批量使用
  • 第二種是內部事件(嵌入事件)，可以寫在頭部或者尾部。
    <script type="text/javascript">
    /* 暴露在script中的語句會直接順序執行。*/
    alert("here not a world.")
    </script>
  • 第三種在js檔案中寫程式碼，導進來就好。
<script type="text/javascript" src="js/hello.js"></script>
  • 在大的公司，常常是html和css是一幫人做，script是另一幫人做。html和css雖然入門門檻很低，但是要想做好做精，也是不容易的事情。JavaScript是前端三大塊的最後一大塊。
  • JavaScript單行註釋與多行註釋：// 單行註釋 /* 多行註釋 */

變數

  • JavaScript 是一種弱型別語言，也就是說我們定義變數時候不用指定變數型別。javascript的變數型別由它的值來決定。 定義變數需要用關鍵字 'var'
  • 學到這裡我們應該發現語言之間的知識體系都是相似的，變數，運算子，演算法，表示式，函式等
  • 宣告變數的關鍵字：var

  • 電話面試裡常考的變數型別:五種基本型別、一種複合型別。

    • 5種基本資料型別：
    • number、string、boolean、undefined、null
    • 1種複合型別：
    • object
  • 命名規範的三點：
  1. 區別大小寫，順便踩一腳《悟空傳》電影版
  2. 第一個字元必須是字母、下劃線或者$符號
  3. 其他字字元可以是字母、下劃線、$、數字
  • 定義number型別變數：var num1 = 1;
  • 定義string型別變數: var str1 = 'k';
  • 定義boolean型別變數: var bool1 = true 或者 var bool2 = false
  • 定義undefined型別變數: var var1; // 除了變數名什麼都不寫。

這是一些未完善的東西

外邊距margin
id選擇器 #id
浮動 float

CSS :hover 選擇器

選擇滑鼠指標浮動在其上的元素，並設定其樣式：

    a:hover
    { 
    background-color:yellow;
    }
    {# 這裡的A標籤在滑鼠浮動其上之時，則會變色。#}

絕對定位與相對定位

前端頁面收藏

我是結尾的錨點

相關推薦

Web前端幻術（持續更新）

title: 前端法術 tags: 前端,Html!][1],Css,JavaScript grammar_cjkRuby: true --- 跳轉到文章結尾 前端被我稱為幻術，這篇文章還是待完善的。其他我有空會寫。 目錄: 目錄還沒寫，有空會寫。 Web幻術 作業系統:Windows10

BugkuCTF——web篇writeup（持續更新）

BugkuCTF——web篇writeup平臺網址：http://ctf.bugku.com/平臺首頁：web2網址連結：http://120.24.86.145:8002/web2/頁面：一看只有好多滑稽，分數也不太高，應該不是很難，F12開啟開發者工具看一下得到ctf:f

（持續更新）瀏覽器兼容性總結—之前端開發常用屬性及api

ott 內置 事件 move min-width line 顏色漸變效果 瀏覽器兼容性 :hover max-width，min-width ie7以上支持 rgba 只支持ie9及以上瀏覽器，ie8要用濾鏡處理 border-radius 也只支持ie9以上 不需

Web開發必看的幾個網站！！！優質網站資源分享（持續更新）

HTML： HTML 入門 （H5標準） CSS： CSS3教程 JS： JS基礎教程 ES6基礎教程詳解 ——阮一峰 UI框架： Bootstrap中文網 優秀UI框架 Element UI（餓了麼） JS框架： VUE API文件（學習V

前端常見除錯技巧篇總結（持續更新...）

首先開啟控制檯，對於mac電腦，command+option+J開啟控制檯，window電腦，F12即可。 其次，開啟命令選單，可選擇你要用什麼，如下：開啟console選項卡（按Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows，Linux）開啟命令選單。），預設情

對比起來學習前端三大框架（持續更新）

angular: 資料雙向繫結，模板功能強大。依賴注入和自定義directive非常靈活。 學習路線長，框架偏重。 優缺點詳見：angularJS在實際開發中有哪些優缺點？ vue: 輕量級。每一個元件自帶shouldComponentUpdate   re

bugku web writeup（持續更新）

web2 開啟以後就長這樣，眼睛差點瞎掉 不用想先F12一下先 看到陰影部分了沒，對就是它。 =====================================================================

程式學習之路: 前端取經祕笈集結（持續更新）

?搗蛋萬聖節福利！ 一、Halloween Happy！ 今天萬聖節, 是否已經按耐不住自己內心的小惡魔, 想早點下班狂歡！彆著急, 咱們的上班摸魚好朋友Google Doodles今天又給我們推了幾款'上班摸魚'的萬聖節遊戲.玩起來, 時間簡直不要過得飛快, 但是要注意身後的老闆。 g

Web學習筆記（持續更新中……）

web伺服器： WebLogic是BEA公司的產品（收費）； WebShphere是IBM公司的產品（商用收費），支援J2EE規範； Tomcat是APACHE公司的產品，支援全部JSP以及Servlet規範。 Tomcat官方網站：http://tomcat.apach

前端經典語錄（持續更新）

1、關於CSS全域性選擇器的衝突，制定CSS命名規則與其費盡心思告訴別人遵守某種規則，以規避某種痛苦，不如從工具層面就消滅這種痛苦。2、元件化 ！== 模組化模組化只是在檔案層面上，對程式碼和資源的拆分；而元件化是在設計層面，對UI（使用者介面）的拆分。從UI拆分下來的每個包

前端名詞解釋（持續更新）

名詞：HTML 解釋： • HTML 是用來描述網頁的一種語言。 • HTML擁有很多標籤入<a><p><span>等。 • HTML文件 = 網頁，HTML文件包含“標籤”和“純文字”。 • HTML的結構決定這個

[web安全] 基本概念（持續更新）

0.滲透性測試（Penetration Test）：通過模擬惡意黑客的攻擊，來評估計算機網路系統是否安全的一種方法。 1.跨站指令碼攻擊：通常指黑客通過“HTML注入”篡改了網頁，插入了惡意的指令碼，

input輸入限制（持續更新）

pan only bmi pbo length 讀文本 num tom clipboard 1.只讀文本框內容 <!-- 在input裏添加屬性值 readonly --> <input type="text" value="" readonly&g

struts2學習筆記——常見報錯及解決方法匯總（持續更新）

允許 clip 之間 con ack 技術 ext tro height 操作環境：（1）Tomcat 7.0.72.0 　　　　　（2）OS Name: Windows 7 　　　　 （3）JVM Version: 1.8.0_25-b18 　　　　 （4）e

ScvQ常用的網站（持續更新...）

sta https tac cto stack 開源中國 更新 title com GitHub： 　　　　https://github.com/ScvQ 開源中國： 　　　　http://git.oschina.net/ScvQ 博客園： 　　　　http://www.c

FPGA設計思想（持續更新）

流水線 切割 下一個 logs 學習 altera uart lte 問題 一、 流水線設計 　　將原本一個時鐘周期完成的較大的組合邏輯通過合理的切割後分由多個時鐘周期完成。該部分邏輯運行的時鐘頻率會有明顯對的提升，提高系統的性能用面積換速度 　　一個流水線設計需要4個步驟

python類相關總結（持續更新）

屬於 模塊 error pan 類成員 pro 相關 ror __str__ __init__ 　　構造函數 __dict__ 　　vars()函數，獲取命名空間裏面的名稱 __str__ 　　str()函數，輸出成員相關信息的內容 __repr__　　 repl()函數，

Java學習軌跡【面向對象】（持續更新）

一個 調用構造 用法 可見 返回 java編譯 ted 條件 targe 其中部分內容為其他博主所作，侵刪 6月12日-7月每日更新 Java學習軌跡 一、面向對象 類和對象 1. new關鍵字所完成的事情 1)為對象開辟了新的內存空間 2)調用類的構造方法 3)返回生成對

git常用命令（持續更新）

git pull java com mit res mail dsa 切換 設置 1、設置用戶名和郵箱： git config --global user.name ""; git config --global user.email ""; git config --li

重構函數基本原則（持續更新）

一段 更新 設置 內部類 重構 修改 一個 變化 但是 1. 重構函數時一定要查清有哪些類調用了該函數 修改函數之前要明白函數每一段代碼的作用再做修改(所以體積小的函數好改啊)，我就遇到過這樣的問題，修改函數內部有某個常量，但是該常量對於另外一個調用該函數的類來