HTML5 Tutoriais Básicos

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML(5) Convenções de código

A seguir, apresentamos algumas convenções comuns e frequentemente usadas no código HTML, hábitos de escrita bons ajudam a manter e atualizar o código posteriormente, aumentando a eficiência, esperamos que seja útil para todos.

Convenções de código HTML

Muitos desenvolvedores Web têm pouca noção das convenções de código HTML.

Em2000 até2010No ano

Os desenvolvedores de XHTML têm se acostumado a usar boas práticas de escrita HTML.

E em relação ao HTML5 Deve-se formar um código de boa qualidade, aqui estão algumas sugestões de padrões.

Uso do tipo de documento correto

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

!DOCTYPE html>

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

<!doctype　html>

Uso de nomes de elementos minúsculos

HTML5 Os nomes dos elementos podem usar letras maiúsculas e minúsculas.

Recomendamos usar letras minúsculas:

O estilo de mistura de maiúsculas e minúsculas é muito ruim.
Desenvolvedores geralmente usam letras minúsculas (como XHTML).
Estilo minúsculo parece mais limpo.
Letras minúsculas são mais fáceis de escrever.

Não recomendado:

<SECTION>　
　　<p>Isso é um parágrafo.</p>
</SECTION>

Muito ruim:

<Section>　
　　<p>Isso é um parágrafo.</p>
</SECTION>

Recomendação:

<section>　
　　<p>Isso é um parágrafo.</p>
</section>

Fechamento de todos os elementos HTML

no HTML5 Os elementos HTML não precisam necessariamente ser fechados (por exemplo, elementos <p>), mas recomendamos que cada elemento tenha uma tag de fechamento.

Não recomendado:

<section>
　　<p>Este é um parágrafo.</p>
　　<p>Este é um parágrafo.</p>
</section>

Recomendação:

<section>
　　<p>Isso é um parágrafo.</p>
　　<p>Isso é um parágrafo.</p>
</section>

Fechamento de elementos HTML vazios

no HTML5 Os elementos HTML vazios não precisam necessariamente ser fechados:

Podemos escrever assim:

<meta　charset="utf-8">

também pode ser assim:

<meta　charset="utf-8"　/>

Na XHTML e XML, a barra invertida (/) é obrigatório.

Se você espera que o software XML use sua página, usar esse estilo é muito bom.

Use nomes de propriedade minúsculos

HTML5 Os nomes de propriedade permitem o uso de letras maiúsculas e minúsculas.

Recomendamos usar nomes de propriedade minúsculos:

Usar maiúsculas e minúsculas ao mesmo tempo é um hábito muito ruim.
Desenvolvedores geralmente usam letras minúsculas (como XHTML).
Estilo minúsculo parece mais limpo.
Letras minúsculas são mais fáceis de escrever.

Não recomendado:

<div　CLASS="Style">

Recomendação:

<div　class="style">

Valores de propriedade

HTML5 Os valores de propriedade podem não usar aspas.

Recomendamos usar aspas para valores de propriedade:

Se o valor da propriedade contiver espaços, é necessário usar aspas.
Estilos mistos não recomendados, recomendamos um estilo uniforme.
Usar aspas para valores de propriedade facilita a leitura.

Abaixo, o valor do exemplo de propriedade contém espaços, não foram usadas aspas, então não funcionará:

<table　class=table　striped>

Abaixo foram usadas aspas duplas, isso é correto:

<table　class="table　striped">

Propriedades de imagem

As imagens geralmente usam a propriedade alt. Quando a imagem não puder ser exibida, ela pode substituir a imagem.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)>/title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5Básico Tutorial">
</body>
</html>

Defina o tamanho da imagem, reserve espaço especificado ao carregar para reduzir o flicker.

<img　src="logo.png"　alt="HTML5Básico Tutorial"　style="width:128px;height:40px">

Espaços e sinal de igual

Pode haver espaços antes e depois do sinal de igual.

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

Mas recomendamos usar menos espaços:

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

Evite que uma linha de código seja muito longa

Use um editor HTML, rolar o código para os lados é incômodo.

Tente manter cada linha de código com menos de 80 caracteres.

Linhas em branco e recuo

Não adicione linhas em branco sem motivo.

Adicione linhas em branco para cada bloco lógico, isso facilita a leitura.

Use dois espaços para recuo, não recomendamos usar TAB.

Não use linhas em branco e recuo desnecessários entre códigos curtos.

Linhas em branco e recuo desnecessários:

　　　　　　　　<body>
　　<h1>Básico Tutorial(oldtoolbag.com)>/h1>
　　<h2>HTML</h2>
　　<p>
　　　　Básico Tutorial, aprenda o básico para ir mais longe.
　　　　Básico Tutorial, aprenda o básico para ir mais longe.
　　　Básico Tutorial, aprenda o básico para ir mais longe,
　　Básico Tutorial, aprenda o básico para ir mais longe.
　　</p>
</body>

　　Recomendação:

<body>
<h1>Básico Tutorial(oldtoolbag.com)>/h1>
<h2>HTML</h2>
<p>Básico Tutorial, aprenda o básico para ir mais longe.
Básico Tutorial, aprenda o básico para ir mais longe.
Básico Tutorial, aprenda o básico para ir mais longe.
Básico Tutorial, aprenda o básico para ir mais longe.</p>
</body>

　　Exemplo de tabela:

<table>
　　<tr>
　　　　<th>Name</th>
　　　　<th>Description</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>Description of A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>Description of B</td>
　　</tr>
</table>

　　Exemplo de lista:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

A omissão de <html> e <body>?

No HTML padrão5 , as tags <html> e <body> podem ser omitidas.

Nos seguintes HTML5 O documento é correto:

Exemplo:

!DOCTYPE html>
<head>
　 <title>Título da página</title>
</head>
<h1>Isso é um título</h1>
<p>Isso é um parágrafo.</p>

Não é recomendado omitir as tags <html> e <body>.

O elemento <html> é o elemento raiz do documento, usado para descrever o idioma da página:

!DOCTYPE html>
<html lang="zh-CN">

A declaração do idioma é para facilitar o leitor de tela e os motores de busca.

A omissão de <html> ou <body> em softwares DOM e XML causará uma falha.

A omissão de <body> em navegadores antigos (IE9) causará um erro.

Omissão de <head>?

No HTML padrão5 A tag <head> pode ser omitida.

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

Exemplo

!DOCTYPE html>
<html>
<title>Título da página</title>
<body>
　　<h1>Isso é um título</h1>
　　<p>Isso é um parágrafo.</p>
</body>
</html>

　 Agora, omitir a tag head não é recomendado.

Meta-dados

HTML5 No elemento <title>, é obrigatório, o nome do título descreve o tema da página:

<title>Base Tutorial Website</title>

O título e o idioma permitem que os motores de busca compreendam rapidamente o tema da sua página:

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Base Tutorial Website</title>
</head>

Comentários HTML

Os comentários podem ser escritos em  :

<!--　Isso é um comentário.　-->

Comentários longos podem ser escritos em  Escrever linhas quebradas:

<!--　
　　Isso é um comentário longo. Isso é
　　Um comentário longo. Isso é um comentário longo.
　　Isso é
　　Um comentário longo, isso é um comentário longo. Isso é
　　Um comentário longo.
-->

O primeiro caractere de um comentário longo é recuo de dois espaços, facilitando a leitura.

Tabela de estilo

O estilo de tabela usa uma sintaxe simples (o atributo type não é obrigatório):

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

Regras curtas podem ser escritas em uma linha:

p.into {font-family: Verdana; font-size:　14px;}

Regras longas podem ser escritas em várias linhas:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size:　14px;
　　color: red;
}

Coloque o abre-chave e o seletor na mesma linha.
Adicionar um espaço entre o abre-chave e o seletor.
Use dois espaços para recuar.
Adicionar um espaço entre os dois pontos e o valor do atributo.
Adicionar um espaço após as vírgulas e os sinais.
Use ponto e vírgula no final de cada atributo e valor.
Use aspas apenas quando o valor do atributo conter espaços.
O fechamento de chaves deve estar na nova linha.
O comprimento máximo de cada linha 80 caracteres.

Adicionar um espaço após as vírgulas e os dois pontos é uma regra comum.

Carregar JavaScript no HTML

Carregue arquivos de script externos usando uma sintaxe concisa (o atributo type não é necessário):

<script src="myscript.js">

Acesse elementos HTML usando JavaScript

Uma má formatação HTML pode causar erros na execução do JavaScript.

As duas seguintes declarações JavaScript outputarão resultados diferentes:

Exemplo

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

No HTML, o JavaScript deve usar regras de nomeação idênticas.

Use nomes de arquivo em minúsculas

A maioria dos servidores da Web (Centos, *Unix) é sensível a maiúsculas e minúsculas: loading.jpg não pode ser acessado por Loading.jpg.

Outros servidores da Web (Window, IIS) não são sensíveis a maiúsculas e minúsculas: loading.jpg pode ser acessado por Loading.jpg ou loading.jpg.

Você deve manter um estilo uniforme; recomendamos usar nomes de arquivo em minúsculas.

Extensão de arquivo

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

O sufixo de arquivo do CSS é .css.

O sufixo de arquivo do JavaScript é .js.

Diferença entre .htm e .html

Os arquivos com extensões .htm e .html não têm diferença em essência. Os navegadores e servidores da Web os tratam como arquivos HTML.

A diferença está em:

.htm foi aplicado em sistemas DOS antigos, e o sistema atual pode ter apenas três caracteres.

No sistema Unix, o sufixo não tem restrições especiais, geralmente usado .html.

Diferenciação Técnica

Se um URL não especificar o nome do arquivo (como https://pt.oldtoolbag.com/html/, O servidor retornará o nome do arquivo padrão. Geralmente, o nome do arquivo padrão é index.html, index.htm, default.html e default.htm.

Se o servidor configurar apenas \

No entanto, geralmente o servidor pode configurar vários arquivos padrão, você pode configurar o nome do arquivo padrão conforme necessário.

De qualquer maneira, o sufixo completo do HTML é ".html".

HTML5 API de Histórico HTML5 WebSocket