大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最外层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结构组合
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。
因为没有说明有没使用 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
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等,如果直接通过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概念图:
1、header 网站头部标签
2、nav 导航标签
3、article 内容标签
4、section 文章标签
5、aside 侧边栏
6、footer 网站底部标签