當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端编程基础

發布時間：2024/7/19 HTML 54 豆豆

生活随笔收集整理的這篇文章主要介紹了前端编程基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網頁前端編程基礎

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁

<html> <body><h1>My First Heading</h1><p>My first paragraph.</p></body> </html>

典型塊級元素與行內元素

塊元素(block element)
div
h（x） - 標題
p - 段落
table - 表格
ul - 非排序列表

內聯元素(inline element)

*span - 常用內聯容器，定義文本內區塊

a - 錨點
i - 斜體
img - 圖片
input - 輸入框

行內、塊狀元素區別：

(1).塊級元素會獨占一行，其寬度自動填滿其父元素寬度，行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到道一行排不下，才會換行，其寬度隨元素的內容而變化
(2). 一般情況下，塊級元素可以設置 width, height屬性，行內元素設置width, height無效(注意：塊級元素即使設置了寬度，仍然是獨占一行的)
(3).塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）

行內元素和塊狀元素的說明

根據CSS規范的規定，每一個網頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認的display屬性值，比如div元素，它的默認display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的默認display屬性值為“inline”，稱為“行內”元素。div這樣的塊級元素，就會自動占據一定矩形空間，可以通過設置高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子；與之相反，像“span”“a”這樣的行內元素，則沒有自己的獨立空間，它是依附于其他塊級元素存在的，因此，對行內元素設置高度、寬度、內外邊距等屬性，都是無效的。

CSS（層疊樣式表）

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

# CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明 h1 {color:red; font-size:14px;}

CSS盒子模型

CSS中， Box Model叫盒子模型（或框模型），Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border）和外邊距（margin）的方式。在HTML文檔中，每個元素（element）都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。

Javascript

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型的語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。
為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。為了統一規格，因為JavaScript兼容于ECMA標準，因此也稱為ECMAScript。
直譯語言（Interpreted language），又稱直譯式語言，是一種編程語言，它不需要經過編譯器先行編譯為機器碼，之后直接在CPU中執行，相反的，這種編程語言需要通過直譯器，在執行期動態直譯（interpreted）

JavaScript 數據類型
JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：
實例

var x // x 為 undefined var x = 6; // x 為數字 var x = "Bill"; // x 為字符串

字符串
字符串是存儲字符（比如 "Bill Gates"）的變量。
字符串可以是引號中的任意文本。您可以使用單引號或雙引號：
實例

var carname="Bill Gates"; var carname='Bill Gates';

數字
JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：
實例

var x1=34.00; //使用小數點來寫 var x2=34; //不使用小數點來寫

布爾
布爾（邏輯）只能有兩個值：true 或 false。

var x=true var y=false

數組
下面的代碼創建名為 cars 的數組：

var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars [2] ="Volvo"; 或者 (condensed array): vary cars=new Array("Audi","BMW","Volvo"); 或者 (literal array): 實例 var cars=["Audi","BMW","Volvo"];

對象
對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
對象屬性有兩種尋址方式：
實例

name=person.lastname; name=person["lastname"];

Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設置為 null 來清空變量。

typeof
可以使用typeof操作符檢測變量的數據類型
類型結果

Undefined "undefined" Null "object" Boolean "boolean" Number "number" String "string"

函數對象 ( [[Call]] 在ECMA-262條款中實現了) "function"
任何其他對象 "object"

JavaScript中number、string、boolean、null和undefined型數據都是值類型，由于值類型數據占據的空間都是固定的，所以可以把它們存儲在狹窄的內存棧。object、function和array等對象都是引用型數據

創建對象的方式

Object var p = new Object(); p.name = "jack"; p.age = 20; p.sayName = function(){alert(this.name); }

字面量

var p = {name:"jack",age:20,sayName:function(){alert(this.name);}};

工廠模式

function createPerson(name,age){var o = new Object();o.name = name;o.age = age;o.sayName = function(){console.log(this.name);}return o; }var c = createPerson("jason",30);

構造函數

function Person(name,age){this.name = name;this.age = age;this.sayName = function(){alert(this.name);} }var p = new Person("jack",20); alert(p instanceof Person);

構造函數的不同之處：
沒有顯示的創建對象
直接將屬性和方法賦給了this對象
沒有return語句
構造函數的問題：
每個函數都在每個實例上重新創建一遍，person1和person2都有一個名為sayName的函數，但是兩個sayName函數是兩個不同的Function實例

原型模式

function Person(){}Person.prototype.name = "jack"; Person.prototype.age = 20; Person.prototype.sayName = function(){alert(this.name); }var p = new Person(); p.sayName();

理解原型對象prototype
我們創建的每個函數都有一個prototype屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。

alert(Person.prototype.isPrototypeOf(p)); alert(Object.getPrototypeOf(p) == Person.prototype);

如何實現繼承
Javascript實現繼承主要依靠原型鏈
原型鏈

上面的代碼中，我們沒有使用SubType默認提供的原型，而是給它換了一個新原型，這個新原型就是SuperType的實例。于是，新原型不僅具有作為一個SuperType的實例所有擁有的全部屬性和方法，而且其內部還有一個指針，指向了SuperType的原型。

原型鏈的問題
當原型包含引用類型的屬性時，這些屬性會被所有實例共享

function SuperType(){this.colors = ["red","green","blue"]; }function SubType(){ } //繼承了SuperType SubType.prototype = new SuperType();var instance1 = new SubType(); instance1.colors.push("white"); alert(instance1.colors);var instance2 = new SubType(); alert(instance2.colors);

借用構造函數
在子類型構造函數內部調用父類型構造函數
call函數
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數：thisObj 可選項。將被用作當前對象的對象。 arg1, arg2, , argN 可選項。將被傳遞方法參數序列。
說明：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

function SuperType(){this.colors = ["red","green","blue"]; }function SubType(){//繼承了SuperTypeSuperType.call(this); }var instance1 = new SubType(); instance1.colors.push("white");alert(instance1.colors);var instance2 = new SubType(); alert(instance2.colors);

借用構造函數的問題：
方法都在構造函數中定義，函數復用是個問題，而且在父類原型中定義的函數，對于子類也是不可見的。

組合繼承

閉包

變量的作用域
根據作用域劃分，變量有兩種類型：全局變量和局部變量。
在函數內部訪問全局變量：

var n=100; function f1(){alert(n); } f1(); // 100函數外部自然無法讀取函數內的局部變量 function f1(){var n=100; } alert(n); // error

如何從外部讀取局部變量？
出于種種原因，我們有時候需要得到函數內的局部變量。但是，前面已經說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現。
那就是在函數的內部，再定義一個函數。

function f1(){var n=100;function f2(){alert(n); // 100} }

在上面的代碼中，函數f2就被包括在函數f1內部，這時f1內部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內部的局部變量，對f1就是不可見的。這就是Javascript語言特有的"鏈式作用域"結構（chain scope），子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。
既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，我們不就可以在f1外部讀取它的內部變量了嗎？

function f1(){var n=100;function f2(){alert(n);}return f2; } var result=f1(); result(); // 100

閉包的概念

上面代碼中的f2函數，就是閉包。
閉包，指有權訪問另一個函數作用域中的變量的函數，在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。

閉包的用途
閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數內部的變量，另一個就是讓這些變量的值始終保持在內存中。

function f1(){var n=999;nAdd=function(){n+=1}function f2(){alert(n);}return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000

DOM編程

DOM就是HTML頁面的模型，將每個標簽都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設置文本框中的值。
HTML DOM定義了訪問和操作HTML文檔的標準方法。他把HTML文檔呈現為帶有元素、屬性和文本的樹結構。在層次圖中，每個對象是它的父對象的屬性，如Window對象是Document對象的父對象，所以在引用Document對象就可以使用Window.Document，相當于document是window對象的屬性。對于每一個頁面，瀏覽器都會自動創建Window對象、Document對象、Location對象、Navigator對象、History對象。

window.onload = function(){var child = document.createElement("span");child.innerHTML = "<i>jason</i>";var node = document.getElementById('wrapper');node.appendChild(child); }

轉載于:https://www.cnblogs.com/flyhgx/p/6526145.html

總結

以上是生活随笔為你收集整理的前端编程基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

基础