开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：HTML&CSS 1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15739
HTML&CSS 1
内容介绍：
一、程序演示
二、WEB前端-HTML和CSS
一、程序演示
新开发一个应用，创建一个新的工程，可以根据个人喜好创建，用Maven创建。hatype相当于是一个模型，从这里面去创建。
一般选webapp，选择之后随便命名，如one，开始创建工程，创建出来之后自动询问是否需要import一下，点击需要import，就等待成功后会看到pom文件，maven的项目文件生成完毕，当然发现还有变化，继续导入，导入需要的这些库，一开始创建出来，因为选择webapp，帮助创建好一些目录，webapp这个目录就有了，里面都有一些文件，也有resource文件，不同电脑版本源码可能稍微有一点点差异，但是不会差异很大。点击file，在project structure中，
在Module中，目录点开没有原文件，可以新建一个文件夹，叫做JAVA。但是创建一个java之后也没有用，一定要选source文件才可以，点中目录点一下source，刚才默认已经选了source，如果不点source的话，将来编译完成之后，不在var包中需要点一下source，工程就完成了，但要注意一个问题，每当maven做自动的导入，language level会改一下，如默认选到五，因为装了一个jdk 13，所以选的都是13，如果不选的话，编译就会报错。所以language level要选成13，创建页面，webAPP是将来所有的内容被打包后被部署的目录，先创建一个html文件，默认应用部署会打开index文件，里面实际是空的，body是空的没有东西，随便写一个h1，补全写一个hello，最简单的网站就做好了，加一个配置，点加号，有一个tomcat server，server选了之后，名字随便命名，是one工程的可以起名为one，选用户的位置，这个位置之前可能配置过，如果没配置过，自己去选，告诉他人tomcat在什么位置上，安装目录在哪里就在哪里，实际上tomcat不需要安装，下载下来如果是压缩包，直接解开就行，选中这个目录点open就会记住，
在deployment这个地方，要添加一下artificial，将one.war包部署上去，运行是否有问题，运行先将工程built一下，然后去启动tomcat，出现问题
生成的这几个文件出现了画红线等，表示默认的这几个找不到，一个最简单的方法，就是把自己文件全部删除
正常情况下不应该删除，以后将后台会细讲，删除后在运行一遍
出现结果hello，这是最简单的一个网站，已经出来，刚才说加的JAVA还没有用，创建一个JAVA类，最简单的一个JAVA类，Onecontroller，把这个类打开，找到一个编辑器，将内容复制进来
有红色标注的地方，说明有错，实际是没有加依赖，将鼠标一放，他就会告诉需要加入JAVA企业版的依赖，那因为这个serve中都是java企业版依赖的，所以点击就会自动下载，webapp用maven创建好之后本身带有，自己就创建出来，导入之后红色标记没有了
Servlet处理前端的这个hello的链接，将前端页面改一下，加一个a的超链接，href=hello加一句话，字对的不齐不好看，在编译器中，按住苹果上的command键和option键和l，会帮助自动对齐，然重新部署
点击
返回一个结果，返回的结果是一个html页面，页面只显示了一个Servlet at，将Servlet路径信息打出来，Servlet被打包在one.var包中
黄颜色的是每次编译出来的结果，整个类在var包中，tomcat目录，tomcat底下有一个webapp目录，one.var在这个目录中
例子基本上都在里面部署过，里面还有一些其他的应用，maven是如何出现的，新建一个工程，选择maven，选择从某个框架里选，熟悉之后自己创建也可以
现在要选的话，一般是开发webAPP，选一个带webAPP的应用，然后创建，创建出来之后会将相应的目录创建好，在新的窗口中创建，一定要选中create from arehatype，相当于模板，从模板里面去创建，运行完之后部署在tomcat中。在maven中，每一次新加东西，比如要用一个什么东西但找不到，如想用hibernate但找不到，比如给大家调spring web MVC的例子，找不到，就在这个网站mvnrepository.com里面，在这上面输想要找的东西，就能找到，完成之后直接拷到pom文件里面，底下会提醒是否要引入变化，点它就会导入，包里面会加进去需要的东西，包括在maven的库里面会加一些东西，会导入到里面去，maven的一个最大的好处是像用web mvc这种框架时，不知道加入哪些包，会自动的去帮忙找，这是它的好处。但是一旦导入，会发现一个问题，project structure中
Language level又恢复成5，编译一下
有可能会报错
原因是每当用maven导入东西时，它会自动的把Language level这个地方改写掉，一旦选13的话，就不会有这个问题，选择13时，会说这个东西是用maven导入的，任何的这个修改都可能会在以后导致重新导入，导入改成13，在pom文件里面如果加新东西，又会被改回去，一旦碰到这种编译错误，把它改回重新编译就可以，改完之后底下不报错，说明编译已经成功，可以重新运行，用maven导入的东西导入多了应该没有大的问题，无非是可能加了一些不需要的包进去，但没有什么大问题，对代码本身不会有影响，其实maven已经做的很好，当在代码中缺东西时，直接加就可以，这是在后端，前端还有外webpack，用JavaScript写前端候，如果缺东西，用webpack是一样的，webpack比较简单，只是从官网上找了一些例子，作用就是在前端做像maven一样的项目管理，项目管理是maven帮助把这些需要的包引起来，webpack是在做前端的，需要哪些js包自动引入，maven用pom.xml，webpack用webpack.config.js和page.json这两个文件，道理是一样，告诉想导入什么，它就会自动导入，在开发环境里面，很多东西都不需要自己写，实际上输入的时候它会自动去找。一个比较好的习惯是每次运行完关掉，不然java的tomcat的在后台可能会一直运行
二、WEB前端-HTML和CSS
1.Overview
·HTML
-HTML tags
-HTML 5
·CSS
- css syntax- css in HTML
–本节课代码样例来自于www.w3school.com.cn网站
解说在这个网站上可能没有明确去说的一个问题，HTML就是我们在浏览器里看到的页面的内容，所有东西都是基于它来的，就构成了web应用的一个很重要的东西，web应用分两种，有一种是程序调用的，可能没有前端不需要HTML，但只要是给人看的，那最终是以HTML方式呈现，HTML演化到5版本HTML本质上来是一个内容和样式混编的一个语言，在页面里，既说明想呈现什么内容，又说明了想呈现成什么样式，比如应该是<h1>标题一这么大的数字，或者是除了<h1>，还是它的属性、它的颜色，颜色是红色，可能会这么写，
<h1>
colour=”red”
这一部分是样式，要呈现的hello是内容，内容和样式混编，其实不是一个特别好的做法，尤其是跟红色蓝色这种混编不是一个好的做法，能不能一个界面里面只说有个hello，套个马甲，马甲套上去它就是红色的，套黄色的，那它就是黄色，希望把一部分的样式和内容分离开，这就是样式表想解决的问题，二者相辅相成，谁也离不开谁，一个HTML离开了CSS，页面写起来非常累，如果CSS离开了HTML，也就没有用，一定要套到一个HTML才能体现意义，之所以要做分离就常把内容和样式做一个分离，就像我们word时，只写想要的东西，至于是什么颜色，是多大的字号，这些东西不在看到的那个word里，是被隐藏起来，在文件的Word文档中存储，真正看到只能看到内容和呈现出来的样子，至于为什么要呈现成这个样子，代码在哪里，全部隐藏了。所以要体现的是这样一个效果
2.HTML
·Hypertext Markup Language (HTML)
- is the Web's core language for creating documents and applications for everyone to use, anywhere.
- in October 2014, the HTML Working Group published HTML5 as W3C Recommendation.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
·HTML Markup Tag, called HTML tag
- Keyword enclosed by angle brackets , e.g.<html>
- The tags appear in pairs, e.g.<b> and </b>
- The first one is start tag while the second one is end tag
HTML虽然也称为language，但是一个标记语言，标记语言就意味着它不存在什么编译的东西，它不是一个编程语言，它只是个标记语言，它会在浏览器里被解释性执行，使用的是到5这个版本，那在标记语言里面它出现的东西就叫做标签，所谓标签就是用一对尖括号扩起来的东西，一对尖括号的叫一个标签，但是尖括号里面的标都分为这起始标签和结束标签，<html>是起始标签，以一个杠斜杠开头的为结束标签，标签一定要成对出现，HTML没有要求的那么严格，比如<p>My first paragraph.</p>把</p>完全去掉，也能被这么浏览器正常的去解析、去执行，仍然会看到这样一段文字，HTML结构必须是一个层次性的，如果现在正在同步上杨老师的数据库原理，里面是一层一层的，不能是交叉的
<html>
<body>
</html>
</body>
不能出现这种情况，必须要是层次性的，层次性可以用一棵树来描述，上面是HTML，有几个分支，header、body，body中会有h1、p等，那这棵树就叫做HTML文件的一个Dom数，一个文档对象的Dom数
可以嵌套，不是不能嵌套，是不能交叉错位嵌套
3.HTML Document
·HTML Document = Webpage
- HTML documents describe webpages
- An HTML document consists of HTML tags and text
- HTML documents are called webpages
·Web Browser retrieves HTML docs, and presents them as
webpages
- Web Browser uses HTML tags to interpret the content of webpages rather than presents HTML tags
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</ body>
</html>
文档就是所说的页面，页面中由标签构成，要去关心到底有哪些标签
4.HTML Tags
·HTML heading
- <h1>,<h2>,...,<h6>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
最常用的显示内容是heading，heading就决定了它的大小，从h1~h6字体的大小不一样，从这个例子可以看到，刚才说的显示的样式和内容实际是混编的，不论是h1还是h2和内容混在一起，内容更复杂时直接写在里面会很麻烦，希望得到页面内容在某些场合下是红色，某些场合下显示黄色，heading从1-6本身说明大小是不一样的，h1-h6是在word里面看到标题一，标题二，标题三等等，本来就表示字体大小不一样
·HTML paragraph
- <p>
p表示paragraph是一段话，p开始是默认字体字号，都是一样的
·HTML link
- a
- href attribute
a表示超链接，在a里面，在标签中间夹着的是内容，标签如果带属性，每个标签的属性会不一样，比如a标签它是超链接属性，后面要写它是什么，href= "http :i//www .w3school.com.cn">This is a link</a>写的是一个绝对的地址，是一个绝对的一个URL，刚才写的是"/hello"，是相对于web应用的根目录来的，在同一个目录里，它是一个相定定义，href是超链接的意思
·HTML image
- <img>
- src, width & height attributes
image是要显示一幅图，图的src属性是在说它在什么位置，hello是在相对于路径的根，<img src="/i/eg w3school.aif"width="300" height="120"/>是相对于应用的根目录，不是指的客户端的某一个目录，比如这边的浏览器，另一边是服务器，意思不是在说页面下载下来了，这一个链接是指的当前这一台客户机上的某一个地址，是指这个页面再往服务器上时，存放在一个应用的一个目录里，相对于存放的那个根目录，有一个叫做l的目录底下带着一张图片，把这个图片嵌到页面中，页面就回来了，不是指在客户端要这个图片，如果是客户端要图片，写的网页都需要在客户端有工作，实际上是在服务器端的一个路径，还有高度和宽度，高度宽度实际上是字符串处理
·HTML table
- <table>,<th>, <tr>,<td>......
表格绘制异常麻烦，首先最外面一层标签是table，table有属性，比如border1表示边框有一定的宽度，border中表头和底下的内容是不一样的，底下是数据行，先有一个表头，每一行呢要么表头th要么是td，不管怎么都是一个tr，在tr中，有两个列是用th，这两个列出来的效果比data要粗一点，底下另外两行，每一行都有两个列，所以就看到了两个td，稍微麻烦一点
·HTML list
-<ul>,<ol>,<li>,......
ul表示无序的，ol是有序的，ol是1、2往下排，ul是原点表示无序，整个列表每一项用li来表描述
·block level element vs. inline element
·block level element
- <h1>,<p>, <ul>, <table>,<div>,<span>
- Browser present them in a new line
·inline element
- <b>, <td>,<a>, <img>
- Browser usually present them without a new line char.
刚才是单个的一个一个的标签，称为inline element，在单行中显示的一些东西，有关布局和有关块称为block level element，table、ul中包含很多内容，p和h1表示一大块，占一行，td、a、img等旁边还有别的内容，占的不是一行，经常涉及到的页面布局用的是div
·HTML layout
- <div>, <table>
整个大的页面是一个div，div是要把页划成一个部分，div是division的缩写，给div起这个ID，ID名字的意思就是未来有可能拿它在CSS中做样式控制时引用，是用来引用，这里面上面是一个header，放了一个h1类型的标签，底下放一个menu，menu上面是h2，底下是一个无序的列表，图中三项内容，旁边是一个content，第一个</div>占了一行，底下div只占了一半，在CSS中会详细介绍，那反正这里就有一个div。div的意思是把页面分块，div里面可以嵌套div，可以继续嵌套把页面划分成很多小块，划分成小块实际上是用JavaScript进行操作时，希望拿回来的数据对menu进行操作，将里面的一些内容删掉，另一边是相同的到来，讲react是，在这个页面中，底下只能是一个单个的div，页面只有一个div放进去处理，div像一棵树一样，最上面是一个div，把页面分成了两个部分，底下可以继续分，如果没有最上面的div，页面里会有若干的像森林一样的小树，div是做分区的
·HTML form
一<form>, <input>
- type attribute
所有的页面刚才讲的都是呈现的内容，交互用form，form中定义了想要让用户交互的时候提交的信息的东西，在form中一定有很多很多让用户输入的东西，这些东西全部是input类型，input中有个至少有个submit，能够把这些内容提交，submit实际上是一个按钮，一点击就会发走，这是在上面显示的内容，一旦submit发送html_form_action.asp请求，把这个页面发送出去，发出去之后就把这部分内容曝光发走，发走之后，信息是如何组装的？一类input是text类型，就是first name、last name，往填东西就可以，第二类型是radio button，radio button是单选，单选意味着这两个只能选一个，选了Male就不能选Female，为了说明这件事情，这两个button的name是一样的，都是sex，值不一样，一个是Male，一个是Female，checkbox表示可以复选，名字一个叫bike一个叫car，二者是不相关的，可以随便选，类型是checkbox，点击了后，值会被封装，封装完成后发到后台，后台如果有java代码进行处理，要去解析发过来的request对象，解析面带的参数，参数就有first name，last name、sex、bike、car这些信息,去解析这些参数，会得到里面的信息，这些信息就是用户当时在这里填或者选的东西，就随着submit发走了。
·HTML iframe
- To present webpage in a webpage
一个页面里还可以嵌入另外一个页面，以后开发复杂的web应用，比如要开发一个poker网站的时候可能会碰到，在用的iframe框架，在这个课程里，用不到这么复杂的东西，如果想用的话也要慎重一点，如果说这是一个页面，里面的这一部分是嵌入的另一个页面，要想这个页面和这个页面之间的通信能不能通起来，这是个问题，这个复杂性在课上不做详细讨论，至少可以通过iframe方式在一个页面里面去呈现另一个页面，把它嵌到这里
5.HTML Script
·JavaScript
<script type="text/javascript">
document.write("Hello World!")
</script>
·VBScript
<script type="text/vbscript">
document.write("Hello World!")
</script>
在页面里面可以写脚本，现在经常用的是JavaScript脚本，也可以支持其他类型，虽然其他类型像VBScript使用的不多。嵌入脚本的时候要注意的是脚本在浏览器里时，以<script type="text/javascript">这种方式给它嵌入，当然也可以把它专门写在一个js文件里，整个引入脚本，脚本是随着html的页面一起下载到客户端，在客户端的浏览器里去解释执行的，浏览器必须要允许客户端去执行JavaScript。如果有用户觉得从安全的角度考虑，把浏览器里的JavaScript禁掉，这个东西下载下来之后可能执行不了。JavaScript实际上是在浏览器里执行，把很多的任务从server这一端推到浏览器里执行，所以server的压力越来越低，就把很多任务推给浏览器，靠浏览器执行，浏览器前提是必须要允许执行
6.HTML head
- Script, Css, metadata
- <title>,<base>,<link>, <meta>, <script>, <style>
标签 |
描述 |
<head> |
定义关于文档的信息。 |
<title> |
定义文档标题。 |
<base> |
定义页面上所有链接的默认地址或默认目标。 |
<link> |
定义文档与外部资源之间的关系。 |
<meta> |
定义关于HTML文档的元数据。 |
<script> |
定义客户端脚本。 |
<style> |
定义文档的样式信息。 |
在html页面先要有一个文件头，然后才是文件题，刚才讲的内容都出现在文件题里，文件头里面包含一些内容，比如要引入一些JavaScript的文件，或直接把JavaScript脚本写在里面，要说明引用一些从什么样的层叠样式表，或者把样式的内容直接写到里面，或者一些其他的原数据，包括列的一些如这个页面的编码机制是什么，如大家在企业页面上展示中文，有可能会出现乱码的情况，希望把这个页面的内容机制变成UTC-8，这些信息都在头里面写，大多数情况下关注的就是script和CSS或者用工具在开发这个网站中，甚至都没有特别留意过这个头，但要知道的，就是文件头里面是可以定义这些内容。
7.HTML 5
·HTML 5 features:
- canvas
- video and audio
- local storage
- content tags,e.g.article, footer, header，nav, section
- form tags,e.g.calendar, date, time, email, url, search
·浏览器支持
- 最新版本的Safari、Chrome、Firefox以及Opera
- Internet Explorer 9
前面实际上看到的是一些常见的内容和一些简单的用户交互，这是在html页面从一开始到现在一直都存在的一些特性，那么在html5里面增加了一些新特性。第一个是提出了一个canvas对象，可以来对这个页面做一个操作。第二个是支持视频和音频的操作，在网站上浏览，比如爱奇艺，也在网站上可以播视频，以前如果不用那种标签，自己写着一般是写了JavaScript或者用Flex编写的一个播放器，在里面播放，实际上是靠脚本播放，现在支持直接用html5标签，可以把一个视频或者音频播放，支持local storage，把信息写到了 cookie里，传回客户端，客户端的cooki里面可以去写东西，因为它里面实际上是一张表，是一个 k v的一张表，可以记录一些东西，但是它的大小是有限制的，它不能写很多东西，当有很多东西想保存在客户端时就提供了local storage，local storage可以让你在客户端写入比cookie要多得多的内容，这也是一个可以利用的一个对象。底下多了一些内容标签，看起来更丰富，还有一些表格标签，比如日历标签等，新的html5的特性，现在基本上浏览器都支持，现在要考虑的不是哪个新的浏览器支持不支持，而是老的浏览器哪一个支持。经常出去开发应用时，会看到让支持IE6，因为在以前中国的XP操作系统，让支持IE6就会困难，IE到9以上应该是没问题，如果真有人让支持IE8，要考虑这些标签能不能用
8.HTML 5 - video
<! DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg"type="video/ogg">
<source src=" /i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
controls |
controls |
如果出现该属性，则向用户显示控件,比如播放按钮。 |
height |
pixels |
设置视频播放器的高度。 |
loop |
loop |
如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
preload |
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay""，则忽略该属性。 |
src |
url |
要播放的视频的URL。 |
Width |
pixels |
设置视频播放器的宽度。 |
在网站上一边运行一边看可能会更好，比如放一个这个视频，实际上就video一个标签就可以。后面在说它的大小，它的一些信息来源，底下source有两个，因为有一些可能不支持MP4，就会播放这个ogg，
这里面的control是在说字底是否要显示一个工具条，让用户可以自动控制，要播放、停止、控制声音等，也可以把它引掉，就让用户只能看不能去控制它，现在可以看到它只是用一个标签来播放，不像以前要写一个js的播放器，那就比较复杂。
9.HTML5- video使用DOM控制
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center;">
<button onclick=""playPause(]">播放/暂停</ button>
<button onclick=""makeBig(">大</button>
<button onclick="makeNormal(]">中</button>
<button onclick="makeSmall[0]">小</ button>
<br />
<video id="video1" width="420" style="margin-top: 15px;">
<source srcm" /example/html5/mov_bbb.mp4" type="video/mp4""/>
<source srcm" / example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type=""text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play () ;
else
myVideo. pause();
}
function makeBig()
{
myvideo.width=560;
}
function makeSmall()
{
omyVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
有一个更复杂的一个东西，这个视频在网站上点大中小的时候播放区域可以变大变小来回缩放，用的实际上是它的一个脚本加标签，实际上还是video标签，还是在播放这个内容，让浏览器检测以后去看播放的一个圆，但是这里面增加了几个按钮，每按一个会调用方法，比如这里播放，如果它已经暂停了这样的播放，否则正在播放就让它暂停掉，底下也是一样，变大变小都是在调整它的个大小
这个页面，当把video标签显示出来在这里播放时，可以通过这种实践动态的改变video标签里面的，比如它的大小，可以控制它播放，实际上无论是播放还是它的宽度，可以看到在改变它的位置，宽度还要改变它的paused，就是读取paused的状态，这些东西都可以在播放过程当中动态的进行操作
10.HTML 5 - audio
<! DOCTYPE HTML>
<html>
<body>
audio controls="controls">
<source src="/ i/ song.ogg" type="audio/ogg">
<source src="/i/ song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
属性 |
值 |
描述 |
autoplay |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
controls |
controls |
如果出现该属性，则向用户显示控件,比如播放按钮。 |
loop |
loop |
如果出现该属性，则每当音频结束时重写开始播放。 |
preload |
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay""，则忽略该属性。 |
src |
url |
要播放的视频的URL。 |
audio与video是类似的，看播放源支持什么，就拿哪个出来，如果两个都不支持，那它就会显示这一条Your browser does not support the audio element。你的浏览器不支持audio element，control意思是一样的，要把这个控制条给它显示出来，用户就可以去控制它。
11.HTML 5 - Drag & Drop
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"">
#div1 {width:198px; height:66px;padding:10px; border:1px solid#aaaaaa; }
</style>
<script type="text/javascript"">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData(""Text"" ,ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData( ""Text"" );
ev.target.appendchild(document.getElementById(data)) ;
}
</script>
</head>
<body>
<p>请把w3School 的图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<br />
<img id="drag1" src=" /i/eg_dragdrop_w3school.gif" draggable="true"ondragstart="drag(event)"/>
</body>
</htmi>
上网站上自己去试一下，是说一开始是这个样，
点中这个图片之后，把它往里拖，就能呈现出底下这个样子
把它拖进去，支持这种拖拽的这个操作，那具体的实现，首先有一个div是在显示这个框，拖放的时候有一个实践动作，会调用这个东西，这个时间动作在这里去显示，响应你这个拖拽图片的动作，一旦停止它就放到了里面，里面是拿一个图片来做的拖放，但不是说所有的操作都只能针对图片来，其他的控件也可以支持这种投放的操作。
12.HTML 5 - Canvas
·HTML5的canvas元素使用JavaScript在网页上绘制图像
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1pxsolid #c3c3c3; ">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById( "myCanvas"" );
var cxt=c.getContext(""2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke( ) ;
</script>
</body>
</html>
Canvas专门来做一些绘图的动作的，专门针对JavaScript来做，比如定义了一个Canvas对象，这个对象它有一个大小，有一个边框，就是看到这个边框，在底下有JavaScript脚本，Canvas专门是让JavaScript脚本在上面绘制，JavaScript脚本是说在干什么，要获取这个对象，在这个对象上，开始画一个2d的图像，先移动到哪里，画一条线，再画一条线，移动到了实时这个点，画到150~50，再画到10~50，把它显示出来。那有了它之后会发现这样的东西，如果说JavaScript这几个数据是从后台从数据库里返回的一些数据，可以用这种画图的方式，在前端画一个符合要求的一个图形，比如画条状图，也可以画折线图，是自动来画，有人基于这样的考虑，提供一些画图的一些js库，自己画的过程都不需要，直接把这个数据提交，告诉想要画的内容帮助画，比如像Echart、HighChart这样的一些包，拿来画图就很方便，做大作业的时候，如果想让这个图形画的比较好看，数据画出来的图不是图像，不是image，可以去调用各种包。
画图的一些细节
在网站上看的时候会发现，它在捕捉鼠标，随便把鼠标放到哪里，它会告诉你它的坐标在哪里，这是截的一张图，所以它不能动，实际上是在不断的响应鼠标移动的事件，每次鼠标移动这个事件产生之后，它就会去抓取事件的X和y的坐标，显示X和y的坐标，在这里不断显示。
13.HTML 5 - SVG
·Scalable Vector Graphics
<! DOCTYPE html>
<html>
<body>
<svg xmlns="http: / /www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;"/>
</svg>
</body>
</html>
在画图的时候，有很多情况下是矢量图，可伸缩的矢量图，svg，所谓矢量图不是一个image，不是基于像素来画，它是矢量，它是记住比如这几个点，这几根线，集中颜色，不是从头一开始去扫描每一个像素有什么点，再做压缩表示。可以来画svg的矢量图，这是一个新标签。这个接触的可能比较少，未来可能会用到。矢量图的好处是什可以看到要画个多边形，给出了这些点的坐标，就是这五个点的坐标就去绘制，底下的风格填红色，笔画是蓝色的，笔画多宽等等填的规则是什么，这个画完之后它的一个好处是如果这个图被放大，可以放大非常平滑，不像一个图片在放大的时候，会出现锯齿状，那他会无极放大缩小也是一样，就是所谓矢量图的好处，矢量图可以直接在html中画，是矢量图的一个特征。
14.HTML 5-Geolocation API
一个比较实用的是在捕捉经纬度，比如坐在我家里的一个经度维度，上海的经度是是东经125，用的正来表示，在北纬31度左右，那这个是通过地理位置API来获取，这个API其实只有一button，点一下它就会产生这样的值，就调用这个方法，调用是是导航的接口里的东西，navigator.geolocation.getCurrentPositin这个函数，这个函数能返回当时这个的经度纬度，这个经度纬度不应该是你真正的这个人在这的经度纬度，应该是网络设备接入的端的经度纬度，因为人身上包括电脑端没有带定位的API，只能通过网络接入设备来判断
15.HTML5-Web Storage
HTML5提供了两种在客户端存储数据的新方法:
- localStorage-没有时间限制的数据存储)
- sessionStorage-针对一个session的数据存储
在客户端存储数据的新的方法，cookie有大小限制，不可能放很复杂的，放很大的东西没有办法用cookie，cookie属于一个系统对象，最好不要使用，提供新的存储的地方localStorage与sessionStorage，localStorage就是没有时间限制，一旦写入到客户端可以一直储存，将购物车放到服务器端存储，在httpsession里面存储了购物车对象，就是对象的引用，服务器一关掉对象就没有了，还有一种解决方案，把购物车里的东西推回到客户端的localStorage中存储，将购物车的东西直接存数据库，服务器中的数据哪怕关机仍然存在，下次打开，从数据库里再恢复购物车内容还在，这也是一种方式，向localStorage中写入也是一种方式，localStorage是写到客户端的，本质上看和cookie没有区别，也要写到这个客户端，安全性能没有潜在的问题，写到服务端的数据库里，防止这个用户关机后购物车信息没有，不管哪一种设计都可以，只要做好安全性能考虑就可以。localStorage没有时间限制的，sessionStorage只在一个session中有效，这个session如果结束，用户在两次请求中间的这个时间太out，session关闭、销毁掉，也可能是用户在这个页面里有一个登出这样的工作，显示要关闭session，session就消失了，只在session中存活，session结束数据就没有了
<! DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if ( localStorage. pagecount )
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage. pagecount=1;
}
document.write("visits: " + localStorage.pagecount + " time(s). " );
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</ p>
</body>
</html>
如要去判断是否有一个pagecount属性，一开始可能没有，如果没有，设置一个这个属性，初值为1，如果已经有了，将数值拿出后加1，脚本说明了两个问题，第一个在localStorage里面还是k.v存储，第二个localStorage写进去之后，写了count：1，本质上都是字符串，是文本，所以进来之后要把转成数字再加1，数字会更新，在页面这个地方，每刷新一次页面就会发一个请求，就会读取，由于没有时间限制的，一直在里面，可以想象成大家公用的一个变量，每刷新一次就来执行这个脚本，连刷八次，会读取八次，localStorage就有这样一个特点，如果是sessionStorage，连着刷也能看到这个效果，但如果换一个浏览器，用两个浏览器同时刷，可以发现它们各自的数字不一样，表示它们在这个浏览器里面看过几次，而如果用localStorage刷，即使是在两个浏览器刷，看到数字是一样的，是两个软件看过的数字总和，是只在客户端这一端。既然有localStorage，能否把大量的东西都写入到localStorage中？可能会有一个漏洞，漏洞如果被别人抓住，就可能是网站的一个bug，localstorage里面可以放比cookie大的东西，如果放1TS的东西，客户端的这个硬盘不会再给充满，1TB传输时间长，限制一下它的大小就可以，但是localStorage还有另外一个可能存在的风险，有可能别人在攻击客户端时说冒充域名，如www.sjtu.cn，紧跟着来一个Department1.sjtu.cn，Department2.sjtu.cn，一直不断的重复下去，如果限制一个localstorage，对一个域名只能存如1GB东西，如果攻击就是不断的换这个东西，就有可能被看成是多个不同的运营，写一个循环不断的死循环，每一次改变后面数字，然后往这边发一些东西存储，有可能仍然会被击爆，这是有可能出现一个问题，这个问题基本上不太会用到。感兴趣的可以看一下所谓各种各样的浏览器安全的问题，这就是一个利用localStorage的漏洞可能会产生的问题。localStorage有了可以往客户端里面写东西的一个途径，localStorage写进的东西比cookie要大，会显得更有用一些
Visits: 8 time(s).
刷新页面会看到计数器在增长。
请关闭浏览器窗口，然后再试一次，计数器会继续计数。
这是sessionStorage例子，sessionStorage只针对一个session，在页面里面看到与再换一个页面是相同的，各个session之间会隔离开
16.HTML5-Application Cache
·HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
·每个指定了manifest的页面在用户对其访问时都会被缓存
<!DOCTYPE html>
<html manifest=" /example/html5/demo html.aopcache">
<body>
<script type="text/javascript"src="/example/html5/demo_time.js"
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件
</ button></ p>
<p><img src="" /i/w3school_banner.gif"/></ p>
<p>请打开<a href="/example/html5/htm1l5_html_manifest.html"
target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。
</p>
</ body>
</ html>
引入了定程序缓存的东西，打开过这个页面一次，脱机把网络断掉，断掉之后再想打开这个页面，如果当时这个页面在前面加入manifest=" /example/html5/demo html.aopcache"属性，就可以从用户这一端缓存的内容读取出来显示，申请html页面时，会去看last modified字段，先发到服务器端，服务器端检查本地存储的html，去看这个字段和本地发过来的字段是否一样，如果一样，本地缓存的页面就是最新的，直接从本地load就可以，如果不一样，会把这个页面再传一次，如果页面写的不太好，last modified字段没设置，可能判断出来就是加载本地的，有可能更新了，这里也更新不了，浏览器里面缓存确实已经有了，按照刚才说的逻辑，要想从缓存里面load上来的一个前提是last modified发送到服务器端，服务器端双方确认了，双方是一致的之后才从缓存中load进来，前提是二者要先通一下，把它发过来，如果压根不通能否将缓存load进来，解决的就是这个问题。如果在页面里面加这个东西，这种页面用户访问都会被缓存，当脱机浏览的时候，仍然可以把这个页面直接就从缓存里面把这个页面里拿出来，不需要这一次沟通，也能从缓存金把它拿出来，与刚才讲的有点区别，刚才必须询问服务器，确认缓存的和本地的是一样的，才能load进来，否则还是不能进行。现在不问，直接从缓存里面load它
manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分:
- CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存- NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存- FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面
(比如404页面)
CACHE MANIFEST
#2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5//404.html
manifest实际在本地有一个文件，在用户缓存里面有一个文件记录哪些东西是可以直接加载，把所有的内容分成了三个部分，拿出来的不一定是最新的，是本地缓存的，加载了一个页面，这个页面可能有很多的数据，希望这个数据缓存到客观，即使没有打开，网络连接不上，也能把它打开去看一下当时那些东西，
17.HTML 5-Server-sent Event
·HTML5服务器发送事件(server-sent event）允许网页获得来
自服务器的更新
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id=" result"sc/div>
<script>
if(typeofKEventSource) !=="undefined"")
{
var source=new EventSource( "" / example/html5/demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result"").innerHTML+=event.data + "br />";
};
}
else
{
document.getElementById("result"").innerHTML="抱歉，您的浏览器不支持 server-sent事件...";}
</script>
</body>
<html>
PHP代码(demo_sse.php):
<?php
header(Content-Type: text/event-strcam');
header(Cachc-Control: no-cache);
$time = date('r');
echo "data: The scrver time is: {$time}\n\n";
flush();
?>
18.HTML 5-Web Worker
·web worker是运行在后台的JavaScript，不会影响页面的性能
<!DOCTYPE html>
<html>
<body>
<p>计数:<output id="" result"></output></p>
<button onclick="startworker( )">开始worker</ button>
<button onclick="stopworker()">停止worker</button>
<br /><br />
script>
var w;
function startworker()
{
if(typeof(worker) !=="undefined")
{
If(typeof(w) ==" undefined"" )
{
w=new worker("" /example/ html5/demo_workers.js"");
w.onmessage = function (event){
document.getElementById("result"" ).innerHTML=event.data;
};
}
else
{
document.getElementById("result"").innerHTML="Sorry，your browserdoes not support web workers... "";
}
}
function stopworker()
{
w.terminate();
}
</script>
</body>
<html>
计数：12
开始Worker 停止Worker
支持在后台运行JavaScript，有一个计数，开始和停止两个按钮，两个按钮分别是在控制调用的方法，startWorker定义的w变量是不是在执行，有没有引用worker，一旦startWorker，要先new一个worker，在JavaScript支持后台运行，new一个worker对象，worker对象要告诉希望执行哪一个js脚本，w就会去执行，执行时有可能会得到这一个脚本在执行过程中返回的一些事件，只要这一个js执行完之后会返回来一个消息触发它，将result替换成返回的数据，在js里面有一个定时器，一旦定时到，会产生一个消息触发worker的onmessage方法，并且把事件传递，然将result替换成返回的值，不断的增加，如果不这样写，有一段脚本在那里，执行一秒钟之后更新一下这个值，然后不断的执行，相当于脚本一直不断的执行，并且当前这个页面里其他工作是没法执，在后台执行的意思是说，开一个东西在后台专门运行，运行结果收到后更新一下，运行结果出来之前可以做别的事情，如果不用这种方法，带来的一个问题是一旦点了开始，其他东西都点不动，鼠标不响应，在这里不断的刷，现在做的这件事情就专门到后台去，运行完之后告诉需要做什么，主线程还是在这里可以响应其他的动作，理解为将一个任务推到了后面去做，在这里一直做并且不影响我前面页面里的内容，不影响其他的脚本，这是一个比较好的特性，在后台执行，不会影响你整个页面的这个性能，包括去响应其他的按钮等等。
