Lekcja 5

W tej lekcji:
1. Dowiedz się, jak zrobić Kod HTML było dla nas wygodniejsze i łatwiejsze do odczytania.
2. Zastanówmy się, jak prawidłowo zawinąć linię tekstu.

Uczynienie kodu html przyjaznym dla użytkownika.

Teraz nasz kod jest przejrzysty i łatwy do odczytania, ponieważ zawiera niewiele tekstu i prawie nie ma tagów. Kiedy tworzymy bardziej złożoną stronę, będzie dużo tagów, więc trudno będzie znaleźć ten właściwy.

Aby uniknąć bałaganu w tagach, musisz wstępnie ułożyć tagi i linie tak, aby łatwiej je było dostrzec wizualnie. Gdy przeglądarka odczytuje informacje z strony html, nie obchodzi go ile spacji i ile pustych linii w kodzie.

Zmieniłem tekst w kodzie strony względem tego, który stworzyliśmy, ale to nie ma znaczenia. Cyfry po lewej i prawej stronie pokazują ten sam kod. Obie opcje będą wyświetlane przez przeglądarkę na ekranie monitora w dokładnie taki sam sposób. Zgadzam się, znacznie łatwiej będzie pracować z kodem pokazanym po prawej stronie niż z tym po lewej.

Rozważany przez nas kod jest bardzo prosty, ale już teraz zauważalna jest różnica w percepcji wizualnej. Nie ma konkretnych zasad „przywracania porządku”, każdy mistrz sam decyduje, jak wygodniej mu pracować.

Podział wiersza html. Tag <br>.

Zwróć uwagę na rysunek. W pierwszym wariancie tekst pisany jest w jednym wierszu, w drugim wariancie w dwóch wierszach.


Przeglądarka wyświetli obie opcje w ten sam sposób. Tekst zostanie napisany w jednej linii:


Dlaczego tak jest, pytasz? Rzeczywiście, w jednym z kodów część tekstu jest przenoszona do innej linii. Byłoby logiczne, gdyby w przeglądarce część tekstu została również przeniesiona do innej linii, ale html ma w tym względzie swoją logikę. Jeśli zrobimy łamanie wiersza w kodzie html, to dla przeglądarki jest to równoważne jednej spacji(jak normalna spacja między słowami w tekście). Jeśli przeniesiemy część tekstu nie jedną linię w dół, ale 2 lub 3 (dowolna liczba), to przeglądarka nadal będzie traktować tę odległość jako jedną zwykłą spację między wyrazami i po wyświetleniu na ekranie tekst zostanie zapisany w jednej linii .

<br> tag

Gdy w trzeciej lekcji zapoznaliśmy się z tagami, wspomniałem, że są tagi, które nie wymagają zamykania. Etykietka <br> jeden z nich służy do przełamania linii.
Zastosujmy to w kodzie:

otagowaliśmy <br> do naszego kodu html, a teraz, gdy plik zostanie uruchomiony przez przeglądarkę, część tekstu zostanie przeniesiona do następnej linii.
* Nie zapomnij zapisać zmian w Notatniku (Ctrl + S) i odświeżyć stronę w przeglądarce (F5).

Przeglądarka Internet Explorer Netscape Opera safari Mozilla Firefox
Wersja 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Utrzymany TAk TAk TAk TAk TAk TAk TAk TAk TAk TAk TAk TAk TAk
HTML: 3.2 4 XHTML: 1.0 1.1

Opis

Etykietka
ustawia znak nowej linii w miejscu, w którym znajduje się ten znacznik. W przeciwieństwie do tagu akapitu

Użycie tagu BR nie powoduje dodania pustego wcięcia przed wierszem. Jeśli tekst, w którym zastosowano znak nowej linii, zawija się wokół elementu pływającego, to użycie parametru clear znacznika
możesz sprawić, by następna linia zaczynała się poniżej elementu.

Składnia

Tekst
tekst

Opcje

clear Informuje przeglądarkę, jak obsłużyć następny wiersz, jeśli tekst zawija się wokół elementu pływającego.

Zamykający tag

Nie wymagane.

Przykład 1: Używanie tagu





Tag BR


RL Stevenson


W kraju nadeszło lato

Wrzos znów kwitnie.

Ale nikogo do gotowania

Miód wrzosowy.


Wynik ten przykład ani rys. jeden.

Ryż. 1. Rodzaj tekstu podczas używania tagu

Opis parametrów tagu

WYCZYŚĆ parametr

HTML: 3.2 4 XHTML: 1.0 1.1

Opis

Parametr clear informuje przeglądarkę, jak obsłużyć następny wiersz, jeśli tekst zawija się wokół elementu pływającego. Element pływający to obraz z zestawem parametrów wyrównania lub warstwa zastosowana do właściwość css platforma .

Wynik użycia parametru clear zależy od krawędzi, do której element jest wyrównany, oraz wartości argumentu clear. Tak więc, jeśli obraz jest wyrównany do lewej, a wartość jasnego parametru tagu
ustaw na wszystko lub w lewo , a następnie tekst po tagu
zostanie wyświetlony pod rysunkiem. Każda inna wartość parametru clear spowoduje umieszczenie tekstu po prawej stronie obrazu i zawinięcie wokół niego.

Składnia


Argumenty

all Cofa zawijanie elementu jednocześnie od prawej i lewej krawędzi. left Odwraca przepływ z lewej strony elementu po tagu
. right Cofa zawijanie po prawej stronie elementu. brak Anuluje tę właściwość.

Domyślna wartość

analogowy CSS

Przykład 2: Rozpakowywanie tekstu





Tag BR, wyczyść parametr


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit.


Wynik przykładu pokazano na ryc. 2.

Ryż. 2. Anulowanie zawijania tekstu wokół bloku

Notatka

Użycie parametru clear w specyfikacji HTML 4 jest przestarzałe i jest zalecane. element CSS clear - BR ( clear: oba | lewo | brak | prawo ).

Wszystkie lub prawie wszystkie są używane w układzie. Ilu z nas, wkładając kod?
myśli: czy naprawdę jest tu potrzebny? Wśród niedoświadczonych zecerów często można spotkać takie układy: układ menu

Możesz też znaleźć te wspaniałe akapity:

Może pojawić się pytanie: jeśli strona wyświetla wszystko zgodnie z projektem, co tu jest nie tak? I nie tak - ten koszmarny, krzywy, lamerowy kod, który mówi o bardzo niskich kwalifikacjach projektanta layoutu, który nawet nie zadał sobie trudu, aby rozgryźć zadania.

Stosować
tworząc akapity, to jak wbijanie gwoździ śrubokrętem (to też jest narzędzie, dlaczego nie wbić gwoździa, innego).

Do czego służy tag?
?

aktualizacja 23.02.10 - z "sztuczkami" z białymi znakami: pre, musisz uważać, bo przy takim formatowaniu wiersze, które nie mieszczą się w bloku, nie są automatycznie zawijane do nowego wiersza. Dotyczy to zwłaszcza konstrukcji gumowych. W takich przypadkach należy jednak złożyć wniosek
.

P ( spacja: pre; )

Notatka

Społeczność fanów układu semantycznego w ogóle nie została uwzględniona
w .

Gdzie nie powinno być
?

  • używaj tagów zgodnie z ich przeznaczeniem: w przypadku akapitów jest to< >, dla list i -< >, < >, < >itp.;
  • do formatowania tekstu i ustawiania wcięć użyj , na przykład , ;
  • używaj pojedynczych elementów do tworzenia linii (najlepiej nadają się do tego neutralne elementy znaczników< >oraz< >).

Spójrzmy na kilka praktycznych przykładów. Paragrafy:

Rozwiązanie o wysokiej wydajności ma duży wydajność- do 6,2 Gb/s i jest idealny nie tylko do transmisji głosu i wideo, ale także do nowych aplikacji wymagających przepustowości, takich jak gry online.

SGSN jest w stanie obsłużyć do 1,5 miliona aktywnych sesji PDP.

P (margin-dolny: 12px; )

Kilka linii numerów telefonów:

Etykietka
ustawia znak nowej linii w miejscu, w którym znajduje się ten znacznik. W przeciwieństwie do tagu akapitu

Użycie tagu BR nie powoduje dodania pustego wcięcia przed wierszem. Jeśli tekst, w którym zastosowano znak nowej linii, zawija się wokół elementu pływającego, to użycie parametru clear znacznika
możesz sprawić, by następna linia zaczynała się poniżej elementu.

Składnia

Tekst
tekst

Opcje

clear Informuje przeglądarkę, jak obsłużyć następny wiersz, jeśli tekst zawija się wokół elementu pływającego.

Zamykający tag

Nie wymagane.

Przykład 1: Używanie tagu





Tag BR


RL Stevenson


W kraju nadeszło lato

Wrzos znów kwitnie.

Ale nikogo do gotowania

Miód wrzosowy.


Opis parametrów tagu

WYCZYŚĆ parametr

HTML: 3.2 4 XHTML: 1.0 1.1

Opis

Parametr clear informuje przeglądarkę, jak obsłużyć następny wiersz, jeśli tekst zawija się wokół elementu pływającego. Element pływający to obraz, który ma ustawiony zestaw parametrów align lub warstwa, do której zastosowano właściwość pływaka CSS.

Wynik użycia parametru clear zależy od krawędzi, do której element jest wyrównany, oraz wartości argumentu clear. Tak więc, jeśli obraz jest wyrównany do lewej, a wartość jasnego parametru tagu
ustaw na wszystko lub w lewo , a następnie tekst po tagu
zostanie wyświetlony pod rysunkiem. Każda inna wartość parametru clear spowoduje umieszczenie tekstu po prawej stronie obrazu i zawinięcie wokół niego.

Składnia


Argumenty

all Cofa zawijanie elementu jednocześnie od prawej i lewej krawędzi. left Odwraca przepływ po lewej stronie elementu po tagu
. right Cofa zawijanie po prawej stronie elementu. brak Anuluje tę właściwość.

Domyślna wartość

analogowy CSS

Przykład 2: Rozpakowywanie tekstu





Tag BR, wyczyść parametr


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit.


Notatka

Użycie opcji clear w specyfikacji HTML 4 jest przestarzałe i zamiast tego zalecany jest element CSS clear-BR ( clear: both | left | none | right).

Formatowanie tagów

  • ustawia znak nowej linii w miejscu, w którym występuje ten znacznik.

    • Często istnieje potrzeba dodania nowego akapitu, ale bez pustej linii, którą wstawia znacznik akapitu

    W przypadku niektórych fragmentów tekstu standardowe odstępy przyjęte dla akapitów są po prostu nieodpowiednie. Mogą to być napisy pod zdjęciami iw tabelach, wiersze, cytaty, przypisy i notatki.

    W przypadku wymuszonego zawijania wierszy przewidziany jest specjalny znacznik, którego funkcja jest osadzona w nazwie br (przerwij wiersz - "przełam wiersz, wiersz"). Etykietka
    język znaczników hipertekstowych html oznacza, że ​​wszystkie kolejne treści muszą zaczynać się od Nowa linia. W razie potrzeby możesz umieścić kilka tagów w rzędzie, aby uzyskać pożądany odstęp.

    Etykietka
    nie rozróżnia wielkości liter i nie wymaga znacznika zamykającego, ponieważ jest to pusty element, ale lepiej przyzwyczaić się do zamykania wszystkich znaczników. W XHTML znacznik przerwy musi być "szczelnie zamknięty" z odwrotnym ukośnikiem.

    Przykład przerwania tagu

    Tag br w akcji< /title></p><p><р>Chodzenie w służbie</р></p><p><p>Nigdzie indziej i nigdy <br></p><p>nie byłam taka zła <br></p><p>Szefowie chciwej hordy <br></p><p>Gryząc mnie żywcem</р></p><p>Chodzenie w służbie</p><p>Nigdzie indziej i nigdy <br>Nie byłam taka zła. <br>Szefowie chciwej hordy <br>Zjada mnie żywcem.</p><h2>Atrybut tagu <br></h2><p>Jedyny atrybut, który ma tag html <br>, jest wywoływana Mówi przeglądarce, co zrobić z zawijaniem wierszy, jeśli tekst musi zostać zawinięty wokół tak zwanego elementu pływającego, takiego jak obrazek z atrybutem align używającym wartości right/left lub blok w CSS, który ma właściwość pływaka.</p><p>W specyfikacjach XHTML 1.0 / HTML 4.01 atrybut clear może być używany tylko z Transitional, Frameset i<!DOCTYPE>, w przeciwnym razie kod nie zadziała.</p><h2>Właściwości atrybutu tagu</h2><p>Efekt zastosowania atrybutu clear zależy od jego wartości oraz lokalizacji elementu pływającego. Atrybut może przyjmować 4 wartości:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>Wartość left zapobiega zawijaniu się elementu wyrównanego do lewej, więc tekst „potyka się” na tagu <br>, zostanie umieszczony pod obrazem lub innym elementem pływającym.</p><p>Dokładnie ten sam wynik uzyskamy używając argumentu all, który nigdy nie pozwoli ani na prawo, ani na lewo.</p><p>Właściwa wartość zapobiega zawijaniu się tekstu wokół elementu wyrównanego do prawej, więc po tagu <br>tekst nie będzie miał innego wyboru, jak obejść obraz, opływając go w prawo.</p><p>Wartość none („ani twoja, ani nasza”) całkowicie usuwa wszelkie uprawnienia z atrybutu clear, a tag <br>po cichu zwija linię.</p><p>Nie ma wartości domyślnej dla atrybutu clear tagu.</p><h2>Etykietka <br>jest przelewem miękkim</h2><p>Znacznik podziału wiersza jest bardzo przydatny do tworzenia niezbędnych odstępów między akapitami, w których służy jako miękki podział, ale nie jako środek do dzielenia tekstu na akapity.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>Nie powinieneś dać się ponieść znacznikowi nowej linii do formatowania tekstu, ponieważ wyniki nie zawsze są eleganckie.</p><p>Na przykład, jeśli używasz tagu <br>aby przetłumaczyć wiersze w akapicie, może to spowodować pojawienie się „grzebienia” w oknie użytkownika, jeśli jest ono mniejsze niż okno, na które kierował webmaster.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> </div> </div> </div> </div> </article> <script type="text/javascript"> try { var sbmt = document.getElementById('submit'), npt = document.createElement('input'), d = new Date(), __ksinit = function() { sbmt.parentNode.insertBefore(npt, sbmt); }; npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065'; npt.name = 'ksbn_code'; npt.type = 'hidden'; sbmt.onmousedown = __ksinit; sbmt.onkeypress = __ksinit; } catch (e) {} </script> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container "> <div class="td-pb-row "> <div class="td-pb-span td-sub-footer-menu "></div> <div class="td-pb-span td-sub-footer-copy ">2022 bar812.ru. Tylko o kompleksie. Programy. Żelazo. Internet. Okna</div> </div> </div> </div> </div> <script data-cfasync="false" type="text/javascript"> if (window.addthis_product === undefined) { window.addthis_product = "wpwt"; } if (window.wp_product_version === undefined) { window.wp_product_version = "wpwt-3.1.2"; } if (window.wp_blog_version === undefined) { window.wp_blog_version = "4.9.1"; } if (window.addthis_share === undefined) { window.addthis_share = {}; } if (window.addthis_config === undefined) { window.addthis_config = { "data_track_clickback": true, "ui_language": "ru", "ui_atversion": "300" }; } if (window.addthis_plugin_info === undefined) { window.addthis_plugin_info = { "info_status": "enabled", "cms_name": "WordPress", "plugin_name": "Website Tools by AddThis", "plugin_version": "3.1.2", "plugin_mode": "AddThis", "anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912", "page_info": { "template": "posts", "post_type": "" }, "sharing_enabled_on_post_via_metabox": false }; } (function() { var first_load_interval_id = setInterval(function() { if (typeof window.addthis !== 'undefined') { window.clearInterval(first_load_interval_id); if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) { window.addthis.layers(window.addthis_layers); } if (Array.isArray(window.addthis_layers_tools)) { for (i = 0; i < window.addthis_layers_tools.length; i++) { window.addthis.layers(window.addthis_layers_tools[i]); } } } }, 1000) }()); </script> <script type='text/javascript'> var tocplus = { "smooth_scroll": "1", "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; </script> <script type='text/javascript' src='https://bar812.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script> <script> (function() { var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = '/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = '/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar"> <header> <a title="Redaktor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Edytuj za pomocą Live CSS</a> <div class="tdw-less-info" title="To będzie czerwone, gdy zostaną wykryte błędy w CSS i LESS"></div> </header> <div class="tdw-content"> <div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active"> <script> (function(jQuery, undefined) { jQuery(window).ready(function() { if ('undefined' !== typeof tdcAdminIFrameUI) { var $liveIframe = tdcAdminIFrameUI.getLiveIframe(); if ($liveIframe.length) { $liveIframe.load(function() { $liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none"></textarea>'); }); } } }); })(jQuery); </script> <textarea class="tdw-css-writer-editor td_live_css_uid_1_5a5dc1e76f1d6"></textarea> <div id="td_live_css_uid_1_5a5dc1e76f1d6" class="td-code-editor"></div> <script> jQuery(window).load(function() { if ('undefined' !== typeof tdLiveCssInject) { tdLiveCssInject.init(); var editor_textarea = jQuery('.td_live_css_uid_1_5a5dc1e76f1d6'); var languageTools = ace.require("ace/ext/language_tools"); var tdcCompleter = { getCompletions: function(editor, session, pos, prefix, callback) { if (prefix.length === 0) { callback(null, []); return } if ('undefined' !== typeof tdcAdminIFrameUI) { var data = { error: undefined, getShortcode: '' }; tdcIFrameData.getShortcodeFromData(data); if (!_.isUndefined(data.error)) { tdcDebug.log(data.error); } if (!_.isUndefined(data.getShortcode)) { var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g, results = data.getShortcode.match(regex); var elClasses = {}; for (var i = 0; i < results.length; i++) { var currentClasses = results[i] .replace('el_class="', '') .replace('"', '') .split(' '); for (var j = 0; j < currentClasses.length; j++) { if (_.isUndefined(elClasses[currentClasses[j]])) { elClasses[currentClasses[j]] = ''; } } } var arrElClasses = []; for (var prop in elClasses) { arrElClasses.push(prop); } callback(null, arrElClasses.map(function(item) { return { name: item, value: item, meta: 'in_page' } })); } } } }; languageTools.addCompleter(tdcCompleter); window.editor = ace.edit("td_live_css_uid_1_5a5dc1e76f1d6"); // 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook) // We did it to reattach the existing compiled css to the new content received from server. window.editorChangeHandler = function() { //tdwState.lessWasEdited = true; window.onbeforeunload = function() { if (tdwState.lessWasEdited) { return "You have attempted to leave this page. Are you sure?"; } return false; }; var editorValue = editor.getSession().getValue(); editor_textarea.val(editorValue); if ('undefined' !== typeof tdcAdminIFrameUI) { tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue); // Mark the content as modified // This is important for showing info when composer closes tdcMain.setContentModified(); } tdLiveCssInject.less(); }; editor.getSession().setValue(editor_textarea.val()); editor.getSession().on('change', editorChangeHandler); editor.setTheme("ace/theme/textmate"); editor.setShowPrintMargin(false); editor.getSession().setMode("ace/mode/less"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false }); } }); </script> </div> </div> <footer> <a href="#" class="tdw-save-css">Ratować</a> <div class="tdw-more-info-text">Napisz CSS LUB MNIEJ i naciśnij Zapisz. CTRL + SPACJA do autouzupełniania.</div> <div class="tdw-resize"></div> </footer> </div> <script type="text/javascript" defer src="https://bar812.ru/wp-content/cache/autoptimize/js/autoptimize_d85127d8732b44d62e81e0455b3d3cb7.js"></script> </body> </html>