不赞成使用。
定义预格式文本。
基础
标签
描述
DOCTYPE>
定义文档类型。
定义HTML文档。
定义文档的标题。
定义文档的主体。
to
定义HTML标题。
定义段落。
定义简单的折行。
定义水平线。
--...-->
定义注释。
音频/视频
标签
描述
定义声音内容。
定义媒介源。
定义用在媒体播放器中的文本轨道。
定义视频。
(三)Bootstrap
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
漂亮的Web页面不仅要求掌握CSS,同时还需要有足够的美感,对我等没有艺术细胞的开发者而言,2011年8月20日Bootstrap的出现以及开源就迎来了春天!
(四)AngularJS是什么
AngularJS是一款由Google维护的开源JavaScript库,为开发单一页面Web应用(CRUD)而生的。
它的目标是增强基于浏览器的应用,并带有MVC模式功能,这为了使得开发和测试变得更加容易。
函式库读取包含附加自定义的HTML,遵从这些自定义属性中的指令,并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。
这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。
二.实验过程及分析
(一)Index.Html小主题大世界
整体结构:
相应的代码:
DOCTYPEhtml>
HTML5
小主题*大世界
Justatthepoint
震撼90后
导航
Google
XX
打喷嚏
小小箴言
- 当一个人只为维持生计而思维的时候,他的思想就难以高尚。
——卢梭
- 衣不如新,人不如旧
- 井蛙不可语天,夏虫不可语冰
- 有党性,没人性
相关链接:
这就是生活!
1.不想解决人民提出的问题,老想解决提出问题的人民。
2.要不是美领馆按pm2.5标准向外公布空气检测结果,我们肯定还生活在“现在播报新闻,冬季来临,全国大部地区全天有大雾,空气质量良”的世界里。
3.某男问大师:
“大师,我女朋友虽有优点,但缺点让我难以忍受,怎样才能让她只有优点没有缺点呢?
”大师笑答:
“方法很简单,不过若要我教你,你得先下山为我找一张只有正面没反面的纸回来。
”该男略一沉吟下山而去,很快又上山来,递给大师一张“人民日报”。
大师看后,从此遁入空门,不再过问世事。
4.人民对领导人情感的强烈程度,往往与领导人的牛逼程度无关,而是与人民的傻逼程度及国家的封闭程度成正比!
相关链接:
英语点点
agony痛苦——爱过你;pregnant怀孕——扑来个男的;ambulance救护车——俺不能死;ponderous肥胖的——胖的要死;pest害虫——拍死它;ambition雄心——俺必胜;bale灾祸——背噢;admire羡慕——额的妈呀
Therearealwaysways
其对应的css设计:
相应的csss代码
body{
background-color:
#48a7cc;
font-family:
"MicrosoftYahei","SimHei";
margin:
0auto;
max-width:
900px;
border:
solid#f4f1ec;
}
header{
background:
#455af4;
display:
block;
color:
#FFFFFF;
text-align:
center;
}
headerh2{
margin:
0;
}
h1{
font:
72px;
margin:
0;
}
h2{
font:
24px;
margin:
0;
text-al:
center;
/*color:
#F47D31;*/
}
h3{
font:
18px;
margin:
0;
text-align:
center;
color:
#88f4da;
}
h4{
color:
#3536ff;
background-color:
#FFFFFF;
-webkit-box-shadow:
2px2px20px#888;
-webkit-transform:
rotate(-45deg);
-moz-box-shadow:
2px2px20px#888;
-moz-transform:
rotate(-45deg);
position:
absolute;
padding:
0150px;
top:
50px;
left:
-120px;
text-align:
center;
}
nav{
display:
block;
width:
25%;
float:
left;
}
nava:
link,nava:
visited{
display:
block;
color:
#88f4da;
border-bottom:
1pxsolid#FFFFFF;
padding:
10px;
text-decoration:
none;
font-weight:
bold;
margin:
5px;
}
nava:
hover{
color:
#b6abff;
background-color:
#455af4;
}
navh3{
margin:
15px;
color:
white;
}
#container{
background-color:
#888888;
}
section{
display:
block;
width:
100%;
float:
left;
}
article{
background:
#eee;
display:
block;
margin:
10px;
padding:
10px;
/*
-webkit-border-radius:
10px;
-moz-border-radius:
10px;
*/
border-radius:
10px;
/*-webkit-box-shadow:
2px2px20px#888;*/
/*-webkit-transform:
rotate(10deg);*/
/*-moz-box-shadow:
2px2px20px#888;*/
/*-moz-transform:
rotate(-10deg);*/
transform:
rotate(0deg);
box-shadow:
2px2px20px#888;
}
articleheader{
border-radius:
10px;
padding:
5px;
}
articlefooter{
border-radius:
10px;
padding:
5px;
}
articleh1{
font:
18px;
}
aside{
display:
block;
width:
25%;
float:
left;
}
asideh3{
margin:
15px;
color:
white;
}
asidep{
margin:
15px;
color:
white;
font-weight:
bold;
font-style:
italic;
}
footer{
clear:
both;
display:
block;
background:
#455af4;
color:
#FFFFFF;
text-align:
center;
padding:
15px;
}
footerh2{
font:
14px;
color:
white;
}
进行CSS重置:
{
margin:
0;
padding:
0;
}
告诉浏览器渲染html5元素块:
header,footer,aside,nav,article{
display:
block;
}
主体body的宽度被定义为940px,集中。
我们的导航栏需要跨越整个窗口的宽度,所以我们必须应用一些额外的样式
nav{
position:
absolute;
left:
0;
width:
100%;
background:
url("nav_background");
}
使它左边的窗口,使其跨越整个宽度。
我们将中心嵌套列表中显示它的边界布局:
navul{
margin:
0auto;
width:
940px;
list-style:
none;
}
现在我们将定义一些额外的风格使导航项目看起来更漂亮和网格布局更加对齐。
我也包括页面风格突出用户,subscription-link和一些自定义样式。
navulli{
float:
left;
}
navullia{
display:
block;
margin-right:
20px;
width:
140px;
font-size:
14px;
line-height:
44px;
text-align:
center;
text-decoration:
none;
color:
#777;
}
navullia:
hover{
color:
#fff;
}
navulli.selecteda{
color:
#fff;
}
navulli.subscribea{
margin-left:
22px;
padding-left:
33px;
text-align:
left;
background:
url("rss.png")leftcenterno-repeat;
}
在css中有颜色记忆功能,便于查找颜色。
页面结果:
(二)酷我视界.html设计
酷我视界代码如下
doctypehtml>
酷我
酷我视界