回到HTML〇
HTML(HyperText Markup Language),用来向浏览器标示文档的所有“内容”与“结构”。
抱着温故而知新的态度,在这里通过“回到HTML”系列文章,重新梳理一下HTML的相关知识。
1.HTML分类
对于HTML元素有以下几种分类方法:
(1)元素类型:
1> 普通元素: <h1>元素,<p>元素...
2>void元素:<br />元素,<hr />元素..
(【注】:何为元素?这里列一个简单的公式:普通元素=开标签+内容+闭标签,void元素=开标签。普通元素之间可以按规则进行嵌套的,而void元素不可嵌套其他元素的。)
(2)样式类型:
1>块级元素:<div>元素,<table>元素...
2>内联元素:<span>元素,<a>元素...
3>内联-块级元素:<img>元素...
等等..
(【注】:浏览器默认块级元素会在显示中占满整行。)
(3)*对于HTML标签,我自己将其梳理分类为以下5个类别:
(1)结构标签:用来表示页面结构,布局,如<div>,<nav>等;
(2)排版标签:用来标注文字,进行排版,如<h1>,<time>等;
(3)组合标签:需要组合使用的标签,需要标签嵌套,又可再分为列表,表格,表单三种类型;
(4)引用标签:由于HTML文档是文本类型,因此凡是要引入文本之外类型的标签均归为此类,如链接,图像,音频,视频等;
(5)其他标签:指无法归入上述五种类别的其他标签,如:<meta>,<canvans>等。
2.HTML标签使用要求:
“用对标签,用对特性,正确嵌套。”
(1)用对标签 --> 即标签语义化:
- 有利于SEO(搜索引擎优化)
- 有利于屏幕阅读器阅读(无障碍性)
- 容易修改和维护代码
- 手机显示时会有针对性的渲染
(2)用对特性:
特性:元素开标签特有属性,用以进一步描述标签含义,例如<a href="www.google.com">to google</a>,这里href特性说明了链接的跳转方向。一些特性是每个元素都可以使用的,如id特性,而另一些则只有特定元素可以使用,如何使用好特性丰富标签含义,也是我们关注的重点。
(3)正确嵌套:
例如<p>标签不可以被<a>标签嵌套,熟悉标签嵌套规则,有利于写出规范的HTML代码。