有关如何用html制作电影影评网，初阶展示
在HTML中，无论是想用代码写出怎样的界面展示效果图，首先你都得分析其大体轮廓，再分部完善细节。
1、电影影评网分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影影评网</title>
</head>
<body>
<h1>书本例子</h1>
<h2>制作电影影评网</h2>
<h3>分析效果图：</h3>
<br />此网页可分为3个部分
<dl>
<dt>头部</dt>
<dd>头部信息通过header元素定义，内部由img/标记插入图像</dd>
<dt>导航</dt>
<dd>导航链接由nav元素定义内部嵌套无序列表ul</dd>
<dt>内容</dt>
<dd>文章内容有article元素定义，内部由details元素进行划分，其中动作电影、科幻电影部分均为插入的图像，
<br />由details元素内部的summary元素定义，以实现单机这2张图像时，分别显示details元素内部的其他内容。
<br />页面的评分进度条效果由meter元素来实现</dd>
</dl>
</body>
</html>
2、电影影评网框架结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--header begin-->
<header></header>
<!--header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容，该元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站LOGO图像、搜索表单或者其他相关内容-->
<!--header end-->
<p>nav元素可以用于以下几种场合：
<ol>
<li>传统导航栏：作用是跳转至网站的其他页面</li>
<li>侧边栏导航：目的是从当前文章或当前商品页面跳转到其他文章或其他商品页面</li>
<li>页内导航：作用是在本页面几个主要的组成部分之间进行跳转</li>
<li>翻页操作：切换的是网页的内容部分，可以通过单击”上一页”切换，也可以通过单击实际页数跳转至某一页</li>
</ol></p>
<!--nav begin-->
<nav></nav>
<!--nav元素用于定义导航链接，相当于word目录,其中常用列表元素ul、ol、dl-->
<!--nav end-->
<!--article begin-->
<article></article>
<p>article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。
<br />该元素通常使用多个section元素进行划分，一个页面文件中article元素可以出现多次</p>
<ul>
<h5>section元素注意事项：</h5>
<li>不要将该元素用作设置样式的页面容器，那是div的特性。（div布局）</li>
<li>如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素</li>
<li>没有标题的内容区块不要使用section元素定义</li>
</ul>
<!--article end-->
</body>
</html>
3、html书本中第二章知识摘腾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5的元素及属性</title>
</head>
<body>
<h1>列表元素</h1>
<h2>无序列表</h2>
<h3>ul元素</h3>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
<li>在HTML5中不再支持ul元素的type属性</li>
<li>ul之间必须镶嵌li之后才能输入文本内容</li>
</ul>
<h2>有序列表</h2>
<h3>ol元素</h3>
<ol>
<li>ol的属性有start和reversed</li>
<li>start属性可以更改列表编号的起始值</li>
<ol start="8">
<li>start属性展示</li>
</ol>
<li>reversed属性表示是否对列表进行反向排序，默认值为ture</li>
例子：<ol start="8" reversed>
<li>《没有工作的一年》</li>
<li>《亲爱的小孩》</li>
</ol>
</ol>
<h2>定义列表</h2>
<h3>dl元素</h3>
<dl>
<dt>dl元素的作用</dt>
<dd>dl标记用于指定定义列表</dd>
<dt>dt元素</dt>
<dd>镶嵌在dl中用于指定术语名词</dd>
<dt>dd元素</dt>
<dd>镶嵌在dl中，dt下，用于对名词进行解释和描述</dd>
</dl>
<h1>结构元素</h1>
<h4>header、nav、article、aside、section、footer元素</h4>
<h1>分组元素</h1>
<h4>figure、figcaption、hgroup元素</h4>
<h1>页面交互元素</h1>
<h4>details、summary、progress、meter元素</h4>
<h1>文本层次语义元素</h1>
<h4>time、mark、cite元素</h4>
<h1>全局属性</h1>
<h4>
<dl>
<dt>draggable属性</dt>
<dd>定义元素是否可以拖动，该属性有2个值：true和false,默认为false（不可拖动）</dd>
<!--网页中如果想真正实现拖动功能，必须与javascript结合使用-->
<dt>列如：</dt>
<dd><article draggable="true"><img src="img/自己制作的书签.png" width="280px" height="100px"/>图片可拖动</article></dd>
<dt>spellcheck属性</dt>
<dd>主要针对input元素和textarea文本输入框进行设置，对用户输入的文本内容进行拼写和语法检查</dd>
<dt>列如：</dt>
<dd>
<p>spellcheck属性值为true</p>
<textarea spellcheck="true">HTML15</textarea>
</dd>
<dt>contenteditable属性</dt>
<dd>规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标指针焦点并且其内容不是只读的</dd>
<dt>列如：</dt>
<dd>
<ul contenteditable="true">
<li>该属性使用在ul元素中</li>
<li>春江花月夜</li>
<li>此文本中的内容可进行删除修改</li>
</ul>
</dd>
</dl>
</h4>
</body>
</html>
4、章末作业电影影评网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h2 align="center">电影影评网</h2>
<p align="center">
<img src="img/封面.jpg">
</p>
</header>
<nav>
<p align="center">
<img src="img/5.jpg" width="80px" height="150px">
<img src="img/1.jpg" width="180px" height="150px">
<img src="img/2.jpg" width="100px" height="150px">
<img src="img/3.jpg" width="150px" height="150px">
<img src="img/4.jpg" width="80px" height="150px">
</p>
</nav>
<article>
<details><!--描述文档或文档某个部分的细节,summary元素经常与details元素配合使用，作为该元素的第一个子元素-->
<summary><img src="img/1.jpg"></summary>
<ul contenteditable="true"><!-- contenteditable可编辑文本内容-->
<li>
<figcaption>《辣目洋子——大雨》</figcaption><!--分组元素，为元素组添加标题-->
<p>何雨(大雨)，原名是叫何花，她今年32岁，毕业后就一直在一家公司，她是金牌销售top1，高端客户一兜揽，人称拼命三娘，穿搭小能手，也是恋爱长跑冠军，人称拼命三娘，事业和爱情，她更倾向于自己的事业，但是男友不知不觉中被撬走了。
<br />基本资料辣目洋子，中国内地女演员，1995年8月24日出生于内蒙古自治区通辽市。参演电影《胖子行动队》。2018年参加腾讯视频《超新星全运会》。电影《胖子行动队》介绍该剧为喜剧、都市题材，由尹琪导演执导，尹琪担任编剧，孙艺洲在剧中饰演江上饮，</p>
<img src="img/2.jpg"/>
</li>
<li></li>
<li>
大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">90</meter><!--meter用于指定范围内的数值-->
</li>
<li>
媒体评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">80</meter>
</li>
<li>
网站评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">90</meter>
</li>
</ul>
<hr size="3" color="#ccc">
<ul contenteditable="true">
<li>
<figcaption>《万鹏——小雨》</figcaption><!--分组元素，为元素组添加标题-->
<p>万鹏饰演的小何雨，都市失业青年，却能乐观处世，在大何雨被渣男前任和绿茶小三欺负的时候，挺身而出，拔刀相助，上去就给小三一巴掌，还带着女主去梦寐以求的乌镇散心玩乐。
<br />万鹏，1996年8月20日出生于北京市，中国内地女演员，毕业于北京舞蹈学院 。 2018年，万鹏出演个人首部作品《 人不彪悍枉少年 》，并由此开始演艺之路。</p>
<img src="img/5.jpg"/>
</li>
<li></li>
<li>
大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">90</meter><!--meter用于指定范围内的数值-->
</li>
<li>
媒体评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">80</meter>
</li>
<li>
网站评分：<meter value="65" min="0" max="100" low="60" high="80" title="90分" optimum="100">90</meter>
</li>
</ul>
</details>
</article>
</body>
</html>
<!--其中评分数据并非真是网络数据参考，仅为图像展示效果所需-->
有关如何用html制作电影影评网，初阶展示相关推荐
- 如何利用html制作电影影评网,HTML制作电影影评网 - 手册网
电影影评网 电影影评网 动作电影 <美人鱼> <美人鱼>是由周星驰执导,由江玉仪监制的喜剧爱情片, 邓超.罗志祥.张雨绮.林允等领衔出演[1].该片讲述 了富豪刘轩和为了拯救同 ...
- 使用HTML5制作电影影评网
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.html5介绍 二.使用步骤 1.了解新增的几个属性和结构 2.读入数据 3.效果展示 总结 前言 跨平台技术这 ...
- 制作电影影评网的html5代码,微信小程序之电影影评小程序制作代码
本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下 这是博主的项目包含的文件截图: 首先如图建立文件夹和page页面 然后app.json页面更新代码如下: { &quo ...
- HTML5学习之路（电影影评网）
HTML5学习之路 首先了解一下HTML的特性: 1.良好的语义特性:增加了各种元素赋予网页更好的意义和结构,使文档更加清晰明确,新增的如header,article,nav,main,aside,f ...
- jsp+ssm计算机毕业设计电影影评网【附源码】
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- [附源码]java毕业设计电影影评网
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- [附源码]计算机毕业设计JAVA电影影评网
[附源码]计算机毕业设计JAVA电影影评网 项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(Intelli ...
- [附源码]SSM计算机毕业设计电影影评网JAVA
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 制作食物官网及网页展示的过程
一开始我对网页的制作一无所知,直到老师布置了一个作业,让我们在网上找二十张食物类型的网页,然后我就开始找网页,找得一头雾水,而且找的网页也不怎么好看,基本都是网店类型的网页.找网页的作业做完了,老师就 ...
最新文章
- mega_[MEGA DEAL] 2020年完整的Java Master Class Bundle（96％）
- 软件分享:将应用一键打包成dmg文件
- ubutnu16.04安装ros2
- JSP -- JSP语法
- linux shell oracle脚本_领导：如何用shell脚本统计Oracle数据库进程明细和存储过程信息...
- 快速的利用 Express 框架实现一个 Rustfull 接口的后端 Server
- POJ 1014 Dividing【多重背包+二进制优化】
- url伪静态、url重写
- 双系统Linux（centos\redhat）和window的安装
- 【友元、异常和其他】——C++ Prime Plus CH15
- 怎么彻底禁用Cortana小娜？
- iOS 各种技术点网址
- linux otg 鼠标 节点,otg 的host功能，使用otg转host的线，连接鼠标。无效。
- 活用async/await，实现一些让Vue更好用的装饰器
- 用ghost为服务器装系统,Ghost详解：使用Ghost来安装Windows操作系统
- 一次难忘的、快乐的草原之行
- 一个登录页面的测试用例——软件测试
- 石油大 金币 二分答案
- 学生成绩管理设计要求
- Java面试重点项目推荐，吃透15个项目五个offer拿到手软 轻松应对2022春招