一 网页通常结构

a. div 和 span 通常进行文档结构基本构成

div 块级元素 ， 通常指定结构内容包含在div中，并分配class和id。

span 行级元素    通常对行级元素进行分组   例：<span><p>z正文内容</p><strong>我是重要内容</strong><span>

b、html新结构  推荐文章

1.article    定义文章快     独立的完整的，可以被外部引用的，一般会包含 header 标题与内容 p

2.section   定义区块       和article 一样，包含 标题与正文，强调分块或分段

section元素是一个总是需要标题的内容区域或页面区域。可以用它将多个部分的内容组合在一起，也可以根据需要，将内容的某一个部分进一步划分。

3.aside      定义侧边导航  <aside><ul><li><a>菜单1</a><li> <a>菜单2</a></li></ul></aside>

4.nav         定义导航     例：<nav><a>菜单1</a>菜单 2<a></a></nav>   好处是a会一排显示，自己进行排版

5.main       定义主要区域  <header></header><main> 主要内容模块</main>

6.header    定义标题栏  <header><h1>正文标题</h1><h2>作者</h2></header>

7.footer     定义页脚栏  <footer>页尾内容 或版权 内容</footer>

8.hgroup    定义标题组  已从html5.1中移除，不建议使用   例： <hgroup><h2>标题1</h2><h2>标题2</h2><h3>标题3</h3></hgroup>

9.address    地址信息

10.details    标题内容信息     

1.定义标题与文本 (搜索引擎进行检索)  H

<h1> <h2> <h3> <h4> <h5> <h6>  // 页面中定义标题必须使用标题   搜索引擎权重 爬虫

 H1  主标题 （一个页面只可有一个，用于搜索引擎）      H2 副标题（作者）        H3 栏目标题   H4  版权标题       

（标题不要滥用，  H4 H5  H6 不常用）

2.定义段落文本  P

<p>文本段落</p>   // 创建之后会有间距

3.引用文本  q  blockquote   

<q></q>     // 短引用      例 <q>"一句简短话<cite>书名</cite>"</q>

<blockquote></blockquote> // 长引用  段落前空格  例  <blockquote><p>一大段引用<cite>书名</cite></p></blockquote>

<cite></cite> // 书或杂志名称引用   字体倾斜

引用文本示例代码 引用文本示例效果

4.引用文本  em  strong

em  // 斜体  常用

storng  // 加粗  不常用

5.定义格式文本  w3school演示地址

b 表面上的语义加粗   1.一般用于标题，正常情况使用 H标签，尽量不使用b，2.一般使用 strong 替代

i   常用于阿里矢量图标 

big   small   字体大号 ，字体小号

sup  sub      字体下标 ， 字体上标  

文本字体

文本字体

5.定义输出文本 <code> <kbd> <samp> <tt> <var> <pre> w3school 演示地址

 我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

注：这些标签常用于显示计算机/编程代码。

pre        表示预定义格式的源代码，  严格限制为等宽字体格式的文本中显示编程代码

code     代码字体

tt          打印机字体  呈现类似打字机或者等宽的文本效果。

kbd      键盘字体   浏览器通常用等宽字体来显示该标签中包含的文本。注：标签经常用在于计算机相关的文档和手册中。

dfn      定义的术语

var       变量字体   标签标记的文本通常显示为斜体。

samp   定义样本文本    字符序列 ae 可能会被转换为 æ 连字字符。  注：<samp> 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。

输出信息的语义结构效果

6.定义缩写文本

abbr  <abbr title='keyboard'>kbd<abbr>  // 表示长单词或短语的缩写

7.定义插入和删除文本   ins   del

ins 插入文本    insert 的缩写   <ins cite='被删除引用的地址'>  

del 删除文本   <del datetime='2012-09-01'>   // datatime 被删除时间

8.定义文本方向

bdo  定义文字方向

bdi      html 新出的标签   定义文本的文本方向，使其脱离其周围文本的方向设置。

<bdo dir=‘rtl’>abc</bdo>  效果   cba

功能性文本

1.文本强调 高亮  mark

mark    对于结构没有影响，只是视觉高亮

2.进度信息  progress    html新增标签

< progress></ progress >    

< progress  value='20' max='200' ></ progress >   // value  当前的值  max为最大值

3.定义刻度信息 meter

< meter value='20' max='100' min='0'>20%</ progress >  // ie 不兼容

< meter value='0.3' >30%</ progress >  // ie 不兼容

4.定义刻度信息 time

例：中午 <time>12:00</time>有个约会

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

pubdate 指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。