Lecția 5.
În această lecție:
1. Învățăm cum să facem codul html mai convenabil și mai ușor de citit pentru noi.
2. Să ne dăm seama cum să înfășurați corect un șir de text.
Facem codul html convenabil.
Acum codul nostru este clar și ușor de citit, deoarece are puțin text și aproape fără etichete. Când vom crea o pagină mai complexă, vor exista multe etichete acolo, așa că găsirea celei corecte va fi dificilă.
Pentru a evita încurcarea etichetelor, trebuie să aranjați inițial etichetele și liniile astfel încât acestea să fie percepute vizual mai ușor. Când browserul citește informații din pagina html, nu contează câte spații și câte linii goale în cod.
Am schimbat textul în codul paginii în raport cu cel pe care l-am creat, dar acest lucru nu este important. Același cod este afișat în figura stângă și dreapta. Ambele opțiuni vor fi afișate de browser pe ecranul monitorului la fel. De acord, lucrul cu codul afișat în dreapta va fi mult mai ușor decât cu cel din stânga.
Codul pe care îl considerăm este foarte simplu, dar chiar și acum se observă diferența de percepție vizuală. Nu există reguli specifice pentru „restabilirea ordinii”, fiecare stăpân însuși decide cum îi este mai convenabil să lucreze.
Line break html. Tag & ltbr & gt.
Atenție la imagine. În prima versiune, textul este scris într-o linie, în a doua versiune în două rânduri.
Browserul va afișa ambele opțiuni în mod egal. Textul va fi scris într-o singură linie:
Te întrebi de ce da? Într-adevăr, într-unul dintre coduri, o parte din text este transferată pe o altă linie. Ar fi logic dacă o parte din textul browserului ar fi fost transferat și la o altă linie, dar html are propria logică în acest sens. Dacă facem înfășurarea liniei în cod html, atunci pentru browser, acest lucru este echivalent cu un spațiu (ca un spațiu regulat între cuvinte dintr-un text). Dacă transferăm o parte din text nu o linie în jos, ci 2 sau 3 (orice număr), browserul va considera în continuare această distanță ca un spațiu obișnuit între cuvinte și atunci când este afișat pe ecran, textul va fi scris într-o singură linie.
Tag & ltbr & gt
Când am făcut cunoștință cu etichetele din a treia lecție, am menționat că există etichete care nu necesită închidere. etichetă & ltbr & gt una dintre ele, servește la înfășurarea unei linii.
Să o aplicăm în cod:
Am inserat o etichetă & ltbr & gt în codul nostru html și acum când rulați fișierul prin browser, o parte din text va fi transferată la următorul stoc.
* Nu uitați să salvați modificările din Notepad (Ctrl + S) și să afișați pagina în browser (F5).
Nu ai înțeles ceva din această lecție? Întrebați!
- [email protected]
Bună ziua, în această scurtă lecție vă voi arăta cum să înfășurați text și cum să împiedicați textul să se înfășoare pe o nouă linie.
Se întâmplă că este necesară ruperea liniei fără a închide paragraful, de exemplu, în același epigraf sau pentru scrierea de versuri.
HTMLeste posibil să transferați text într-o nouă linie fără a încheia paragraful. În mod obișnuit, browserul transferă cuvinte în funcție de dimensiunea ferestrei, iar capacitatea de a determina în mod independent locația transferului poate veni la îndemână la scrierea versurilor sau la separarea diferitelor elemente unele de altele.
Pentru a transfera text într-o nouă linie, utilizați elementul BR, nu necesită o etichetă de închidere, însă este recomandat să scrieți eticheta de deschidere ca < br/> .
Când utilizați un articol BRo linie goală nu este adăugată după transfer.
Un alt articol BRutilizat atunci când trebuie să setați fluxul de text în jurul unei tabele, unei imagini sau a oricărui alt element flotant al unei pagini, adică un element pentru care este specificat un atribut align.
Pentru a face acest lucru, utilizați atributul clarelement BR.
Poate lua următoarele valori:
toate- interzice curgerea în jurul unui element din două părți.
stânga- interzice curgerea în jurul părții stângi a unui obiect plutitor.
dreapta- interzice curgerea în jurul părții drepte a unui obiect plutitor.
nici unul - anulează proprietatea.
Dacă fluxul este interzis, atunci textul următor elementului BRva fi afișat pe linie după obiectul plutitor
Noaptea, strada, felinar, farmacie,
Lumină fără sens și slabă.
Trăiește încă un sfert de secol
Va fi așa. Nu există nici un rezultat.
Dacă mori, vei începe din nou
Și totul se va repeta, la fel de vechi:
Noaptea, valuri înghețate ale canalului,
Farmacie, stradă, felinar.
rezultat:
Pe lângă pauză de linie obligatorie, uneori este necesară utilizarea acțiunii opuse, adică pentru a garanta că textul nu va fi transferat într-o nouă linie în niciun caz.
Pauzele de linie, pauzele de linie, pauzele de linie sunt despre un singur lucru. În HTML, deseori se folosesc pauze de linie. Există mai multe moduri: utilizați eticheta
pentru a traduce într-o nouă linie sau puteți utiliza proprietățile CSS pentru a înfășura linia. Luați în considerare un exemplu de utilizare a unei etichete de pauză de linie:
În CSS, ambalarea liniei se poate face în diferite moduri, de exemplu, astfel:
Br (float: stânga; lățime: 100%; marjă: 0 0 20px 0; / * liniuță după o linie de 20 pixeli * /)
Linie de divizare folosind HTML sau CSS
În HTML, crearea unei linii divizante este foarte simplă. O etichetă nepereche este de asemenea folosită.
- aceasta este linia de împărțire. Linia de divizare începe cu o nouă linie și există o liniuță după ea. Puteți controla stilul liniei orizontale și puteți face, de asemenea, o alternativă. Următorul este un exemplu de linie de împărțire folosind o etichetă:
Acum haideți stilul (schimbă stilurile, schimbă apariție) linia noastră de împărțire:
hr (lățime: 80%; / * lățime linie * / înălțime: 4px; / * înălțime / grosime linie * / fundal: # 333; / * fundal / linie culoare * / bordură: 0; / * cadru în jurul liniei divizante (eliminați ei) * / margin: 5px 0 5px 0; / * liniuță deasupra și sub linia de 5 pixeli * /)
Și creați o alternativă la linia noastră de împărțire folosind eticheta
Linie (lățime: 80%; / * lățime linie * / înălțime: 4px; / * înălțime linie / grosime * / fundal: # 333; / * fundal / linie culoare * / bordură: 0; / * cadru în jurul liniei divizante (eliminați ei) * / margin: 5px 0 5px 0; / * liniuță deasupra și sub linia de 5 pixeli * /)
Te salut. Desigur în transfer html corzile pot fi realizate în două moduri. Dacă utilizați un editor vizual de la WordPress, atunci adaugă automat pauze de linie, așa cum se întâmplă în programul Microsoft Word sau orice alt editor de text. Dar uneori trebuie să lucrați cu text în cod. Cum se face o pauză de linie în cod html?
Înfășurați linia
Există o etichetă scurtă pentru asta în html -
(scurt pentru pauză). Ce face? Toate textele scrise după această etichetă vor fi afișate pe o nouă linie. Chiar dacă există încă loc pe linia curentă pentru ieșirea sa, aceasta va fi în continuare reportată.
Folosind br
Trebuie să utilizați eticheta doar atunci când nu este necesar să începeți un nou paragraf, ci să afișați textul pur și simplu pe o nouă linie. De exemplu, trebuie să scrieți o poezie. Pentru a nu încadra fiecare linie a versetului într-un paragraf, puteți pur și simplu să scrieți o etichetă la sfârșitul fiecărei linii
și apoi linia următoare se mișcă în jos. La fel de simplu este.
Eticheta nu trebuie utilizată ca alternativă la paragrafe. Merită să ne amintim că indentarea se formează între paragrafe, înălțime egală cu o linie goală. La transferul cu br, indentarea este mai mică.
Cum se fac multe transferuri?
Și ce trebuie să faceți după un text pentru a face o liniuță mare din conținut suplimentar. Există două opțiuni pentru a face acest lucru. Puteți scrie multe etichete br. Deci, puteți face un număr infinit de transferuri.
Dar este mai bine să o faci mai corect. Puteți seta paragraful dorit la o clasă de stil și apoi prin css setați o liniuță mare de jos.
paragraf
Abzac (
Marjă-jos: 100px;
}
În acest caz, liniuța de jos va fi setată la 100 de pixeli. În consecință, puteți înregistra orice liniuță.
Proiectarea HTML a postărilor și paginilor este foarte importantă - ajută la proiectarea conținutului în așa fel încât este convenabil pentru utilizator să-l citească.
Vă voi povesti despre eticheta br - face o pauză de linie în HTML, adică rupe linia în două părți - și o face cu forță, încheind linia curentă în locul în care a fost introdusă și mutând partea a doua într-un nou rând.
Unde se folosește această etichetă, când apare exact necesitatea urgentă de a insera o pauză de linie în text fără a crea un nou paragraf? De exemplu, poate fi util în proiectarea conținutului - dacă aveți un site cu poezii și extrase de versuri, versuri sau ceva similar.
Totul despre eticheta pentru line break br
Eticheta br realizează o pauză de linie în HTML (ceea ce este descris) și este definită de toate browserele. Da, aproape că am uitat - dacă utilizați eticheta br, atunci spre deosebire de eticheta de paragraf p, nu adăugați o liniuță goală (înainte de linie).
Eticheta br este goală (gol înseamnă fără conținut, nu conține nimic), ceea ce înseamnă că nu trebuie să fie închisă. Și întrucât nu trebuie să fie închis, a fost inventată o scurtă descriere - inițial implică faptul că eticheta în sine nu are o etichetă de închidere.
Imaginați-vă pentru o clipă că nu va exista o scurtă descriere. Atunci ce? Apoi, de fiecare dată când ar trebui să „închidem și să deschidem” linia de rupere ceva de genul:
. Acest lucru este cel puțin incomod. Cu toate acestea, în XHTML strict, trebuie să îl închideți cu o etichetă
.
Dacă sarcina este de a crește distanța verticală - între liniile în care introduceți o cratime - faceți o cratimă dublă introducând o etichetă
de două ori la rând.
<br\u003e
rezultat:
Pentru a transfera următoarea propoziție pe o nouă linie, utilizați eticheta br.
Hooray, a doua teză pe o nouă linie.
Exemplu real:
A. bloc
Noaptea, strada, felinar, farmacie,
Lumină fără sens și slabă.
Trăiește încă un sfert de secol
Totul va fi așa. Nu există nici un rezultat.
Și totul se va repeta, la fel de vechi:
Noaptea, valuri înghețate ale canalului,
Farmacie, stradă, felinar.
rezultat:
Noaptea, strada, felinar, farmacie,
Lumină fără sens și slabă.
Trăiește încă un sfert de secol
Totul va fi așa. Nu există nici un rezultat.
Dacă mori, vei începe din nou
Și totul se va repeta, la fel de vechi:
Noaptea, valuri înghețate ale canalului,
Farmacie, stradă, felinar.
Cum arată:
De ce să vină cu eticheta br?
Necesitatea acestei etichete există, numai dacă se mută linia „ca în Word” (așa cum fac utilizatorii fără experiență), prin scrierea a zeci de spații la rând nu va funcționa.
De ce nu va funcționa? Deoarece orice număr de spații va fi considerat de browser ca un singur spațiu și nu o pauză de linie - browserul elimină automat spații suplimentare. Pentru a face acest lucru, aveți nevoie de pauze de linie.
Dar nu abuzați de etichetă
pentru a crește tot mai mult spațiul de linie - cel mai bine este să utilizați instrumentele de bază HTML + CSS. Crearea de noi paragrafe sau „asemenea paragrafe” (aceasta este considerată o abordare proastă) este inacceptabilă - doar o pauză de linie!
Pentru a crea și a marca paragrafe, ar trebui să utilizați eticheta p și să măriți distanța disponibilă între paragrafe, schimbați foile de stil în cascadă, de exemplu, adăugați:
margin-top: 40 px;
Bonus - br clar
Dar cum să vă asigurați că textul în care ați setat pauza de linie nu se înfășoară în jurul elementului plutitor (aceasta este fie o imagine cu set de aliniere, fie un element cu proprietatea float), ci începe de sub element? Puteți utiliza atributul clar pentru aceasta.
Să presupunem că avem o imagine aliniată la stânga (aliniere \u003d "stânga"). Dacă instalăm
sau
apoi textul după etichetă
(următoarea linie, pe care o purtăm) va fi afișată așa cum trebuie, sub imagine. Alte valori pentru atributul clar al etichetei
faceți ca textul să curgă în jurul desenului, situat în dreapta acestuia.
Utilizarea acestui atribut specific nu este încurajată de specificația HTML - un astfel de cod ar fi invalid.
BONUS - eticheta separatoare hr
etichetă
de asemenea single, dar spre deosebire
, este utilizat pentru a crea un separator orizontal sub forma unei linii. Mai mult, putem seta aspectul acestei linii folosind atribute. Dar, desigur, este mai bine să faceți acest lucru folosind metode dovedite prin CSS (citiți ce este).
BONUS - interdicția de a împacheta pe o nouă linie cu eticheta nobr
De asemenea, se întâmplă să vrem să interzicem pauzele de linie și să evităm traducerea textului într-o nouă linie: fie între două cuvinte specifice, fie ca un paragraf întreg. Ce să faci Utilizați eticheta
Ce face o etichetă
După cum înțelegem, acest lucru este foarte incomod. Dar există o etichetă!
Rezumat - Utilizarea br, nobr, hr, p în HTML
Pentru a rezuma, am rezumat conținutul articolului:
- etichetă
Pentru a separa paragrafe
- etichetă
- pentru a înfășura o linie în interiorul unui paragraf („crearea de paragrafe” folosind această etichetă sau abuzarea acesteia este inacceptabilă) - etichetă
- pentru a crea o linie separatoare orizontală - etichetă
- pentru a preveni întreruperile de linie în HTML
