首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用.
Html语义化, 似乎是一个老生常谈的问题. 百度一下,也有大把关于语义化的文章. 为什么要语义化标签?
我是这样认为的:Html的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然.
如何在合适的位置使用合适的标签?
这是一个简单的理解逻辑. 比如,h1~h6标签是用于标题类的; ul是用于无序列表的; ol是用于有充列表的; dl是用于定义列表的; em,strong标签是用来强调的…
说白了, Html标签的每个英文释义决定了它的语义(本文后面, 我会放一份常用Html标签的英文释义对照表供参考).
什么是让人和机器都能一目了然?
检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性. 为什么可以这么说? 大家都知道浏览器都有默认的样式(推荐使用Chrome的WebDeveloper Tools for Chrome 插件, 或者Firefox的Web Developer 插件), 比如h1~h6, 会有加粗/字号依次减小、上下边距的默认样式, ul、ol、dl都有默认的项目符号, strong默认有加粗的样式…所以,同样的页面, 语义化良好的Html可以在页面Css去掉的情况下依然有良好的表现.
还有一点, 好的语义化编码, 对搜索引擎有更好的友好性. 搜索蜘蛛是不认识你的Css的, 但它能识别Html标签.
下面是一个简单的例子:
代码如下:
HTML5 を学習している場合は、上記の簡単な例と CSS 定義を使用しないレンダリングを通して、ヘッダー、フッター、サイドバー、記事、その他の要素がすべて新しく追加されたセマンティック タグであることを理解してください。
HTML コーディング セマンティクスは、高品質のフロントエンド開発への一歩です。これは、Web 標準に準拠することを意味し、スタイルを削除した後もページを整理することができます。
タグ名
|
英語フルスペル
|
中国語翻訳
|
ancho r |
| アンカー
|
| 略語
| 略語
|
| 頭字語
|
| の頭字語
| 住所
| 住所
|
| 大胆
| 大胆
|
| 大きく
| 大きくなる
|
| ブロック引用
| ブロック引用
|
| 改行
| 改行
|
| キャプションタイトル |
|
センター | センター |
|
定義の説明 | 定義の説明 |
|
削除 | 削除 |
|
分割 | 分割 |
|
定義リスト | 定義リスト |
|
定義用語 | 定義用語 |
|
強調 | 強調 |
|
フィールドセット | フィールドセット |
| フォント
フォント |
フォント |
| h1~h6
header1~header6 |
title1~title6 |
| hr
水平ルール |
レベルルール |
| i
斜体 |
斜体 |
| イン
挿入 |
挿入 |
| 凡例
凡例 |
アイコン |
| li
リストアイテム |
リスト項目 |
| ol
順序リスト |
並べ替えリスト |
| p
段落 |
段落 |
| pre
フォーマット済み |
定義済みフォーマット |
| s
取り消し線 |
取り消し線 | 小さい |
小さい
|
小さくなる
| スパン |
スパン
|
レンジ
| 強い |
強い
|
悪化
| サブ |
サブスクリプト
|
サブスクリプト
| sup |
上付き
|
上付き
| u |
下線付き
|
下線
| ul |
順序なしリスト
|
順序なしリスト
| var |
変数
| 変数
|
|