HTML, CSS i PHP: najlepszy ściągawka

Scenariusz

📥 Pobierz mój Ściągawki HTML, CSS i PHPzawiera wszystko, co musisz wiedzieć i pamiętać o tych trzech językach kodowania.

Pełne opanowanie sztuki kodowania może zająć lata, gdy wszystkie znaczniki, składnie i inne elementy języków programowania często się przeplatają.

Nawet bardziej doświadczeni programiści mogą wpaść w pułapkę zapomnienia poprawnej składni dla poszczególnych zadań. W związku z tym nierealistyczne jest oczekiwanie więcej zieleni autorzy strony mieć bezbłędne zrozumienie sztuki.

Dlatego właśnie ściągawki do HTML, CSS i PHP są niezwykle przydatne, niezależnie od tego, jak długo ćwiczysz. Służy jako szybki przewodnik po znalezieniu właściwych poleceń i składni, co pozwala skupić się na rzeczywistym tworzeniu stron internetowych.

Poniżej znajdziesz wizualnie nachylone ściągawki poprzedzone szybkimi przypomnieniami, które pomogą Ci w staraniach o kodowanie. Zrobiłem też, aby można go było łatwo dodawać do zakładek, zapisywać lub drukować dla Twojej wygody.

Co to jest HTML?

HTML to skrót od Hypertext Markup Language – kod, który służy do tworzenia struktury strony internetowej i jej zawartości.

Ten język znaczników składa się z szeregu elementów, które sprawiały, że treść wyglądała lub funkcjonowała w określony sposób i jest główną częścią kodu frontonu każdej witryny.

HTML jest językiem opisującym strukturę stron internetowych… W języku HTML autorzy opisują strukturę stron za pomocą znaczników. Elementy języka oznaczają fragmenty treści, takie jak akapit, lista, tabela itd. - z W3.org

Na przykład możesz zawijać lub zawijać różne części treści - gdzie otaczające tagi mogą tworzyć hiperłącze ze słowem lub obrazem do innej strony. Możesz również użyć tego do między innymi pochylania słów i powiększania lub zmniejszania czcionek.

Jak zauważył W3, niektóre z innych rzeczy, na które pozwala HTML, to:

  • Publikowanie dokumentów online z nagłówki, tekst, tabele, listy, zdjęciaItp
  • Pobieranie informacji online jednym kliknięciem przycisku za pośrednictwem linki hipertekstowe.
  • Projektowanie formularze do przeprowadzania transakcji ze zdalnymi usługami do wyszukiwać informacje, dokonywać rezerwacji lub zamawiać produkty, wśród innych funkcji.
  • Włącznie z arkusze kalkulacyjne, klipy wideo i inne multimedia i aplikacje już w Twoich dokumentach.

Więc jeśli miałbyś zrobić linię „Mój pies jest bardzo słodki” stand samodzielnie, możesz określić, że jest to akapit, umieszczając go w znacznikach akapitu (więcej na ten temat później), które wyglądałyby następująco: Mój pies jest bardzo słodki

Jaka jest różnica między HTML a HTML5?

Jak sama nazwa wskazuje, HTML5 to piąta wersja standardu HTML. Obsługuje integrację wideo i audio z językiem, co zmniejsza potrzebę stosowania wtyczek i elementów innych firm.

Poniżej znajdują się główne różnice między HTML a HTML5:

HTML

  • Nie obsługuje audio i wideo bez obsługi odtwarzacza flash.
  • Używa plików cookie do przechowywania danych tymczasowych.
  • Nie pozwala na uruchomienie JavaScipt w przeglądarce.
  • Umożliwia grafikę wektorową przy użyciu różnych technologii, takich jak między innymi VML, Silver-light i Flash.
  • Nie pozwala na efekty przeciągania i upuszczania.
  • Działa ze wszystkimi starszymi przeglądarkami.
  • Mniej przyjazne dla urządzeń mobilnych.
  • Deklaracja Doctype jest długa i skomplikowana.
  • Nie zawiera elementów takich jak nav i header, a także atrybutów takich jak charset, asynci polecenie ping.
  • Niezwykle trudno jest uzyskać prawdziwą GeoLokalizację użytkowników za pomocą przeglądarki.
  • Nie mogę obsłużyć niedokładnej składni.

HTML5

  • Obsługuje sterowanie audio i wideo za pomocą i tagi.
  • Używa baz danych SQL i pamięci podręcznej aplikacji do przechowywania danych offline.
  • Umożliwia pracę JavaScript w tle z wykorzystaniem JS Web Worker API.
  • Grafika wektorowa jest podstawową częścią HTML5, podobnie jak SVG i płótno.
  • Umożliwia przeciąganie i upuszczanie efektów.
  • Umożliwiają rysowanie kształtów.
  • Obsługuje wszystkie nowe przeglądarki, takie jak Firefox, Mozilla, Chrome i Safari.
  • Bardziej przyjazny dla urządzeń mobilnych.
  • Deklaracja Doctype jest prosta i łatwa.
  • Zawiera nowe elementy struktur internetowych, takie jak między innymi nav, header i footer, a także atrybuty charset,synci polecenie ping.
  • Sprawia, że ​​kodowanie znaków jest proste i łatwe.
  • Umożliwia śledzenie GeoLocation użytkownika za pomocą JS GeoLocation API.
  • Potrafi obsługiwać niedokładną składnię.
 

Ponadto istnieje wiele elementów HTML, które zostały zmodyfikowane lub usunięte z HTML5. Obejmują one:

  • - Zmienić na
  • - Zmienić na
  • - Zmienić na
  • - Usunięto
  • - Usunięto
  • - Usunięto
  • - Brak nowego tagu. Używa CSS.
  • - Brak nowego tagu. Używa CSS.
  • - Brak nowego tagu. Używa CSS.
  • - Brak nowego tagu. Używa CSS.
  • - Brak nowego tagu. Używa CSS.

Tymczasem HTML5 zawiera również szereg nowo dodanych elementów. Obejmują one:

 

Przykłady HTML5 (Code PlayGround)

Przykłady struktury semantycznej

W HTML5 istnieje kilka elementów semantycznych, których można użyć do zdefiniowania różnych części strony internetowej. Oto najpopularniejsze z nich:

Elementy struktury semantycznej html5
Źródło: w3schools.com
 

nagłówek

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

Nav

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

Sekcja

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

Artykuł

<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>
 

Na bok (pasek boczny)

<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>

Stopka

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

Podstawowe przykłady formatowania tekstu

Nagłówki do

<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>

Ustęp ( & )

<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>
 

Niezamówiony i uporządkowana lista

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

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

Zablokować cytat i zacytować

<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>
 

Połączyć

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

Przycisk

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

Przerwanie linii

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

Linia pozioma

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

Adres

<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>

Indeks dolny i indeks górny

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

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

Skrót

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

Kod

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

Czas

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

Usunięto

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

Przykłady tabel

Przykład głowy, korpusu i stopy stołu

<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>

Nagłówki tabel, wiersze i przykład danych

<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>
 

Przykłady mediów

Wizerunek

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

Obrazek

<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>
 

Postać

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

Wideo

<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>
 

Wypełnij ściągawkę HTML

Niezależnie od tego, czy jesteś doświadczonym programistą, czy kimś, kto po prostu chce się zamoczyć w branży, zawsze warto mieć Ściągawka HTML poręczny. Zaprojektowałem taki, który może ci pomóc na każdym kroku.

Ściągawka html

 

Pobierz ściągawkę HTML

 

Co to jest CSS?

Kaskadowe arkusze stylów lub CSS opisuje, jak elementy HTML będą wyświetlane na ekranie. Ponieważ może kontrolować układy wielu stron jednocześnie, może zaoszczędzić dużo czasu i wysiłku.

CSS to język służący do opisywania prezentacji stron internetowych, w tym kolorów, układu i czcionek. Pozwala dostosować prezentację do różnych typów urządzeń, takich jak duże ekrany, małe ekrany czy drukarki. - z W3.org

Jaka jest różnica między HTML a CSS?

Chociaż HTML i CSS są językami używanymi do tworzenia stron internetowych i aplikacji, mają różne funkcje.

HTML jest tym, czego używasz do dyktowania struktury i treści, które będą wyświetlane na stronie internetowej.

Z drugiej strony CSS służy do modyfikacji pliku projektowanie stron internetowych elementów HTML na stronie internetowej (w tym układ, efekty wizualne i kolor tła).

HTML tworzy strukturę i zawartość, CSS tworzy projekt lub styl. HTML i CSS razem tworzą interfejs strony internetowej.

Co to jest składnia CSS?

Składnia CSS składa się z selektora i bloku deklaracji.

Selektor określa styl elementu HTML, podczas gdy blok deklaracji zawiera jedną lub więcej deklaracji lub par CSS, nazwę właściwości i wartość z dwukropkiem między nimi.

Deklaracje są oddzielone średnikami, a bloki deklaracji są zawsze ujęte w nawiasy klamrowe.

Na przykład, jeśli chcesz zmienić wygląd nagłówka 1, składnia CSS wyglądałaby następująco: h1 {color: red; font-size: 16szt;}

Wypełnij arkusz CSS

CSS jest dość łatwy w użyciu. Wyzwaniem jest to, że istnieje wiele selektorów i deklaracji, że zapamiętanie ich wszystkich jest trudne, jeśli nie niemożliwe. Nie musisz ich jednak zapamiętywać.

Oto ściągawka do CSS i CSS3 których możesz użyć w dowolnym momencie.

Ściągawka CSS

 

Pobierz ściągawkę CSS

 

Co to jest PHP?

PHP to skrót od Hypertext Preprocessor, popularny język skryptowy typu open source z osadzonym kodem HTML, używany do tworzenia dynamicznych witryn internetowych, aplikacji internetowych lub statycznych witryn internetowych.

Ponieważ PHP jest językiem po stronie serwera, jego skrypty są wykonywane na serwerze (nie w przeglądarce), a jego wyjściem jest zwykły kod HTML w przeglądarce.

PHP jest szeroko stosowanym językiem skryptowym ogólnego przeznaczenia o otwartym kodzie źródłowym, który jest szczególnie odpowiedni do tworzenia stron internetowych i może być osadzony w HTML. - z PHP.net

Ten język skryptowy po stronie serwera działa w różnych systemach operacyjnych, w tym Windows, Mac OS, Linux i Unix. Jest również kompatybilny z większością serwerów, takich jak Apache i IIS.

W porównaniu z innymi językami, takimi jak ASP i JSP, PHP jest łatwy do nauczenia dla początkujących. PHP oferuje również wiele funkcji potrzebnych programistom na poziomie zaawansowanym.

Jaka jest różnica między PHP a HTML?

Chociaż oba języki mają kluczowe znaczenie dla tworzenie stron internetowych, PHP i HTML różnią się na kilka sposobów.

Kluczowa różnica polega na tym, do czego służą te dwa języki.

HTML jest używany po stronie klienta (lub front-end) rozwój, podczas gdy PHP jest używane po stronie serwera opon wyścigowych.

HTML to język używany przez programistów do organizowania treści w witrynie internetowej, na przykład wstawiania tekstu, obrazów, tabel i hiperłączy, formatowania tekstu i określania kolorów.

Tymczasem PHP służy do przechowywania i pobierania danych z bazy danych, wykonywania operacji logicznych, wysyłania wiadomości e-mail i odpowiadania na nie, przesyłania i pobierania plików, tworzenia aplikacji komputerowych i nie tylko.

Pod względem typu kodu HTML jest statyczny, a PHP dynamiczny. Kod HTML jest zawsze taki sam za każdym razem, gdy jest otwierany, podczas gdy wyniki PHP różnią się w zależności od przeglądarki użytkownika.

Dla nowych programistów oba języki są łatwe do nauczenia, chociaż krzywa uczenia się jest krótsza w przypadku HTML niż PHP.

Wypełnij ściągawkę PHP

Jeśli jesteś początkującym programistą, który chce lepiej opanować PHP lub poszerzyć swoją wiedzę na ten temat, oto Ściągawka PHP możesz szybko odnieść się do.

Ta ściągawka składa się z funkcji PHP - które są skrótami do powszechnie używanych kodów - wbudowanych w język skryptowy.

Ściągawka PHP

 

Pobierz ściągawkę PHP

 

Kompletny ściągawka do HTML, CSS i PHP

Niezależnie od tego, czy jesteś doświadczonym programistą, czy dopiero zaczynasz programować, świetnie jest mieć coś, do czego zawsze możesz wrócić w celach informacyjnych lub po prostu odświeżyć pamięć.

I jako prezent dla programistów, którzy żonglują między nimi HTML, CSS i PHP, oto ściągawka ULTIMATE, wraz ze wszystkim, co musisz wiedzieć i pamiętać o tych trzech językach kodowania:

 

Pobierz połączony arkusz HTML, CSS i PHP

 

Dołącz do naszego biuletynu

Zapisz się do naszego cotygodniowego biuletynu podsumowującego i otrzymuj najnowsze wiadomości i trendy w branży

Klikając „subskrybuj”, zgadzasz się na nasze warunki użytkowania i polityka prywatności.