一、布局的理解误区

网络上流行管新型的布局方式叫“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语意化标签的更多相关文章

  1. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  2. HTML5 常用的结构化标签整理

    一.语义化结构化标签 结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,arti ...

  3. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  4. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  5. HTML5之语义化标签

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  6. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  7. HTML5结构化标签

    一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...

  8. Html5新增的语义化标签（部分）

    2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...

  9. HTML&CSS基础学习笔记1.21-语义化标签

    语义化标签 “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益. HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx ...

随机推荐

  1. 关于CSS的图像放大问题的解决，需要借助jQuery等直接用css3设置

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  2. Eclipse开发Android报错Jar mismatch! Fix your dependencies

    常常打开工程,发现项目并没有错,但是会有一个红X,然后就生成不了. 发现两个版本不同的android-support-v4.jar在使用 打开window-show views-problems Ja ...

  3. JVM的组成部分与内存管理

    JVM的组成部分与内存管理 JVM区域划分 由于Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是指JVM内存区域划分.在讨论JVM内存区域划分之前,先来看一下Java程序 ...

  4. 【BZOJ 1497】 [NOI2006]最大获利

    Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前夜,需要做太多的准备工作,仅就站址选择一 ...

  5. iOS sqlite 增删改查 简单封装(基于 FMDB)

    /** *  对 sqlite 的使用进行简单封装,仅涉及简单的单表 增删改查 * *  基于 FMDB * *  操作基于 model ,数据库表字段与 model 属性一一对应,对 model 整 ...

  6. 5.1:FactoryBean的使用

    5.1  FactoryBean的使用 一般情况下,Spring通过反射机制利用bean的class属性指定实现类来实例化bean .在某些情况下,实例化bean过程比较复杂,如果按照传统的方式,则需 ...

  7. Usermod 命令详解

    参考资料:usermod manpage usermod - 修改用户帐户信息 modify a user account usermod [options] user_name usermod 命令 ...

  8. 站长、运维必备| 网站可用性监控产品 OneAPM Cloud Test 上线

    白天太忙,到了晚上才发现网站一天都没有访问量? 直到有用户投诉才发现网站完全无法访问? 还要每月付费才能及时了解网站可用情况? 监控频率太低,不能及时发现网站不可用? 第三方服务宕机,导致您的网站不可 ...

  9. POJ 1562 && ZOJ 1709 Oil Deposits（简单DFS）

    题目链接 题意 : 问一个m×n的矩形中,有多少个pocket,如果两块油田相连(上下左右或者对角连着也算),就算一个pocket . 思路 : 写好8个方向搜就可以了,每次找的时候可以先把那个点直接 ...

  10. 关于PYTHON的反射，装饰的练习

    从基本概念,简单例子才能慢慢走到高级一点的地方. 另外,PYTHON的函数式编程也是我很感兴趣的一点. 总体而言,我觉得OOP可以作大的框架和思路,FP能作细节实现时的优雅牛X. ~~~~~~~~~~ ...