div：division(分开, 分割, 区分,分配, 分界线),标签可以把文档分割为独立的、不同的部分。作为块级元素的代表，因为没有固定的格式表现，目前滥用情况最严重。
ul:Unordered List（无序列表）与li元素组合成团体。
ol:ordered list （有序列表）与li元素组合成团体。
li:list item（列表的项目）"必须"在父级ul或ol容器之内，这个必须是我自己加的。

dl:definition list（定义列表）与dt（definition term定义的项目）及dd（definition description定义的描述）组合成一个团体。

p:paragraph（段落）用于存放文章的一段。

span：Span（范围）标签是被用来组合文档中的小节内容。作为内联元素，也因其没有固定的格式表现，目前滥用也比较多。

h1-h6：Head（标题1到标题6），请注意这里的Head表示其含义，不同于<head>标签，也不要认为与<title>有任何关系。这里仅仅是突出文档内容的标题。
注意，搜索引擎如果发现页面中存在h标签，会认为其中的内容比较重要，重要程度从1到6逐渐降低。

label:Label（针对表单控件的标签），它的名字就叫标签，只不过在这里，w3c给的定义是，用作表单的描述，例如我们喜欢在input标签前或后加上它。

em:Emphasized（加重，强调），为强调其包含的文本。默认样式是斜体。其展示效果与<i>标签相似，但搜索引擎不认为它们是相同的，因为搜索引擎往往尊重w3c给出的定义，而忽略你的展示效果。

strong:Strong（加强加重，重点强调），为重点强调其包含的文本。默认样式是粗体。其强调效果比em还要强一点。虽然<b>标签也能起到加粗的展示效果，但搜索引擎同样不认为它们是相同的，理由同上。

img:Image（图片，图像）；

a:Anchor（锚）创造超级链接中的基本的链。

按显示样式分：

块级元素或块状元素，（默认样式为block）的标签有：
div,ul,ol,li,p,dl,dt,dd，h1-h6...
它们在默认情况下，会独占一行。除非你用样式改变它们。

内联元素，（默认样式为inline，不过我觉得称之为“行内元素”更易于理解）的标签有：
span,label,em,strong,img,a,u,b,i,s...
它们在默认情况下，会老老实实和其它元素并存于一行，当给它们加上一些特定的样式，例如：display:block，它们也会霸道地占用一行。但这里要提前说明的是，并非所有display:block就一定占一行，如果有宽度，又有float作推手把它们往前面赶，这样它们也会乖乖和其它元素挤在一行里。

按组合方式分：
固定的团体：
ul--li
ol--li
dl--dt--dd
分散的个体：
其它...

需要作一些说明的地方：
1、内联元素，它们本身没有被“框”起来，也就是它们本身的大小受其内容控制，在它没有变成块级元素之前，你对它的width和height进行控制都是徒劳的。变成块级元素的途径：

一、display:block（直接霸占整行）

二、float不会霸占整行，但是你可以控制其width或height了。

2、一些不能包含或嵌套的元素（从w3c抄来的）：
a：不能包含其它a标签。
must not contain other a elements. 
pre：（Preformatted  预定义格式（文本 ））不能包含img, object, big, small, sub, 或 sup 元素
must not contain the img, object, big, small, sub, or sup elements. 
button 按钮，不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素. 
must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements. 
label 不能包含其它的label元素
must not contain other label elements. 
form 不能包含其它的form元素
must not contain other form elements.

语义化的HTML的更多相关文章

  1. 关于HTML语义化的一些理解

    语义化这个词我想大家都看到了无数次,特别是在一些招聘广告上. 其实我自己也是,不过每次看到都觉得是那些招聘公司复制的,其实他们根本说不清语义化是什么,而且也根本不看重. 所以我一直也没把这东西当回事过 ...

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

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

  3. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

  4. 理解HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...

  5. HTML 语义化之b_i_em_strong

    默认效果 i和em都是斜体.b和strong都是加粗. 语义区别: em 和 strong 分别表示句中强调和全局加重强调 搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气. i 和 b ...

  6. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  7. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  8. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  9. 谈谈对HTML语义化的理解

    什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...

  10. Web语义化

    在昨天和做SEO的同学聊了一会儿,当然我没有学会搜索引擎优化的技巧和知识,但在此之前一直对HTML5中header.footer.sidebar.article等标签嗤之以鼻,觉得这个和div没有什么 ...

随机推荐

  1. bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案

    将压缩级别由simple改成whitespace 问题就是这样之后压缩后的文件大了很多 <?xml version="1.0"?> <project name=& ...

  2. Linux获取时间日期方法

    linux中用shell获取昨天.明天或多天前的日期:在Linux中对man date -d 参数说的比较模糊,以下举例进一步说明:# -d, --date=STRING display time d ...

  3. [Papers]NSE, $u$, Lorentz space [Bosia-Pata-Robinson, JMFM, 2014]

    $$\bex \bbu\in L^p(0,T;L^{q,\infty}),\quad \frac{2}{p}+\frac{3}{q}=1,\quad 3<q\leq\infty. \eex$$ ...

  4. 44、自定义仿IOS对话框

    private Dialog myDialog = null; private void ExitLogin() { View view = LayoutInflater.from(MainActiv ...

  5. Linux基本命令（8）网络操作的命令

    网络操作命令 命令 功能 命令 功能 ftp 传送文件 telnet 远端登陆 bye 结束连线并结束程序 rlogin 远端登入 ping 检测主机 netstat 显示网络状态 8.1 ftp命令 ...

  6. 初识 istringstream、ostringstream、stringstream 运用

    今天编程练习时遇到了istringstream的用法,感觉很实用.后面附题目! C++的输入输出分为三种: (1)基于控制台的I/O (2)基于文件的I/O (3)基于字符串的I/O 1.头文件  # ...

  7. DzzOffice1.0 Beta2 全新安装图文教程及界面简单了解

    本文说明:本文档用于帮助您全新安装完整的 DzzOffice Beta版软件.DzzOffice 是一款开源的云存储与应用管理工具,主要用于企业管理阿里云.亚马逊等云存储等空间,把空间可视化分配给成员 ...

  8. windows程序移植linux

    1,路径名统一用正斜杠“/”.(windows下正反斜杠都识别,linux只认正斜杠.) 2,统一使用UTF-8格式编码. vim中无法保存汉字时,可输入下列命令: :set fileencoding ...

  9. django1.77＋mod_wsgi+python2.79+apache2.24 在阿里云centos部署攻略

    心平气和的记录一下今天 踩的坑以防万一 以后还踩 首先我今天的平台是在 阿里云上的一台纯净版的 centos6.5 64位主机上进行的 首先装python2.7 去官网下载python2.7安装包 然 ...

  10. Python和Django的Third Libraby分类汇总

    这些第三方包与Python和Django一起构成了强大的生态系统,自己在开发时大大减小工作难度和工作量, 这些包基本上能满足我们的大部分需求.人与人的差距,其中一点是你知道的比他多,这样你就能大大提高 ...