當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端编程基础

發(fā)布時間：2024/7/19 HTML 31 豆豆

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

網(wǎng)頁前端編程基礎(chǔ)

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

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

典型塊級元素與行內(nèi)元素

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

內(nèi)聯(lián)元素(inline element)

*span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

a - 錨點(diǎn)
i - 斜體
img - 圖片
input - 輸入框

行內(nèi)、塊狀元素區(qū)別：

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

行內(nèi)元素和塊狀元素的說明

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

CSS（層疊樣式表）

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

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

CSS盒子模型

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

Javascript

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

JavaScript 數(shù)據(jù)類型
JavaScript 擁有動態(tài)類型。這意味著相同的變量可用作不同的類型：
實(shí)例

var x // x 為 undefined var x = 6; // x 為數(shù)字 var x = "Bill"; // x 為字符串

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

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

數(shù)字
JavaScript 只有一種數(shù)字類型。數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶：
實(shí)例

var x1=34.00; //使用小數(shù)點(diǎn)來寫 var x2=34; //不使用小數(shù)點(diǎn)來寫

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

var x=true var y=false

數(shù)組
下面的代碼創(chuàng)建名為 cars 的數(shù)組：

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

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

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

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

typeof
可以使用typeof操作符檢測變量的數(shù)據(jù)類型
類型結(jié)果

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

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

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

創(chuàng)建對象的方式

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);

構(gòu)造函數(shù)

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);

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

原型模式

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

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

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

如何實(shí)現(xiàn)繼承
Javascript實(shí)現(xiàn)繼承主要依靠原型鏈
原型鏈

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

原型鏈的問題
當(dāng)原型包含引用類型的屬性時，這些屬性會被所有實(shí)例共享

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);

借用構(gòu)造函數(shù)
在子類型構(gòu)造函數(shù)內(nèi)部調(diào)用父類型構(gòu)造函數(shù)
call函數(shù)
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數(shù)：thisObj 可選項(xiàng)。將被用作當(dāng)前對象的對象。 arg1, arg2, , argN 可選項(xiàng)。將被傳遞方法參數(shù)序列。
說明：call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?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);

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

組合繼承

閉包

變量的作用域
根據(jù)作用域劃分，變量有兩種類型：全局變量和局部變量。
在函數(shù)內(nèi)部訪問全局變量：

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

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

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

在上面的代碼中，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時f1內(nèi)部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內(nèi)部的局部變量，對f1就是不可見的。這就是Javascript語言特有的"鏈?zhǔn)阶饔糜?#34;結(jié)構(gòu)（chain scope），子對象會一級一級地向上尋找所有父對象的變量。所以，父對象的所有變量，對子對象都是可見的，反之則不成立。
既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，我們不就可以在f1外部讀取它的內(nèi)部變量了嗎？

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

閉包的概念

上面代碼中的f2函數(shù)，就是閉包。
閉包，指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

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

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頁面的模型，將每個標(biāo)簽都做為一個對象，JavaScript通過調(diào)用DOM中的屬性、方法就可以對網(wǎng)頁中的文本框、層等元素進(jìn)行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設(shè)置文本框中的值。
HTML DOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。他把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)。在層次圖中，每個對象是它的父對象的屬性，如Window對象是Document對象的父對象，所以在引用Document對象就可以使用Window.Document，相當(dāng)于document是window對象的屬性。對于每一個頁面，瀏覽器都會自動創(chuàng)建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); }

轉(zhuǎn)載于:https://www.cnblogs.com/flyhgx/p/6526145.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

基础

上一篇：调用相机
下一篇：在windows 2008 R2上安装s