Latest web development tutorials

HTML (5) Kod Specyfikacja

Konwencje kod HTML

Wielu twórców stron WWW Specyfikacja Kod HTML słabo poznane.

W latach 2000-2010, wielu twórców stron WWW do konwersji z HTML do XHTML.

Programiści używają XHTML stopniowo rozwijać dobre pisanie specyfikacji HTML.

I w HTML5, powinniśmy tworzyć stosunkowo dobrej normy kodu, kilka zaleceń przedstawionych poniżej specyfikacji.


Użyj odpowiedniego typu dokumentu

Deklaracja typu dokumentu w pierwszym wierszu dokumentu HTML:

<! DOCTYPE html>

Jeśli chcesz korzystać z innych etykiet, jak małymi literami, można użyć następującego kodu:

<! DOCTYPE html>

Małe litery nazwy elementów

HTML5 nazwa elementu można użyć wielkich i małych liter.

Zalecane użycie wielkich liter:

  • Mieszane przypadku styl jest bardzo zła.
  • Deweloperzy zazwyczaj korzystają z małych liter (podobny XHTML).
  • Małe litery stylu wygląda bardziej orzeźwiający.
  • Małe litery łatwe do napisania.

Nie zaleca się:

<Section>
<P> To jest akapit. </ P>
</ Section>

Bardzo źle:

<Section>
<P> To jest akapit. </ P>
</ Section>

Zalecane:

<Section>
<P> To jest akapit. </ P>
</ Section>

Wyłącz wszystkie elementy HTML

W HTML5, nie chcesz, aby zamknąć wszystkie elementy (na przykład <p> element), ale zaleca się, aby każdy element musi dodać znacznik zamykający.

Nie zaleca się:

<Section>
<P> To jest akapit.
<P> To jest akapit.
</ Section>

Zalecane:

<Section>
<P> To jest akapit. </ P>
<P> To jest akapit. </ P>
</ Section>

Zamknij puste elementy HTML

W HTML5, pusty element HTML nie trzeba wyłączyć:

Możemy napisać:

<Meta charset = "utf-8 ">

Można również napisać:

<Meta charset = "utf-8 " />

XML, XHTML i ukośnik (/) jest koniecznością.

Osoby, które planują wykorzystać swoją stronę XML oprogramowania, ten styl jest bardzo dobra.


Małe litery nazwy atrybutu

HTML5 umożliwia korzystanie z wielkimi literami nazwa właściwości i małych liter.

Zalecamy korzystanie z małą nazwę atrybutu:

  • Przypadek użycia jest bardzo złym nawykiem.
  • Deweloperzy zazwyczaj korzystają z małych liter (podobny XHTML).
  • Małe litery stylu wygląda bardziej orzeźwiający.
  • Małe litery łatwe do napisania.

Nie zaleca się:

<Div class = "menu">

Zalecane:

<Div class = "menu">

Wartość nieruchomości

wartości atrybutów HTML5 nie może cytat.

Zalecamy stosowanie cytaty wartość atrybutu:

  • Jeśli wartość właściwości zawiera spacje należy użyć cudzysłowu.
  • Mieszane styl nie jest zalecane, proponowaną jednolity styl.
  • wartości nieruchomości przy użyciu cudzysłowu są łatwe do odczytania.

Poniższe przykłady przypisują wartość zawiera spacje, nie należy używać cudzysłowów, to nie może pracować:

<Class = Table Stół paski>

Poniższa używa podwójnych cudzysłowów, to jest poprawne:

<Class Table = "table paski" >

właściwości obrazu

alt Obraz atrybutów często używane. Gdy obraz nie może zostać wyświetlona, ​​można go wymienić wyświetlacz obrazu.

<Img src = "html5.gif" alt = "HTML5" style = "width: 128px; height : 128px">

Zdefiniowany rozmiar obrazu, można rezerwować w momencie załadunku określonej przestrzeni, bez migotania.

<Img src = "html5.gif" alt = "HTML5" style = "width: 128px; height: 128px">

Spacje i znaki równości

Można używać spacji przed i po znaku równości.

<Link rel = "stylesheet" href = "styles.css">

Jednak zalecamy stosowanie mniej miejsca:

<Link rel = "stylesheet" href = "styles.css">

Unikaj długiego wiersza kodu

Korzystanie z edytora HTML, w prawo iw lewo kod jest niewygodne.

Każda z linii kodu w miarę możliwości mniej niż 80 znaków.


Puste linie i wcięcia

Nie dodawaj pusty wiersz bez powodu.

Dla każdego bloku funkcyjnego logiki dodać pusty wiersz, który sprawia, że ​​łatwiej odczytać.

Indent dwie przestrzenie, nie zaleca TAB.

Nie używaj niepotrzebne puste linie są wcięte między krótkiego kodu.

Niepotrzebne puste linie i wcięcia:

<Body>

<H1> Ten poradnik </ h1>

<H2> HTML </ h2>

<P>
Ten poradnik, nauka to nie tylko technologia, ale również sen.
Ten poradnik, nauka to nie tylko technologia, ale również sen.
Ten poradnik, nauka to nie tylko technologia, ale także marzyć,
Ten poradnik, nauka to nie tylko technologia, ale również sen.
</ P>

</ Body>

Zalecane:

<Body>

<H1> Ten poradnik </ h1>

<H2> </ h2>
<P> Ten poradnik, nauka to nie tylko technologia, ale również sen.
Ten poradnik, nauka to nie tylko technologia, ale również sen.
Ten poradnik, nauka to nie tylko technologia, ale również sen.
Ten poradnik, nauka to nie tylko technologia, ale również sen. </ P>

</ Body>

Postać Przykład:

<Table>
<Tr>
<Th> Nazwa </ th>
<Th> Opis </ th>
</ Tr>
<Tr>
<Td> A </ td>
<Td> opis </ td>
</ Tr>
<Tr>
<Td> B </ td>
<Td> Opis B </ td>
</ Tr>
</ Table>

Lista Przykład:

<Ol>
<Li> Londyn </ li>
<Li> Paris </ li>
<Li> Tokio </ li>
</ Ol>

Pominąć <html> i <body>?

W standardzie HTML5 <html> i <body> może zostać pominięty.

Następujące dokumenty są poprawne HTML5:

Przykład:

<! DOCTYPE html>
<Head>
<Title> Tytuł strony </ title>
</ Head>

<H1> To jest nagłówek </ h1>
<P> To jest akapit. </ P>

Spróbuj »

Nie polecany pominięte <html> i <body>.

<Html> elementem jest element główny dokumentu, w języku używanym do opisu strony:

<! DOCTYPE html>
<Html lang = "pl">

Oświadczenie Język jest ułatwienie czytników ekranu i wyszukiwarek.

Pominąć <html> <body> lub w DOM i awarie oprogramowania XML.

Pominąć <body> Błąd występuje w starszych przeglądarkach (IE9).


Pominąć <head>?

W standardzie HTML5 <head> tag może zostać pominięty.

Domyślnie przeglądarka zawartości <body> przed dodaniem do domyślnie <head> element.

Przykłady

<! DOCTYPE html>
<Html>
<Title> Tytuł strony </ title>

<Body>
<H1> To jest nagłówek </ h1>
<P> To jest akapit. </ P>
</ Body>

</ Html>

Spróbuj »
uwaga Teraz pominąć tagi głowy nie są zalecane.

metadane

HTML5 w <title> wymagana jest elementem, nazwa tytule opisuje tematykę strony:

<Title> Ten poradnik </ title>

Tytuł i język, który pozwala wyszukiwarka wkrótce zrozumieć temat swojej stronie:

<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "UTF-8 ">
<Title> Ten poradnik </ title>
</ Head>

komentarze HTML

Komentarze mogą być napisane w <- i -> Z:

<! - To jest komentarz ->

Dłuższe komentarze w <! - I -> napisał w branżach:

<! -
Jest to już komentarz. Jest to już komentarz. Jest to już komentarz.
Jest to już komentować ten jest dłuższy komentarz. Jest to już komentarz.
->

Uwagi pierwszego znaku wcięć dwoma pomieszczeniami, łatwiejsze do odczytania.


stylesheet

Stylesheet lakoniczne składni (atrybut type nie jest wymagane):

<Link rel = "stylesheet" href = "styles.css">

Reguły mogą być zapisane w postaci krótkiej linii:

p.into {font-family: Verdana; font-size: 16em;}

Długie zasady obsługujący kilka linii można napisać:

body {
background-color: jasnoszary;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16em;
Kolor: czarny;
}
  • Orteza na tej samej linii z selektorów.
  • Wybierz między lewą klamra i dodać spację.
  • Używam dwie spacje wcięcia.
  • Dodała przestrzeń pomiędzy dwukropkiem i wartości nieruchomości.
  • Użyj spacji po przecinku i symbolach.
  • wartości nieruchomości muszą stosować się do końca każdego symbolu.
  • Tylko wtedy, gdy wartość nieruchomości zawiera przestrzenie używać cudzysłowu.
  • Prawy nawias w nowej linii.
  • Maksymalnie 80 znaków w wierszu.
uwaga Po przecinek i średnik dodać spacje jest powszechną regułą.

Ładowanie JavaScript w HTML

Za pomocą prostej składni, aby załadować zewnętrznego pliku skryptu (atrybut type nie jest wymagane):

<script src = ""> myscript.js

Użyj JavaScript aby uzyskać dostęp do elementów HTML

Zły formacie HTML mogą spowodować wykonanie błędów JavaScript.

Poniższe dwa JavaScript oświadczenia do wyjścia różnymi wynikami:

Przykłady

var obj = getElementById ( "Demo" )

var obj = getElementById ( "demo" )

Spróbuj »

HTML, JavaScript Staraj się używać tej samej konwencji nazewnictwa.

Dostęp JavaScript Specyfikacja Kod .


małe litery nazwy plików

Większość serwerów WWW (Apache, Unix) jest wielkość liter: London.jpg London.jpg nie ma dostępu.

Inne serwery WWW (Microsoft IIS) nie jest uwzględniana wielkość liter: London.jpg można uzyskać za pośrednictwem London.jpg lub London.jpg.

Musisz zachować jednolity styl, zalecamy wykorzystanie spójnych nazw plików małe.


Rozszerzenie nazwy pliku

Plik HTML sufiksem może być .html (.htm lub R).

Rozszerzenie pliku CSS jest .css.

JavaScript plik .js przyrostka.


Różnica między .htm i .html

Rozszerzenie pliku .htm .html oraz od charakteru nie ma żadnej różnicy. Przeglądarka i serwer WWW będzie traktować je jako pliki HTML do czynienia.

Różnica polega na tym, że:

htm aplikacji we wczesnych systemach DOS lub systemów są teraz tylko trzy znaki.

Przyrostek nie jest szczególnie ograniczony do systemów Unix, zazwyczaj html.

różnica technicznie

Jeśli adres URL nie określa nazwę pliku (na przykład http://www.w3big.com/css/), serwer powróci do domyślnej nazwy pliku. Domyślna nazwa pliku jest zazwyczaj index.html, index.htm, default.html i default.htm.

Jeśli serwer jest skonfigurowany tylko "index.html" jako domyślnego pliku, należy nazwać plik "index.html", zamiast "index.htm".

Generalnie jednak, serwer może skonfigurować wiele domyślny plik, można ustawić go jako domyślny plik potrzebny.

W każdym razie, HTML pełne przyrostek jest ".html".