Komentarze HTML, łamanie linii i spacje, z podglądem na żywo | We.Inc
Jak pisać komentarze HTML i CSS, łamać linie, dodawać dodatkowe spacje i zapobiegać ich zwijaniu. Każdy przykład można edytować, a obok widać wyrenderowany efekt.
Komentarze HTML, łamanie linii i spacje
Komentarz HTML zapisujesz jako <!-- note -->; przeglądarki pomijają wszystko między znacznikami. Wymuś łamanie linii w tekście przez <br>, a nowy akapit zacznij od <p>. Przeglądarki ściskają ciągi spacji do jednej, więc użyj dla pojedynczej stałej spacji albo właściwości CSS white-space, aby zachować wpisane odstępy.
Szybka ściąga
Chcesz
Użyj
Uwagi
Notatkę w HTML
<!-- note -->
Widoczna w źródle strony, nigdy na ekranie
Notatkę w CSS
Jedyna forma komentarza w CSS
Łamanie linii w wierszu tekstu
<br>
Adresy, wiersze, teksty piosenek
Nowy blok tekstu
Daje odstęp, który można stylować
Jedną spację, która nigdy się nie zwija ani nie łamie
Między liczbą a jej jednostką
Zachowanie każdej spacji i nowej linii
white-space: pre-wrap
Nadal zawija długie linie
Każdy przypadek na tej stronie pokazuje kod i to, co przeglądarka faktycznie rysuje. Edytuj dowolny przykład, a wynik się zaktualizuje, więc zobaczysz, dlaczego spacja zniknęła albo łamanie nic nie dało, zanim zmienisz własną stronę.
Znajdź w sekcjach poniżej przypadek pasujący do Twojego problemu: komentarze, łamanie linii, spacje lub właściwość white-space.
Edytuj kod po lewej. Wynik po prawej to prawdziwe renderowanie przeglądarki w odizolowanej ramce z wyłączonymi skryptami.
Skopiuj do swojej strony wersję, która robi to, czego potrzebujesz.
Jeśli odstępy nadal wyglądają źle, sprawdź dziesięć błędów pod koniec strony; większość problemów ze zwiniętymi spacjami to jeden z nich.
Używaj komentarzy, aby wyjaśniać, dlaczego znaczniki są takie, a nie czym są. Komentarz <!-- nav --> nad elementem nav nic nie wnosi.
Usuwaj komentarze z produkcyjnego HTML, jeśli zawierają wewnętrzne notatki, bo każdy może je przeczytać przez Wyświetl źródło.
Zanim sięgniesz po stos znaczników <br>, użyj margin lub gap w CSS. Odstępy w CSS mogą się zmieniać zależnie od rozmiaru ekranu; rząd łamań linii nie może.
Wstawiaj między wartości, które muszą zostać w jednej linii, na przykład 10 km lub Mr. Khan, zamiast używać go do wcięć.
Najczęściej zadawane pytania
Jak zakomentować kilka linii HTML?
Wstaw <!-- przed pierwszą linią i --> po ostatniej. Wszystko pomiędzy, w dowolnej liczbie linii, jest ignorowane. Nie można zagnieżdżać jednego komentarza w drugim, bo pierwsze --> kończy cały komentarz, a reszta pojawia się jako tekst.
Dlaczego mój HTML ignoruje dodatkowe spacje?
HTML traktuje każdy ciąg spacji, tabulatorów i nowych linii w zwykłym tekście jako jedną spację. Dzięki temu możesz swobodnie wcinać kod źródłowy bez zmiany strony. Aby zachować kilka spacji, użyj encji albo ustaw w CSS white-space: pre-wrap na elemencie.
<br>, <br/> czy <br />?
W HTML działają wszystkie trzy. <br> to zwykła forma HTML. Ukośnik jest opcjonalny i ignorowany przez parser HTML, ale JSX w React wymaga samozamykającego <br />.
Czy mogę używać komentarzy // w CSS?
Nie. CSS rozumie tylko /* */. Linia zaczynająca się od // nie jest komentarzem: parser traktuje ją jako błędny kod i odrzuca deklarację, a nawet całą następną regułę, dlatego błąd może wyglądać na losowy.
Czy komentarze warunkowe nadal działają?
Nie. Komentarze warunkowe, takie jak <!--[if IE]>, były czytane tylko przez stare wersje Internet Explorera i zostały porzucone w Internet Explorer 10. Każda obecna przeglądarka traktuje je jak zwykłe komentarze, więc znaczniki w ich wnętrzu nigdy się nie pojawiają.
Kiedy łamanie linii to właściwe narzędzie
<br> pasuje tam, gdzie łamanie linii jest częścią samej treści: linie adresu pocztowego, strofa wiersza, blok podpisu. W tych miejscach czytelnik zachowałby łamanie, przepisując tekst ręcznie.
Wszędzie indziej łamanie to układ, a układ należy do CSS. Dwa akapity rozdzielone przez <br><br> wyglądają dobrze, dopóki projekt nie potrzebuje więcej miejsca na komputerze i mniej na telefonie. Dwa elementy <p> z marginesem mogą się zmienić w dowolnym breakpoincie, a czytniki ekranu ogłaszają je jako osobne akapity.
Dlaczego spacje się zwijają i cztery sposoby, by temu zaradzić
Domyślne ustawienie przeglądarki dla zwykłego tekstu to white-space: normal, które łączy każdy ciąg białych znaków w jedną spację i zawija linie tam, gdzie trzeba. Dlatego wcięcia z kodu źródłowego nigdy nie pojawiają się na ekranie.
Aby zachować spacje, możesz użyć encji ( oraz szerszych   i  ), elementu <pre> lub jednej z wartości white-space: pre, pre-wrap, pre-line i break-spaces. Encje pasują do jednej lub dwóch stałych przerw; wartości CSS pasują do całych bloków tekstu, takich jak kod, wiersze czy notatki wpisane przez użytkowników.
Komentarze są publiczne
Komentarze HTML trafiają do każdego odwiedzającego. Nie pojawiają się na stronie, ale są w źródle, w zapisanych kopiach i w tym, co pobierają wyszukiwarki. Nigdy nie zostawiaj w komentarzu haseł, wewnętrznych adresów, nazw klientów ani notatek TODO o lukach bezpieczeństwa.
Większość narzędzi do budowania może usuwać komentarze za Ciebie. Vite i podobne bundlery minifikują JavaScript i CSS, usuwając komentarze; komentarze HTML w pliku index mogą wymagać kroku z minifikatorem HTML, jeśli chcesz się ich pozbyć.
Komentarze HTML
Komentarz zaczyna się od <!-- i kończy na -->. Może stać między elementami albo obejmować całe bloki, aby wyłączyć je na czas testów.
Komentarze jednoliniowe i wieloliniowe
Rysowane są tylko dwa akapity. Komentarze, w tym ten obejmujący cały akapit, nie zostawiają śladu na ekranie.
Dlaczego komentarzy nie można zagnieżdżać
Pierwsze --> zamyka zewnętrzny komentarz zbyt wcześnie, więc pozostały tekst i końcowe --> pojawiają się na stronie.
Stare komentarze warunkowe dziś nic nie robią
Czytały je tylko Internet Explorer 9 i starsze. Obecne przeglądarki całkowicie pomijają ostrzeżenie, więc starą sztuczkę można bezpiecznie usunąć.
Łamanie linii: <br>, <p> czy margin w CSS
Czego użyć
Element
Znaczenie
Używaj do
<br>
Łamanie wewnątrz jednego bloku tekstu
Adresy, wiersze, teksty piosenek
Osobny akapit
Każdej nowej myśli lub bloku tekstu
CSS margin or gap
Odstęp między blokami
Odstępy w układzie zmieniające się z rozmiarem ekranu
<hr>
Zmiana tematu
Tematyczna przerwa między sekcjami
Adres z <br>
Łamania są częścią adresu, więc <br> jest tu właściwym wyborem.
Ułożone znaczniki <br> a akapity z marginesem
Obie wersje wyglądają podobnie, ale druga ma prawdziwe akapity i odstęp, który zmienisz w jednym miejscu.
Dodawanie spacji: encje
Encje spacji
Encja
Znak
Szerokość
Typowe użycie
U+00A0 twarda spacja
Zwykła spacja, nigdy się nie łamie
10 kg, page 3
 
U+2002 spacja en
Pół em
Odstępy w listach lub menu
 
U+2003 spacja em
Jeden em
Wcięcie pojedynczej linii
 
U+2009 wąska spacja
Wąska
Między grupami cyfr w niektórych stylach
Wartość i jednostka razem
W wąskim polu pierwsza linia może się złamać między 50 a km. Twarda spacja trzyma drugą parę razem.
Zwinięte spacje a encje
Pięć wpisanych spacji zamienia się w jedną. Każda encja zachowuje własną szerokość.
Zachowywanie spacji i nowych linii przez CSS white-space
Wartości white-space
Wartość
Spacje
Nowe linie
Zawija długie linie
Zwinięte
Zwinięte
Tak
Zwinięte
Zwinięte
Nie
Zachowane
Zachowane
Nie
Zachowane
Zachowane
Tak
Zwinięte
Zachowane
Tak
Zachowane i mogą się zawijać
Zachowane
Tak
pre, pre-wrap i pre-line obok siebie
Ten sam tekst w trzech polach. pre zachowuje wszystko, ale wychodzi poza krawędź, pre-wrap zachowuje wszystko i zawija, pre-line zachowuje tylko łamania linii.
Wyświetlanie tekstu wpisanego w formularz
Notatki z textarea zachowują łamania linii po wyświetleniu z pre-line, bez ryzyka zamiany ich tekstu w HTML.
Komentarze CSS i dlaczego // psuje CSS
Zakomentowany kolor jest ignorowany, a stosowany jest zielony.
Co // robi z następną regułą
Linia z // jest czytana jako część selektora, więc cała reguła .warning jest odrzucana, a tekst zostaje czarny.
10 częstych błędów
Błędy i poprawki
Błąd
Co się dzieje
Poprawka
Wpisywanie kilku spacji między słowami
Zwijają się do jednej
lub white-space: pre-wrap
Używanie <br><br> do odstępów między akapitami
Odstęp nie dopasowuje się do rozmiaru ekranu
Osobne elementy <p> i margines
Zagnieżdżanie komentarzy
Tekst po wewnętrznym --> wycieka na stronę
Użyj jednego komentarza albo usuń blok
Pisanie komentarzy // w CSS
Następna reguła jest ignorowana
Użyj /* */
Pisanie <!-- --> w pliku JavaScript
Błąd składni lub dziwne zachowanie
Użyj // lub /* */ w JS
Zostawianie prywatnych notatek w komentarzach HTML