HTML5学习之路（电影影评网）

最新推荐文章于 2023-03-08 00:01:40 发布

不做大多数

最新推荐文章于 2023-03-08 00:01:40 发布

阅读量6k

点赞数 19

分类专栏：个人学习文章标签： html css

本文链接：https://blog.csdn.net/qq_44023710/article/details/114843521

版权

个人学习专栏收录该内容

28 篇文章 2 订阅

订阅专栏

HTML5学习之路

首先了解一下HTML的特性：
1.良好的语义特性；增加了各种元素赋予网页更好的意义和结构，使文档更加清晰明确，新增的如header，article，nav,main,aside,footer等。
2.强大的绘图功能：HTML5之前的版本没有绘图功能，在网页只能显示已有的图片，在HTML5中可以通过CanvansAPI动态绘图，也可以通过SVG绘制可伸缩矢量图形。
3.增加音视频播放和控制功能；新增audio和video元素，可以不依赖插件播放音频和视频。
4.HTML5的数据存储和数据处理的功能：分为离线应用（当无法连接web服务器时，可以切换离线模式，当web连通后，可以进行数据同步），web通信（跨域通信的消息机制），本地存储（支持webSQL和IndexedDB等轻量级数据库）
5.获取地理位置信息（新增GeolocationAPI规范）
6.提高页面响应的多线程；通过Web Workers,降低web服务器的时间，增强了用户体验
7,方便用户处理文件和访问文件系统的API;

运用HTML5.制作了一个简单的电影影评网
在这里插入图片描述

以下是代码，可供参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影影评网</title>
</head>
<body>
    <h1>电影影评网</h1>
    <img src="./images/background.jpg">
    <ul id="nav">
        <li><img src="./images/nav1.jpg"></li>
        <li><img src="./images/nav2.jpg"></li>
        <li><img src="./images/nav3.jpg"></li>
        <li><img src="./images/nav4.jpg"></li>
        <li><img src="./images/nav5.jpg"></li>
    </ul>

    <ul id="detail">
        <li>
            <details>
                <summary><img src="./images/title1.png"></summary>
                <p>《敢死队》<br>
                    今天看了全天唯一一场原声的 <mark>《敢死队》</mark>。
                    有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的<mark>史泰龙</mark>64岁，岁数最小的<mark>杰森·斯坦森</mark>也有38岁，堪称老男人团。
                    一帮纯爷们拍出的电影，当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。
                    廉颇老矣，尚能饭否。当然是宝刀未老了。<mark>史泰龙</mark>全程曾哥附......</p>
                <ul>
                    <li><img src="./images/film1.jpg"></li>
                    <li>大众评分：<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li>
                    <li>媒体评分：<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li>
                    <li>网站评分：<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li>
                </ul>
            </details>
        </li>
        <li>
            <details>
                <summary><img src="./images/title2.png"></summary>
                <p>《赤焰战场》<br>
                    这部电影的最大意义在于一群廉颇老矣的明星向观众做了一个集体性的道别。
                    他们以后或许还会各自为战地奋斗在荧屏之上，但如此集中的出现在一部电影中就显得几乎不再可能。
                    <mark>布鲁斯·威利斯</mark>已经56岁，<mark>海伦·米伦</mark>66岁，<mark>约翰·马尔科维奇</mark>58岁，<mark>摩根·弗里曼</mark>已经74岁，<mark>布莱恩·考克斯</mark>65岁。
                    这些年纪已经超过或者年近花甲的曾经叱咤荧屏的人物正在渐渐地逝去，如同那一抹灿丽的......</p>
                <ul>
                    <li><img src="./images/film2.jpg"></li>
                    <li>大众评分：<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li>
                    <li>媒体评分：<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li>
                    <li>网站评分：<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li>
                </ul>
            </details>
        </li>
    </ul>
</body>
<style type="text/css">
  h1{text-align: center;}
  img{width: 100%; height: 400px;}
  #nav{width: 100%; margin:0px 240px;}
  #nav li{ float: left; list-style: none;}
  ul li img{width: 160px; height: 80px; margin: 10px;}
  details summary img{ width: 500px; height: 30px;}
  #detail{ clear: both; list-style: none;}
</style>
</html>

总结：新学到了很多有用的标签，以details和summary为例，summary标签包含 details 元素的标题，“details” 元素用于描述有关文档或文档片段的详细信息,以前没有使用过，我觉得今后可以结合导航栏完成一些样式。

不做大多数

关注

19
点赞
踩
42

收藏

觉得还不错? 一键收藏
2
评论
HTML5学习之路（电影影评网）

HTML5学习之路首先了解一下HTML的特性：1.良好的语义特性；增加了各种元素赋予网页更好的意义和结构，使文档更加清晰明确，新增的如header，article，nav,main,aside,footer等。2.强大的绘图功能：HTML5之前的版本没有绘图功能，在网页只能显示已有的图片，在HTML5中可以通过CanvansAPI动态绘图，也可以通过SVG绘制可伸缩矢量图形。3.增加音视频播放和控制功能；新增audio和video元素，可以不依赖插件播放音频和视频。4.HTML5的数据存储和数据处
复制链接

扫一扫