html5结构图,Html基本结构
HTML的基本结构有哪些
最外层html双标签，里面分别是头部(head双标签)、身体(body双标签)。
创新互联是专业的太子河网站建设公司，太子河接单;提供成都网站建设、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行太子河网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
头部html用来包裹整个html文档
head一般用来放诸如meta、link、script等标签。
body用来放各种常用的标签(div,h1-h6,a,p,header,section,script等)。
简树如下:(html5规范)
!DOCTYPE html
html lang="zh-CN"
head
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
meta name="viewport" content="width=device-width, initial-scale=1"
!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --
title网站标题/title
link href="css/min.css" rel="stylesheet"
/head
body
h1你好，世界！/h1
div我是你的啥/div
/body
/html
html5为什么要用结构标签布局网页？
对于HTML5来讲，在网页结构上标签定义与使用更加语义化，让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在！
列举常用HTML5结构组合
header
nav
section
article
figure
figcaption
aside
footer
一般首页结构，如图所示
当然也可以是下面的结构
其中section和article最为相似，而且和div标签貌似也有很大相似之处。
但看似相似，并不是真的相似，这些标签是为了布局而生的，自然有它们更精确的语义定位，或者说他们更将强调Html的语义。
DIV
这个标签一直是我们见得最多、用得最多的标签。
它本身无任何语义，用作布局以及样式化标签。
Section
与div相似，但它有更进一步的语义。
section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
Article
article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。
div、section、article，语义是从无到有，逐渐增强的。
div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。
原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。
html5的canvas绘制了个房间结构图，鼠标移动到哪个房间，哪个房间填充颜色
因为没有说明有没使用 jQuery 等语言库，所以使用原生JS来演示。
代码如下，直接复制那段JS去用就可以了。
over是进入区域的事件，out是离开区域的事件。
!DOCTYPE html
html
head
meta charset="utf-8"
/head
body
canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"
您的浏览器不支持 HTML5 canvas 标签。
/canvas
canvas id="myCanvas2" width="300" height="200" style="border:1px solid #000000;"
您的浏览器不支持 HTML5 canvas 标签。
/canvas
script
var obj=document.querySelectorAll('canvas');
for(var i=0;iobj.length;i++){
obj[i].onmouseover=function(){
this.style.backgroundColor='#ccc';
}
obj[i].onmouseout=function(){
this.style.backgroundColor='#fff';
}
}
/script
/body
/html
HTML5中如何绘制图表？
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
!DOCTYPE html
html
head
meta charset="utf-8"
title绘制图表/title
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的浏览器不支持canvas元素/p
/canvas
/div
script
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。
var
canvas = document.getElementById('canvas'),
context = null;
context = canvas.getContext('2d');
var img = new Image();
img.src ='chart-background.png';//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0);
//绘制直线
context.beginPath();
context.moveTo(70, 105);
context.lineTo(105, 132);
context.lineTo(142, 250);
context.lineTo(176, 175);
context.lineTo(212, 145);
context.lineTo(245, 197);
context.lineTo(280, 90);
context.stroke();
}
/script
script src="jquery.js"/script
/body
/html
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
html5中怎样分区块
html5可以将网页分块， 网页分块意味着将一个页面划分为几个独立的部分，包括内容、菜单、头部、底部、链接等， 这些只要使用一些新的标签。下面是一张html5概念图：
1、header 网站头部标签
2、nav 导航标签
3、article 内容标签
4、section 文章标签
5、aside 侧边栏
6、footer 网站底部标签
文章名称：html5结构图,Html基本结构
分享路径：http://abwzjs.com/article/dseeiip.html
