HTML スキル コードを意味化する_html/css_WEB-ITnose

首先是关于语义（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标签.

下面是一个简单的例子:

代码如下:

Mr.Think的博客

专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.

Mr.Think的博客

专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.

HTML5 を学習している場合は、上記の簡単な例と CSS 定義を使用しないレンダリングを通して、ヘッダー、フッター、サイドバー、記事、その他の要素がすべて新しく追加されたセマンティック タグであることを理解してください。
HTML コーディング セマンティクスは、高品質のフロントエンド開発への一歩です。これは、Web 標準に準拠することを意味し、スタイルを削除した後もページを整理することができます。

aancho rアンカーabbr略語略語頭字語頭字語の頭字語住所住所住所b大胆大胆大きく大きく大きくなるblockquoteブロック引用ブロック引用 br改行改行キャプションキャプションセンターdddeldivdldtemフィールドセットフォントh1~h6hriイン凡例liolppres

タグ名	英語フルスペル	中国語翻訳
	タイトル
センター	センター
定義の説明	定義の説明
削除	削除
分割	分割
定義リスト	定義リスト
定義用語	定義用語
強調	強調
フィールドセット	フィールドセット
フォント	フォント
header1~header6	title1~title6
水平ルール	レベルルール
斜体	斜体
挿入	挿入
凡例	アイコン
リストアイテム	リスト項目
順序リスト	並べ替えリスト
段落	段落
フォーマット済み	定義済みフォーマット
取り消し線	取り消し線	小さい
小さい	小さくなる	スパン
スパン	レンジ	強い
強い	悪化	サブ
サブスクリプト	サブスクリプト	sup
上付き	上付き	u
下線付き	下線	ul
順序なしリスト	順序なしリスト	var
変数	変数