O melhor tutorial convenções de codificação HTML Bootstrap em 2024. Neste tutorial você pode aprender gramática,HTML5 doctype,propriedade de idioma,modo de compatibilidade IE,Codificação de caracteres,A introdução de arquivos CSS e JavaScript,Prático é rei,atributo Order,Boolean (booleano) atributo de tipo,Reduzir o número de rótulos,etiqueta gerada JavaScript,
</li>
ou </body>
). exemplo:
<!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </body> </html>
Para cada uma das primeira linha de páginas HTML Adicionar um modo padrão (modo padrão) declaração, isso pode garantir que você tenha uma exibição consistente em cada browser.
exemplo:
<!DOCTYPE html> <html> <head> </head> </html>
De acordo com a especificação HTML5:
É altamente recomendável para especificar o atributo lang elemento raiz html, de modo a definir o idioma correto para o documento. Isso vai ajudar a ferramentas de síntese de fala deve ser usado para determinar a sua pronúncia, ferramentas de tradução vai ajudar a determinar a sua tradução devem respeitar as regras e assim por diante.
Mais informações sobre lang
atributo conhecimento a partir desta especificação compreensão da.
Aqui estão tabela de código de linguagem .
<html lang="zh-CN"> <!-- pt. --> </html>
IE apoio através específica <meta>
tag para determinar a versão atual de páginas de renderização do IE deve ser usado. A menos que haja uma forte necessidades especiais, caso contrário é melhor para definir o modo de borda, notificando, assim, o IE usando os mais recentes modelos que ele suporta.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Ao declarar explicitamente a codificação de caracteres, o navegador pode ser assegurada de forma rápida e facilmente determinar prestação conteúdo da página. A vantagem desta é evitar o uso de marca de entidades de caracteres (entidade de caractere) em HTML, o que é consistente com toda a codificação do documento (geralmente usam codificação UTF-8).
<head> <meta charset="UTF-8"> </head>
De acordo com a especificação HTML5, no momento da introdução de arquivos CSS e JavaScript geralmente não precisa especificar o type
atributo como text/css
e text/javascript
são os seus valores padrão.
<!-- External CSS --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* pt. */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
Tente seguir padrões HTML e semântica, mas não à custa de praticidade para o preço. Qualquer tempo possível com etiqueta mínimo e manter um mínimo de complexidade.
atributo HTML deve estar em ordem de prioridade na ordem dada abaixo, para garantir a legibilidade do código.
class
id
, name
data-*
src
, for
, type
, href
title
, alt
aria-*
, role
classe é usada para identificar componentes altamente reutilizáveis, e devem, portanto, estar no topo. ID é utilizado para identificar componentes específicos, deve ser usado com precaução (tais como marcadores dentro da página), que ficou em segundo lugar.
<a class="pt." id="pt." data-modal="toggle" href="#"> Example link </a> <input class="form-control" type="text"> <img src="pt." alt="pt.">
atributo booleano não pode ser atribuída no momento da declaração. Especificações XHTML para a sua atribuição, mas a especificação HTML5 não é necessária.
Para mais informações, por favor consulte o WhatWG sessão ON booleana Atributos :
Boolean atributo do elemento se o valor for verdadeiro, se nenhum valor é falso.
Se for necessário atribuir um valor, consulte a especificação WhatWG:
Se existe o atributo, seu valor deve ser uma cadeia vazia ou [pt.] atribuir nome canônico, e não adicionar espaços em branco no início e no final.
Simplesmente, não é atribuído.
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
Ao escrever código HTML para evitar elemento pai desnecessário. Em muitos casos, isto requer uma iterativo e reconstrução de alcançar. Considere o seguinte caso:
<!-- Not so great --> <span class="avatar"> <img src="pt."> </span> <!-- Better --> <img class="avatar" src="pt.">
Etiquetas gerado pelo JavaScript para que o conteúdo se torna difícil encontrar, editar e reduzir o desempenho. Tente evitar a evitar.