学习完了HTML5的新标签，然后结合之前的案例做了第一个小案例。自我感觉良好。下面我来展示一下图片

这是我浏览其他网站的时候以为发现的新功能可以运行代码，这是运行之后截得图片。自我感觉照片还是蛮高大上的。如果以后博客园也有运行代码的功能就好了。

下面是我的代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>电影影评网</title>

    </head>

    <body>

        <header >

            <h2 align="center">电影影评网</h2>

            <p align="center">

                <img width="80%" src="img/header.jpg" />

            </p>

        </header>

        <nav>

            <p width="80%" align="center">

                <img width="15%" height="200" src="img/01.jpg" />

                <img width="15%" height="200" src="img/02.jpg" />

                <img width="15%" height="200" src="img/03.jpg" />

                <img width="15%" height="200" src="img/05.jpg" />

                <img width="15%" height="200" src="img/06.jpg" />

            </p>

        </nav>

        <article align="center">

            <details >

                <summary >动作电影</summary>

                <ul align="left" contenteditable="true">

                    <li>

                        <figcaption>《美人鱼》</figcaption>

                        <p >《美人鱼》是由<mark>周星驰</mark>执导，由江玉仪监制的喜剧爱情片，

                            <mark>邓超、罗志祥、张雨绮、林允</mark>等领衔出演[1].该片讲述

                            了富豪刘轩和为了拯救同族前往刺杀他的美人鱼珊珊坠入

                            爱河，谱写了一段人鱼爱情童话的故事。</p>

                            <img src="img/movie01.jpg" />

                    </li>

                    <li>

                        大众评分：<meter value="65" min="0" max="100" low="60" high="80"

                                title="65分" optimum="100">65</meter>

                    </li>

                    <li>

                        媒体评分：<meter value="80" min="0" max="100" low="60" high="80"

                                title="80分" optimum="100">80</meter>

                    </li>

                    <li>

                        网站评分：<meter value="70" min="0" max="100" low="60" high="80"

                                title="70分" optimum="100">70</meter>

                    </li>

                </ul>

                <hr size="3" color="#ccc" />

                <ul align="left" contenteditable="true">

                    <li>

                        <figcaption>《陆垚知马俐》</figcaption>

                        <p>《陆垚知马俐》是由<mark>文章</mark>，<mark>陈可辛</mark>监制，

                            <mark>包贝尔、宋佳、朱亚文、焦俊艳</mark>主演的爱情喜剧电影。

                            影片讲述了陆垚在上大学时重逢幼儿园同学马俐，

                            虽然彼此心存好感，但由于陆垚有严重的“表白障碍症”，

                            只能眼巴巴看着自己的女神马俐与别人谈恋爱。

                            而自此之后很多年，陆垚只能以朋友的名义爱着马俐，

                            也与她开始了一段“友情不甘、恋人不敢”的长跑。</p>

                            <img src="img/movie02.jpg" />

                    </li>

                    <li>

                        大众评分：<meter value="75" min="0" max="100" low="60" high="80"

                                title="75分" optimum="100">75</meter>

                    </li>

                    <li>

                        媒体评分：<meter value="90" min="0" max="100" low="60" high="80"

                                title="90分" optimum="100">90</meter>

                    </li>

                    <li>

                        网站评分：<meter value="70" min="0" max="100" low="60" high="80"

                                title="70分" optimum="100">70</meter>

                    </li>

                </ul>

            </details>

        </article>

    </body>

</html>

运行代码

HTML5-电影影评网的更多相关文章

  1. 爬取豆瓣电影影评，生成wordcloud词云，并利用监督学习根据评论自动打星

    本文的完整源码在git位置:https://github.com/OceanBBBBbb/douban-ml 爬取豆瓣影评 爬豆瓣的影评比较简单,豆瓣没有做限制,甚至你都不用登陆就可以看全部,我这里用 ...

  2. 【电影影评】梦之安魂曲-败给了BGM和豆瓣影评

    首先,这部电影豆瓣8.7分,一般来说,豆瓣的打分是比较准确的.能反映一个片子的质量,而较少受到环境的影响.但是这种关系当然也不全对,比如某些片子可能特别让某一种人喜欢(如退役军人和军旅题材),而在某些 ...

  3. python爬取（自动化）豆瓣电影影评，并存储。

    from selenium import webdriverfrom selenium.webdriver import ActionChainsimport time driver = webdri ...

  4. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  5. 影评网站Alpha版本-测试与发布

    影评网站Alpha版本-测试与发布 项目发布地址: http://120.78.161.21:8080/zhiying/ (建议使用Chrome或火狐浏览器打开,其他浏览器可能加载失败 一.Alpha ...

  6. HTML最新标准HTML5小结

    写在前面 HTML5出来已经很久了,然而由于本人不是专业搞前端的,只知道有这个东西,具体概念有点模糊(其实就是一系列标准规范啦):因此去年(2015.11.09),专门对HTML5做了个简单的小结,今 ...

  7. 分享：在微信公众平台做HTML5游戏经验谈(转载与http://software.intel.com/zh-cn/blogs/2013/04/03/html5)

    分享:在微信公众平台做HTML5游戏经验谈 Dawei Cheng 程大伟... 于 星期三, 03/04/2013 - 03:19 提交 最近微信公众游戏平台讨论得如火如荼,大有HTML5游戏即将引 ...

  8. 批量上传插件(flash,html5,jquery)

    1.jQuery File Upload 官网:http://blueimp.github.com/jQuery-File-Upload/ 在线示例:http://blueimp.github.com ...

  9. 找电影资源最强攻略，知道这些你就牛B了！

    找电影资源最强攻略,知道这些你就牛B了! 电影工厂 2015-07-01 · 分享   点击题目下方环球电影,关注中国顶尖电影微杂志 我们也许没有机会去走遍千山万水,却可以通过电影进入各种各样的角色来 ...

随机推荐

  1. 微信小程序新单位rpx与自适应布局

    rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...

  2. ucos实时操作系统学习笔记——任务间通信（互斥锁）

    想讲一下ucos任务间通信中的mutex,感觉其设计挺巧妙,同sem一样使用的是event机制实现的,代码不每一行都分析,因为讲的没邵贝贝老师清楚,主要讲一下mutex的内核是如何实现的.可以理解互斥 ...

  3. 让 Ubuntu 桌面自动更换壁纸

    引言 让我们的桌面系统自动更换壁纸是一个很常见的美化需求,而且确实也存在着不少这方面的小软件可以实现这个功能.事实上,在基于 Gnome 的桌面系统中,我们可以不需要借助任何第三方软件的帮助来让我们的 ...

  4. 菜鸟学Struts2——HelloWorld

    写在前面 自从工作后就过上了只有一个月记忆的生活,太健忘,很多学过的东西因为用得少便忘记了,第二次学习struts,为了以后便于查阅,开始自己的博客之旅.Struts的学习还是从Hello World ...

  5. node之path模块

    node之path模块 原文链接 //引用该模块 var path = require("path"); 1.路径解析,得到规范化的路径格式 对window系统,目录分隔为'', ...

  6. MongoDB学习笔记~数据模型属性为集合时应该为它初始化

    回到目录 今天要说一下技术点,我们在设计mongodb的数据模型时,如果属性是数组或者集合类型,我们在模型初始化时,需要为它们初始化一下,否则在数据库里将会被存储为NULL,当被存储为NULL时,我们 ...

  7. linux安装mvn后提示权限不够

    Maven - 环境配置 Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求 项目 要求 JDK Maven 3.3 要求 JDK 1.7 或以上Maven 3 ...

  8. String... 用法

    今天看到一个没见过的函数参数列表test(int... a),查看资料,原来是如下用法:类型后面三个点(String...),是从Java 5开始,Java语言对方法参数支持一种新写法,叫可变长度参数 ...

  9. 【Win 10应用开发】延迟共享

    延迟共享是啥呢,这么说吧,就是在应用程序打开共享面板选择共享目标时,不会设置要共享的数据,而是等到共享目标请求数据时,才会发送数据,而且,延迟操作可以在后台进行. 这样说似乎过于抽象,最好的诠释方法, ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（62）-EF链接串加密

    系列目录 前言: 这一节提供一个简单的功能,这个功能看似简单,找了一下没找到EF链接数据库串的加密帮助文档,只能自己写了,这样也更加符合自己的加密要求 有时候我们发布程序为了避免程序外的SQL链接串明 ...