一 网页通常结构
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> 元素)的发布日期。