学习完了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. [异常特工]android常见bug跟踪

    前言 对app的线上bug的收集(友盟.云捕等)有时会得到这样的异常堆栈信息:没有一行代码是有关自身程序代码的.这使得对bug的解决无从下手,根据经验,内存不足OOM,Dialog关闭,ListVie ...

  2. 使用C#给Linux写Shell脚本

    在这个逼格决定人格,鄙视链盛行的年头,尤其是咱们IT界,请问您今天鄙视与被鄙视的次数分别是多少?如果手中没有一点压箱的本事,那就只有看的份了.今天我们也要提升下自己的格调,学习些脑洞大开的东西,学完之 ...

  3. 使用LogMaster4Net实现应用程序日志的集中管理

    日志在软件系统中的重要性我在此也不赘述了,几乎所有程序员每天都会更日志打交道. 那么你是否曾今为这样的一些事情而困扰过: - 远程登录到不同的服务器,找到应用程序目然后查看应用日志: - 来回切换于不 ...

  4. C#开发中使用配置文件对象简化配置的本地保存

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  5. [DeviceOne开发]-土地销售项目源码分享

    一.简介 这个是一个真实项目开源,虽然不是很花哨,但是中规中矩,小细节处理的也很好,非常值得参考和借鉴.里面的数据都缓存到本地,可以离线运行,但是调整一下代码,马上就可以和服务端完全对接.后续会有详细 ...

  6. ECMAScript 6 扫盲

    ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中 ...

  7. 【Java并发编程实战】----- AQS(三)：阻塞、唤醒：LockSupport

    在上篇博客([Java并发编程实战]----- AQS(二):获取锁.释放锁)中提到,当一个线程加入到CLH队列中时,如果不是头节点是需要判断该节点是否需要挂起:在释放锁后,需要唤醒该线程的继任节点 ...

  8. TODO：Golang语言TCP/UDP协议重用地址端口

    TODO:Golang语言TCP/UDP协议重用地址端口 这是一个简单的包来解决重用地址的问题. go net包(据我所知)不允许设置套接字选项. 这在尝试进行TCP NAT时尤其成问题,其需要在同一 ...

  9. javascript中的浮点数运算

    解释一下下面代码的输出 console.log(0.1 + 0.2); //0.30000000000000004 console.log(0.1 + 0.2 == 0.3); //false Jav ...

  10. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...