详细讲解html标签的书,html 标签 详解与使用规范

一 网页通常结构

a.div 和 span 通常进行文档结构基本构成div 块级元素 ， 通常指定结构内容包含在div中，并分配class和id。

span 行级元素    通常对行级元素进行分组   例：

z正文内容

我是重要内容

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

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

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

3.aside      定义侧边导航 

• 菜单1
•  菜单2

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

5.main       定义主要区域  主要内容模块

6.header    定义标题栏 

正文标题

作者

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

8.hgroup    定义标题组  已从html5.1中移除，不建议使用   例：

标题1

标题2

标题3

9.address    地址信息

10.details    标题内容信息

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

 

 

 

 

 

  // 页面中定义标题必须使用标题   搜索引擎权重 爬虫

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

(标题不要滥用，  H4 H5  H6 不常用)

2.定义段落文本  P

文本段落

   //创建之后会有间距

3.引用文本  q  blockquote   // 短引用      例 "一句简短话书名"

// 长引用  段落前空格 例  

一大段引用书名

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

引用文本示例代码

引用文本示例效果

4.引用文本  em  strongem  // 斜体  常用

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

i   常用于阿里矢量图标

big   small字体大号 ，字体小号

sup  sub字体下标 ， 字体上标

文本字体

文本字体

5.定义输出文本 

 w3school 演示地址

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

注：这些标签常用于显示计算机/编程代码。pre        表示预定义格式的源代码，  严格限制为等宽字体格式的文本中显示编程代码

code     代码字体

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

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

dfn      定义的术语

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

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

输出信息的语义结构效果

6.定义缩写文本abbr  kbd  // 表示长单词或短语的缩写

7.定义插入和删除文本   ins   delins 插入文本    insert 的缩写   

del 删除文本      // datatime 被删除时间

8.定义文本方向bdo  定义文字方向

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

abc  效果   cba

功能性文本

1.文本强调 高亮  markmark    对于结构没有影响，只是视觉高亮

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

progress>

progress >

<

progress  value='20' max='200' >

progress >   // value  当前的值  max为最大值

3.定义刻度信息 meter20% progress >  // ie 不兼容

30% progress >  // ie 不兼容

4.定义刻度信息 time例：中午

12:00有个约会

我在 情人节 有个约会。

pubdate 指示 元素中的日期 / 时间是文档(或 元素)的发布日期。