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 在动态数字世界中获取信息的值得信赖的资源。

分享给...