2022 年最佳黑色星期五/網絡星期一特賣 了解方案 🤑

HTML,CSS和PHP:終極備忘單

Written by

📥下載我的 HTML,CSS和PHP速查表,其中包括您需要了解和記住的有關這三種編碼語言的所有信息。

編碼的藝術可能需要花費數年時間才能完全掌握經常纏在一起的所有標記,語法和其他編程語言元素。

即使是更有經驗的開發人員也可能陷入忘記特定任務的正確語法的陷阱。 因此,期望更多的綠色是不現實的 網絡開發者 對藝術有完美的把握。

這就是為什麼 HTML,CSS和PHP備忘單 無論您練習多久,都非常有用。 它是查找正確命令和語法的快速指南,讓您可以專注於實際的 Web 開發。

在下面,您會發現帶有視覺效果的備忘單,前面有快速復習,可幫助您進行編碼工作。 為方便起見,我還使其易於添加書籤、保存或打印。

什麼是HTML?

HTML代表超文本標記語言 – 用於為網頁及其內容創建結構的代碼。

該標記語言由一系列元素組成,這些元素用於使內容以某種方式顯示或起作用,並且是每個網站的前端代碼的主要部分。

HTML是用於描述網頁結構的語言…對於HTML,作者使用標記來描述頁面的結構。 語言的元素標記內容的內容,例如段落,列表,表格等。 – 從W3.org

例如,您可以封裝或包裝內容的不同部分,其中的封裝標籤可以使單詞或圖像超鏈接到另一個頁面。 您還可以使用它來斜體化單詞並使字體變大或變小。

正如 W3,HTML允許您執行的其他一些操作包括:

  • 使用發佈在線文檔 標題,文字,表格,列表,照片等等。
  • 通過單擊按鈕檢索在線信息 超文本鏈接.
  • 設計 形式 用於與遠程服務進行交易 搜索信息,進行預訂或訂購產品,以及其他功能。
  • 包括 電子表格,視頻剪輯和其他媒體 和文檔中已有的應用程序。

所以如果你要打線 “我的狗很甜” 單獨使用,您可以通過將其包含在段落標籤中來指定它是一個段落(稍後會對此進行詳細介紹),如下所示: 我的狗很甜

HTML和HTML5有什麼區別?

顧名思義, HTML5是HTML標準的第五版。 它支持將視頻和音頻集成到語言中,從而減少了對第三方插件和元素的需求。

以下是HTML和HTML5之間的主要區別:

HTML

  • 不支持沒有 Flash 播放器支持的音頻和視頻。
  • 使用cookie來存儲臨時數據。
  • 不允許 JavaScipt 在瀏覽器中運行。
  • 通過使用諸如VML,Silver-light和Flash等不同的技術來允許矢量圖形。
  • 不允許拖放效果。
  • 適用於所有較舊的瀏覽器。
  • 不太適合移動設備。
  • Doctype聲明很長且很複雜。
  • 沒有像導航和標題這樣的元素,也沒有像字符集這樣的屬性,一個sync,和平。
  • 使用瀏覽器很難獲得用戶的真實地理位置。
  • 無法處理不准確的語法。

HTML5

  • 通過以下方式支持音頻和視頻控件和標籤。
  • 使用SQL數據庫和應用程序緩存來存儲脫機數據。
  • 允許JavaScript使用JS Web worker API在後台運行。
  • 矢量圖形是SVG和canvas一樣,是HTML5的基本組成部分。
  • 允許拖放效果。
  • 使繪製形狀成為可能。
  • 支持所有新的瀏覽器,例如Firefox,Mozilla,Chrome和Safari。
  • 更適合移動設備。
  • Doctype聲明非常簡單。
  • 具有用於 web 結構的新元素,如導航、頁眉和頁腳等,還具有字符集屬性,一個sync,和平。
  • 使字符編碼變得簡單容易。
  • 允許通過使用JS GeoLocation API跟踪用戶GeoLocation。
  • 能夠處理不正確的語法。
 

此外,HTML的許多元素已被修改或從HTML5中刪除。 這些包括:

  • - 變成
  • - 變成
  • - 變成
  • –已刪除
  • –已刪除
  • –已刪除
  • –沒有新標籤。 使用CSS。
  • –沒有新標籤。 使用CSS。
  • –沒有新標籤。 使用CSS。
  • –沒有新標籤。 使用CSS。
  • –沒有新標籤。 使用CSS。

同時,HTML5還包含許多新添加的元素。 這些包括:

 

HTML5示例(代碼PlayGround)

語義結構示例

In HTML5 有一些語義元素可用於定義網頁的不同部分。 以下是最常見的:

 

標頭

<header>
  <h1>Guide to Search Engines</h1>
</header>

導航

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

部分

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

文章

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
 

放在一邊

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

頁腳

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
 

基本文字格式範例

標題至

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

段( & )

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>
 

無序和有序列表

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

塊引用並引用

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>
 

鏈接

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

鈕扣

<button name="button">I am a Button. Click me!</button>
 

越線

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

水平線

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
 

地址

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

下標和上標

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

縮寫

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

<p>This is normal text. <code>This is code.</code> This is normal text.</p>
 

時間

<p>The movie starts at <time>20:00</time>.</p>

已刪除

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
 

表格範例

表頭,身體和腳的示例

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

表標題,行和數據示例

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>
 

媒體範例

圖片

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

圖片

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
 

數字

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

視頻

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>
 

完整的HTML備忘單

無論您是經驗豐富的開發人員還是只是想涉足這個行業的人,擁有一個 HTML備忘單 便利。 我設計了一個可以幫助你每一步的方法。

html備忘單

 

下載HTML備忘單

 

什麼是CSS?

級聯樣式表或CSS 描述 HTML 元素將如何顯示在屏幕上。 因為它可以同時控制多個頁面的佈局,所以可以為您節省大量的時間和精力。

CSS是用於描述Web頁面表示的語言,包括顏色,佈局和字體。 它使人們可以將演示文稿適應不同類型的設備,例如大屏幕,小屏幕或打印機。 – 從W3.org

HTML和CSS有什麼區別?

HTML和CSS都是用於構建網頁和應用程序的語言,但它們具有不同的功能。

HTML是您用來指示將在網頁上顯示的結構和內容的工具。

另一方面,CSS用於修改 網頁設計 網頁上HTML元素的大小(包括佈局,視覺效果和背景顏色)。

HTML創建結構和內容,CSS創建設計或樣式。 HTML和CSS共同構成了一個網頁界面。

什麼是CSS語法?

CSS語法 由一個選擇器和一個聲明塊組成。

當聲明塊包含一個或多個聲明或CSS對,一個屬性名和一個帶有冒號的值時,選擇器確定要設置樣式的HTML元素。

聲明用分號分隔,聲明塊始終用大括號括起來。

例如,如果您希望修改標題1的顯示方式,則CSS語法應如下所示:h1 {color:red; font-size:16pc;}

完整的CSS備忘單

CSS 很容易使用。 挑戰在於有很多選擇器和聲明,即使不是不可能,也很難記住它們。 不過,您不必記住它們。

這裡有一個 CSS和CSS3備忘單 您可以隨時使用。

CSS備忘單

 

下載CSS備忘單

 

什麼是PHP?

PHP是Hypertext Preprocessor的首字母縮寫,一種流行的開源,HTML嵌入腳本語言,用於開發動態網站,Web應用程序或靜態網站。

PHP是服務器端語言,其腳本在服務器上執行(而不是在瀏覽器中),其輸出是瀏覽器上的純HTML。

PHP是一種廣泛使用的開源通用腳本語言,特別適合於Web開發,並且可以嵌入HTML中。 – 從PHP.net

這種服務器端腳本語言可在多種操作系統上運行,包括 Windows、Mac OS、Linux 和 Unix。 它還與大多數服務器兼容,例如 Apache 和 IIS。

與ASP和JSP等其他語言相比,PHP對於初學者來說很容易學習。 PHP還提供了高級開發人員需要的大量功能。

PHP和HTML有什麼區別?

儘管兩種語言對於 Web開發,PHP和HTML在幾種方面有所不同。

關鍵區別在於這兩種語言的用途。

HTML用於客戶端 (或前端)開發,而 PHP用於服務器端 發展。

HTML是開發人員用於組織網站內容的語言,例如插入文本,圖像,表格和超鏈接,設置文本格式以及指定顏色。

同時,PHP用於存儲和檢索數據庫中的數據,執行邏輯操作,發送和回復電子郵件,上傳和下載文件,開發桌面應用程序等等。

就代碼類型而言, HTML是靜態的,而PHP是動態的. 每次打開 HTML 代碼時總是相同的,而 PHP 結果因用戶的瀏覽器而異。

對於新開發人員而言,這兩種語言都易於學習,儘管HTML的學習曲線比PHP短。

完整的PHP備忘單

如果您是一名新手程序員,想要更精通 PHP 或擴展您的知識,這裡有一個 PHP備忘單 您可以快速參考。

該備忘單包含PHP函數(它們是廣泛使用的代碼的快捷方式),這些函數內置​​在腳本語言中。

PHP備忘單

 

下載PHP備忘單

 

終極HTML,CSS和PHP備忘單

無論您是經驗豐富的開發人員還是剛開始編碼的人,擁有一些您可以隨時返回以供參考或只是刷新您的記憶的東西都很棒。

並作為禮物送給那些在兩者之間相互糾纏的開發人員 HTML,CSS和PHP,這是終極速查表,其中包含您需要了解和記住的有關這三種編碼語言的所有信息:

 

下載HTML,CSS和PHP組合備忘單

 

加入我們的通訊

訂閱我們的每週綜述通訊,獲取最新的行業新聞和趨勢

點擊“訂閱”即表示您同意我們的 使用條款和隱私政策.