html语意化标签
一、布局的理解误区
网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖 与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更简洁的标签 可以替代它。
二、标签的差异
共性：都是一个容器，可以在其中放置内容
差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等
三、标签语义化的好处
a、让结构更简洁，让搜索引擎更友好
b、通过多重组合，减少不必要的CSS命名
四、语义化标签的使用
a、列表：ul、ol、li、dl、dt、dd
b、标题：h1~h6
c、段落：p
d、强调：strong
e、表格：table、tr、td，以及表格的其他成员th、thead、tbody、tfood
附录：常用HTML标签表
红色：结构标签 黑色：行内元素 蓝色：块级元素 绿色：表格元素 灰色：其他标签
| <!--...--> | 定义注释。 |
|---|---|
| <body> | 定义文档的主体，默认有外边距，注意清除。 |
| <head> | 定义页面的信息。 |
| <html> | 定义 HTML 文档。 |
| <meta> | 定义页面的描述信息，便于搜索优化。 |
| <title> | 定义文档的标题。 |
| <link /> | 定义引用外部文件，如联入CSS样式表。 |
| <style> | 定义内联的CSS样式信息。 |
| <script> | 定义内联或外联的客户端脚本，如JS。 |
| <a> | 定义锚链接或其他链接，行内元素。 |
| <img /> | 定义引入一张图片，行内元素。 |
| <strong> | 定义强调文本，样式为加粗，行内元素。 |
| <span> | 定义一个行内元素的空盒子。 |
| <div> | 定义一个块级元素的空盒子。 |
| <h1> to <h6> | 定义标题部分，默认有外边距，块级元素。 |
| <ul> | 定义无序列表，默认有外边距和内边距，块级元素。 |
| <ol> | 定义有序列表，即数字列表，默认有内外边距，块级元素。 |
| <li> | 定义列表的项目，一般被嵌套在<ul>和<ol>内，块级元素。 |
| <dl> | 自定义列表的项目，默认有外边距和内边距，块级元素。 |
| <dt> | 自定义列表的标题，嵌套在<dl>内，与<dd>区别，块级元素。 |
| <dd> | 自定义列表的内容，嵌套在<dl>内，与<dt>区别，块级元素。 |
| <p> | 定义段落，默认有一个行高的外边距。 |
| <table> | 定义表格。 |
| <tr> | 定义表格中的行。 |
| <td> | 定义表格中的单元。 |
| <th> | 定义表格中的表头单元格。 |
| <thead> | 定义表格中的表头内容。 |
| <tbody> | 定义表格中的主体内容。 |
| <tfoot> | 定义表格中的表注内容（脚注）。 |
| <br /> | 定义一个回车换行。 |
| <map> | 定义图像映射，即鼠标热区。 |
| <area> | 定义图像映射内部的区域。 |
| <form> | 定义输入提交的表单。 |
| <button> | 定义表单中的按钮 (push button)。 |
| <input> | 定义表单中的输入控件。 |
| <select> | 定义表单中的选择列表（下拉列表）。 |
| <frame> | 定义框架集的窗口或框架。 |
本文转载于：http://www.th7.cn/web/html-css/201401/17358.shtml
html语意化标签的更多相关文章
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- HTML5 常用的结构化标签整理
一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
- HTML5之语义化标签
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 浅谈html语义化标签,Html5新增语义化标签
Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...
- HTML5结构化标签
一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...
- Html5新增的语义化标签（部分）
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- HTML&CSS基础学习笔记1.21-语义化标签
语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...
随机推荐
- Hibernate从入门到精通（六）一对一双向关联映射
在上次的博文Hibernate从入门到精通(五)一对一单向关联映射中我们讲解了一下一对一单向关联映射,这次我们继续讲解一下与之对应的一对一双向关联映射. 一对一双向关联 与一对一单向关联映射所不同的的 ...
- Java Timer, TimerTask
参考:http://batitan.iteye.com/blog/253483 TimerTask 就是一个run 方法,里边有些操作: Timer 是个线程,按各种调度方法(Timer.schedu ...
- angular service/directive
<html class=" js cssanimations csstransitions" ng-app="phonecatApp" > < ...
- sharepoint warmup
/---------------- using System;using System.Collections.Generic; using System.Text;using System.Net; ...
- linux内核分析之内存管理
1.struct page /* Each physical page in the system has a struct page associated with * it to keep tra ...
- js 判断对象相等
文笔不是很好,一直在博客园属于那种只看不说的那种,有次心血来潮,想把自己的一些心得记录下来,我认认真真写了大半个小时,谁知一点保存,会话超时然后我的东西不知道去哪里,当时想死的心都有,写博客也就没那个 ...
- c++ 读写锁
#ifndef THREAD_UTIL_H #define THREAD_UTIL_H #include <pthread.h> namespace spider { class Auto ...
- centos64位安装32位C/c++库
yum install glibc.i686 glibc-devel.i686 yum install libstdc++.i686yum install libstdc++-devel.i686yu ...
- Android 环境搭建 版本问题
jdk1.6 1.7 eclipse 3.7.2 SDK-r12 ADT 12 SDK和ADT必须配套 搭建环境需要四个软件: 1.JDK(这是最新版本jdk1.7官方下载地址:http:// ...
- mysql deadlock处理
1.SHOW ENGINE INNODB STATUS 得到最后一次死锁发生的状况 =====================================140110 11:43:07 INNOD ...