HTML5 一个简单的影视网站练习_纯html5标签写的网页-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41425353/article/details/101180309

HTML5 一个简单的影视网站练习

关键技术：
1、注意这里实现一个可以下拉的导航（如图）：

这里使用不是js，而是使用了H5的文本标签：

和，这个标签必须要在谷歌浏览器下你才可以看的到。

2、使用了一个meter标签：

            ![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvNDg5NjIyLzE1NjkxNzAzNTQ5NTMtYTIxNjlmMzQtNmNlZi00NDRjLTljMDQtNjQ0OWM5MzNhZWM2LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=48&name=image.png&originHeight=96&originWidth=227&size=3666&status=done&width=113.5)

代码如下：具体的meter使用还需要去网上搜一下。

<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>

3、使用了一个可以编辑属性：contenteditable
使用举例：
正常效果：

添加效果：

预览效果：

在这里插入图片描述点击“科幻电影”下拉菜单效果.jpg

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>电影影评网站</title>
    </head>
    <body>
        <!--header begin-->
        <header>
            <h2 align="center">电影影评网</h2>
            <p align="center">
                <img src="../images/44.jpg">
            </p>
        </header>
        <!--header end-->

        <!--nav begin-->
        <nav>
            <p align="center">
                <img src="../images/nav1.jpg">
                <img src="../images/nav2.jpg">
                <img src="../images/nav3.jpg">
                <img src="../images/nav4.jpg">
                <img src=