HTML,CSS和PHP:終極備忘單

我們的內容是讀者支持的. 如果您點擊我們的鏈接,我們可能會賺取佣金。 我們如何審查.

📥下載我的 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聲明很長且很複雜。
  • 沒有像 nav 和 header 這樣的元素,也沒有像 charset 這樣的屬性,async,和平。
  • 使用瀏覽器很難獲得用戶的真實地理位置。
  • 無法處理不准確的語法。

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組合備忘單

 

常見問題

什麼是 html css 備忘單?

HTML 和 CSS 備忘單對於初學者甚至經驗豐富的 Web 開發人員來說都是有用的資源。 這個方便的參考指南提供了最常見的 HTML 和 CSS 語法和屬性的快速概述。 

我可以在哪裡獲得 php 備忘單 pdf 版本?

您可以從各種線上來源找到 PDF 格式的 PHP 備忘單。 您可以查看以下幾個地方:
PHP 官方網站: 檢查 PHP 官方網站 (php.net) 以取得官方文檔,其中包括完整的 PHP 手冊,您可以下載 PDF 格式。 雖然它本身不是備忘單,但它包含有關 PHP 函數和用法的大量資訊。
PHP 備忘錄網站: 許多網站提供 PHP 程式設計備忘錄。 像「Cheatography」這樣的網站通常會提供使用者提供的 PDF 格式的備忘錄。 只需在您最喜歡的搜尋引擎上搜尋“PHP 備忘錄 PDF”即可找到這些資源。
GitHub的: GitHub 是開發者共享程式碼和資源的平台。 您可以透過在 GitHub 搜尋欄中搜尋「PHP 備忘單」在 GitHub 上找到 PDF 格式的 PHP 備忘單。 許多開發人員和組織在那裡分享他們的備忘錄和資源。
線上 PDF 產生器: 有一些線上工具可讓您透過選擇要包含的特定函數和主題來建立 PHP 的自訂備忘單。 這些工具會產生 PDF 檔案供您下載。 「PDFCcrowd」就是這樣的工具之一。
請記住確保您使用的 PHP 備忘單來源是有信譽的且是最新的,以確保準確性和與您的需求的相關性。

什麼是 html5 備忘單?

對於開發人員來說,一個有用的資源是 HTML5 Cheat Sheet,它為 HTML5 中使用的各種元素、屬性和語法提供了快速參考指南。 此備忘單包含有關如何建立標題、段落、連結、圖像、表格、表單等的資訊。 它對於初學者和經驗豐富的開發人員來說都是一個方便的工具,可以幫助他們在 HTML5 編碼時節省時間並避免錯誤。

php 與 HTML 之間的主要差異是什麼?

PHP 和 HTML 由於在 Web 開發中的獨特功能和實用性而經常被比較和對比。 HTML 負責定義網頁的結構和內容,而 PHP 則允許建立動態元素,例如互動式表單和資料庫整合。 因此,PHP 和 HTML 之間的選擇很大程度上取決於 Web 開發專案的特定要求和目標。

在哪裡可以找到 html 標籤備忘單?

您可以從各種來源在線找到 HTML 標籤備忘單。 您可以查看以下一些地方:
W3C 官方網站: 萬維網聯盟 (W3C) 是開發和維護 Web 標準(包括 HTML)的組織。 他們有關於 HTML 的全面文檔,可作為權威參考。 有關 HTML 標籤的詳細信息,請訪問 W3C 網站的 HTML 部分。
Mozilla 開發者網路 (MDN): MDN 提供了大量有關 Web 技術(包括 HTML)的文件。 他們的 HTML 參考指南是最可靠且更新最頻繁的可用資源之一。 您可以在 MDN Web 文件中存取 HTML 元素參考。
HTML 備忘錄網站: 許多網站提供各種格式的 HTML 標籤備忘單,包括 PDF。 「Cheatography」、「HTML.com」和「W3Schools」等網站通常會提供可列印的 HTML 備忘錄。
GitHub的: GitHub 對開發人員來說是寶貴的資源。 您可以透過在 GitHub 上搜尋「HTML 備忘單」或類似關鍵字,在各種儲存庫中找到 HTML 標籤備忘單。
線上 PDF 產生器: 就像 PHP 備忘單一樣,有一些線上工具可讓您透過選擇要包含的特定標籤和元素來建立自訂 HTML 標籤備忘單。 這些工具會產生 PDF 檔案供您下載。

在那裡您還可以找到 html 備忘單 pdf 格式。

馬蒂亞斯·阿爾格倫 (Mathias Ahlgren) 是 Website Rating,領導一支由編輯和作家組成的全球團隊。他擁有資訊科學和管理碩士學位。在大學期間獲得早期網頁開發經驗後,他的職業生涯轉向了 SEO。在 SEO、數位行銷和網頁開發領域擁有超過 15 年的經驗。他的重點還包括網站安全,網路安全證書證明了這一點。這種多元化的專業知識鞏固了他在 Website Rating.

「WSR 團隊」是由專門從事技術、網路安全、數位行銷和網路開發的專家編輯和作家組成的集體團體。他們對數位領域充滿熱情,創作出經過深入研究、富有洞察力且易於理解的內容。他們對準確性和清晰度的承諾使得 Website Rating 在動態數位世界中獲取資訊的值得信賴的資源。

隨時了解情況! 加入我們的時事通訊
立即訂閱並免費訪問僅限訂閱者的指南、工具和資源。
您可以隨時取消訂閱。 您的數據是安全的。
隨時了解情況! 加入我們的時事通訊
立即訂閱並免費訪問僅限訂閱者的指南、工具和資源。
您可以隨時取消訂閱。 您的數據是安全的。
隨時了解情況! 加入我們的時事通訊!
立即訂閱並免費訪問僅限訂閱者的指南、工具和資源。
保持最新狀態! 加入我們的時事通訊
您可以隨時取消訂閱。 您的數據是安全的。
我的公司
保持最新狀態! 加入我們的時事通訊
🙌 您(幾乎)已訂閱!
前往您的電子郵件收件箱,然後打開我發送給您的電子郵件以確認您的電子郵件地址。
我的公司
您已訂閱!
感謝您的訂閱。 我們每週一都會發送包含有洞察力數據的時事通訊。
分享給...