Articles
Wprowadzenie do HTML
Tagi związane z wyświetlaniem kodu, cytatami i listami

Tagi związane z wyświetlaniem kodu, cytatami i listami

Ten artykuł wyjaśnia tagi związane z wyświetlaniem kodu, cytatami i listami.

To wyjaśnia, jak pisać kod źródłowy, cytaty, adnotacje i listy w HTML.

YouTube Video

Znaczniki związane z wyświetlaniem kodu

Znacznik <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • Tag <code> jest elementem liniowym używanym do oznaczania kodu lub fragmentów programu w dokumencie HTML.
  • Domyślnie jest wyświetlany czcionką o stałej szerokości, co poprawia czytelność kodu.

Znacznik <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • Tag <pre> jest używany do wyświetlania tekstu w jego oryginalnym formacie w dokumencie HTML. Użycie tego tagu zachowuje odstępy i podziały wierszy w tekście, utrzymując jego oryginalny format. Jest głównie używany do wyświetlania treści wymagających zachowania formatowania, takich jak kod programu, poezja czy tekstowe dzieła sztuki.
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • W tagu <pre> zachowywane są spacje, więc jeśli przed tagiem zamykającym znajduje się spacja, na końcu pojawi się pusta linia, jak w tym przykładzie.

Znacznik <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • Tag <samp> to znacznik HTML używany do przedstawiania wyników programu komputerowego. Służy do wskazywania wyników lub komunikatów z programu lub systemu.

Znacznik <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • Tag <kbd> to znacznik HTML używany do oznaczania danych wejściowych od użytkownika. Jest używany do oznaczania danych wejściowych z klawiatury lub poleceń, takich jak skróty klawiaturowe.

Znacznik <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • Tag <var> jest używany do oznaczania zmiennych w programie lub równaniu. Służy do wyróżniania nazw zmiennych lub zmiennych w formułach matematycznych.

Znaczniki używane do cytatów itp.

Znacznik <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • Tag <blockquote> służy do reprezentowania długich cytatów lub tekstów z innych źródeł i jest zazwyczaj wyświetlany jako element blokowy.

Znacznik <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • Tag <q> jest elementem liniowym używanym do oznaczania krótkich cytatów. Ten tag może być używany do oznaczania fragmentu tekstu lub zdania jako cytatu. Tekst umieszczony w tagu <q> jest zazwyczaj wyświetlany w cudzysłowie. Tag <q> może być również zagnieżdżany. W takim przypadku zazwyczaj stosuje się różne rodzaje cudzysłowów dla wewnętrznego cytatu.

Tag <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • Tag <cite> jest elementem liniowym używanym do wskazywania źródła cytatu lub odniesienia. Jest głównie używany do wskazania źródła pracy, takiego jak tytuły dzieł, artykuły, prace naukowe, strony internetowe czy książki.

Tag <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • Tag <address> jest używany do przedstawienia informacji kontaktowych związanych z autorem lub właścicielem dokumentu lub sekcji. Ten tag zazwyczaj zawiera adresy e-mail, numery telefonów, adresy fizyczne i podobne informacje.

Znacznik <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • Znacznik <time> służy do reprezentowania konkretnego punktu w czasie, czasu trwania lub powtarzającego się czasu. Ten znacznik może zawierać daty i godziny, aby nadać dokumentowi semantyczne znaczenie.

Znacznik <data>

Current Year 
1<data value="2024">Current Year</data>
  • Znacznik <data> służy do powiązania treści czytelnej dla ludzi z wartościami interpretowanymi przez maszyny. Ten znacznik jest przydatny do oznaczania danych w sposób, który może być łatwo przetwarzany przez programy.

Tagi <details> i <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • Znacznik <details> tworzy składany i rozwijalny widżet. Używając go wraz z znacznikiem <summary>, możesz utworzyć sekcję klikalną, aby ujawnić więcej szczegółów, często stosowaną w interaktywnych elementach, takich jak 'Czytaj więcej'.

Tagi używane do wyświetlania list

Tag <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • Jest to tag używany do tworzenia nieuporządkowanych list. Każdy element na liście jest definiowany za pomocą tagu <li>. Domyślnie przed każdym elementem listy wyświetlana jest czarna kropka.

Tag <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • Ten tag jest używany do tworzenia uporządkowanej listy. Każdy element na liście jest definiowany za pomocą tagu <li>. Domyślnie wyświetlane są liczby wskazujące kolejność elementów.

Tag <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • Ten tag jest używany do tworzenia listy par składających się z terminów i definicji lub nazw i szczegółów. Elementy listy są definiowane za pomocą tagów <dt> i <dd>. Termin lub nazwa są zapisane w tagu <dt>, a definicja lub wyjaśnienie w tagu <dd>.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Tagi związane z tekstemTagi związane z tabelami