html入门、结构、标签、列表、表格
1.【关卡前提】
掌握HTML结构
掌握HTML常用标签的使用
掌握HTML列表标签
掌握HTML表格标签
2.【关卡要求】
使用HTML标签完成《糖醋排骨》菜谱练习
使用HTML标签完成《楚乔传》网页练习
扩展：点击集数跳转到详细介绍
完成《列表标签》练习
完成《小说排行榜》练习)
3.【关卡效果】
（1）《糖醋排骨》菜谱练习效果图如下：
（2）《楚乔传》练习效果图如下：
（3）《列表标签》练习效果图如下：
（4）小说排行榜练习效果如下：
4.代码块
（1）《糖醋排骨》菜谱练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>《糖醋排骨》的制作方法</title>
</head>
<body><strong>菜名名称：糖醋排骨</strong><br><strong>市场价格:</strong><b style="color:rgb(255, 0, 255)">26</b><br><strong>会员价格:</strong><b style="color:red">24</b><br><strong>使用配料:</strong><b>排骨、糖、醋</b><br><br><strong><em><u>做法:</u></em></strong><br>1.猪小排洗净，晾干水份备用。</br ><br>2.锅内俱少量油，烧热之后，爆香菱片。</br ><br>3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦。</br ><br>4.此时就可以放入黄金比例中的调料了，顺序是，先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋最后四汤勺白糖，炒匀。</br ><br>5.再倒入能没过排骨的开水，调中小火狗20分钟。</br ><br>6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点綴即可出锅(锅里剩下的姜片丢掉不用，最后大火收计时注意多翻动锅内的排骨，避免烧焦喲! ) 。</br ><hr></hr><br>@2015 阿婆私房菜</br >
</body></html>
（2）《楚乔传》练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>《楚乔传》</title>
</head>
<body><strong>楚乔传</strong><br>中国大陆 67集（TV版）/58集（DVD版）<br><br>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。[1] </br><img src="1.jpg"width=auto/><br> <a href="#end1">第1集 </a><a href="#end2">第2集 </a><a href="#end3">第3集 </a><a href="#end4">第4集 </a><a href="#end5">第5集 </a> </br><div id="end1"><br><strong>第1集（分集以TV版为准</strong>）</br><p> 摇摇晃晃的囚车上，一名少女正在闭目沉睡。梦境里皆是血雨腥风，恍恍惚惚中，她只记得有人唤她楚乔，又有人叫她荆小六。</p></div><div id="end2"><br><strong>第2集（分集以TV版为准</strong>）</br><p>楚乔伤病还未痊愈，便被宋大娘遣来干活。大姐汁湘为楚乔求情，却被宋大娘骂了一通。</p><div id="end3"><br><strong>第3集（分集以TV版为准</strong>）</br><p>青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。宇文玥刚刚下令封棺，便被院子里闯进来的一位不速之客阻拦。</p></div><div id="end5"><br><strong>第5集（分集以TV版为准</strong>）</br><p>楚乔一觉醒来，忽觉身边有些异样，那躺在不远处的不就是冷脸面瘫的宇文玥嘛，尖叫声不经思考就脱口而出。</p></div></body>
</html>
（3）《列表标签》练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title>
</head>
<body><h2>搜索引擎排名</h2> <ol type="1"> <li>Google</li> <li>Baidu</li> <li>Bing</li> <li>Sogou</li> </ol><h2>软件编程语言</h2> <ul type=”disc"> <li>Java</li> <li>C++</li> <li>Python</li> <li>JavaScript</li> </ul><h2>健康食品</h2><dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> <dt>蔬菜</dt> <dd>西兰花</dd> <dd>菠菜</dd> </dl> </body>
</html>
（4）小说排行榜练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小说排行榜</title>
</head>
<body><table border="1" width="100%"><caption>小说排行榜</caption> <!--第一行--> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th> </tr> <!--第二行--> <tr> <td>1</td> <td>鬼吹灯</td><td> <img src="up.jpg"width=auto/></td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第三行--> <tr> <td>1</td> <td>鬼吹灯</td><td> <img src="down.jpg"width=auto/></td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第四行--> <tr> <td>1</td> <td>鬼吹灯</td><td> <img src="up.jpg"width=auto/></td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第五行--> <tr> <td>1</td> <td>鬼吹灯</td><td>1 </td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第六行--> <tr> <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第七行--> <tr> <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> <!--第八行--> <tr> <td>1</td> <td>鬼吹灯</td><td> 1</td> <td>356</td> <td>3560</td> <td> <a href="#end1">贴吧 </a><a href="#end1">图片 </a><a href="#end1">百科 </a></td> </tr> </table></body>
</html>
html入门、结构、标签、列表、表格相关推荐
- HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构 网页的基本标签 标题标签 段落标签 换行标签 水平线 字体样式标签 HTML注释和特殊符号 图像标签 常见的图片格式 语法 案例 链接标签 页面间链接 语法 锚链 ...
- 002_HTML基础入门二【列表 + 表格】
文章目录 一.列表 List 1.有序列表 ol.li 2.无序列表 ul.li 3.定义列表 dl.dt.dd 二.表格 Table 1.基本标签 2.合并单元格 3.thead.tbody.tfo ...
- HTML图片标签列表表格以及合并单元格，个人简历小案例
合并单元格: 1.先实现特殊表格对应的普通表格的基本结构. 2.判定当前单元格是跨行还是跨列,给对应的单元格属性,属性值就是占据的单元格数量 (从上到下,从左到右的顺序,合并单元格,跨列用colspa ...
- HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签 在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
- 表格标签(合并单元格，列表结构标签thead， tbody，有序列表ol，无序列表dl )
表格用法: < table >< /table >是用于表格的标签. < tr >< /tr>标签用于定义表格中的行,必须嵌套在< table & ...
- HTML入门二（列表，表格与表单）
文章目录 一.列表 1.无序列表 2.有序列表 3.嵌套列表 二.表格 1.表格的基本语法 2.表格常用标签 3.合并单元格 (1)跨多列的标签 (2)跨多行的标签 4.表格填充属性 (1)cells ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- HTML 字体标签 图片标签 列表标签 链接标签 div span 语义化标签 表格标签
文章目录 HTML 字体标签 图片标签 列表标签 链接标签 div span 语义化标签 表格标签 HTML 概念:是最基础的网页开发语言 Hyper text markup language 超文本 ...
- HTML 列表标签、表格标签、表单标签
HTML 列表标签.表格标签.表单标签 一.列表标签 二.表格标签 三.表单标签 四.综合练习 一.列表标签 <!DOCTYPE html> <html lang="en& ...
- HTML 文字标签、段落标签、列表标签、链接标签和表格
文章目录 HTML 一.文字标签 二.段落标签 三.列表标签 1.有序列表 2.无序列表 3.插入列表 四.链接标签 1.文本链接 2.书签链接 五.表格 1.绘制表格 2.行标签属性 3.单元格标签 ...
最新文章
- Cisco交换机密码配置整理
- 「3」Java开发环境搭建
- UA MATH565C 随机微分方程III Ito积分的构造
- Hexo+github搭建个人博客－博客初始化篇
- 23种设计模式C++源码与UML实现--解释模型
- 【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
- 研发管理三部曲——贰 · 研发管理应该干什么
- MongoDB 文档操作之插入、查询
- 血氧仪方案指夹式TFT指尖心率监测脉搏
- oracle导出dmp文件报错904,EXP-00008: 遇到 ORACLE 错误 904 ORA-01003
- 百度地图infowindow上添加自定义点击事件
- 色拉英语第3集第1幕： you flatter me
- android 锁屏后定时器,iOS锁屏或者后台计时器定时解决方法
- 端游开发中用什么技术可以让用户更短时间内体验游戏？端游分发
- 电子信息工程找什么工作，能干什么
- 中国计算机大师级别的人物,特级大师大多已退隐江湖，看谁能继承衣钵，成为新一代的象棋霸主...
- 关于摄影的若干个命题
- 移动BI快速入门培训-人人都可以成为数据分析师
- oracle 所有外键约束,如何在oracle中找到所有外键约束？
- java实现基于token认证
热门文章
- ubuntu 18.04/16.04/14.04 双硬盘分区方案
- secect语句报错expecting(，eof或;
- 内存泄露的检测工具——Valgrind
- mysql学生课程表试题_Mysql练习之 学生表、课程表 、教师表、成绩表 50道练习题...
- linux mint卸载桌面环境,在Linux Mint 19/Ubuntu 18.04系统上安装Deepin桌面环境的方法
- 高晓松自曝常被员工管 钉钉到底是反了老板还是员工？
- Everything+Wox介绍和使用方式
- 2016书单总结--看透SpringMvc源代码分析与实践-概述
- 安卓微信分享图标不显示的问题
- 【板栗糖GIS】bat—怎么删除子文件夹下的同后缀名的数据