学习完了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. 在Linux和Windows平台上操作MemoryMappedFile(简称MMF)

    操作系统很早就开始使用内存映射文件(Memory Mapped File)来作为进程间的共享存储区,这是一种非常高效的进程通讯手段..NET 4.0新增加了一个System.IO. MemoryMap ...

  2. 浅谈SOA

    概念 wiki对于SOA定义如下: A service-oriented architecture (SOA) is a design pattern in which application com ...

  3. 简单事件机制Java实现

    一个很简单方便的事件处理方法. 使用效果 事件发布者: //定义事件 public static EventTrans<String> AuthFailed = new EventTran ...

  4. linux NFS 配置步骤

    转载 http://woxihuanpes.blog.163.com/blog/static/12423219820097139145238/ NFS server可以看作是一个FILE SERVER ...

  5. Atitit smb网络邻居原理与实现查询列表

    Atitit smb网络邻居原理与实现查询列表 1.1. SAMBA的起源1 1.2. Smb是否依赖unpn SSDP  ,还是使用扫描遍历0-255发现原理1 2. SMB共享不成功原因分享(WI ...

  6. 使用Red Gate Sql Data Compare 数据库同步工具进行SQL Server的两个数据库的数据比较、同步

    Sql Data Compare 是比较两个数据库的数据是否相同.生成同步sql的工具. 这一款工具由Red Gate公司出品,我们熟悉的.NET Reflector就是这个公司推出的,它的SQLTo ...

  7. setTimeout那些事儿

    一.setTimeout那些事儿之单线程 一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没——就是我们 ...

  8. ASP.NET Core 阶段性总结

    自从年前用 ASP.NET 5 磕磕绊绊重写了一个项目后 (2015.12),就没怎么关注 ASP.NET 5 相关内容了,为啥?因为实际应用问题太多,而且不是正式版本,变化实在太快,可能你今天了解的 ...

  9. 学习JVM--垃圾回收（一）原理

    1. 前言 Java和C++之间显著的一个区别就是对内存的管理.和C++把内存管理的权利赋予给开发人员的方式不同,Java拥有一套自动的内存回收系统(Garbage Collection,GC)简称G ...

  10. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...