HTML标签
学习HTML的第一个任务就是将大大小小、形形色色的标签给弄明白，因此这里简单地回顾一下。
在伟大的“结构、表现和行为分离”的指导思想下，我就不打算关注部分过时的样式格式标签和属性了。
标签的语义
根据标签是否有特定的含义可以将其分为语义化标签和无语义标签。
语义化标签
所谓语义化标签，就是根据标签里面的内容（内容语义化），选择合适的标签（代码语义化），从而写出更具有可读性的代码，且能够让愚笨的爬虫更轻松地解析网页内容（也就是很重要的SEO）。
HTML4.1主要的几个语义化标签比如标题（h1-h6）、列表（li）、强调（strong、em）等，这些含有特定语义的标签，有自己的默认样式，能够在没有CSS的情况下，也能使页面呈现出良好的内容结构与代码结构（因此这里又引申出一个关于CSS样式重置的问题，我是一个链接）。
HTML5新增了header、nav、article、sections、aside、footer等语义化标签，很显然的顾名思义。
HTML5的一个理念是“语义”与“显示”分离，因此这些语义化标签能够让开发人员和浏览器对其中的内容一目了然。这
些标签的功能就是代替一部分div的功能（不用再写 div id=”nav” 之类，然而我在看HTML5之前已经开始搭这个博客了，满屏幕的div，泪奔/(ㄒoㄒ)/~~），这些标签并没有任何默认样式，除了会让文本另起一行。
总结就是：能用语义化标签的地方尽量语义化，让代码看的更加优雅。
无语义标签
无语义化标签就另外一个伟大的“DIV+CSS”布局思想所带来的div和span了。
div的全称是divsion即整除的意思，这个标签在HTML中没有任何的含义，只是将当前的页面分割成独立的区域，所以一般需要使用class或者id来标记一个div，当然这就是CSS的事情了。
而与div对应的span标签用来组合页面中的行内元素，span没有固定的格式表现，如果不对它应用样式，那么span元素中的文本与其他文本并没有任何视觉上的区别。
div与span最大的区别在于他们所代表的块级元素与内联元素，接下来就会说到。画外音：“听闻很久很久以前，当网页布局还是采用表格的时候，代码十分臃肿，程序员苦不堪言balabal...”
标签的表现形式
根据标签元素的表现样式可以将其分为块状元素、内联元素和内联-块状元素。
- 常用的块状元素有：div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form
- 常用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code
- 常用的内联块状元素有：img、input
初学的时候经常搞不清他们之间的区别，遇到过很多问题，下面是一点总结。
块级元素特点
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行，也就是一个块级元素独占一行；
- 元素的高度、宽度、行高以及顶和底边距都可设置；
- 元素宽度在不设置的情况下且元素处于普通流的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；
- 支持所有的css命令。
内联元素特点
- 和其他内联元素都在一行上；
- 元素的高度、宽度及顶部和底部margin不可设置而padding虽然可以设置，虽然背景颜色可以覆盖，但是却会与上下的元素发生遮挡，内容区域未变化，并不是普通块状元素那样内容区域下移，因此也算作不可设置上下padding；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变；
- 两个内联元素之间的换行会被解析产生一个空格（多行换行也只产生一个），这个并不是bug而是正确的内容显示。而两个块级元素之间的换行会被忽略；
- 块状元素具有的流体特性：在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄。形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin,padding, border的出现自动填满剩余空间。
内联-块状元素特点
- 和其他元素都在一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置；
- 也会解析换行；表现样式为inline-block的元素会触发BFC
其他
需要注意的是元素的表现样式并不是固定的，使用display属性可以轻松在块与内联之间相互转换，当然，将span转换为div，再将div转换为span使用是一件完全没有必要的事情。
div+css是现在进行网页布局最流行的方式，掌握块状元素与内联元素的特性，才能更好的理解盒子模型、浮动与定位。
HTML标签虽然是基础，却十分重要。此外在进行DIV布局与考虑语义化之间需要仔细斟酌，能够使用语义化标签就尽量使用，但是完全没有必要仅仅为了获取一个块级元素就将h1拿来用，嗯，就是这样吧。
你要请我喝一杯奶茶？
版权声明：自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。
