学习完了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. 机器指令翻译成 JavaScript —— No.3 流程分割

    上一篇 我们讨论了跳转指令,并实现「正跳转」的翻译,但最终困在「负跳转」上.而且,由于线程模型的差异,我们不能 1:1 的翻译,必须对流程进行一些改造. 当初之所以选择翻译,而不是模拟,就是出于性能考 ...

  2. 一年之计在于春，2015开篇：PDF.NET SOD Ver 5.1完全开源

    前言: 自从我2014年下半年到现在的某电商公司工作后,工作太忙,一直没有写过一篇博客,甚至连14年股票市场的牛市都错过了,现在马上要过年了,而今天又是立春节气,如果再不动手,那么明年这个无春的年,也 ...

  3. 基于 SailingEase WinForm Framework 开发优秀的客户端应用程序（目录）

    本系统文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以  SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...

  4. 解决CSharpGL使用CGCompiler时发现的几个问题

    解决CSharpGL使用CGCompiler时发现的几个问题 为了获取CSharpShadingLanguage的token流,我设计了这样一个文法: <Expression> ::= & ...

  5. 有意思的记录-Java

    1.文件读取 项目外的绝对路径或相对路径文件读取 String path = "/xx/xx.txt"; BufferedReader reader = new BufferedR ...

  6. 复化梯形求积分——用Python进行数值计算

    用程序来求积分的方法有很多,这篇文章主要是有关牛顿-科特斯公式. 学过插值算法的同学最容易想到的就是用插值函数代替被积分函数来求积分,但实际上在大部分场景下这是行不通的. 插值函数一般是一个不超过n次 ...

  7. C#中，双屏/两屏/三屏/多屏跳转判断

    之前伤脑筋写过一次在Web中,JS,ActiveXObject去读取显示器数量.分辨率去判断单双屏跳转. 那么在客户端中,用C#去读取硬件信息,更方便更容易! 思路参考代码: ) { //此显示器是否 ...

  8. APUE中fcntl.h的使用及O_SYNC在Mac与Ubuntu下的测试

    此部分测试涉及到APUE V3中,第三章的图3-12到图3-14. 通过fcntl.h提供的功能,修改fd的文件属性,本处增加O_SYNC功能,并测试其效果. 本文涉及代码: tree ch3 ch3 ...

  9. 未关闭InputStream 引起的血案

    下面的方法是从aws s3 读取文件对象下载到本地 public int downloadFile(HttpServletResponse httpResponse, String storePath ...

  10. EntityFramework linq 多条件查询，不定条件查询

    一.场景描述: 开发的时候,有些查询功能,往往查询的条件是不确定的,用户没有填的不参与到查询中去. 如图1所示,用户可能只要给根据名称来查询即可,有时候开始时间和结束时间并不需要填写. 图 1 二.解 ...