Outro aspecto importante da estrutura e representação de separação é o uso da marcação semântica para construir o conteúdo do documento. A existência de um elemento XHTML significa que a parte do conteúdo marcada possui significado estruturado correspondente e não há razão para usar outras tags. Em outras palavras, não deixe o CSS fazer com que um elemento HTML pareça outro elemento HTML, como usar <div> em vez do título de tag <p>.
Primeiro de tudo, trata -se da diferença entre semântica e estilos padrão. O estilo padrão é a expressão de algumas tags comumente usadas definidas pelo navegador. Pessoalmente, acho que seu principal objetivo é permitir que todos entendam intuitivamente os usos e funções de tags e atributos. É óbvio que a série HX se parece muito com o título porque possui tamanhos de fonte em negrito e maior. <strong>, <em> é usado para distingui -lo de outras palavras e desempenha um papel de ênfase. Quanto à lista e tabela, é óbvio dizer o que eles fazem.
Em segundo lugar, a coisa mais importante sobre as páginas da Web semântica é que elas são amigáveis para os mecanismos de pesquisa. Com boa estrutura e semântica, o conteúdo da sua página da web é naturalmente fácil de se arrastar pelos mecanismos de pesquisa, e a promoção do seu site pode economizar muito esforço.
A semântica e os usos específicos foram explicados na referência de tag XHTML1.0. Algumas tags e atributos fáceis de esquecer ou serem confusos serão complementados aqui.
<HX><H1>, <H2>, <H3>, <H4>, <H5>, <H6>, são usados como títulos e são reduzidos de acordo com a importância. <H1> é o nível mais alto.
Por exemplo:
Copie o conteúdo para a área de transferência<h1>文档标题</h1> <h2>次级标题</h2>
não use<div class = title> título do documento </div> ou <span class = title> título do documento </span>. É óbvio que os mecanismos de pesquisa não consideram um título para o último.
<p>Marcas de parágrafos, conhecendo <p> Como parágrafos, você não usará mais <br/> para quebrar linhas e não precisa distinguir entre parágrafos e parágrafos. O texto em <p> </p> irá envolver automaticamente, e o efeito da embalagem é melhor que <br>. As lacunas entre os parágrafos também podem ser controladas usando CSS, tornando fácil e claro distinguir parágrafos dos parágrafos. Seria perfeito se você pudesse definir facilmente o espaçamento de viagens e definir os efeitos de afundamento de primeiro caracteres usando altura de linha.
Por exemplo: copie o conteúdo para a área de transferência
<p>蓝色理想www.blueidea.com 诞生于1999年的10月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。</p>
<p> Por muitos anos, o conteúdo do Blue Ideal foi continuamente enriquecido e foi destacado por alguns sites domésticos conhecidos e mídia tradicional. Foi coletado por principais sites de pesquisa como Google, Baidu, Yahoo, Sohu, Sina e Excite. Ele ficou em primeiro lugar na busca pelo design e desenvolvimento de sites de palavras -chave chinesas simplificadas entre os três principais mecanismos de pesquisa do Google, Baidu e Yahoo. Agora, o Blue Ideal se transformou em um dos sites profissionais mais influentes do design e desenvolvimento de sites na China. </p> <ul>, <ol>, <li>
<ul> listas não ordenadas são muito comuns e são amplamente utilizadas. Listas não ordenadas também são usadas com bastante comum. Durante o processo de padronização da Web, <ul> também é usado mais para barras de navegação. Originalmente, as barras de navegação são uma lista, que é completamente correta para fazê -lo. Quando o seu navegador não suporta CSS, o link de navegação ainda é muito bom, mas é um pouco menos bonito.
Por exemplo: copie o conteúdo para a área de transferência
<ul><li> Projeto 1 </li>
<li> Projeto 2 </li>
<li> Projeto 3 </li>
</ul> copie o conteúdo da área de transferência
<ol><li> Capítulo 1 </li>
<li> Capítulo 2 </li>
<li> Capítulo 3 </li>
</ol> <dl>, <dt>, <dd>
DL é a lista de definições. Por exemplo, a explicação e a definição de palavras no dicionário podem ser usadas nesta lista.
Por exemplo: copie o conteúdo para a área de transferência
<dl><dt> cachorro </dt>
<dd> Um mamífero carnívoro da família Canidae. </dd>
</dl> copiar conteúdo para a área de transferência
<dl><dt> Praia de Shanghai </dt>
<dd> Este "Shanghai Bund", filmado em 1980, é o drama mais bem -sucedido e clássico da história da TV de Hong Kong.
Depois de transmitido em Hong Kong naquele ano, causou uma enorme sensação. </dd>
<dt> Chow yun-gord </dt>
<DD> Como todas as ótimas estrelas de cinema, Chow Yun-Fat confirmou uma época, uma era de ouro dos filmes de Hong Kong.
Casacos de vento, óculos de sol, armas duplas de sangue frio e sorrisos ensolarados são todos selados no filme. Quando olhamos para trás, a FA GE foi gravada como as coordenadas de uma era. </dd>
</dl> <cite>, cite, <Q>, <lockQuote>
Fóruns e blogs costumam usar citações de outras pessoas, usando <Q> para marcar cotações curtas de linha única. O navegador da Web reconhecerá automaticamente o conteúdo entre <Q>. Infelizmente, o IE não pode reconhecer e, às vezes, pode causar alguns problemas de acessibilidade. Por esse motivo, algumas pessoas recomendam não usar <Q> e inserir manualmente as marcas de referência. Adicione uma única linha de conteúdo de referência a um <span> contendo a classe apropriada e você pode usar o CSS para estilizar a referência, mas isso não tem significado semântico. Você pode ler as visualizações da tag q (http://diveintomark.org/archives/2002/05/04/the_q_tag) no manuseio de questões relacionadas por Mark Pilgrim.
Para citações longas de um ou vários parágrafos, <lockQuote> deve ser usado. CSS pode ser usado para definir o estilo de referência. Observe que um artigo não pode ser colocado diretamente em <lockquote> e o conteúdo citado também deve ser incluído em um elemento, geralmente <p>. O atributo Cite pode ser usado com <Q> ou <lockQuote> para fornecer o endereço de origem do conteúdo referenciado. Deve -se notar que, se você usar <span> em vez do conteúdo de referência de tags, não poderá usar o atributo CITE.
Por exemplo: copie o conteúdo para a área de transferência
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. Content to Armingboard<p> <cite>孔子</cite>曰:<q>学而不思则罔,思而不学则殆</q>.</p> Copie o conteúdo para a área de transferência<p>The W3C says that <q cite=http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1> A apresentação dos elementos da frase
Copie o conteúdo para a área de transferência
<blockquote cite=http://www.w3cn.org/><p> A maioria de nós tem uma experiência profunda. Sempre que a versão do navegador convencional é atualizada, o site que acabamos de construir pode ficar desatualizado.
Precisamos atualizar ou reconstruir o site. Por exemplo, a guerra típica do navegador de 1996 a 1999,
Para ser compatível com o Netscape e o IE, o site teve que escrever um código diferente para esses dois navegadores. De forma similar,
Sempre que surgem nova tecnologia de rede e dispositivos interativos, também precisamos criar uma nova versão para oferecer suporte a essa nova tecnologia ou novo dispositivo.
Por exemplo, a tecnologia WAP que suporta acesso à Internet móvel. Existem inúmeras perguntas semelhantes: o código do site é inchado e complicado, o que desperdiça muita largura de banda;
DHTML Efeitos especiais para um determinado navegador bloqueiam alguns clientes em potencial; Códigos difíceis de usar, pessoas com deficiência não podem procurar sites, etc.
Este é um ciclo vicioso e um enorme desperdício. </p>
</blockQuote> <em>, <strong>
<em> é usado para ênfase, <strong> é usado para ênfase. A maioria dos navegadores usa itálico para exibir o conteúdo e as negrito destacadas para exibir o conteúdo destacado. No entanto, isso não é necessário. Se é para determinar como a ênfase é exibida, a melhor maneira é usar o CSS para definir seu desempenho. Não use ênfase quando tudo o que você deseja são efeitos visuais. E se você deseja enfatizar, mas ainda sente que ousado ou itálico não são tão bons em efeito visual, especialmente itálico para os chineses, pode definir completamente outros estilos mais atraentes para alcançar o efeito da ênfase.
Por exemplo: copie o conteúdo para a área de transferência
<p><em>强调</em> 的文本通常用斜体显示,No entanto, textos com ênfase especial são geralmente mostrados em negrito. </p> <table>, <td>, <th>, <ingtion>, resumo
As tabelas no XHTML não devem ser dispostas. No entanto, se for marcar os dados da lista, uma tabela deve ser usada. <TH> é o título da tabela, o resumo do atributo é o resumo, a tag <Egend> é a descrição do cabeçalho, a tag <Thead> é o cabeçalho, a tag <tbody> é o conteúdo principal da tabela e a tag <tfoot> é o final da tabela.
Ele também pode ser usado para substituir o atributo dos cabeçalhos e marcar as células que contêm informações do cabeçalho, onde o conteúdo de cada valor é o seguinte:
A linha indica a célula atual, fornecendo informações relevantes para o cabeçalho para linhas que contêm a célula atual.
O COL indica a célula atual, fornecendo informações correspondentes do cabeçalho para as colunas especificadas de acordo com a célula atual.
O RowGroup indica a célula atual, fornecendo informações relevantes para os grupos de linha restantes que contêm a célula atual.
Colgroup indica a célula atual, fornecendo informações correspondentes do cabeçalho para os grupos de colunas restantes especificados com base na célula atual.
O ABBR é usado para definir o nome da abreviação na célula do cabeçalho. Se essa propriedade não estiver definida, o conteúdo da célula padrão será omitido.
Por exemplo: copie o conteúdo para a área de transferência
<table id=mytable cellspacing=0 summary=The technical specifications of the Apple PowerMac G5 series><Eingtion> Tabela 1: Power Mac G5 Especificações de Tecnologia </ingortion>
<tr>
<th SCOPE = COL ABBR = Configurações Class = Nobg> Configurações </th>
<th scope = col abbr = dual 1.8> dual 1.8ghz </th>
<th scope = col abbr = dual 2> dual 2ghz </th>
<th SCOPE = COL ABBR = Dual 2.5> Dual 2,5 GHz </th>
</tr>
<tr>
<th scope = linha abbr = modelo class = spec> modelo </th>
<Td> M9454ll/a </td>
<td> M9455ll/a </td>
<td> m9457ll/a </td>
</tr>
<tr>
<th scope = linha abbr = g5 processador class = especalt> g5 processador </th>
<td class = alt> dual 1.8ghz powerpc g5 </td>
<td class = alt> dual 2GHz PowerPC G5 </td>
<td class = alt> dual 2.5 GHz PowerPC G5 </td>
</tr>
<tr>
<th scope = linha abbr = o barramento de barramento frontal = spec> barramento de frente </th>
<Td> 900MHz por processador </td>
<Td> 1GHz por processador </td>
<Td> 1,25GHz por processador </td>
</tr>
<tr>
<th scope = linha abbr = l2 cache class = specalt> nível2 cache </th>
<td class = alt> 512k por processador </td>
<td class = alt> 512k por processador </td>
<td class = alt> 512k por processador </td>
</tr>
</tabela> visualização de efeito: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
<dfn> copie o conteúdo da área de transferência<p><dfn title=Microsoft web browser>Internet Explorer</dfn> is the most popular browser used underwater.</p> .Se você conhece Del, não use mais <s> como um golpe. Usar del é obviamente mais semântico. Além disso, o del também vem com cite e datetime para indicar o motivo da exclusão e o tempo da exclusão. INS significa inserção e existem tais atributos.
Por exemplo: copie o conteúdo para a área de transferência
<p>It really was <ins cite=rarara.html datetime=20031024>very</ins> good.</p> <code>Significa código do computador. O estilo padrão é a fonte. É frequentemente encontrado em fóruns e blogs técnicos.
Por exemplo: copie o conteúdo para a área de transferência
<code>p{margin:2px 0;}</code> <bbr>, <rigrony>A tag <BBR> representa a abreviação na página da web e a tag <riglay> é uma abreviação. (Nota: aqui separamos a abreviação e a abreviação. A faixa da abreviação é maior que a abreviação, de modo a tomar a abreviação da primeira letra
Escreva com <Grysty> Tag) Navegador no Windows IE6.0 Não suporta tags <BBR>. No IE, você pode aplicar CSS a <riglay>, mas não para <bbr> tags.
O IE exibirá um prompt para o atributo do título da tag <Crônimo>, mas ignorará a tag <BBR>.
Veja: http://www.w3cn.org/article/translate/2005/115.html
Por exemplo: copie o conteúdo para a área de transferência
<abbr title=Cascading Style Sheets>CSS</abbr><acronym title=Cascading Style Sheets>CSS</acronym > Atributo alt e atributo de títuloO atributo de título é usado para fornecer instruções adicionais para os elementos atributos de título podem ser usados em todas as tags, exceto base, base, cabeça, cabeça, html, meta, param, script e título. Mas não é necessário.
A propriedade ALT é um agente do usuário (UA) que não pode exibir imagens, formulários ou applets e especifica o texto de substituição. O idioma do texto de reposição é especificado pelo atributo lang. Copie o conteúdo para a área de transferência
<img src=/img/common/logo.gif width=90 height=27 alt=bluediea.com> copie o conteúdo da área de transferência<a href=http://www.jluvip.com/blog/article.asp?id=260 title=js获取单选按钮的数据>js获取单选按钮的数据</a> Referências:Estilo padrão:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/tr/css21/sample.html
Semântica:
http://www.456beeasteret.com/lab/developing_with_web_standards/zh
http://www.456beeasteret.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/tr/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/
Link de recursos:Tags ruins:
http://www.htmldog.com/guides/htmlinermediate/badtags/
A tag q
http://diveintomark.org/archives/2002/05/04/the_q_tag
Html, xhtml, semântica e o futuro da web
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html