02_HTML5+CSS详解第二天

html5大纲
分析工具：https://gsnedders.html5.org/outliner/

<section>

	<h1>HTML部分</h1>

	<section>

		<h2>HTML5的大纲上</h2>

			<section>

				<h3>什么是HTML5大纲</h3>

			</section>

			<section>

				<h3>HTML5大纲分析工具</h3>

			</section>

			<section>

				<h3>分析一个网页的大纲</h3>

			</section>

	</section>

	<section>

		<h2>HTML5的大纲下</h2>

			<section>

				<h3>显示编排</h3>

			</section>

	</section>

</section>

大纲的编排规则：显示编排（用section分块，每块使用Hn标题）|隐式编排（不使用section进行明确的区块划分，根据Hn,hgroup等元素自行创建区块。因为html分析器可以根据不同级别的标题判断出对应的内容区块

<body>

<header>

	<h1>HTML大纲实例</h1>

	<nav>

		<ul>

			<li><a href="">首页</a></li>

			<li><a href="">产品介绍</a></li>

			<li><a href="">联系我们</a></li>

		</ul>

	</nav>

</header>

<article>

	<hgroup>

		<h1>文章主标题</h1>

		<h2>文章子标题</h2>

		<p>文章内容</p>

	</hgroup>

		<section>

			<h1>文章评论列表</h1>

			<article>

				<h1>文章评论A</h1>

				<p>评论内容A</p>

			</article>

			<article>

				<h1>文章评论B</h1>

				<p>评论内容B</p>

			</article>

		</section>

</article>

<footer>

	<small>版权所有</small>

</footer>

</body>

加强版的ol元素，start属性控制起始值，type属性控制序号标记，reversed属性反序

1、
<ol start="2" type="A">

	<li><a href="">有序列表</a></li>

	<li><a href="">有序列表</a></li>

	<li><a href="">有序列表</a></li>

	<li><a href="">有序列表</a></li>

</ol>
2、
<ol  type="A" reversed>
 <li><a href="">有序列表</a></li>
 <li><a href="">有序列表</a></li>
 <li><a href="">有序列表</a></li>
 <li><a href="">有序列表</a></li>
</ol>

dl元素在html4中，是一个专门用来定义术语的列表，在HTML5中对dl元素进行了重定义，dl列表带多个dt,dd列表项

<h1>本套课程介绍</h1>

<article>

	<h1>HTML5+CSS3轻松入门与实战视频教程</h1>

	<p>本套课程主要讲解了……</p>

	<aside>

		<h2>术语解释</h2>

		<dl>

			<dt>HTML5</dt>

			<dd>HTML5是超文本标记语言</dd>

			<dt>CSS3</dt>

			<dd>CSS3是层叠式样式表</dd>

		</dl>

	</aside>

</article>

canvas元素创建画布

　　canvas绘制矩形

function draw(id){

	// 1、getElementById获取canvas元素

	var canvas=document.getElementById(id);

	// 2、getContext()取得上下文

	var context=canvas.getContext('2d');

	// 3、设置绘制样式，fillStyle()填充颜色与strokeStyle()绘制边框颜色

	context.fillStyle="#000";

	context.strokeStyle="#f60";

	// 4、指定画笔宽度

	context.lineWidth=5;

	//5、从左上角开始画一个宽400高300的矩形

	context.fillRect(0,0,400,300);

	//6、绘制180*120的矩形边框

	context.strokeRect(50,50,180,120);

}

canvas绘制圆形

function draw(id){

	var canvas=document.getElementById(id);

	var context=canvas.getContext('2d');

	// 设置填充颜色

	context.fillStyle='#f1f2f3';

	// 绘制灰色背景矩形画布

	context.fillRect(0,0,400,400);

	// 循环画圆

	for(var i=0;i<10;i++){

		// 开始创建路径

		context.beginPath();

		// 创建图形路径，context.arc(x,y,radius,startAngel,endAngel,anticlockwise),radius是半径

		// anticlockwise是布尔值，表示是否按照顺时针方向绘制，Math.PI表示180度

		context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

		// 关闭路径

		context.closePath();

		// 设置填充颜色

		context.fillStyle="rgba(255,0,0,0.25)";

		// 填充颜色

		context.fill();

	}

}

canvas绘制文本

设置字体 context.font="font-weight font-size font-family",
font-weight可选值（normal,bold,bolder,lighter或者100到900，normal为400，bold为700
设置文字垂直对齐方式 context.textBaseline=''alphabetic"
可选值为top、middle、bottom、hanging悬挂、alphabetic是默认值
设置文字水平对齐方式 textAlign="start",
可选值为start（默认值）,end ,left,center,right

绘制字符串
fillText(text,x,y,maxwidth)用填充的方法绘制字符串,text为要绘制的字符串，maxwidth为可选参数，表示显示文字时的最大宽度，防止文字溢出
strokeText()用轮廓的方式来绘制字符串

function draw(id){

	var canvas=document.getElementById(id);

	var context=canvas.getContext('2d');

	context.fillStyle='green';

	context.fillRect(0,0,800,300);

	context.fillStyle='white';

	context.strokeStyle='white';

	// 设置文本垂直对齐方式

	context.textBaseline='hanging';

	// context.textAlign='center';  设置文本水平对齐方式

	// 设置字体

	context.font="bold 40px '微软雅黑','fangsong'";

	//填充方式绘制字符串

	context.fillText('欢迎收看麦子学院推出的',0,40);

	context.fillText('《HTML5+CSS3轻松入门与实战》',40,100,800);

	context.fillText('视频教程',580,160);

	// context.strokeText('轮廓字体',0,100); 轮廓方式绘制字符串

}

canvas保存文件

很多时候绘制完成的图片需要保存，那么我们就刻意使用canvas API来完成最后一步
canvas API使用toDataURL方法把我们绘画的状态动态地输出到一个data URL地址所指向的数据中的过程
data URL实际上就是base64位编码的URL,主要用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入的数据，比如img元素里的图像文件
data URL的格式 data:image/jpeg;base64/9i/4……

toDataURL的使用方法
canvas.toDataURL(type);这个方法使用一个参数type,表述输出数据的MIME类型
什么是MIME类型？jpg image/jpeg
```
function draw(id){

	var canvas=document.getElementById(id);

	var context=canvas.getContext('2d');

	context.fillStyle='green';

	context.fillRect(0,0,400,300);

	window.location=canvas.toDataURL('image/jpeg');

}
```

canvas绘制动画实际上就是不断变化坐标，擦除，重绘的过程
1、使用setInterval方法设置动画的间隔时间
setInterval(code,millsec) 第一个参数为执行动画的函数，第二个参数为间隔时间，单位是毫秒，1秒等于1000毫秒
2、用来绘画的函数
方法一、通过不断变换x,y坐标来实现动画效果

var context;

var i=0;

function draw(id){

	var canvas=document.getElementById(id);

	 context=canvas.getContext('2d');

	 setInterval(painting,100);

}

function painting(){

	context.fillStyle='green';

	context.fillRect(i,i,10,10);

	context.fillRect(400-i,i,10,10);

	context.fillRect(400-i,400-i,10,10);

	context.fillRect(i,400-i,10,10);

	i++;

}

方法二、在该函数中先用clearRect方法将画布整体或者是局部擦除
擦除图像方法clearRect(x,y,width,height)，width和heigt分别是擦子的宽高

var context;

var width,height;

var i;

function draw(id){

	var canvas=document.getElementById(id);

	context=canvas.getContext('2d');

	setInterval(painting,100);

	width=canvas.width;

	height=canvas=height;

	i=0;

}

function painting(){

	context.fillStyle='white';

	context.clearRect(0,0,width,height);

	context.fillStyle='green';

	context.fillRect(i,20,10,10);

	i+=20;

}

　Web Storage本地存储

在HTML5中，除了canvas元素，另外一个新增的非常重要的功能就是可以在本地客户端存储数据的Web Storage功能
在HTML4中我们是使用cookies在客户端保存用户名等等一些简单的用户信息
cookies的缺点：大小限制在4kb、带宽浪费、难以操作

Web Storage:
1、sessionStorage临时保存，在打开网站到关闭网站之间要求进行保存的数据，把数据保存在session对象之中
用法：sessionStorage.setitme('key','value')//或者sessionStorage.key='value'
临时读取数据的方法：变量=sessionStorage.getitem('key')//或者sessionStorage.key
2、localStorage永久保存

html页面 [这里有个bug,id不能设置为msg]

<h1>Web Storage本地存储</h1>

<div id="show" style="border:1px solid red;width: 100px;height: 100px;"></div>

<input type="text" id="input">

<input type="button" name="save" value="临时保存" onclick="saveSession('input');">

<input type="button" value="读取临时数据" onclick="getSession('show');">

<input type="button" name="save" value="永久保存" onclick="saveLocal('input');">

<input type="button" value="读取永久数据" onclick="getLocal('show');">

　　js代码

// 临时保存

function saveSession(id){

	var target=document.getElementById(id);

	var str=target.value;

	sessionStorage.setItem('mess',str);

}

// 读取临时数据

function getSession(id){

	var target=document.getElementById(id);

	var msg=sessionStorage.getItem('mess');

	 target.innerHTML=msg;

}

// 永久保存

function saveLocal(id){

	var target=document.getElementById(id);

	var str=target.value;

	localStorage.setItem('mess',str);

}

// 读取永久数据

function getLocal(id){

	var target=document.getElementById(id);

	var msg=localStorage.getItem('mess');

	 target.innerHTML=msg;

}

02_HTML5+CSS详解第二天的更多相关文章

02_HTML5+CSS详解第四天
依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...
02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
02_HTML5+CSS详解第一天
视频来源:麦子学院讲师:朱朝兵 HTML5概念:HTML即超文本标记语言(HyperText Makeup Language),是一种语法简单,结构清晰的解释型文档,不同于其他编程语言. HTML5 ...
CSS详解
Web前端开发css基础样式总结颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
前端技术之_CSS详解第二天
前端技术之_CSS详解第二天 1.css基础选择器 html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. & ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
IIS负载均衡-Application Request Route详解第二篇：创建与配置Server Farm（转载）
IIS负载均衡-Application Request Route详解第二篇:创建与配置Server Farm 自从本系列发布之后,收到了很多的朋友的回复!非常感谢,同时很多朋友问到了一些问题,有些问 ...

随机推荐

java基础概述
写代码: 1,明确需求. 2,分析思路. 3,确定步骤. 4,代码实现. Java的三种技术架构: JAVAEE:Java Platform Enterprise Edition,开发企业环境下的应用 ...
【转载】MySQL · 性能优化· InnoDB buffer pool flush策略漫谈
背景我们知道InnoDB使用buffer pool来缓存从磁盘读取到内存的数据页.buffer pool通常由数个内存块加上一组控制结构体对象组成.内存块的个数取决于buffer pool inst ...
CSS3 动画 cheatsheet
Transition 实例 .box { height: 100px; width: 100px; background: #212121; transition: width 1s ease, he ...
mysql数据库快速入门（1）
1.数据库操作 1.1.连接mysql服务器 mysql -u root( 用户名 ) -p 1.2.退出mysql命令提示窗 exit 1.3.查看版本 SELECT VERSION(); 1.4. ...
关于soapui简介与入门
SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Ecl ...
unison+inotify实现数据双向同步
unison是一款跨windows/linux/MAC OS平台的文件同步工具,不仅支持本地对本地同步,也支持通过SSH.RSH和Socket等网络协议进行同步.更棒的是,unison支持双向同步操作 ...
树莓派搭建WEB服务器
树莓派搭建WEB的教程网上有许多,但感觉每一篇都有一些问题,这次我将网上的教程汇总,并亲身实践,将注意的问题都写进去,方便新手学习! 目录:1,安装nginx+sqlite+php5打造轻量级服务器, ...
JavaScript判断对象是否含有某个属性
两种方式,但稍有区别 1,in 运算符 1 2 3 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toStr ...
跨浏览器开发：CSS
理解CSS盒子模型如果不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器.CS ...
Java面向对象接口的应用实例练习
interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

02_HTML5+CSS详解第二天

02_HTML5+CSS详解第二天的更多相关文章

随机推荐

热门专题