wulin.comの記事紹介(www.vevb.com):恐ろしい経験を覚えています。このページには、数十または数十のdivがネストされていました。私がそれを読んだとき、それは私にめまいを感じさせました...それらのいくつかはスパンタグ、Pタグ、およびDivを使用できます。 H1とHXを使用できる人もDivタグを使用します。それは本当に言葉がありません...この時点で、開発者が「セマンティックタグ」のいくつかの概念と行動を持っていることを願っています。
いくつかの採用要件は、Webセマンティクスという言葉に精通しており、Web標準を理解/精通していることがわかります。 Tag SemanticsはWeb標準の一部であるため、ブログパークに投稿した投稿を変更してから投稿しました...フロントエンドの初心者がそのようなことがあることを知ることができることを願っています。
恐ろしい経験を覚えています。このページには、数十または数十のdivがネストされていました。私がそれを見たとき、それは私にめまいを感じさせました...それらのいくつかはスパンタグ、Pタグ、およびdivを使用できます。 H1とHXを使用できる人もDivタグを使用します。それは本当に言葉がありません...この時点で、私は開発者がセマンティックタグのいくつかの概念と行動を持っていることを願っています...
1 :(理論)セマンティックラベルとは何ですか?
セマンティックタグは、対応する構造を可能な限りHTMLタグを使用しようとすることです。例としてテーブルを取ります:
<表>
<tr>
<td>消費者アイテム</td>
<td>消費量</td>
</tr>
<tr>
<td> eat </td>
<td> 20元</td>
</tr>
</table>
上記のテーブルの何が問題なのか見たことがありますか? Hehe、次に、このセマンティックラベルを見てください
<表>
<キャプション>支出簿記</caption>
<head>
<tr>
<th>消費者アイテム</th>
<th>消費量</th>
</tr>
</head>
<tbody>
<td> eat </td>
<td> 20元</td>
</tbody>
</table>
これらの2つのコードのタグは異なります。 2番目のテーブルのタグコードは、間違いなくWeb標準に沿っています。
<キャプション>:テーブルのタイトル。
<head>:テーブルのヘッダー。
<th>:テーブルの特定の列の列ヘッダー。
私たちが慣れていることについて話しましょう
<Title>ブログパークの紹介</title> <body>ブログパークはソフトウェア開発技術パークです。 2004年に設立されました。ここで... </body>
見て、なぜ記事を読んだときにタイトルがどこにあるかを知っているのですか?ブラウザの上部に。それでは、なぜ検索エンジンがクロールできるのでしょうか?セマンティックタグ<title>のタイトルが記事であることを知っているということです。私たちがこれを順守しない場合、代わりに:
<span>ブログパークの紹介</span> <span>ブログパークはソフトウェア開発技術パークです。 2004年に設立されました。ここで... <span>
それでは、検索エンジンは誰がタイトルであり、誰がコンテンツであるかをどのようにして知るのでしょうか?タイトルをつかむためにどのように依存していますか?実際、セマンティクスはラベルセマンティクスであるだけでなく、構造セマンティクスにも拡張できます。例えば:
#left {float:left; margging-left:50px;}
#right {float:右;マージントップ:100px;}
<div id = left> content .. </div>
<div id = right> content .. </div>
この例では、IDの命名は少し誇張されていますが、同様の状況がいくつか作ります。 #Left Divをページの右側に置き、#rightでポジションを変更したい場合、スタイルを変更できますか?
#left {float:right; margin-left:50px;}
#right {float:left; margin-top:100px;}
そのように見えるのはとても厄介であり、これら2つのDIVのレイアウトを誤解させることになります。
このように書くべきです。
<div id = main> content .. </div>
<div id = sidebar> content .. </div>
このようにして、これらのdivの内容が何であるかは一目で明らかであり、スタイルを変更するのに便利です。
2 :(理論)セマンティックラベルはどうですか?
1.より良い構造、検索エンジンのクロール(SEO最適化)と開発者のメンテナンスをより助長します(明確な構造と読みやすいため、メンテナンスが高くなります)。
2。特別なターミナル(携帯電話、パーソナルアシスタントなど)の読み取りをより助長します。
3 :(アクション)セマンティックラベルをどうするか?
構造的な意味を使用して、<span>、<div>無意味なセマンティクスを使用してみてください。 EMタグは、さまざまなコンテンツから強調され、区別されるコンテンツであることがわかります。
では、ページがWeb標準のいずれかに準拠しているかどうかを判断する方法:セマンティックタグ?ページのスタイルを一時的に削除して、読みやすさを確認できます。現時点でページが非常に厄介だと感じた場合、ページのセマンティックラベルがあまり良くないことを意味します。スタイルを削除した後、ページがまだ乱雑でない場合、ページ構造が明確であり、セマンティックラベルの方が優れていることを意味します。
これは私の意見です。それを読んだ人々が自分のアイデアを表現して、誰もがあなたのアイデアを知り、この記事を改善できるようになることを願っています。