Este artigo resume 30 guias para escrever código HTML. Desde que você os mantenha em mente e use -os de maneira flexível no processo de escrever código HTML, você definitivamente escreverá códigos bonitos e entrará nas fileiras dos desenvolvedores profissionais o mais rápido possível.
No código -fonte da página anterior, muitas vezes vi tais declarações:
<li>some text here.<li>some new text here.<li>you get the idea.Talvez no passado pudéssemos tolerar tais tags HTML não fechadas, mas nos padrões de hoje, isso é muito indesejável e deve ser evitado 100%. Certifique -se de prestar atenção no fechamento da sua tag HTML, caso contrário, ela não passará na verificação e poderá causar alguns problemas imprevistos.
É melhor usar este formulário:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>O autor se juntou a muitos fóruns do CSS anteriormente, onde se um usuário encontrar problemas, sugerimos que ele faça duas coisas primeiro:
Geralmente, existem quatro tipos de documentos para escolher :A definição Doctype informa ao navegador se a página contém html, xhtml ou uma mistura dos dois, para que o navegador possa analisar corretamente a tag.
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>Sempre houve opiniões diferentes sobre que tipo de declaração de tipo de documento usar. Acredita -se geralmente que a afirmação mais rigorosa seja a melhor escolha, mas pesquisas mostram que a maioria dos navegadores analisará essa afirmação de maneira normal, muitas pessoas optam por usar o padrão HTML4.01. O ponto principal de escolher uma declaração é que ela não é realmente adequada para você, então você deve considerar a escolha de uma declaração de forma abrangente que se adapte ao seu projeto.
Quando você está ocupado escrevendo código, muitas vezes pode adicionar um pouco de código CSS incorporado casualmente ou preguiçoso, assim: assim:
<p style=color: red;>网页设计</p>Isso parece conveniente e não tem problema, mas causará problemas em seu código.
Quando você começa a escrever o código, é melhor começar a adicionar código de estilo após a conclusão da estrutura do conteúdo.
Esse método de codificação é como combater a guerrilha, que é uma abordagem muito imitadora. -Chris Coyier
Uma abordagem melhor é definir o estilo deste P no arquivo da folha de estilo:
someelement > p {color: red;}Em teoria, você pode introduzir folhas de estilo CSS em qualquer lugar, mas a especificação HTML recomenda apresentá -las na etiqueta principal de uma página da web, que pode acelerar a renderização da página.
Durante o processo de desenvolvimento do Yahoo, descobrimos que a introdução de folhas de estilo na etiqueta da cabeça acelerará o carregamento das páginas da web.
Porque isso permite que a página seja renderizada passo a passo. - Equipe YSLOW
<head><title>my favorites kinds of corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherfile.css /></head>Um princípio a lembrar é tornar a página presente na frente dos usuários o mais rápido possível. Quando um script é carregado, a página faz uma pausa no carregamento até que o script esteja totalmente carregado. Portanto, perderá mais tempo para os usuários.
Se o seu arquivo JS quiser apenas implementar determinadas funções, como o Button Click Event, você poderá apresentá -lo com segurança na parte inferior do corpo, que é definitivamente a melhor maneira de fazê -lo.
Por exemplo : <p>and now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherfile.js></script></body></html>Muitos anos atrás, havia uma maneira de adicionar diretamente o código JS à tag HTML. Especialmente muito comum em álbuns de fotos simples. Essencialmente, um evento OnClick é anexado a uma tag e seu efeito é equivalente a alguns código JS. Não há necessidade de discutir muito, esse método não deve ser usado, o código deve ser transferido para um arquivo JS externo e, em seguida, AddEventListener / Atnetvent para o ouvinte do tempo. Ou use uma estrutura como jQuery e o método do relógio é necessário.
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});Muitas pessoas realmente não entendem o significado e o valor da verificação padrão. O autor analisou esse problema em detalhes em um blog. Em uma palavra, a verificação padrão é para você, não para você causar problemas.
Se você está apenas começando a se envolver na produção de páginas da web, é altamente recomendável que você faça o download desta barra de ferramentas de desenvolvimento da página da web e use a verificação padrão HTML e a verificação padrão CSS a qualquer momento durante o processo de codificação. Se você acha que o CSS é um idioma muito fácil de aprender, ele fará você morrer. Seu código intrincado tornará sua página cheia de brechas e problemas constantemente. Uma boa maneira é verificar, verificar e verificar.
O Firebug é um melhor plug-in bem merecido para o desenvolvimento da Web. Ele não apenas depura o JavaScript, mas também permite que você entenda intuitivamente as propriedades e a localização das tags de página. Escusado será dizer, faça o download!
De acordo com a observação do autor, a maioria dos usuários usa apenas 20% da função Firebug, que é realmente um desperdício. Você também pode passar algumas horas aprendendo essa ferramenta no sistema, e acredito que ela lhe dará duas vezes o resultado com metade do esforço.
Tutorial do Firebug :Em teoria, você pode escrever marcas casualmente assim:
<div><p>here's an interesting fact about corn. </p></div>É melhor não escrever dessa maneira. É inútil colocar mais letras e isso tornará o código feio, o que é bom:
<div><p>here's an interesting fact about corn. </p></div>O autor recomenda que você use todas essas seis tags em suas páginas da web. Embora a maioria das pessoas use apenas os quatro primeiros, o H mais utilizado terá muitos benefícios, como o dispositivo, favorável ao mecanismo de pesquisa, etc. Você também pode substituir sua tag P pelo H6.
Hoje, o autor iniciou uma discussão no Twitter: se h1 ser definido no logotipo ou no título do artigo, 80% das pessoas escolheram o último.
Obviamente, como usá -lo depende de suas necessidades, mas sugiro que, quando você configure um blog, você deve definir o título do artigo como H1, o que é muito benéfico para a otimização de mecanismos de pesquisa (SEO).
Nos últimos anos, a equipe do Yahoo fez muito trabalho no desenvolvimento do front-end. Há pouco tempo, eles lançaram uma extensão do Firebug chamada YSLOW, que analisará sua página <da web e retornará uma transcrição, que analisa cuidadosamente todos os aspectos desta página da Web e propõe áreas que precisam de melhorias. Embora seja um pouco duro, definitivamente o ajudará. É altamente recomendado - YSLOW!
Normalmente, o site tem um menu de navegação, você pode defini -lo dessa maneira:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>Se você deseja escrever um belo código, é melhor não usar esse método.
Por que usar os menus de navegação UL para layout?
-Peuse Ul nasceu para se preparar para a lista de definições
É melhor definir assim:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>O IE sempre foi um pesadelo para desenvolvedores de front-end!
Se a sua folha de estilo CSS estiver basicamente finalizada, você poderá criar uma folha de estilo para o IE, e isso só entrará em vigor para o IE:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->O significado desses códigos é: se o navegador do usuário for IE6 ou abaixo, esse código entrará em vigor. Se você quiser incluir o IE7, mude [se o IE 7] para [se LTE IE 7].
Seja você um usuário do Windows ou Mac, existem muitos editores excelentes para você escolher:
Olhando para a primeira página que a maioria de nós escreve, definitivamente encontraremos hábitos de divisão sérios. Geralmente, o instinto de iniciantes é embrulhar um parágrafo com uma div e depois colocar mais divs para controlar o posicionamento. - Na verdade, essa é uma abordagem ineficiente e prejudicial.
Depois de escrever a página da web, você deve verificar -a várias vezes para minimizar o número de elementos.
Se você pode usar as listas de layout da UL, não use o DIVS para fazer o layout.
Assim como a chave para escrever um artigo é reduzir, reduzir e reduzir, escrever uma página também deve seguir esse padrão.
Os benefícios de adicionar um atributo ALT às imagens são evidentes - isso permite que os usuários que desativem imagens ou usam dispositivos especiais para obter acesso às informações do seu príncipe e também são amigáveis aos mecanismos de pesquisa de imagens.
O Firefox não suporta exibir o atributo Alt de imagem, você pode adicionar atributo de título:
<img src=cornimage.jpg alt=网页设计title=网页设计/>Costumo estudar e trabalhar até o início da manhã sem saber, e acho que essa é uma boa situação.
Meu ~ ha! Tempo (momentos ah-ha, referindo-se a momentos em que a luz dos salgueiros ou os momentos da iluminação) geralmente aconteceu tarde da noite. Por exemplo, entendo completamente o conceito de fechamento em JavaScript, neste caso. Se você não experimentou um momento tão maravilhoso, tente agora!
Nada pode ajudá -lo a aprender HTML mais rápido do que imitar seu ídolo. No começo, todos tínhamos que estar dispostos a fazer uma copiadora e depois desenvolver lentamente nosso próprio estilo. Pesquise o código da sua página de site favorito e veja como eles o implementam. Esta é a única maneira de especialistas, você deve experimentá -lo. Nota: Apenas aprenda e imite seu estilo de codificação, não copie e copie!
Preste atenção a vários efeitos legais de JavaScript na Internet. Se você parece usar um plug-in, pode encontrar o nome do plug-in com base no nome do arquivo na tag da cabeça em seu código-fonte e, em seguida, pode aprender a usá-lo para seu próprio uso.
Isso é especialmente necessário quando você cria sites para outras empresas. Você não usa a tag BlockQuote? Então o usuário pode usá -lo, você não usa o que você mesmo? Os usuários também podem. Reserve um tempo para fazer uma página que exibe os estilos de elementos como UL, OL, P, H1-H6, BlockQuotes, etc., e verifique se há alguma omissões.
Nota do tradutor: o título original em inglês é usar o Twitter
Existem muitas APIs que podem ser adicionadas às páginas da web gratuitamente agora, e essas ferramentas são muito poderosas. Pode ajudá -lo a implementar muitas funções inteligentes e, mais importante, pode ajudá -lo a promover o site.
O Photoshop é uma ferramenta importante para engenheiros de front-end. Se você é proficiente em HTML e CSS, também pode aprender mais sobre o Photoshop.
Embora algumas tags HTML raramente sejam usadas, você ainda deve entendê -las. Por exemplo, ABBR, citar, etc., você deve aprendê -los em caso de emergências.
Existem muitos recursos excelentes na Internet e muitos especialistas escondidos na comunidade. Aqui você pode aprender sozinho e perguntar aos desenvolvedores experientes.
A redefinição do CSS também é redefinida CSS, o que significa redefinir alguns estilos de tags HTML ou estilos padrão.
Também há um debate feroz sobre o uso da redefinição CSS na Internet e o autor o recomenda. Você pode primeiro escolher algumas redefinições de CSS maduras e depois evoluir lentamente para algo que combina com você.
Simplificando, você deve alinhar seus elementos da web o máximo possível. Você pode observar os sites que você gosta e seus logotipos, títulos, gráficos e parágrafos estão definitivamente muito bem corretos. Caso contrário, parecerá caótico e não profissional.
Agora que você dominou o conhecimento de HTML, CSS e Photoshop, também precisa aprender a converter PSD em imagens e fundos na página da web. Aqui estão dois bons tutoriais:
Existem muitas estruturas excelentes para JavaScript e CSS, mas se você é iniciante, não se apresse em usá -las. Se você não conseguir dominar o CSS com habilidade, o uso de estruturas confundirá seu sistema de conhecimento.
A estrutura do CSS foi projetada para desenvolvedores qualificados, o que economizará muito tempo.