1.采用HTML5和CSS3多列设计一个简易的HTML5页面，效果如下图所示，具体要求如下：
（1）整个页面采用article标记框架
（2）使用 header figure figcaption footer hgroup 等标记来进行页面布局
（3）标题采用CSS文本阴影
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>实验11练习1</title> <style type="text/css"> h1,h3{ text-align: center; } h1{ text-shadow: 2px 2px 8px #fa3838; background: #6699FF; color:white; margin:10px auto; height:46px; } p{ text-indent:2em; column-count:4; column-gap:50px; column-rule:4px outset #ffabab; } </style> </head> <body> <article style="margin:20px auto;width:850px;heigth:500px;background:#eeeeee;padding:30px;"> <header> <hgroup> <h1>提前探班：HUAWEI CONNECT 2016大透析</h1> <h3>为什么华为要自主办HUAWEI CONNECT旗舰大会？</h3> <figure style="text-align:center;"> <img src="hdxc2.jpg" width="450" border="0" alt=""><br> <figcaption>▲总裁</figcaption> <p> 徐文伟在采访中把HC2016大会的举办归结于华为历史的发展，他表示：“华为发展的过程，我认为可以分 为三个阶段。第一个阶段，华为主要参加行业组织和外部机构举办的活动。比如每年的巴展、CeBIT和 interop等等。第二个阶段，随着公司的发展，华为除了在继续参与这些活动之外，也开始自行组织一 些有特定主题、面向特定受众的活动。比如HCC(华为云计算大会)、HNC(华为网络大会)、HDC(华为 开发者大会)等。第三个阶段，华为开始筹划组织HUAWEI CONNECT这样的旗舰大会。华为希望通过 构筑平台开放能力，最终释放整个ICT产业的生产力、推进社会进步。<br /> 关于本次大会的定位，徐文伟也表示："华为认为作为一场旗舰大会应该拥有行业最前沿的内容，能吸 引各类型、各层级的行业领袖和精英参会，成为企业高层商业与战略的交流平台。”<br /> 同时，徐文伟指出：“在这次HUAWEI CONNECT全联接大会上，华为将系统阐述华为业务战略方向、 关键举措和实践，分享行业最前瞻的洞察，为行业领袖和精英提供一个商业与战略对话平台，全方位 构建华为的行业领导力。华为将这次大会打造成一次生态大会，与客户、合作伙伴、产业组织、开发 者共同引领并推动产业发展，发布创新领先的ICT产品与解决方案。” </p> </figure> </hgroup> </header> <footer> <h3> <strong> 标签：华为 ,云计算 it168网站原创 ©2016-08-26 </strong> </h3> </footer> </article> </body> </html>
2.设置页面效果如下的CSS3动画应用。100px *100px的div沿300px*300px的进行沿矩形边框运动，边运动边改变背景颜色，从红色到蓝色过渡。
设置三个场景切换：初始状态为红色背景，中间状态为绿色背景，最后状态为蓝色背景。同时考虑到不同浏览器的兼容性，增加针对不同浏览器编写的样式效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> CSS3动画的应用 </title> <style> div{ width:100px; height:100px; background:red; position:relative; color:white; animation:mymove 5s; -moz-animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; -o-animation:mymove 5s infinite; } @keyframes mymove { from,0% { left:0px; background:red; top:0px; } 50% { left:0px; background:green; top:100px; } to,100%{ left:0px; background:blue; top:200px; } } @-webkit-keyframes mymove /* Safari 与 Chrome */ { from,0% { left:0px; background:red; top:0px; } 50%{ left:0px; background:green; top:100px; } to,100%{ left:0px; background:blue; top:200px; } } @-moz-keyframes mymove /* Firefox */ { from,0% { left:0px; background:red; top:0px; } 50% { left:0px; background:green; top:100px; } to,100%{ left:0px; background:blue; top:200px; } } @-o-keyframes mymove /* Opera */ { from,0%{ left:0px; background:red; top:0px; } 50%{ left:0px; background:green; top:100px; } to,100%{ left:0px; background:blue; top:200px; } } </style> </head> <body> <h3> CSS3动画-沿矩形边框运动 </h3><hr> <div> 我去了！ </div> </body> </html>
3.编写JavaScrip程序实现“九九乘法口诀”表，如下图所示。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> javascript九九乘法表 </title> </head> <body> <script type="text/javascript"> for (var i = 1; i <= 9; i++) { var row = ""; for (var j = 1; j <= i; j++) { row += j + "*" + i + "=" + (i * j+" "); } document.write(row+"<br/>"); } </script> </body> </html>
4.编写JavaScrip代码，找出符合条件的数。如下图所示
（1）页面标题为：“找出符合条件的数”；
（2）页面内容：3号标题标记显示“找出1000~9999之间能够被17和13同时整除的整数的个数及累加和”，要求输出区间累计有多少个符合条件的整数，并计算符合条件的整数的累加和，同时输出符合条件的整数，输出格式：每行10个整数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>找出符合条件的数</title> </head> <body> <h3> 找出1000~9999之间能够被17和13同时整除的整数的个数及累加和 </h3> <script type="text/javascript"> var flag = 10; var count = 0; var sum = 0; document.write("区间中符合条件的数有(输出格式：10个1行):"+'<br/>'); for(var i = 1000 ; i <= 9999 ; i++){ if(i == 0 && i == 0){ document.write(i+'\t'); count++; sum += i; flag--; if(flag==0){ document.write('<br/>'); flag = 10; } } } document.write('<br/>'); document.write("区间中符合条件的数共有"+count+"个"); document.write('<br/>'); document.write("区间中符合条件的数的累加和为"+sum); </script> </body> </html>
记点笔记
使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：
HTML 4.01：meta http-equiv=“content-type” content=“text/html; charset=UTF-8”
HTML5： meta charset=“UTF-8”
http-equiv=“Content-Type”：http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部.
content=text/html：text/html是一种标准的文件类型映射说明，可以叫MIME，是所有平台通行的。text/html之外还有text/css、text/javascript、application/vnd.ms-excel等等。浏览器是通过Content-Type这个标记来了解文件类型的，而不是后缀名。说明这是个html文件
text-shadow 为文字添加阴影
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。实例:
margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
所有四个边距都是 10px
注意： 负值是允许的。
text-indent 属性规定文本块中首行文本的缩进。
把div元素中的文本划分成三列：
div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
column-gap指定列之间的的间隙
指定列之间的规则：宽度，样式和颜色：
div
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
}
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<hgroup> <figure>等标签是 HTML 5 中的新标签。
当标题有多个层级（副标题）时，<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 标签为 <figure> 元素定义标题，应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
语法animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
使用@keyframes规则，可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，和0％到100％相同。
0％是开头动画，100％是当动画完成。
“ ”和“\t”，即空格和“\t”的区别
\t是补全当前字符串长度到8的整数倍，最少1个最多8个空格
补多少要看你\t前字符串长度
比如当前字符串长度10，那么\t后长度是16，也就是补6个空格
如果当前字符串长度12，此时\t后长度是16，补4个空格
<br> 标签插入一个简单的换行符。在 HTML 中，<br> 标签没有结束标签。在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br />
