Web前端幻術（持續更新）

時間  2019-11-08
標籤 web 前端 幻術 持續 更新 欄目 HTML 简体版
原文   原文鏈接

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

*跳轉到文章結尾* 文章連接：https://www.cnblogs.com/Asterism-2012/p/10048355.html
前端被我稱爲幻術，這篇文章仍是待完善的。其餘我有空會寫。
css

目錄:


Html

Css

JavaScript
目錄有空會更加完善。

Web幻術

  • 操做系統:Windows10html

    編譯器：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：頁面行爲：部分動畫效果、頁面與用戶的交互、頁面功能

返回目錄html5

HTMl

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

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超連接，標記指的是標籤，是一種用來製做網頁的語言，這種語言由一個個的標籤組成，用這種語言製做的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，能夠用文本的方式編輯它，若是用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁能夠從一個網頁連接跳轉到另一個網頁。java

  • 文檔聲明：頂格寫
<!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可部分遵照，也可所有遵照，看開發要求。python

  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咱們約定必填

代碼與效果:
src:指向圖片路徑web

<a href="#" onclick="click_it()"><img src="images/Connect_logo_3.png"></a>

alt:在圖片沒法顯示時候顯示指定內容面試

<a href="#" onclick="click_it()"><img src="" alt="QQ登錄的圖片"></a>

  • 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 border="1">
<!--第一行的表頭-->
  <tr>
    <th>Name</th>
    <th>age</th>
    <th>Gender</th>
  </tr>

<!--如下是表格信息-->
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>female</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>25</td>
    <td>male</td>
  </tr>
</table>

舊版table佈局方式

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

html表單

  • 表單用於蒐集不一樣類型的用戶輸入，表單由不一樣類型的標籤組成，實現一個特定功能的表單區域（好比：註冊），首先應該用<form>標籤來定義表單區域總體，在此標籤中再使用不一樣的表單控件來實現不一樣類型的信息輸入.
  • form定義表單區域
  • label標籤訂義表單控件的文字標註，提升用戶體驗的細節
    • for屬性：for="某標籤的id"，用於操做激活標籤，好比Inpu輸入框，選擇框等
  • input設置信息輸入框
  • textarea定義多行文本輸入（大文本）
  • select>option定義下拉列表選擇框

  • post提交方式數據不會暴露在URL中ajax

    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>
  • 鼠標懸停在一個標籤上時，顯示文字

Html如何在新的頁面中打開?

<A href="www.baidu.com" target="_blank">

返回目錄

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

css: hover 選擇器
選擇鼠標指針浮動在其上的元素，並設置其樣式：

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

絕對定位與相對定位

前端頁面收藏

**點我回到文章開頭再看看**

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程