Latest web development tutorials

HTML (5) Especificação Código

Convenções de código HTML

Muitos desenvolvedores web especificação de código HTML mal compreendida.

Em 2000-2010, muitos desenvolvedores da Web para converter de HTML para XHTML.

Os desenvolvedores usam XHTML gradualmente desenvolver um bom escrever especificações HTML.

E no HTML5, devemos formar um relativamente boas normas de código, várias recomendações são fornecidos abaixo da especificação.


Use o tipo correto de documento

A declaração de tipo de documento na primeira linha do documento HTML:

<! DOCTYPE html>

Se você quiser usar outros rótulos, como minúsculas, você pode usar o seguinte código:

<! DOCTYPE html>

nomes de elementos minúsculas

HTML5 nome do elemento pode usar letras maiúsculas e minúsculas.

uso recomendado letras minúsculas:

  • estilo caso misto é muito ruim.
  • Os desenvolvedores normalmente usam minúsculas (XHTML similar).
  • estilo minúsculas parece mais refrescante.
  • letras minúsculas fácil de escrever.

Não recomendado:

<Section>
<P> Este é um parágrafo. </ P>
</ Section>

Muito ruim:

<Section>
<P> Este é um parágrafo. </ P>
</ Section>

recomendado:

<Section>
<P> Este é um parágrafo. </ P>
</ Section>

Desligue todos os elementos HTML

Em HTML5, você não quer fechar todos os elementos (por exemplo, <p> elemento), mas recomendamos que cada elemento deve adicionar uma marca de fechamento.

Não recomendado:

<Section>
<P> Este é um parágrafo.
<P> Este é um parágrafo.
</ Section>

recomendado:

<Section>
<P> Este é um parágrafo. </ P>
<P> Este é um parágrafo. </ P>
</ Section>

Fechar elementos HTML vazias

Em HTML5, vazio elemento HTML não tem de desligar:

Podemos escrever:

<Charset Meta = "utf-8 ">

Você também pode escrever:

<Meta charset = "utf-8 " />

XML, XHTML e barra (/) é uma obrigação.

Se você pretende usar sua página XML software, este estilo é muito bom.


nome do atributo em minúsculas

HTML5 permite o uso da maiúscula nome da propriedade e letras minúsculas.

Recomendamos o uso de nome de atributo em minúsculas:

  • Use caso é um hábito muito ruim.
  • Os desenvolvedores normalmente usam minúsculas (XHTML similar).
  • estilo minúsculas parece mais refrescante.
  • letras minúsculas fácil de escrever.

Não recomendado:

<Div class = "menu">

recomendado:

<Div class = "menu">

Valor de propriedade

valores de atributos HTML5 não pode cotação.

Recomendamos a utilização das citações do valor do atributo:

  • Se o valor da propriedade contém espaços precisará usar aspas.
  • estilo misto não é recomendado, o estilo unificado proposto.
  • Os valores de propriedade usando aspas são fáceis de ler.

Os exemplos a seguir o valor do atributo contém espaços, não usar aspas, ele não pode trabalhar:

<Class = Tabela de tabela listrado>

A seguir tem aspas duplas, ele está correto:

<Class Table = "mesa listrada" >

Propriedades da imagem

alt atributos de imagem usado frequentemente. Quando a imagem não pode ser exibida, que pode substituir exibição da imagem.

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

tamanho da imagem definida, pode ser reservado no momento da carga especificada espaço, reduzir a cintilação.

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

Espaços e sinais de igual

Você pode usar espaços antes e depois do sinal de igual.

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

No entanto, recomendamos usar menos espaço:

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

Evite longa linha de código

Usando um editor de HTML, esquerda e direita rolagem código é inconveniente.

Cada linha de código, tanto quanto possível, inferior a 80 caracteres.


As linhas em branco e recuo

Não adicione uma linha em branco para nenhuma razão.

Para cada bloco de função lógica adicionar uma linha em branco, o que torna mais fácil de ler.

Travessão dois espaços, não é recomendado TAB.

Não use linhas em branco desnecessários são recuadas entre código curto.

linhas em branco desnecessários e recuo:

<Body>

<H1> Este tutorial </ h1>

<H2> HTML </ h2>

<P>
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
Este tutorial, a aprendizagem não é apenas a tecnologia, mas também sonhar,
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
</ P>

</ Body>

recomendado:

<Body>

<H1> Este tutorial </ h1>

<H2> </ h2>
<P> Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho.
Este tutorial, a aprendizagem não é apenas tecnologia, mas também um sonho. </ P>

</ Body>

Formar Exemplo:

<Table>
<Tr>
<Th> Nome </ th>
<Th> Descrição </ th>
</ Tr>
<Tr>
<Td> A </ td>
<Td> Descrição de A </ td>
</ Tr>
<Tr>
<Td> B </ td>
<Td> Descrição do B </ td>
</ Tr>
</ Table>

Lista Exemplo:

<Ol>
<Li> Londres </ li>
<Li> Paris </ li>
<Li> Tóquio </ li>
</ Ol>

Omitir o <html> e <body>?

No padrão HTML5, <html> e <body> tag pode ser omitida.

Os seguintes documentos são HTML5 correto:

exemplo:

<! DOCTYPE html>
<Head>
<Title> Page Title </ title>
</ Head>

<H1> Este é um título </ h1>
<P> Este é um parágrafo. </ P>

tente »

Não recomendado omitido <html> e tag <body>.

<Html> elemento é o elemento raiz do documento, a linguagem usada para descrever a página:

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

instrução de linguagem é facilitar leitores de tela e motores de busca.

Omitir o <html> ou <body> no DOM e falhas de software XML.

Omitir o <body> erro ocorre em navegadores mais antigos (IE9).


Omitir o <head>?

No padrão HTML5, tag <head> pode ser omitido.

Por padrão, o navegador o conteúdo <body> antes de adicionada a um padrão elemento <head>.

Exemplos

<! DOCTYPE html>
<Html>
<Title> Page Title </ title>

<Body>
<H1> Este é um título </ h1>
<P> Este é um parágrafo. </ P>
</ Body>

</ Html>

tente »
nota Agora omitir as tags de cabeça não são recomendados.

metadados

HTML5 no elemento <title> é necessária, o nome do título descreve o tema da página:

<Title> Este tutorial </ title>

Título e linguagem que permite que o motor de busca vai logo entender o tema da sua página:

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Charset Meta = "UTF-8 ">
<Title> Este tutorial </ title>
</ Head>

comentários HTML

Os comentários podem ser escritos no <- e -> In:

<! - Este é um comentário ->

comentários mais longos no <! - e -> escreveu em ramos:

<! -
Este é um comentário mais. Este é um comentário mais. Este é um comentário mais.
Este é um longo comentar este é um comentário mais longo. Este é um comentário mais.
->

Os comentários do primeiro caractere de recuo dois espaços, mais fácil de ler.


stylesheet

Stylesheet sintaxe terse (atributo de tipo não é obrigatório):

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

As regras podem ser escrito como uma linha curta:

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

regras de várias linhas longas pode ser escrito:

body {
background-color: lightgrey;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16EM;
color: black;
}
  • A cinta na mesma linha com os seletores.
  • Escolha entre a chave esquerda e adicionar um espaço.
  • Eu uso dois espaços para recuar.
  • Tem espaço adicional entre os dois pontos e os valores de propriedade.
  • Use um espaço após a vírgula e símbolos.
  • Os valores de propriedade tem que usar o fim de cada símbolo.
  • Somente quando o valor da propriedade contém espaços usar aspas.
  • chave direita em uma nova linha.
  • Até 80 caracteres por linha.
nota Após a vírgula e ponto e vírgula adicionar espaços é uma regra comum.

Carregando JavaScript em HTML

Utilize sintaxe simples para carregar o arquivo de script externo (atributo de tipo não é obrigatório):

<script src = ""> MyScript.js

Use JavaScript para acessar elementos HTML

Um formato HTML ruim pode causar a execução de erros de JavaScript.

A seguir duas declarações JavaScript para saída resultados diferentes:

Exemplos

var obj = getElementById ( "Demo" )

var obj = getElementById ( "demo" )

tente »

HTML, JavaScript Tente usar a mesma convenção de nomenclatura.

as especificações do código de acesso de JavaScript .


nomes de arquivos em minúsculas

A maioria dos servidores Web (Apache, Unix) são sensíveis a maiúsculas: london.jpg London.jpg não pode acessar.

Outros servidores Web (Microsoft, IIS) não é sensível a maiúsculas: london.jpg pode ser acessado através London.jpg ou london.jpg.

Você deve manter um estilo unificado, recomendamos nomes de arquivo uso minúsculas consistentes.


extensão de nome de arquivo

sufixo do arquivo HTML pode ser .html (ou r .htm).

extensão de arquivo CSS é .css.

JavaScript js sufixo do arquivo.


A diferença entre .htm e .html

O .htm extensão de arquivo e .html na natureza não há nenhuma diferença. Navegador eo servidor Web irá tratá-los como arquivos HTML para lidar com eles.

A diferença é que:

aplicação .htm em sistemas DOS cedo, ou sistemas estão agora apenas três caracteres.

Sufixo não é particularmente limitada a sistemas Unix, geralmente com .html.

tecnicamente diferença

Se um URL não especificar um nome de arquivo (como http://www.w3big.com/css/), o servidor irá retornar para o nome de arquivo padrão. O nome de arquivo padrão é normalmente index.html, index.htm, default.html e default.htm.

Se o servidor estiver configurado com apenas "index.html" como o arquivo padrão, você deve nomear o arquivo "index.html", ao invés de "index.htm".

Geralmente, no entanto, o servidor pode configurar arquivo padrão múltiplo, você pode definir o arquivo padrão, conforme necessário.

De qualquer forma, o sufixo HTML completo é ".html".