CSS 簡介

CSS 是一種語言,用於定義網頁在瀏覽器中的視覺外觀。由於最新的功能,CSS 的使用變得更加簡單。 什麼是 CSS CSS 的簡要歷史 CSS 的外觀 分號 格式和縮排 如何在網頁中加載 CSS 1:使用 link 標籤 2:使用 style 標籤 3:內聯樣式 什麼是 CSS CSS(層疊樣式表的縮寫)是用於為 HTML 文件添加樣式的語言,它告訴瀏覽器如何渲染頁面上的元素。 在 CSS 出現之前,人們希望能夠為他們的網頁添加樣式,因為當時的網頁看起來都很相似和“學術”。在個性化方面,你不能做許多事情。 HTML 3.2 引入了內聯定義顏色的選項,以及像 center 和 font 這樣的呈現標籤,但它很快變成了一個不理想的情況。 CSS 讓我們將所有與展示相關的內容從 HTML 移動到 CSS 中,這樣 HTML 就可以恢復為定義文檔結構而不是在瀏覽器中的外觀的格式。 CSS 不斷演進,5年前使用的 CSS 可能已經過時了,因為新的慣用 CSS 技術和瀏覽器的變化。 很難想象 CSS 誕生時的情況以及網頁有多麼不同。 當時,我們有幾個競爭的瀏覽器,主要有 Internet Explorer 和 Netscape Navigator。 通過使用 HTML,頁面被樣式化,使用特殊的呈現標籤(例如 bold)和特殊的屬性,其中大部分現在已被棄用。 這意味著你只能有有限的自定義機會。 大部分的樣式決策都由瀏覽器決定。 此外,你要為它們之一構建一個網站,因為每個瀏覽器都引入了不同的非標準標籤以提供更多的功能和機會。 不久後,人們意識到需要一種方法來跨瀏覽器樣式化頁面。 1994 年提出了最初的想法,1996 年,CSS 發布了第一個版本,即 CSS Level 1(“CSS 1”)。...

HTML介紹

了解HTML的歷史和基本結構 HTML是由WHATWG(Web Hypertext Application Technology Working Group)定義的標準,這是一個由開發最受歡迎的網頁瀏覽器的人組成的組織。這意味著它基本上由Google、Mozilla、Apple和Microsoft控制。 過去,W3C(World Wide Web Consortium)負責創建HTML標準的機構。 隨著W3C推向XHTML的路線不被接受,控制權非正式地從W3C轉移到了WHATWG。 如果你從未聽說過XHTML,這裡有一個簡短的故事。在2000年初,我們都相信Web的未來是XML(當真的)。所以HTML從基於SGML的作者語言轉變為XML標記語言。 這是一個很大的改變。我們必須了解並遵守更多的規則。更嚴格的規則。 最終瀏覽器供應商意識到這不是Web的正確道路,他們進行反擊,創造了現在被稱為HTML5的東西。 W3C並不真正同意放棄對HTML的控制權,多年來我們得到了2個競爭的標準,每個標準都試圖成為官方標準。最終,W3C在2019年5月28日宣布,由WHATWG發布的“真正”的HTML版本被確定為官方版本。 我提到了HTML5。讓我解釋這個小故事。我知道,到現在為止,這可能有些混亂,當涉及到很多參與者時,生活中的很多事情也是如此,這也很迷人。 我們在1993年有了HTML版本1。[這裡是原始的RFC]。 1995年出現了HTML2。 我們在1997年1月獲得了HTML3,並於1997年12月推出了HTML4。 繁忙的時代! 20多年過去了,我們經歷了所有這些XHTML的事情,最終我們現在到達了這個“東西”HTML5,這實際上不僅僅是HTML。 HTML5現在定義了一整套技術,包括HTML,並添加了許多API和標准,如WebGL、SVG等。 在這裡需要理解的關鍵是:現在沒有HTML版本這樣的東西了。它是一個活標準。就像CSS一樣,我們稱之為3,但實際上它是一組獨立開發的模塊。就像JavaScript一樣,我們每年都有一個新版本,但這不再重要,重要的是引擎實現了哪些個別特性。 是的,我們稱之為HTML5,但HTML4來自1997年。時間對於任何事情來說都很漫長,想象一下對於Web來說有多長。 這是標準“居住”的地方:[https://html.spec.whatwg.org/multipage]。 HTML基礎 HTML是我們用來結構化Web上的內容的標記語言。 HTML以不同的方式提供給瀏覽器。 它可以由根據請求或會話數據構建它的服務器端應用程序生成,例如Rails、Laravel或Django應用程序。 或者它可以由JavaScript客戶端應用程序生成HTML。 或者,在最簡單的情況下,它可以存儲在文件中,並由Web服務器提供給瀏覽器。 讓我們深入研究這種情況,儘管實際上它可能是生成HTML的最不流行方式,但仍然有必要了解基本結構。 按照慣例,HTML文件以.html或.htm擴展名保存。 在此文件中,我們使用標籤來組織內容。 標籤封裝內容,每個標籤為其封裝的文本賦予特殊含義。 讓我們舉幾個例子。 此HTML片段使用p標籤創建一個段落: <p>A paragraph of text</p> 此HTML片段使用ul標籤創建一個項目列表,其中ul表示無序列表,li標籤表示列表項: <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> 當瀏覽器提供HTML頁面時,標籤將被解釋,瀏覽器根據定義元素的規則呈現這些元素的外觀。 其中一些規則是內建的,例如列表的呈現方式。或者鏈接以藍色、底線顯示。 其他一些規則是由帶有CSS的指令集定義的。 HTML不是表現性的。它不關心事物的外觀,而是關心事物的含義。 由瀏覽器決定事物的外觀,由構建頁面的人定義的指令和CSS語言來決定事物的外觀。 現在,我所做的這兩個例子是在頁面上下文之外使用的HTML片段。 HTML頁面結構 讓我們舉一個正確的HTML頁面的例子。 其中一個重要開始的地方是文檔類型聲明(也稱為doctype),這是一種告訴瀏覽器這是一個HTML頁面,以及我們使用的HTML版本的方式。 現代HTML使用以下doctype: <!DOCTYPE html> 然後我們有html元素,它具有開始和結束標籤: <!DOCTYPE html> <html> ... </html> 所有標籤都有開始和結束標籤,除了一些不需要結束標籤的自結束標籤,因為它們不包含任何內容。...

程式設計入門

這篇文章是一個完整的程式設計入門課程。 一般的程式設計。 在開始學習特定的程式語言之前,有一些基本概念你需要熟悉。這些概念並不依賴於特定的程式語言,但對每個開發者來說都是必要的。 如果你是程式設計的新手,這篇文章的目標是幫助你準備並提供基本的概念。 具體來說,你將學習以下內容: 什麼是電腦 什麼是程式 什麼是程式語言 作為一個程式設計師的工作 作為一個程式設計師不需要做的事情 不同的程式設計範式 可以使用的不同程式設計語言,以及應該選擇哪一個 什麼是錯誤 以及更多! 為什麼你應該成為一個程式設計師? 我教學程式設計,每天收到很多電子郵件。我和很多程式設計師和想成為程式設計師的人都有很好的交流。 我對於如何讓人們學習程式設計有一個很好的理解。 人們想要建立自己夢寐以求的應用程式。他們想要將這個項目變成現實,想要實現他們的夢想。在您的電腦或手機上運行的應用程式,創建您和朋友夢想中的遊戲! 人們想以興趣的形式學習這個技能。我與70和80歲的人交談過,他們正在學習編程。出於娛樂。享受新的挑戰。為他們的朋友創建一個應用程式。 人們想在技術方面開始一個新職業。這並不奇怪 - 程式設計作為一份工作非常有吸引力:需求量很大,工作在室內,平均工資也不錯。當然,這取決於地點和水平。你也可以遠程工作,這是我認為的一個巨大的優勢。 當然,這只是其中的3個例子。你可能有不同的需求,但無論需求是什麼,學習程式設計絕對是一個你將來希望擁有的技能。 成為一個程式設計師所需要的 你不需要成為一個計算機科學家或學習工程學,也不需要成為數學天才才能學習程式設計。 這是一個你可以隨時學習的技能,無論年齡如何,而且 - 讓我說 - 它是一個非常棒的技能。 從零開始成為一個程式設計師只需要四件事: 耐心 專注力 時間 一致性 這就是你所需要的一切。 耐心,因為每次學到一些新知識時,你需要耐心,一步一步地學習,直到能夠把知識點連接起來。 專注力,因為它絕對不是一個容易掌握的技能。 時間,因為學習需要時間。在編程方面,你有時候會卡在某些問題上,需要一些時間進行研究。一個優秀的程式設計師在思考問題的時間和編程的時間上花費的時間是相等的。 一致性,因為如果你每天都能花一點時間,比如1或2小時,學習編程,你將在短時間內成為一個優秀的程式設計師。 哦,你可能也需要一台電腦。任何適度新的電腦都足夠好,你並不需要一台高級的MacBook Pro。別把這個當作藉口:) 一台電腦如何工作?概覽 當我說電腦時,我指的是每一個可以編程的電子設備:筆記本電腦和桌上型電腦,智能手機,智能手錶,您的汽車,洗碗機,相機,甚至像狗的GPS裝置這樣的小東西。許多事物,對吧?我們周圍都是電腦。 計算機是由程序驅動的電子設備。從20世紀中葉以來,程序員一直在努力使計算機速度更快,並且更容易和更可靠地編程。 機器是愚蠢的。它們只能遵循您的指示。它們真的無法思考或做決定。它們只能遵循您的指示,所以作為一個程式設計師,您就成為了一個非常強大的人。 我們稱計算機的電子部分為硬體,程序部分稱為軟體。 當您編寫一個程式給計算機時,您提供的指令會被轉換成位元,這是電子設備可以理解的唯一內容。位元只能具有兩個值:0和1。 當您查看電腦或智能手機時,您會看到一個漂亮的界面。這是多年演變的結果。在其後,每秒執行數百萬次指令,為您提供附近最佳餐廳列表。它通過與網絡溝通實現,這是我們人類建造的最大的人工生態系統。 涵蓋計算機如何工作(以及計算機網絡)將需要很多時間。在這個簡要的概述之後,我將重點放在軟體部分上。 關於程式 現在讓我們來看看什麼是程式。你的瀏覽器(Chrome,Firefox或你使用的那個)就是一個程式。 這個網站是應用程式生成的一個程式使它成為可能。我提供內容,程式生成HTML頁面。 你的手機由一個名為iOS或Android的大型程式控制。這是一個巨大的程式,當然將其稱為程式是不公平的–它是一個集合,一個程式生態系統。我們給它取了一個名字。 你電腦上的應用程式就是程式。您手機上的應用程式也是如此。 你的汽車是由程式控制的。 程式是一組指令,程式設計師組合這些指令以使機器執行特定的操作。 通常,在執行程式之前,程式將由程式設計師進行編譯。有時候程序會由另外一個程序解譯。 比如JavaScript,它在瀏覽器中運行。在此准確的時刻,您使用的瀏覽器正在執行我撰寫的某些JavaScript代碼。 所以,這是程式的第一個主要區分:編譯和解譯。不同的程式語言將允許其中之一。 最終,程式是您用來執行特定操作的東西。它可能是幫助簡化企業管理的方式,或者通過創建最終玩家遊戲來解決的問題,比如無聊的問題。 現在我們已經定義了程式是什麼,讓我們深入了解什麼是程式設計。 什麼是程式設計 通常情況下,我們通常使用程式語言中的編碼結構指示來創建一個工作的程式。 然而,我想向這個概念引入更深的內容。 對我而言,程式設計是解決問題。因此,程式設計比您拿起鍵盤並在計算機上鍵入指令的時間要早得多。 程式設計從思考問題開始。或者這個應用程式。 當您收集需求時,與涉及到的所有人,客戶,分析所需做的所有不同事物進行對話時,程式設計開始。 程式設計是定義應用程式不需要做的事情。 在開始工作之前,程式設計是確定您的應用程式是否不可能或代價過高的地方。...