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声明很长且很复杂。
  • 没有像导航和标题这样的元素,也没有像字符集这样的属性,一个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 there are some semantic elements that can be used to define different parts of a web page.在HTMLXNUMX中,有些语义元素可用于定义网页的不同部分。 Here are the most common ones:这是最常见的:

html5语义结构元素
来源: w3schools.com
 

标头

<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组合备忘单

 

加入我们的通讯

订阅我们的每周综述通讯,获取最新的行业新闻和趋势

点击“订阅”即表示您同意我们的 使用条款和隐私政策.