HTML5学习之路（电影影评网）

HTML5学习之路

首先了解一下HTML的特性：
1.良好的语义特性；增加了各种元素赋予网页更好的意义和结构，使文档更加清晰明确，新增的如header，article，nav,main,aside,footer等。
2.强大的绘图功能：HTML5之前的版本没有绘图功能，在网页只能显示已有的图片，在HTML5中可以通过CanvansAPI动态绘图，也可以通过SVG绘制可伸缩矢量图形。
3.增加音视频播放和控制功能；新增audio和video元素，可以不依赖插件播放音频和视频。
4.HTML5的数据存储和数据处理的功能：分为离线应用（当无法连接web服务器时，可以切换离线模式，当web连通后，可以进行数据同步），web通信（跨域通信的消息机制），本地存储（支持webSQL和IndexedDB等轻量级数据库）
5.获取地理位置信息（新增GeolocationAPI规范）
6.提高页面响应的多线程；通过Web Workers,降低web服务器的时间，增强了用户体验
7,方便用户处理文件和访问文件系统的API;

运用HTML5.制作了一个简单的电影影评网

以下是代码，可供参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>电影影评网</title>
</head>
<body><h1>电影影评网</h1><img src="./images/background.jpg"><ul id="nav"><li><img src="./images/nav1.jpg"></li><li><img src="./images/nav2.jpg"></li><li><img src="./images/nav3.jpg"></li><li><img src="./images/nav4.jpg"></li><li><img src="./images/nav5.jpg"></li></ul><ul id="detail"><li><details><summary><img src="./images/title1.png"></summary><p>《敢死队》<br>今天看了全天唯一一场原声的 <mark>《敢死队》</mark>。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的<mark>史泰龙</mark>64岁，岁数最小的<mark>杰森·斯坦森</mark>也有38岁，堪称老男人团。一帮纯爷们拍出的电影，当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。<mark>史泰龙</mark>全程曾哥附......</p><ul><li><img src="./images/film1.jpg"></li><li>大众评分：<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li><li>媒体评分：<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li><li>网站评分：<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li></ul></details></li><li><details><summary><img src="./images/title2.png"></summary><p>《赤焰战场》<br>这部电影的最大意义在于一群廉颇老矣的明星向观众做了一个集体性的道别。他们以后或许还会各自为战地奋斗在荧屏之上，但如此集中的出现在一部电影中就显得几乎不再可能。<mark>布鲁斯·威利斯</mark>已经56岁，<mark>海伦·米伦</mark>66岁，<mark>约翰·马尔科维奇</mark>58岁，<mark>摩根·弗里曼</mark>已经74岁，<mark>布莱恩·考克斯</mark>65岁。这些年纪已经超过或者年近花甲的曾经叱咤荧屏的人物正在渐渐地逝去，如同那一抹灿丽的......</p><ul><li><img src="./images/film2.jpg"></li><li>大众评分：<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li><li>媒体评分：<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li><li>网站评分：<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li></ul></details></li></ul>
</body>
<style type="text/css">h1{text-align: center;}img{width: 100%; height: 400px;}#nav{width: 100%; margin:0px 240px;}#nav li{ float: left; list-style: none;}ul li img{width: 160px; height: 80px; margin: 10px;}details summary img{ width: 500px; height: 30px;}#detail{ clear: both; list-style: none;}
</style>
</html>

总结：新学到了很多有用的标签，以details和summary为例，summary标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息,以前没有使用过，我觉得今后可以结合导航栏完成一些样式。

HTML5学习之路（电影影评网）相关推荐

使用HTML5制作电影影评网
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.html5介绍二.使用步骤 1.了解新增的几个属性和结构 2.读入数据 3.效果展示总结前言跨平台技术这 ...
有关如何用html制作电影影评网，初阶展示
在HTML中,无论是想用代码写出怎样的界面展示效果图,首先你都得分析其大体轮廓,再分部完善细节. 1.电影影评网分析 <!DOCTYPE html> <html> &l ...
jsp+ssm计算机毕业设计电影影评网【附源码】
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
[附源码]java毕业设计电影影评网
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
如何利用html制作电影影评网,HTML制作电影影评网 - 手册网
电影影评网电影影评网动作电影 <美人鱼> <美人鱼>是由周星驰执导,由江玉仪监制的喜剧爱情片, 邓超.罗志祥.张雨绮.林允等领衔出演[1].该片讲述了富豪刘轩和为了拯救同 ...
[附源码]计算机毕业设计JAVA电影影评网
[附源码]计算机毕业设计JAVA电影影评网项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Intelli ...
[附源码]SSM计算机毕业设计电影影评网JAVA
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
制作电影影评网的html5代码,微信小程序之电影影评小程序制作代码
本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下这是博主的项目包含的文件截图: 首先如图建立文件夹和page页面然后app.json页面更新代码如下: { &quo ...
html5学习之路_003
html布局使用<div>元素布局使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...

HTML5学习之路（电影影评网）

HTML5学习之路

HTML5学习之路（电影影评网）相关推荐

最新文章

热门文章