整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 詳解:為什么寫好的代碼非常重要

          文將通過簡單的術語和真實世界的例子解釋 JavaScript 中 this 及其用途,并告訴你寫出好的代碼為何如此重要。

          1.this 適合你嗎?

          我看到許多文章在介紹 JavaScript 的 this 時都會假設你學過某種面向對象的編程語言,比如 Java、C++ 或 Python 等。但這篇文章面向的讀者是那些不知道 this 是什么的人。我盡量不用任何術語來解釋 this 是什么,以及 this 的用法。

          也許你一直不敢解開 this 的秘密,因為它看起來挺奇怪也挺嚇人的?;蛟S你只在 StackOverflow 說你需要用它的時候(比如在 React 里實現某個功能)才會使用。

          在深入介紹 this 之前,我們首先需要理解函數式編程和面向對象編程之間的區別。

          2.函數式編程 vs 面向對象編程

          你可能不知道,JavaScript 同時擁有面向對象和函數式的結構,所以你可以自己選擇用哪種風格,或者兩者都用。

          我在很早以前使用 JavaScript 時就喜歡函數式編程,而且會像躲避瘟疫一樣避開面向對象編程,因為我不理解面向對象中的關鍵字,比如 this。我不知道為什么要用 this。似乎沒有它我也可以做好所有的工作。

          而且我是對的。

          在某種意義上 。也許你可以只專注于一種結構并且完全忽略另一種,但這樣你只能是一個 JavaScript 開發者。為了解釋函數式和面向對象之間的區別,下面我們通過一個數組來舉例說明,數組的內容是 Facebook 的好友列表。

          假設你要做一個 Web 應用,當用戶使用 Facebook 登錄你的 Web 應用時,需要顯示他們的 Facebook 的好友信息。你需要訪問 Facebook 并獲得用戶的好友數據。這些數據可能是 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts 等信息。

          const data = [
           {
           firstName: 'Bob',
           lastName: 'Ross',
           username: 'bob.ross', 
           numFriends: 125,
           birthday: '2/23/1985',
           lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
           },
           ...
          ]
          

          假設上述數據是你通過 Facebook API 獲得的?,F在需要將其轉換成方便你的項目使用的格式。我們假設你想顯示的好友信息如下:

          • 姓名,格式為`${firstName} ${lastName}`
          • 三篇隨機文章
          • 距離生日的天數

          3.函數式方式

          函數式的方式就是將整個數組或者數組中的某個元素傳遞給某個函數,然后返回你需要的信息:

          const fullNames = getFullNames(data)
          // ['Ross, Bob', 'Smith, Joanna', ...]
          

          首先我們有 Facebook API 返回的原始數據。為了將其轉換成需要的格式,首先要將數據傳遞給一個函數,函數的輸出是(或者包含)經過修改的數據,這些數據可以在應用中向用戶展示。

          我們可以用類似的方法獲得隨機三篇文章,并且計算距離好友生日的天數。

          函數式的方式是:將原始數據傳遞給一個函數或者多個函數,獲得對你的項目有用的數據格式。

          4.面向對象的方式

          對于編程初學者和 JavaScript 初學者,面向對象的概念可能有點難以理解。其思想是,我們要將每個好友變成一個對象,這個對象能夠生成你一切開發者需要的東西。

          你可以創建一個對象,這個對象對應于某個好友,它有 fullName 屬性,還有兩個函數 getThreeRandomPosts 和 getDaysUntilBirthday。

          function initializeFriend(data) {
           return {
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from data.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use data.birthday to get the num days until birthday
           }
           };
          }
          const objectFriends = data.map(initializeFriend)
          objectFriends[0].getThreeRandomPosts() 
          // Gets three of Bob Ross's posts
          

          面向對象的方式就是為數據創建對象,每個對象都有自己的狀態,并且包含必要的信息,能夠生成需要的數據。

          5.這跟 this 有什么關系?

          你也許從來沒想過要寫上面的 initializeFriend 代碼,而且你也許認為,這種代碼可能會很有用。但你也注意到,這并不是真正的面向對象。

          其原因就是,上面例子中的 getThreeRandomPosts 或 getdaysUntilBirtyday 能夠正常工作的原因其實是閉包。因為使用了閉包,它們在 initializeFriend 返回之后依然能訪問 data。關于閉包的更多信息可以看看這篇文章:作用域和閉包(https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md)。

          還有一個方法該怎么處理?我們假設這個方法叫做 greeting。注意方法(與 JavaScript 的對象有關的方法)其實只是一個屬性,只不過屬性值是函數而已。我們想在 greeting 中實現以下功能:

          function initializeFriend(data) {
           return {
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from data.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use data.birthday to get the num days until birthday
           },
           greeting: function() {
           return `Hello, this is ${fullName}'s data!`
           }
           };
          }
          

          這樣能正常工作嗎?

          不能!

          我們新建的對象能夠訪問 initializeFriend 中的一切變量,但不能訪問這個對象本身的屬性或方法。當然你會問,

          難道不能在 greeting 中直接用 data.firstName 和 data.lastName 嗎?

          當然可以。但要是想在 greeting 中加入距離好友生日的天數怎么辦?我們最好還是有辦法在 greeting 中調用 getDaysUntilBirthday。

          這時輪到 this 出場了!

          6.終于——this 是什么

          this 在不同的環境中可以指代不同的東西。默認的全局環境中 this 指代的是全局對象(在瀏覽器中 this 是 window 對象),這沒什么太大的用途。而在 this 的規則中具有實用性的是這一條:

          如果在對象的方法中使用 this,而該方法在該對象的上下文中調用,那么 this 指代該對象本身。

          你會說“在該對象的上下文中調用”……是啥意思?

          別著急,我們一會兒就說。

          所以,如果我們想從 greeting 中調用 getDaysUntilBirtyday 我們只需要寫 this.getDaysUntilBirthday,因為此時的 this 就是對象本身。

          附注:不要在全局作用域的普通函數或另一個函數的作用域中使用 this!this 是個面向對象的東西,它只在對象的上下文(或類的上下文)中有意義。

          我們利用 this 來重寫 initializeFriend:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const numDays = this.getDaysUntilBirthday() 
           return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
           }
           };
          }
          

          現在,在 initializeFriend 執行結束后,該對象需要的一切都位于對象本身的作用域之內了。我們的方法不需要再依賴于閉包,它們只會用到對象本身包含的信息。

          好吧,這是 this 的用法之一,但你說過 this 在不同的上下文中有不同的含義。那是什么意思?為什么不一定會指向對象自己?

          有時候,你需要將 this 指向某個特定的東西。一種情況就是事件處理函數。比如我們希望在用戶點擊好友時打開好友的 Facebook 首頁。我們會給對象添加下面的 onClick 方法:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const numDays = this.getDaysUntilBirthday() 
           return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          注意我們在對象中添加了 username 屬性,這樣 onFriendClick 就能訪問它,從而在新窗口中打開該好友的 Facebook 首頁?,F在只需要編寫 HTML:

          <button id="Bob_Ross">
           <!-- A bunch of info associated with Bob Ross -->
          </button> 
          

          還有 JavaScript:

          const bobRossObj = initializeFriend(data[0])
          const bobRossDOMEl = document.getElementById('Bob_Ross')
          bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
          

          在上述代碼中,我們給 Bob Ross 創建了一個對象。然后我們拿到了 Bob Ross 對應的 DOM 元素。然后執行 onFriendClick 方法來打開 Bob 的 Facebook 主頁。似乎沒問題,對吧?

          有問題!

          哪里出錯了?

          注意我們調用 onclick 處理程序的代碼是 bobRossObj.onFriendClick。看到問題了嗎?要是寫成這樣的話能看出來嗎?

          bobRossDOMEl.addEventListener("onclick", function() {
           window.open(`https://facebook.com/${this.username}`)
          })
          

          現在看到問題了嗎?如果把事件處理程序寫成 bobRossObj.onFriendClick,實際上是把 bobRossObj.onFriendClick 上保存的函數拿出來,然后作為參數傳遞。它不再“依附”在 bobRossObj 上,也就是說,this 不再指向 bobRossObj。它實際指向全局對象,也就是說 this.username 不存在。似乎我們沒什么辦法了。

          輪到綁定上場了!

          7.明確綁定 this

          我們需要明確地將 this 綁定到 bobRossObj 上。我們可以通過 bind 實現:

          const bobRossObj = initializeFriend(data[0])
          const bobRossDOMEl = document.getElementById('Bob_Ross')
          bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
          bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
          

          之前,this 是按照默認的規則設置的。但使用 bind 之后,我們明確地將 bobRossObj.onFriendClick 中的 this 的值設置為 bobRossObj 對象本身。

          到此為止,我們看到了為什么要使用 this,以及為什么要明確地綁定 this。最后我們來介紹一下,this 實際上是箭頭函數。

          8.箭頭函數

          你也許注意到了箭頭函數最近很流行。人們喜歡箭頭函數,因為很簡潔、很優雅。而且你還知道箭頭函數和普通函數有點區別,盡管不太清楚具體區別是什么。

          簡而言之,兩者的區別在于:

          在定義箭頭函數時,不管 this 指向誰,箭頭函數內部的 this 永遠指向同一個東西。

          嗯……這貌似沒什么用……似乎跟普通函數的行為一樣啊?

          我們通過 initializeFriend 舉例說明。假設我們想添加一個名為 greeting 的函數:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           function getLastPost() {
           return this.lastTenPosts[0]
           }
           const lastPost = getLastPost() 
           return `Hello, this is ${this.fullName}'s data!
           ${this.fullName}'s last post was ${lastPost}.`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          這樣能運行嗎?如果不能,怎樣修改才能運行?

          答案是不能。因為 getLastPost 沒有在對象的上下文中調用,因此getLastPost 中的 this 按照默認規則指向了全局對象。

          你說沒有“在對象的上下文中調用”……難道它不是從 initializeFriend 返回的內部調用的嗎?如果這還不叫“在對象的上下文中調用”,那我就不知道什么才算了。

          我知道“在對象的上下文中調用”這個術語很模糊。也許,判斷函數是否“在對象的上下文中調用”的好方法就是檢查一遍函數的調用過程,看看是否有個對象“依附”到了函數上。

          我們來檢查下執行 bobRossObj.onFriendClick() 時的情況?!敖o我對象 bobRossObj,找到其中的 onFriendClick 然后調用該屬性對應的函數”。

          我們同樣檢查下執行 getLastPost() 時的情況?!敖o我名為 getLastPost 的函數然后執行?!笨吹搅藛幔课覀兏緵]有提到對象。

          好了,這里有個難題來測試你的理解程度。假設有個函數名為 functionCaller,它的功能就是調用一個函數:

          functionCaller(fn) {
           fn()
          }
          

          如果調用 functionCaller(bobRossObj.onFriendClick) 會怎樣?你會認為 onFriendClick 是“在對象的上下文中調用”的嗎?this.username有定義嗎?

          我們來檢查一遍:“給我 bobRosObj 對象然后查找其屬性 onFriendClick。取出其中的值(這個值碰巧是個函數),然后將它傳遞給 functionCaller,取名為 fn。然后,執行名為 fn 的函數。”注意該函數在調用之前已經從 bobRossObj 對象上“脫離”了,因此并不是“在對象的上下文中調用”的,所以 this.username 沒有定義。

          這時可以用箭頭函數解決這個問題:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const getLastPost = () => {
           return this.lastTenPosts[0]
           }
           const lastPost = getLastPost() 
           return `Hello, this is ${this.fullName}'s data!
           ${this.fullName}'s last post was ${lastPost}.`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          上述代碼的規則是:

          在定義箭頭函數時,不管 this 指向誰,箭頭函數內部的 this 永遠指向同一個東西。

          箭頭函數是在 greeting 中定義的。我們知道,在 greeting 內部的 this 指向對象本身。因此,箭頭函數內部的 this 也指向對象本身,這正是我們需要的結果。

          9.結論

          this 有時很不好理解,但它對于開發 JavaScript 應用非常有用。本文當然沒能介紹 this 的所有方面。一些沒有涉及到的話題包括:

          • call 和 apply;
          • 使用 new 時 this 會怎樣;
          • 在 ES6 的 class 中 this 會怎樣。

          我建議你首先問問自己在這些情況下的 this,然后在瀏覽器中執行代碼來檢驗你的結果。

          想學習更多關 于this 的內容,可參考《你不知道的 JS:this 和對象原型》:

          • https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes

          如果你想測試自己的知識,可參考《你不知道的JS練習:this和對象原型》:

          • https://ydkjs-exercises.com/this-object-prototypes

          原文:https://medium.freecodecamp.org/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7

          作者:Austin Tackaberry,Human API 的軟件工程師

          譯者:彎月,責編:屠敏


          HTML作為前端三大基礎知識點之一,是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會注意,卻在面試時可能會問到的題目,來看看你都會嗎?

          HTML

          如何使用div模擬實現textarea?

          我們都知道textarea是form表單中一個很常見的元素,用于多行文本輸入,可以設置行數和列數。

          但是默認的textarea樣式在頁面上看起來是很丑的,很多頁面都是采用div模擬textarea實現。例如QQ空間主頁面的發表說說,在你看頁面源碼后就會發現這個輸入框其實是一個div元素,并不是一個textarea元素,現在我們就來看看這是如何實現的吧?

          首先來看看實現的效果是什么樣的。

          實現效果

          關鍵屬性:contenteditable

          正如這個屬性的字面意思,可以理解為可編輯的,如果在頁面標簽上設置contenteditable=true,該標簽就可以進行編輯了。

          可以配合user-modify屬性,該屬性表示的是控制用戶能否對頁面元素進行編輯,通過設置不同的值可以選擇富文本或者純文本內容,但是由于該屬性是非標準屬性,很少有人知道。

          首先我們來看看頁面的HTML部分代碼,就是一個很簡單的div標簽,然后設置contenteditable屬性為true。

          HTML部分代碼

          接下來我們就看看整個CSS代碼的完整實現吧。

          CSS樣式

          通過min-height和max-height屬性可以控制div的高度,在內容超出max-height后會出現滾動條。如果想要固定div的高度,則只需要設置height屬性就可以,而不用設置min-height和max-height屬性。

          src和href的區別

          src和href從使用上來看都是對外部資源的一種引用,但是在具體理解上是有差異的。

          href的值指定的是資源在網絡上的位置,定義的是當前頁面上的某個元素與需要的資源文件的一個鏈接。比如下面一個語句。

          href引用

          當瀏覽器解析到頁面的這條語句時,會知道在這里引用了一個外部樣式文件,但并不會阻止頁面解析。這與@import有很大不同,因此在引入外部樣式時,推薦使用link標簽。

          src的值表示的是頁面上必不可少的內容,需要將指定內容加載到當前頁面中。比如下面一個語句。

          src引用

          當瀏覽器解析到頁面上的這條語句時,瀏覽器會對這個文件進行解析,編譯和執行,從而導致整個頁面加載會被暫停,這也是為什么一般會選擇將script標簽放在body結束標簽的前面。

          有一種更好的理解方式,href表示的是一個資源的鏈接;src是對當前元素的替換,內容最終會嵌入到當前頁面中。

          DIV+CSS布局和Table布局對比

          雖然目前大多數網頁都是采用的DIV+CSS布局的方式,但是也有少數的老式Web網頁采用的是Table布局,我們可以一起來看看兩種布局方式的優劣。

          布局對比

          • div+css布局

          1. div+css的布局方式屬于W3C標準,而且由于CSS的存在,HTML部分的代碼會顯得很純凈,滿足行為,樣式,結構分離的原則。

          2. 頁面加載速度更快,這是目前DIV+CSS使用更廣泛的一個非常重要的原因。

          3. 頁面編碼量相對于Table布局會少很多。

          4. 頁面內容更容易維護,由于樣式都存在CSS文件中,只需要修改CSS文件即可,對HTML文件不會有影響。

          5. 由于DIV+CSS布局更容易進行SEO優化,所以更方便被搜索引擎收錄。

          • Table布局

          雖然DIV+CSS有各種各樣的優勢,但是Table布局也并不是完全無用的。這里也可以列舉出幾個采用Table布局的優勢。

          1. 新手學習方便(相信有很多后端RD在進行前端學習時剛開始都是從table布局開始的)。

          2. 兼容性更好,由于Table布局是從最古老的瀏覽器發展而來的,在兼容性上會滿足所有瀏覽器。而CSS3的出現卻要考慮瀏覽器的支持程度,一個樣式要考慮加上幾個不同瀏覽器前綴,類似于-webkit,-moz等

          結束語

          今天這篇文章主要講解了幾個關于HTML的知識點,大家都掌握了嗎?

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

          <p>這是一個段落。</p>

          <p>這是一個段落。</p>

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想,

          菜鳥教程,學的不僅是技術,更是夢想。

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

          <p>菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。

          菜鳥教程,學的不僅是技術,更是夢想。</p>

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

          <td>Description of B</td>

          </tr>

          </table>

          列表實例:

          <ol>

          <li>London</li>

          <li>Paris</li>

          <li>Tokyo</li>

          </ol>

          省略 <html> 和 <body>?

          在標準 HTML5 中, <html> 和 <body> 標簽是可以省略的。

          以下 HTML5 文檔是正確的:

          實例:

          <!DOCTYPE html>

          <head>

          <title>頁面標題</title>

          </head>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          嘗試一下 ?

          不推薦省略 <html> 和 <body> 標簽。

          <html> 元素是文檔的根元素,用于描述頁面的語言:

          <!DOCTYPE html>

          <html lang="zh">

          聲明語言是為了方便屏幕閱讀器及搜索引擎。

          省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

          省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

          省略 <head>?

          在標準 HTML5 中, <head>標簽是可以省略的。

          默認情況下,瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

          <h1>這是一個標題</h1>

          <p>這是一個段落。</p>

          </body>

          </html>

          嘗試一下 ?

          現在省略 head 標簽還不推薦使用。

          元數據

          HTML5 中 <title> 元素是必須的,標題名描述了頁面的主題:

          <title>菜鳥教程</title>

          標題和語言可以讓搜索引擎很快了解你頁面的主題:

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

          這是一個較長評論。 這是 一個較長評論。這是一個較長評論。

          這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。

          -->

          長評論第一個字符縮進兩個空格,更易于閱讀。

          樣式表

          樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          p.into {font-family: Verdana; font-size: 16em;}

          長的規則可以寫成多行:

          body {

          background-color: lightgrey;

          font-family: "Arial Black", Helvetica, sans-serif;

          font-size: 16em;

          color: black;

          }

          • 將左花括號與選擇器放在同一行。

          • 左花括號與選擇器間添加以空格。

          • 使用兩個空格來縮進。

          • 冒號與屬性值之間添加已空格。

          • 逗號和符號之后使用一個空格。

          • 每個屬性與值結尾都要使用符號。

          • 只有屬性值包含空格時才使用引號。

          • 右花括號放在新的一行。

          • 每行最多 80 個字符。

          在逗號和分號后添加空格是常用的一個規則。

          在 HTML 中載入 JavaScript

          使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

          <script src="myscript.js">

          使用 JavaScript 訪問 HTML 元素

          一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

          以下兩個 JavaScript 語句會輸出不同結果:

          實例

          var obj = getElementById("Demo")

          var obj = getElementById("demo")

          HTML 中 JavaScript 盡量使用相同的命名規則。

          訪問 JavaScript 代碼規范。

          使用小寫文件名

          大多 Web 服務器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。

          其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

          你必須保持統一的風格,我們建議統一使用小寫的文件名。

          文件擴展名

          HTML 文件后綴可以是 .html (或r .htm)。

          CSS 文件后綴是 .css 。

          JavaScript 文件后綴是 .js 。

          .htm 和 .html 的區別

          .htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

          區別在于:

          .htm 應用在早期 DOS 系統,系統現在或者只能有三個字符。

          在 Unix 系統中后綴沒有特別限制,一般用 .html。

          技術上區別

          如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

          如果服務器只配置了 "index.html" 作為默認文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

          但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

          不管怎樣,HTML 完整的后綴是 ".html"。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 日韩一区二区三区免费体验| 国产吧一区在线视频| 久久久老熟女一区二区三区| 精品无码综合一区二区三区| 国产成人无码一区二区在线播放| 亚洲AV美女一区二区三区| 日韩免费无码一区二区视频| 大屁股熟女一区二区三区| 日本一区二区三区免费高清| 国产精品一区二区综合| 国模无码一区二区三区| 国产小仙女视频一区二区三区| 在线欧美精品一区二区三区| 精品亚洲AV无码一区二区三区| 亚洲av鲁丝一区二区三区| 国产一区二区精品| 麻豆国产一区二区在线观看| 深夜福利一区二区| 成人精品视频一区二区三区不卡 | 老熟妇仑乱一区二区视頻| 国产av熟女一区二区三区| 日本中文字幕一区二区有码在线| 色老板在线视频一区二区 | 糖心vlog精品一区二区三区| 91亚洲一区二区在线观看不卡| 老熟妇高潮一区二区三区| 国产AV天堂无码一区二区三区| 国产一区视频在线| 亚洲熟女乱色一区二区三区| 国偷自产一区二区免费视频| 午夜在线视频一区二区三区| 国产爆乳无码一区二区麻豆| 亚洲AV无码一区二区三区鸳鸯影院| 国产成人高清精品一区二区三区 | 日韩av片无码一区二区不卡电影 | 无码毛片一区二区三区视频免费播放 | 中文日韩字幕一区在线观看| 国产色情一区二区三区在线播放| 国产一区二区三区乱码在线观看| 自拍日韩亚洲一区在线| 亚洲av无码一区二区三区天堂古代|