Página semântica da web xhtml tags semânticas

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.

<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:

Código:

<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.

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

Código:

</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

Código:

<li> Projeto 1 </li>

<li> Projeto 2 </li>

<li> Projeto 3 </li>

</ul> copie o conteúdo da área de transferência

Código:

<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

Código:

<dt> cachorro </dt>

<dd> Um mamífero carnívoro da família Canidae. </dd>

</dl> copiar conteúdo para a área de transferência

Código:

<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

Código:

Código:

Código:

struct/text.html#h-9.2.1> A apresentação dos elementos da frase

Copie o conteúdo para a área de transferência

Código:

<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

Código:

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

Código:

<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

Código:

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

Código:

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

Código:

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

Código:

Código:

O 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

Código:

Código:

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/

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