一、布局的理解误区

网络上流行管新型的布局方式叫“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> 定义框架集的窗口或框架。

标签语义化之常用HTML标签的更多相关文章

  1. 【转载】html标签语义化

    Html语义化标签-语义化你的HTML标签和属性   1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...

  2. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

  3. 灵魂代码分享HTML元素标签语义化及使用场景实用到爆

    灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...

  4. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  5. HTML标签语义化

    标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...

  6. ASP.NET动态网站制作（5）-- 标签语义化及知识补充

    前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html

  7. 基础复习之HTML （doctype、标签语义化）

    这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...

  8. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  9. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

随机推荐

  1. linux配置IP的方法

    Linux系统下如何设置IP地址?我们可以通过命令设定IP的方法,不过此方法的前提条件是用户需root权限.在Linux系统的 /etc/sysconfig/network-script/ifcfg- ...

  2. Kindeditor 编辑器POST提交的时候会出现符号被转换

    Kindeditor编辑器输入符号单引号,双引号,斜杠 都会被转义 解决办法 $date['content']=$this->textString($_POST['content']); pub ...

  3. 修改wampserver 默认localhost 和phpmyadmin 打开链接

    在wamp上 左键打开localhost 自定义端口的话 或者其他网址 需要以下修改(同样访问phpmyadmin修改也是这个地方) 修改文件路径 D:\wamp\wampmanager.tpl 搜索 ...

  4. Yii2 rules验证规则

    Rules验证规则:  required : 必须值验证属性||CRequiredValidator 的别名, 确保了特性不为空. [['字段名1','字段名2'],required]    //字段 ...

  5. CentOS安装wordpress权限问题

    最近在CentOS6.5上安装wordpress,遇上一个问题,安装好之后外网总是不能再网页进行配置,想了半天应该是源代码文件的权限问题,具体问题与解决如下: 如果你的wordpress安装目录是wo ...

  6. mysql规范

    1.命名规范 (1)库名.表名.(按现在的规范类似; PromoHayaoRecord),数据库名使用小写,字段名必须使用小写字母,并采用下划线分割.(2)库名.表名.字段名禁止超过32个字符.(3) ...

  7. PHP常用的一些正则表达式

    附一些常用的正则运算: 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0- ...

  8. NIOS ii 流水灯

    为了做项目的前期验证工作,实验室购买了某开发板,下面是基于该板子的实现过程.作为笔记记录,供入门者参考. 1:创建一个Quartus II的工程 next选择器件,然后finish.我的器件是cycl ...

  9. Spring与Quartz的整合实现定时任务调度(转)

    源:http://kevin19900306.iteye.com/blog/1397744 最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少 ...

  10. 采用ETL with RDBMS模式来实现ETL

    目前Teradata数据仓库的ETL作业采用ELT方式, 因为loading太重了, 需要将ETL压力转移到专门的ETL Server上. 对于ETL工具, 市场上已有很成熟的商业/开源工具, 比如I ...