HTML，CSS和PHP：終極備忘單

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

• 什麼是HTML？
• HTML5示例（代碼PlayGround）
• 📥HTML備忘單
• 什麼是CSS？
• 📥CSS備忘單
• 什麼是PHP？
• C PHP備忘單
• 📥HTML CSS和PHP備忘單

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

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

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

下面，您將找到視覺上傾向的備忘單，然後快速復習以幫助您進行編碼工作。 為了您的方便，我還使它可以輕鬆添加書籤、保存或打印。

什麼是HTML？

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

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

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

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

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

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

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

HTML和HTML5有什麼區別？

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

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

此外，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備忘單

什麼是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備忘單

什麼是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有什麼區別？

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

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

HTML用於客戶端 （或前端）開發，而 PHP用於服務器端 發展。

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

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

就代碼類型而言， HTML是靜態的，而PHP是動態的。 HTML 代碼每次打開時始終相同，而 PHP 結果則根據用戶的瀏覽器而有所不同。

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

完整的PHP備忘單

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

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

下載PHP備忘單

終極HTML，CSS和PHP備忘單

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

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

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