Html技巧 语义化你的代码 _HTML/Xhtml_网页制作
如何在合适的位置使用合适的标签?
这是一个简单的理解逻辑. 比如, h1~h6标签是用于标题类的; ul是用于无序列表的; ol是用于有充列表的; dl是用于定义列表的; em,strong标签是用来强调的…说白了, Html标签的每个英文释义决定了它的语义(本文后面, 我会放一份常用Html标签的英文释义对照表供参考).
什么是让人和机器都能一目了然?
检查Html页面是否语义化最好的方法, 便是去掉页面的Css链接, 看网页结构是否井然有序, 页面是否仍然有很好的可读性. 为什么可以这么说? 大家都知道浏览器都有默认的样式(推荐使用Chrome的Web Developer Tools for Chrome 插件, 或者Firefox的Web Developer 插件), 比如h1~h6, 会有加粗/字号依次减小、上下边距的默认样式, ul、ol、dl都有默认的项目符号, strong默认有加粗的样式…所以, 同样的页面, 语义化良好的Html可以在页面Css去掉的情况下依然有良好的表现.
还有一点, 好的语义化编码, 对搜索引擎有更好的友好性. 搜索蜘蛛是不认识你的Css的, 但它能识别Html标签.
下面是一个简单的例子:
Mr.Think的博客
专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.
通过上面的简单的示例和没有任何Css定义情况下的效果图, 该明白了两者的区别了吧. 如果你在学习Html5, 它的header、footer、sidebar、article等元素都是新增的语义化标签.
Html编码语义化是迈向高质量前端开发的一步. 即更好的遵循Web标准, 也能让你页面在去掉样式后依然井然有序. 关于语义化更多更详细的介绍, 可以自行Google或阅读阿当的《Web前端开发修炼之道》 第三章.
附: 标签语义中英文对照表
标签名 | 英文全拼 | 中文翻译 |
---|---|---|
a | anchor | 锚 |
abbr | abbreviation | 缩写词 |
acronym | acronym | 取首字母的缩写词 |
address | address | 地址 |
b | bold | 粗体 |
big | big | 变大 |
blockquote | block quotation | 区块引用于 |
br | break | 换行 |
caption | caption | 标题 |
center | center | 居中 |
dd | definition description | 定义描述 |
del | delete | 删除 |
div | division | 分隔 |
dl | definition list | 定义列表 |
dt | definition term | 定义术语 |
em | emphasized | 加重 |
fieldset | fieldset | 域集 |
font | font | 字体 |
h1~h6 | header1~header6 | 标题1~标题6 |
hr | horizontal rule | 水平尺 |
i | italic | 斜体 |
ins | inserted | 插入 |
legend | legend | 图标 |
li | list item | 列表项目 |
ol | ordered list | 排序列表 |
p | paragraph | 段落 |
pre | preformatted | 预定义格式 |
s | strikethrough | 删除线 |
small | small | 变小 |
span | span | 范围 |
strong | strong | 加重 |
sub | subscripted | 下表 |
sup | superscripted | 上标 |
u | underlined | 下划线 |
ul | unordered list | 不排序列表 |
var | variable | 变量 |
推荐阅读
-
SEO 用语义化的HTML制作网页
-
网页设计之网页音乐的实现技巧_HTML/Xhtml_网页制作
-
网页设计之网页音乐的实现技巧_HTML/Xhtml_网页制作
-
制作主流邮箱能正常显示的HTML邮件的技巧_HTML/Xhtml_网页制作
-
XHTML标签语义化介绍_HTML/Xhtml_网页制作
-
制作主流邮箱能正常显示的HTML邮件的技巧_HTML/Xhtml_网页制作
-
网页常用代码 比较基础的东西_HTML/Xhtml_网页制作
-
语义化的网页 XHTML语义化标记_HTML/Xhtml_网页制作
-
圆角矩形的html+css实现代码_HTML/Xhtml_网页制作
-
几个老式播放器的嵌入代码_HTML/Xhtml_网页制作