用户名:  密码:   
您当前的位置:首页 > 网页设计 >  Html+CSS > 

3

上次修改时间: 2017-06-28 10:44:54      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\Html与CSS\html5+CSS3\      下一页

3.1 认识HTML5文档结构
基本和html文档结构一样,和以前的xml1.0过渡性版本差不多
文档类型从text/html变成了text/xml 遵守的是application/xml 或application/xml+html
主要结构
 声明文档类型
 声明文档区域
 字符集
 <!--[if IE 8]。。。 [endif]-->
完整的html5文档见视频
 <!doctype html> #只要有这句就是h5的文档了
5中很多都可以省略,如<html><head>等

3.2 html5元素的分类
 废弃了4中的16个元素
5的新境的元素分4大类
结构性元素 负责上下文结构的定义
 section 表示一个段落,一节,一章
 header 定义页面的头部区域
 footer 表页脚部分
 nav 用于导航
 article 表文档内容
块级元素 外部区域的划分,确保元素有效分
 aside 
 figure 捆绑,联合 同figcaption混合使用
 code 一段代码
 dialog 表对话,dd,dt,说话人和信息
行内元素
 meter 特定范围的数值
 time 表时间
 progress 与max,min,step联合使用
 video
 audio
交互元素 功能性的表达
 details 默认不显示,通过某种方式显示
 datagrid 控制客户端数据的显示
 menu 交互菜单
 command 

3.3.1 标识文章
<article> 用来包含一篇文章
 <header>
 <footer>
</article>
article可以嵌套,里面加<article>块,里面再加article,里面再加header 
 
3.3.2 给内容分段
<section> 表一个独立的区域,跟div有区别,功能类似
 <article>是独立的,section是分块,通常不用包含header或footer
 article更强调相关性,section更强调独立器

3.3.3 设计导航信息
nav元素,一个页面可以有多个nav元素,如传递的导航栏,翻页,边页
<nav draggable="true">,可以拖动的导航区
有时乱码要设置页面字符集,但要放在头部<head>区,就会省略head了
不建立用menu,它用于交互菜单

3.3.4 设计辅助信息
广告栏,导航条,与主要无关的都用<article> 用<aside>作一些解释
<aside>包含nav,h2,ul用作友情链接

3.3.5 设计微格式
h5的微格式,简化外部程序对页面数据的提取
新增一些专门的标签,对不同的信息进行标注,使易于搜索抓取
如:<time datetime="2012-11-13>2012年11月13号</time>

3.3.6 添加发布日期
整个网页的发布日期
<time datetime="2012-11-13" pubdate>2012年11月13号</time>,
用于让引擎找到发布日期,添加这个可以避免引擎误解,因为页面还会有其它日期

3.4.1  添加标题块
<header>,html5中header通常包含h1-h6等
里面可包含<hgroup><nav><ul><li>

3.4.2 给标题分组
用<hgroup>给标题分组

3.4.3 添加脚注块
<footer> 添加注释,版权信息,
里面再加<ul><li>
利于引擎有针对性的抓取信息

3.4.4 添加联系信息
文档作者,编辑者,电话号,邮件地址,与作者相关的所有信息
<address>多个超链接或作者信息</address>
用section分段,里面再加<address>

3.5.1 设计大纲
文章中各区块的安排,内容区块的编排
显示编排和隐式编排,不明确使用section元素
尽量用显示编排,不同级别的标题显示优先级不同的
没有CSS美化也能使用

3.5.2 设计样式
很多浏览器还没对html5支持,
样式重置放在一个单独的css文件,因为有的浏览器不支持h5,所以把所有清除重新设置
在html5.js创建一此特殊元素,如果小于IE9就导入这个js
<!--[if it IE 9]-->
 导入html5.js
<!--[endif]-->