📥 Pobierz mój Ściągawki HTML, CSS i PHPzawiera wszystko, co musisz wiedzieć i pamiętać o tych trzech językach kodowania.
- Co to jest HTML?
- Przykłady HTML5 (Code PlayGround)
- 📥 Ściągawka w formacie HTML
- Co to jest CSS?
- 📥 Ściągawka CSS
- Co to jest PHP?
- 📥 Ściągawka PHP
- 📥 Ściągawka HTML CSS i PHP
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ę zapominania poprawnej składni dla poszczególnych zadań. W związku z tym nierealistyczne jest oczekiwanie większej ilości 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, pozwalając skupić się na rzeczywistym tworzeniu stron internetowych.
Poniżej znajdziesz wizualnie pochylone ściągawki poprzedzone szybkimi odświeżeniami, które pomogą ci w twoich wysiłkach związanych z kodowaniem. Sprawiłem również, że można go ł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ęcia, itp.
- 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 Flash Playera.
- Używa plików cookie do przechowywania danych tymczasowych.
- Nie zezwala na uruchamianie 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 zezwala 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 ma 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 może 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:
- nav
- audio
- rysunkowy
- postęp
- komenda
- czas
- lista danych
- wideo
- rysunek
- metr
- dane
- Sekcja
- czas
- na bok
- brezentowy
- streszczenie
- rp
- rt
- detale
- wbr
- nagłówek
- stopka
- keygen
- osadzać
- artykuł
- grupa
- bdi
- znak
- wydajność
- źródło
- śledzić
- Sekcja
- rubin
Przykłady HTML5 (Code PlayGround)
Przykłady struktury semantycznej
In HTML5 istnieją pewne elementy semantyczne, których można użyć do zdefiniowania różnych części strony internetowej. Oto najczęstsze:
![Elementy struktury semantycznej html5](https://media.websiterating.com/html5-semantic-structure-elements.gif.webp)
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ę sprawdzić w branży, zawsze pomaga posiadanie Ściągawka dotycząca formatowania HTML poręczny. I zaprojektowałem taki, który może ci pomóc na każdym kroku.
![Ściągawka html](https://media.websiterating.com/Ultimate-HTML-Cheatsheet.png.webp)
Co to jest CSS?
Kaskadowe arkusze stylów lub CSS opisuje sposób wyświetlania elementów HTML na ekranie. Ponieważ może kontrolować układy wielu stron w tym samym czasie, 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. Wyzwanie polega na tym, ż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](https://media.websiterating.com/Ultimate-CSS-Cheatsheet.png)
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 być bardziej biegły w PHP lub poszerzyć swoją wiedzę, 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](https://media.websiterating.com/Ultimate-PHP-Cheatsheet.png)
Kompletny ściągawka do HTML, CSS i PHP
Niezależnie od tego, czy jesteś doświadczonym programistą, czy dopiero zaczynasz programować, dobrze jest mieć coś, do czego zawsze możesz wrócić w celach informacyjnych lub po prostu odświeżyć sobie 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