学习完了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. HTML 学习笔记 JQuery（DOM 操作2）

    接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...

  2. iOS开发系列--Swift 3.0

    概述 从写第一篇Swift文章的时候到现在Swift已经从1.2发展到了今天的3.0,这期间由于Swift目前还在发展阶段并不能向下兼容,因此第一篇文章中的部分代码在当前的Xcode环境中已经无法运行 ...

  3. JavaScript动画知多少？

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  4. Visual Studio Code预览版Ver 0.3.0试用体验

    当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...

  5. [Intel Edison开发板] 04、Edison开发基于nodejs和redis的服务器搭建

    一.前言 intel-iot-examples-datastore 是Intel提供用于所有Edison开发板联网存储DEMO所需要的服务器工程.该工程是基于nodejs和redis写成的一个简单的工 ...

  6. VirtualBox 桥接上网方式的配置

    最近在搞Redis所以装了个virtualbox的ubuntu的虚拟机, redis不是在ubuntu上. 因为需要使用本机客户端访问redis服务,所以需要配置虚拟机和本地机器的双向访问,所以就用到 ...

  7. PHP扩展-如何使用文件config.m4

    config.m4文件用于指定正在开发的扩展在类unix系统下构建时支持的选项,指定此扩展需要哪些库以及哪些源文件:使用 GNU autoconf 语法编写.注意需要重新执行phpize,config ...

  8. Web中的XHRHttpRequest

    1.提出者:Jesse James Garrett   2.IE中,XHR是通过ActiveX对象实现的.涉及浏览器的兼容性写法.   3.使用 <1>open("请求方式&qu ...

  9. 如何修复Windows 10 Enterprise 在9月更新后图片全部由绘图板打开的情况

    在进行了本月更新日的洗礼之后,企业版的Windows 10 突然发现无法好好的进行图片查看. 因为更新之前,各种图片都是使用“照片程序”打开的(这个是photos app),然后更新之后,这个app就 ...

  10. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...