Omówiliśmy większość elementów HTML, ale nie wszystkie. Jednym z obszarów, które nie zostały omówione, są elementy tekstowe w tekście.
Wbrew powszechnemu przekonaniu, język HTML był pierwotnie przeznaczony do udostępniania dokumentów, a nie filmów wideo kotów. Jest wiele elementów
które zapewniają semantykę tekstu na potrzeby dokumentacji. Dostępny jest moduł obejmujący linki i element <a>. Pozostałe
Krótko omówię jego elementy.
Przykłady kodu i tekst techniczny
Podczas dokumentowania przykładów kodu używaj elementu <code>. Według
domyślnie tekst jest wyświetlany przy użyciu czcionki o stałej szerokości znaków. W przypadku wielu wierszy kodu umieść <code> wewnątrz
Element <pre>, który reprezentuje wstępnie sformatowany tekst.
<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
<code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>
Element <data> łączy określony fragment treści za pomocą tagu
tłumaczenie zrozumiałe dla komputera; Atrybut value elementu zapewnia czytelne dla komputera tłumaczenie treści
elementu. Jeśli treść w polu <data> ma związek z czasem lub datą, sekcja <time>
zamiast niego należy użyć elementu, który reprezentuje określony przedział czasu.
Element <time> może zawierać atrybut datetime, aby daty i godziny były zrozumiałe dla użytkownika w formacie zrozumiałym dla komputera.
Atrybut datetime jest czytelny dla komputera, dlatego zawiera przydatne informacje dla aplikacji, takich jak kalendarze czy wyszukiwarki.
Podając przykładowe dane wyjściowe z programu, użyj funkcji <samp>
, aby uwzględnić tekst. Przeglądarka zwykle renderuje również te przykładowe lub cytowane dane wyjściowe, używając czcionki o stałej szerokości znaków.
W przypadku instrukcji dotyczących interakcji z klawiaturą element <kbd>
. Reprezentuje ona tekst wpisywany przez użytkownika za pomocą klawiatury, głosowego wprowadzania tekstu lub innego urządzenia do wprowadzania tekstu.
Elementu <var> można używać w wyrażeniach matematycznych oraz
za pomocą zmiennych programowania. Większość przeglądarek wyświetla treść tekstową w postaci kursywy otaczającej czcionkę.
Jeśli piszesz dużo matematyki, rozważ użycie MathML, czyli języka XML,
Język znaczników matematycznych do opisywania notacji matematycznej.
Potęga dwóch w twierdzeniu Pitagorasa wykorzystuje indeks górny <sup>
. Istnieje podobny element indeksu <sub>, który określa
tekstu śródtekstowego, który powinien być wyświetlany jako indeks dolny tylko ze względów typograficznych. Indeksy górne i dolne to liczby,
figury, symbole i inne adnotacje mniejsze od normalnej linii typu i umieszczone nieco powyżej lub poniżej linii;
.
Użyj symbolu <del>, aby wskazać tekst, który został usunięty.
Opcjonalnie możesz dodać ustawienie cite do zasobu, który wyjaśnia
zmianę i atrybut datetime z atrybutem
datę i godzinę w czytelnym dla komputera formacie daty i godziny. element przekreślenia, <s>,
może posłużyć do wskazania, że treść jest już nieistotna, ale w rzeczywistości nie została usunięta z dokumentu.
<ins> jest przeciwieństwem elementu <del>; jest używany
wskazuje tekst, który został dodany („wstawiono”). Opcjonalnie możesz też uwzględnić atrybuty cite lub datetime.
Definicje i obsługa języków
Włączając skróty lub akronimy, zawsze podawaj pełną, rozszerzoną wersję hasła przy pierwszym użyciu, zwykłym tekstem.
podczas wprowadzania skróconego terminu między otwarciem a zamknięciem <abbr>
tagi; chyba że dane hasło jest dobrze znane użytkownikowi (np. „HTML”); i „CSS” z tej serii. Tylko w tym pierwszym wystąpieniu
podczas definiowania skrótu lub akronimu, należy <abbr>. Atrybut title nie jest wymagany ani pomocny.
Podczas definiowania terminu, który nie jest skrótem ani akronimem, użyj definicji <dfn>.
do identyfikacji terminu zdefiniowanego w otaczającej go treści.
Jeśli definiowany termin nie jest w tym samym języku co tekst otaczający go, dodaj lang.
aby określić język.
W przypadku pisania w językach różnych kierunków HTML zapewnia <bdi>
element służący do analizowania tekstu potencjalnie dwukierunkowego w izolacji od otaczającego go tekstu. Takie internacjonalizacja
jest szczególnie przydatny, gdy na stronie dynamicznie wstawiane są treści o nieznanym kierunku.
<bdo> zastępuje bieżącą kierunkowość tekstu,
i renderowanie tekstu w innym kierunku. Organizacja W3C przedstawia algorytmy dwukierunkowe.
Niektóre zestawy znaków zawierają niewielkie adnotacje umieszczane nad znakami lub po ich prawej stronie w celu podania informacji.
na temat wymowy. Element <ruby> jest kontenerem,
mają zawierać adnotacje, które ułatwiają czytanie języków pisanych, takich jak koreański, chiński i japoński. Rubin
może być również możliwe w przypadku języka hebrajskiego, arabskiego i wietnamskiego.
Nawias w kształcie rubina (<rp>) został uwzględniony w specyfikacji w celu
zawierają nawiasy otwierające i zamykające w przypadku przeglądarek, które nie używają
obsługuje wyświetlanie <ruby>. jeśli przeglądarki obsługują <ruby> (tak samo jak wszystkie ponadczasowe przeglądarki), zawartość dowolnych elementów <rp>
nie są wyświetlane. Element tekstowy rubin (<rt>) zawiera
same adnotacje. Obie te elementy są zagnieżdżone w elemencie <ruby>.
Jeśli Twoja przeglądarka obsługuje <ruby>, nawias nie jest widoczny.
Uwydatnianie tekstu
Istnieje kilka elementów, które można wykorzystać do podkreślenia tekstu zgodnie z semantycznym powodem uwydatnienia tekstu (zamiast ze względów prezentacyjnych, ponieważ to jest zadanie dla CSS).
- Aby ujednolicić zakres treści, użyj elementu
<em>. Element<em>może być zagnieżdżony, a każdy poziom zagnieżdżenia wskazuje większy stopień podkreślenia. Ten element ma opis semantyczny mogą być przekazywane w celach informacyjnych dla słuchowych klientów użytkownika, takich jak czytniki ekranu, Alexa czy Siri. - Aby wskazać lub wyróżnić tekst, użyj elementu
<mark>które są w jakiś sposób trafne, na przykład należy wyróżnić (lub „oznaczyć”) wystąpienie hasła w wynikach wyszukiwania. Dzięki temu oznaczanie treści w taki sposób, aby można je było szybko zidentyfikować bez podkreślania znaczenia czy wyróżniania. - Element
<strong>wskazuje, że tekst ma silne wartości znaczenie. Przeglądarki renderują treści z większą grubością czcionki. - w przypadku elementu
<cite>omówione są podstawowe informacje dotyczące tekstu; służy do oznaczania tytułów książek, artykułów lub innych prac twórczych oraz skróconych metadanych lub odniesień do takich materiałów; np. numer ISBN książki.
Trzy elementy zostały tymczasowo wycofane, ale zostały ponownie dodane do kodu HTML. Należy ich używać z umiarem, – jeśli w ogóle nie ma takiej wartości semantycznej lub nie ma ich wcale, do określania stylu elementów HTML należy zawsze używać kodu CSS.
<i>
Elementów <i> można używać w terminach technicznych, obcych słowach
(ponownie, gdy atrybut lang określa
język), myśli lub nazwy statków. Element służy do odróżniania treści wbudowanej od otaczającego je tekstu z określonego powodu.
takie jak tekst idiomatyczny, terminy techniczne i oznaczenia taksonomiczne. Tego elementu nie należy używać wyłącznie do kursywy.
MLW wykorzystuje element <span> w dziwnym tekście na dole opinii Toasty'ego McToastface'a z warsztatów. <span>
zapewnia ogólny, wbudowany kontener, który nie ma semantyki i niczego nie reprezentuje. Takie użycie elementu <i> byłoby także odpowiednie.
Domyślnym stylem elementu <i> jest renderowanie elementu kursywą. W tym przykładzie ustawiliśmy font-style: normal
bo użyte znaki nie są wyświetlane kursywą.
<u>
Element <u> służy do oznaczania treści, które zawierają adnotacje nietekstowe. Przykład:
możesz dodawać adnotacje do słów,
które zawierają błędy w pisowni. Domyślnie treść jest podkreślona, ale można to kontrolować za pomocą CSS.
na przykład przez dodanie falowanego czerwonego podkreślenia wskaźnika błędów gramatycznych procesora tekstu.
<p>I always spell <u>licence</u> wrong</p>
<b>
Za pomocą elementu <b> można zwrócić uwagę na tekst, który nie
są istotne. Ten element nie przekazuje żadnych specjalnych informacji semantycznych i należy go używać tylko wtedy, gdy żaden inny
pasują do celu. Nie podano żadnego przykładu, ponieważ nie udało mi się wymyślić odpowiedniego przypadku użycia. tak właśnie działa „ostateczna decyzja”.
.
Wolna przestrzeń
Jeśli chcesz wstawić podziały wiersza, np. przy pisaniu poezji lub podaniu adresu pocztowego, użyj samozamykającego się elementu podziału wiersza,
<br> służy do dodania znaku przejścia do nowej linii.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Aby ustawić separator (separator tematyczny) między sekcjami treści stycznych, np. między rozdziałami książki lub
między monologem liczącym 5000 słów a przepisem,którego szukają użytkownicy, dodaj <hr>
. HR to skrót od „linii poziomej”. Choć przeglądarki zazwyczaj renderują linię poziomą, ten element ma znaczenie semantyczne.
domyślna rola to separator.
HTML zawiera też element, który umożliwia łamanie słów. Samozamykający się przycisk <wbr>
informuje przeglądarkę, że jeśli słowo może wychodzić poza kontener,
mogą opcjonalnie złamać linię. Jest to zwykle używane do podziału słów między słowami w obrębie wewnątrz
długie adresy URL. Nie dodaje łącznika.
Na przykład w biografii Hala tekst jest zapisany kodem bajtowym, a każdy bajt jest oddzielony spacją. Kod bajtowy
nie zawiera spacji. Aby umożliwić dzielenie długiego ciągu kodu bajtowego tylko między bajtami w przypadku konieczności zawijania wiersza, uwzględniamy
element <wbr> przy każdej możliwości przerwy:
<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>
Elementy <br>, <hr> i <wbr> są pustymi elementami, co oznacza, że nie mogą mieć żadnych węzłów podrzędnych – nie mogą też być zagnieżdżone.
elementów ani tekstu. Żadne z nich nie ma „wewnątrz” nie mają tagów końcowych, w których można przechowywać treść.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat tekstu wbudowanego.
Którego elementu należy użyć do wyświetlenia przykładowego kodu?
<code><data><kbd>Do czego służy element <ruby>?