Regulile limbajului HTML. Reguli pentru construirea documentelor HTML Reguli html reguli generale documentar z2

Pe acest moment Majoritatea browserelor afișează site-uri web, decodând și corectând în mod independent erorile webmasterilor. Cu toate acestea, trebuie să fiți atenți când scrieți HTML - trebuie să respectați regulile de valabilitate, deoarece aspectul corect este important pentru optimizarea site-ului și, de asemenea, va ajuta să nu înnebunească utilizatorii care vă deschid site-ul în versiuni anterioare ale browserelor.

Utilizare

Elementul este situat pe prima linie a oricărei pagini HTML. Acesta determină versiunea limbajului de marcare care este utilizată pe pagină. În prezent, se recomandă utilizarea tipului de document al formularului - este universal pentru orice versiune a limbii.

Utilizare structura corecta document

Etichetele , , ar trebui să fie întotdeauna prezente în cod; acest lucru face ca pagina să fie conformă cu standardele și se asigură că va fi afișată corect.

Gresit

Salut Lume!

Dreapta

Salut Lume!

Defini informații tehnice paginile corect

Metaetichetele și stilurile ar trebui specificate în , nu undeva în corpul paginii. Este de preferat să includeți scripturi în partea de jos a paginii înainte de eticheta de închidere. Avantajul acestei abordări este că înainte de afișarea conținutului paginii, browserul încarcă doar stilurile și va încărca scripturile ultimul, ceea ce permite utilizatorului să vadă mai rapid conținutul paginii.

Gresit

Salut Lume!

Dreapta

Salut Lume!

Urmați standardele de marcare Utilizați elementele în funcție de semantică Verificați codul HTML pentru validitate Utilizați text alternativ pentru imagini

Imaginile trebuie să includă întotdeauna un atribut alt. Browserul se bazează pe acest atribut pentru a oferi context pentru imagine. Atributul alt trebuie să conțină text care va fi afișat dacă imaginea nu s-a încărcat.

Gresit

Dreapta

Nu folosiți stiluri în marcajul HTML

Acest lucru creează pagini care durează prea mult să se încarce și sunt dificil de întreținut. Scrieți toate stilurile într-un document CSS separat. Încercați să utilizați eticheta și atribut de stil la minim.

Scrie comentarii

Comentează codul, dar nu exagera. Comentariile care sunt scrise concis și clar pot servi ca un mare ajutor pentru alți dezvoltatori, precum și un memento important pentru dvs. după ce a trecut ceva timp.

Exemplu:

Pagină

Folosiți nume de clasă adecvate

Dați nume claselor css în conformitate cu conținutul blocului, de exemplu: antet - antet, subsol - subsol, meniu - meniu, conținut - conținut. Acest lucru va face codul mult mai clar și mai ușor de întreținut.

Cod prost

Elementul de meniu 1

Elementul de meniu 2

Elementul de meniu 3

Cod bun

Reguli pentru scrierea CSS

CSS are, de asemenea, reguli pe care le puteți urma pentru a vă menține codul simplu, ușor de citit și bine organizat.

Resetați stilurile browserului la implicit

Ele pot interfera cu stilurile pe care vrem de fapt să le aplicăm. Puteți descărca fișierul pentru resetarea stilurilor standard de browser aici - reset.css.

Folosiți proprietăți și valori prescurtate

Cod prost

padding-top: 5px;
padding-dreapta: 10px;
umplutură-partea de jos: 15px;
padding-stânga: 20px;

Cod bun

umplutură: 5px 10px 15px 20px;

Specificați selectoare și reguli pe o linie nouă

Cod prost

Element (afișare:bloc;poziție: relativă;padding:5px 10px 15px 20px;)

Cod bun

Element (
afisare: bloc;
poziție: relativă;
umplutură: 5px 10px 15px 20px;
}

Introduceți valori zero fără unități

Cod prost

umplutură: 10px 0px;
marja-stânga: 0%;

Cod bun

umplutură: 10px 0;
margine-stânga: 0;

Scrie comentarii

Separați blocurile principale cu comentarii, acest lucru va îmbunătăți lizibilitatea codului.

Exemplu:

/*ANTET*/
antet(
}
/*HEADER END*/

/*PRINCIPAL*/
principal(
}
/*Capatul principal*/

/*SUBSOL*/
subsol (
}
/*FOOTER END*/

Verificați codul CSS pentru validitate. Concluzie

Aceste linii directoare și reguli sunt doar elementele de bază, deoarece limbajele HTML și CSS evoluează mai rapid și sunt dezvoltate noi metode de scriere a codului corect. Urmând recomandările noastre, vei fi sigur că codul tău este simplu, ușor de citit și optimizat. Veți primi, de asemenea, +100 de karma și recunoștință de la dezvoltatorii care vor lucra pe site după tine.

Dezvăluire: Asistența dvs. ajută la menținerea funcționării site-ului! Câștigăm o taxă de recomandare pentru unele dintre serviciile pe care le recomandăm pe această pagină. Află mai multe

Împărtășirea înseamnă îngrijire!

Atributul Ce face do? A fost folosit pentru a specifica afișarea granițelor interne între rânduri și coloane. Acest atribut a fost retras. În schimb, utilizați CSS pentru a stila marginile tabelului.

Atributul Rules a fost depreciat Acest atribut a fost depreciat și nu trebuie utilizat. Suportul de browser pentru acest atribut este limitat și utilizarea acestuia poate produce rezultate neașteptate. În schimb, utilizați CSS pentru a stila tabelele.

Atributul REGULI

RULES , un atribut HTML 4.0, indică dacă ar trebui să existe margini interne în tabel. Vom trece peste fiecare dintre valorile RULES și vom demonstra cum sunt utilizate. RULES și FRAME au un mod enervant de a schimba valorile implicite ale celuilalt. Pentru a-ți simplifica viața, iată o regulă generală: dacă folosești RULES, folosește și CADRU și BORDER. Este mai ușor să nu te confuzi.

Valoarea NONE pentru atributul RULES

RULES=NONE înseamnă că nu există granițe interioare. RULES=NONE este valoarea implicită dacă nu utilizați BORDER sau îl setați la zero, dar în caz contrar trebuie specificat explicit că nu are granițe interioare. Rețineți că în prezent Netscape nu recunoaște REGULI .

Nume Mâncare

Floare de stele	tofu amestecat
Miko	supă de orez de legume
Andy	hummus
Ping	pâine prăjită franceză

Valoarea ALL pentru atributul RULES

RULES=ALL indică faptul că toate frontierele interne ar trebui să fie vizibile. RULES=ALL este de obicei folosit împreună cu FRAME=VOID, astfel încât să existe margini exterioare, dar fără margini interioare.

Când este aplicată unui tabel, această valoare ne oferă acest rezultat:

Nume Mâncare

Floare de stele	tofu amestecat
Miko	supă de orez de legume
Andy	hummus
Ping	pâine prăjită franceză

Valoarea COLS pentru atributul RULES

COLS indică faptul că ar trebui să existe margini între coloane, dar nu între rânduri.

Când este aplicată unui tabel, această valoare ne oferă acest rezultat:

Nume Mâncare

Floare de stele	tofu amestecat
Miko	supă de orez de legume
Andy	hummus
Ping	pâine prăjită franceză

Valoarea ROWS pentru atributul RULES

RULES=ROWS indică faptul că ar trebui să existe margini între rânduri, dar nu între coloane.

Când este aplicată unui tabel, această valoare ne oferă acest rezultat:

Nume Mâncare

Floare de stele	tofu amestecat
Miko	supă de orez de legume
Andy	hummus
Ping	pâine prăjită franceză

Valoarea GROUPS pentru atributul RULES

RULES=GROUPS vă permite să puneți margini între grupuri de celule de tabel. Există două moduri în care celulele pot fi grupate: pe rând și pe coloană. Să trecem peste fiecare dintre ele. Rețineți că în prezent Netscape nu recunoaște REGULI.

Gruparea după rând

Pentru a grupa după rând, utilizați etichetele , ,. indică rândurile de antet ale tabelului, indică corpul principal al tabelului și indică rândurile de jos. Deci, de exemplu, acest cod creează un tabel cu trei grupuri. Granițele apar doar între grupuri:

NumePrețMâncareTotal

Floare de stele	tofu amestecat	5.95
Miko	supă de orez de legume	4.95
Andy	hummus	3.95
Ping	pâine prăjită franceză	5.95
20.80

Iată cum se redă tabelul:

Nume Prețul alimentelorTotal

Floare de stele	tofu amestecat	5.95
Miko	supă de orez de legume	4.95
Andy	hummus	3.95
Ping	pâine prăjită franceză	5.95
20.80

Gruparea după coloană

Pentru a grupa după coloană, utilizați eticheta și atributul SPAN. este nevoie de puțin pentru a te obișnui, deoarece de fapt nu ocolește nicio celulă de tabel. Se duce în partea de sus a codului tabelului, unde stabilește reguli despre coloanele din tabel, inclusiv care sunt grupate împreună. pentru a indica câte coloane sunt în fiecare grup .Dacă omiteți SPAN, atunci se presupune că grupul are doar o coloană. Deci, de exemplu, următorul cod spune că prima coloană este într-un grup în sine, iar cele trei de după aceea sunt împreună într-un grup. Observați că necesită o etichetă de sfârșit. Granițele vor merge numai între grupuri.

HTML Basics conține regulile de bază ale limbajului HTML, o descriere a structurii unei pagini HTML și relațiile din structura unui document HTML între elementele HTML.

Un document HTML este unul obișnuit Document text, poate fi creat ca de obicei editor de text(Notepad), și într-unul specializat, cu evidențierea codului (Notepad++, Studio vizual Cod etc.). Un document HTML are extensia .html.

Un document HTML constă dintr-un arbore de elemente HTML și text. Fiecare element este identificat în documentul sursă printr-o etichetă de început (deschidere) și de sfârșit (închidere) (cu rare excepții).

Eticheta de început arată unde începe elementul, eticheta de final arată unde se termină. Eticheta de închidere se formează prin adăugarea unei bare oblice / înainte de numele etichetei: .... Între etichetele de început și cele de închidere se află conținutul etichetei - conținutul.

Etichetele unice nu pot stoca conținut direct; este scrisă ca valoare de atribut, de exemplu, o etichetă va crea un buton cu textul Button în interior.

Etichetele pot fi imbricate una în alta, de exemplu,

Text

. Când investiți, ar trebui să urmați ordinea în care sunt închise (principiul „matryoshka”), de exemplu, următoarea intrare va fi incorectă:

Text

Elementele HTML pot avea atribute (globale, aplicate tuturor elementelor HTML și propriile lor). Atributele sunt scrise în eticheta de deschidere a elementului și conțin un nume și o valoare, specificate în formatul atribut name="value" . Atributele vă permit să modificați proprietățile și comportamentul elementului pentru care sunt setate.

Fiecărui element i se pot atribui mai multe valori de clasă și o singură valoare de id. Mai multe valori de clasă sunt scrise separate printr-un spațiu, . Valorile de clasă și id-ul trebuie să fie compuse numai din litere, cifre, cratime și caractere de subliniere și trebuie să înceapă doar cu litere sau cifre.

Browserul vizualizează (interpretează) documentul HTML, construindu-i structura (DOM) și afișându-l în conformitate cu instrucțiunile incluse în acest fișier (fișe de stil, scripturi). Dacă marcajul este corect, fereastra browserului va afișa o pagină HTML care conține elemente HTML - anteturi, tabele, imagini etc.

Procesul de interpretare (parsare) începe înainte ca pagina web să fie complet încărcată în browser. Browserele procesează documentele HTML secvenţial, de la început, în timp ce procesează CSS şi relaţionează foile de stil cu elementele paginii.

Un document HTML este format din două secțiuni - antetul - între etichete ... și partea de conținut - între etichete ....

Structura paginii web 1. Structura documentului HTML

HTML urmează regulile conținute în fișierul de declarare a tipului de document (Definiția tipului de document sau DTD). Un DTD este un document XML care definește ce etichete, atribute și valorile acestora sunt valabile pentru un anumit tip HTML. Fiecare versiune de HTML are propriul DTD.

DOCTYPE este responsabil pentru afișarea corectă a unei pagini web de către browser. DOCTYPE specifică nu numai versiunea HTML (de ex. html), ci și fișierul DTD corespunzător de pe Internet.

...

Elementele din interiorul etichetei formează un arbore de document, așa-numitul model de obiect document, DOM (model de obiect de document). În acest caz, elementul este elementul rădăcină.

Orez. 1. Cea mai simplă structură a unei pagini web

Pentru a înțelege interacțiunea elementelor paginii web, este necesar să se ia în considerare așa-numitele „relații de familie” dintre elemente. Relațiile dintre mai multe elemente imbricate sunt clasificate ca părinte, copil și soră.

Un strămoș este un element care conține alte elemente. În figura 1, strămoșul pentru toate elementele este . În același timp, elementul este strămoșul tuturor etichetelor pe care le conține: ,

, , etc.

Un descendent este un element situat într-unul sau mai multe tipuri de elemente. De exemplu, este un descendent al , și elementul

Este un descendent al ambelor și .

Un element părinte este un element care este legat de alte elemente la un nivel inferior și este situat deasupra lor în arbore. În figura 1 și . Etichetă

Este părinte numai pentru .

Element copil- un element direct subordonat unui alt element mai mult nivel inalt. În figura 1 există doar elemente , ,

Și sunt copii ai .

Un element soră este un element care are un element părinte comun cu cel în cauză, așa-numitele elemente de același nivel. În figura 1 și sunt elemente de același nivel, precum și elemente , și

Sunt surori una cu cealaltă.

1.1. Elementul 1.2. Element

Secțiunea... conține informații tehnice despre pagină: titlu, descriere, Cuvinte cheie pentru motoarele de căutare, codificare etc. Informațiile pe care le introduceți acolo nu sunt afișate în fereastra browserului, dar conțin informații care îi spun browserului cum să proceseze pagina.

1.2.1. Element

Eticheta de secțiune necesară este . Textul plasat în interiorul acestei etichete apare în bara de titlu a browserului web. Titlul nu trebuie să aibă mai mult de 60 de caractere pentru a se încadra complet în titlu. Textul titlului trebuie să conțină cea mai completă descriere a conținutului paginii web.

1.2.2. Element

Eticheta opțională de secțiune este o singură etichetă. Cu ajutorul acestuia, puteți seta o descriere a conținutului paginii și a cuvintelor cheie pentru motoarele de căutare, autorul documentului HTML și alte proprietăți ale metadatelor. Un element poate conține mai multe elemente, deoarece poartă informații diferite în funcție de atributele utilizate.

Descrierea conținutului paginii și a cuvintelor cheie pot fi specificate simultan în mai multe limbi, de exemplu, în rusă și engleză:

Folosind o etichetă, puteți bloca sau permite indexarea unei pagini web de către motoarele de căutare:

Pentru repornire automată pagină după o anumită perioadă de timp, trebuie să utilizați valoarea de reîmprospătare:

Pagina va fi reîncărcată după 30 de secunde. Pentru a redirecționa vizitatorul către o altă pagină, trebuie să specificați adresa URL în parametrul URL:

Nume document: My document HTML

Data creării: 06/10/2005

2005 Big Company, Inc.

8. Elementele pot fi imbricate, dar nu trebuie să se suprapună. Orice element care se deschide în text închis în alt element trebuie să fie în interiorul acestui element și să fie aproape .

Dreapta Gresit