HTML 框架、列表和table标签练习 第二个模块2
2024-04-08 03:18:03
HTML 框架和table标签练习
- HTML 框架
- iframe标签
- 案例07
- HTML 列表
- 无序列表
- 案例08
- 有序列表
- 列表嵌套
- 案例9
- 作业
- 作业1制作方块导航器
- 作业2使用table实现如下企业主页
- 作业3电商页面设计
- 作业4播种绿色
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
HTML`中有很多框架标签，但是大多数都弃用了，沿用至今的就是`<iframe>
iframe标签
iframe语法:
<iframe src="URL"></iframe>
iframe属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align | left |right| top| middle |bottom | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 |
| scrolling | yes| no |auto |
HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
|
| height | 像素 |
规定 <iframe> 的高度。
|
| name | name |
规定 <iframe>的名称。
|
| src | URL |
规定在 <iframe> 中显示的文档的 URL。
|
| width | 像素 |
规定 <iframe>的宽度。
|
案例07
iframe可以显示一个目标链接的页面，目标链接的属性必须使用的name属性
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>框架</title></head><body><table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%"><tr><th width="15%"><a href="https://www.baidu.com" target="myframe">百度</a><hr/><a href="https://www.tmall.com/" target="myframe">天猫</a><hr/><a href="https://www.sina.com.cn/" target="myframe">新浪</a></th><th width="85%"><iframe src="https://www.aliyun.com/" name="myframe" width="100%" height="600"></iframe></th></tr></table></body>
</html>
HTML 列表
HTML列表有三种：无序列表、有序列表、自定义列表
无序列表
无序列表使用两个标签，组成一个整体使用。
| 标签 | 描述 |
|---|---|
<ul>
|
无序列表 |
<li>
|
有序列表和无序列表的一个列表项 |
无序列表有三种类型，使用type属性来设置列表的显示符号
| 属性 | 描述 |
|---|---|
type="circle"
|
空心圆 |
type="disc"
|
实心圆 |
type="square"
|
实心方块 |
示例代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无序列表</title></head><body><ul type="circle"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><ul type="disc"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><ul type="square"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul></body>
</html>
效果展示
案例08
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>无序列表</title></head><body><h4>无序列表（默认:type="disc"）</h4><ul><li>PHP</li><li>HTML</li></ul><h4>无序列表（type="circle"）</h4><ul type="circle"><li>PHP</li><li>HTML</li></ul><h4>无序列表（type="square"）</h4><ul type="square"><li>PHP</li><li>HTML</li></ul></body>
</html>
效果展示
有序列表
有序列表使用两个标签，组成一个整体使用。
| 标签 | 描述 |
|---|---|
<ol>
|
有序列表 |
<li>
|
有序列表和无序列表的一个列表项 |
有序列表有五种：
| 属性 | 描述 |
|---|---|
type="1"
|
数字序号 |
type="a"
|
有小写字母序号 |
type="A"
|
大写字母序号 |
type="i"
|
小写罗马序号 |
type="I"
|
大写罗马序号 |
示例代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>有序列表</title></head><body><ol type="1"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol><ol type="a"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol><ol type="A"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol><ol type="i"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol><ol type="I"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol></body>
</html>
列表嵌套
列表和其他标签一样，可以想和嵌套，并且可以实现各种不同的效果
案例9
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML列表</title></head><body><dl><dt>HTML列表</dt><dd>知识点梳理</dd><dd><ol type="1"><li>无序列表<ul><li type="circle">空心圆circle</li><li type="disc">实心圆disc</li><li type="square">实心方块square</li></ul></li><li>有序列表<ol><li type="1">数字：1</li><li type="a">小写字母a</li><li type="A">大写字母a</li><li type="i">小写字母i</li><li type="I">大写字母I</li> <li type="1">数字：6</li></ol></li><li>自定义列表<dl><dt>自定义列表标题</dt><dd>自定义列表选项</dd></dl></li></ol></dd></dl></body>
</html>效果展示
作业
作业1制作方块导航器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航器</title></head><body><h3>作业1</h3><table cellpadding="50" width="80%" align="center" cellspacing="0"><tr align="center"><td bgcolor="antiquewhite">漫画</td><td bgcolor="aqua">小说</td><td bgcolor="aquamarine">电影</td><td bgcolor="chartreuse">音乐</td></tr><tr align="center"><td bgcolor="beige">美食</td><td bgcolor="bisque">KTV</td><td bgcolor="blanchedalmond">体育</td><td bgcolor="burlywood">影视</td></tr></table></body>
</html>效果展示
作业2使用table实现如下企业主页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航栏</title></head><body><table align="center" border="0" cellpadding="20" cellspacing="0" align="center"><tr height="50px" bgcolor="coral" align="center"><td width="10%"></td><td width="15%" align="center"><img src="../image/导航logo.svg" height="35"><i>电脑版本</i></td><td width="10%"></td><td width="5%"><a href="">首页</a></td><td width="5%"><a href="">发现</a></td><td width="5%"><a href="">职位</a></td><td width="5%"><a href="">活动</a></td><td width="5%"><a href="">素材</a></td><td width="5%"><a href="">课程</a></td><td width="5%"><a href="">更多</a></td><td width="10%"></td> </a><td width="5%"><img src="../image/导航.png"></td><td width="5%"><img src="../image/导航145-cloud.png"></td><td width="10%"></td></tr></table><table border="0" cellpadding="5" cellspacing="0" align="center" width="80%"><tr><td colspan="15"><img src="../image/banner.jpg" width="100%"></td></tr><tr align="center"><td width="20%" colspan="3"><img src="../image/图文-1.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文-2.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文-3.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文-4.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文-5.jpg" width="100%"></td></tr><tr align="center"><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td></tr><tr align="center"><td><img src="../image/图文184-bar-chart.png" align="absmiddle" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td></tr><tr height="40"></tr><tr align="center"><td width="20%" colspan="3"><img src="../image/图文2-1.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文2-2.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文2-3.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文2-4.jpg" width="100%"></td><td width="20%" colspan="3"><img src="../image/图文2-5.jpg" width="100%"></td></tr><tr align="center"><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td><td width="20%" colspan="3">这是一张图片</td></tr><tr><td><img src="../image/图文184-bar-chart.png" align="absmiddle" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td><td><img src="../image/图文184-bar-chart.png" align="absbottom" height="15">123</td><td><img src="../image/图文188-target.png" align="absbottom" height="15">456</td><td><img src="../image/图文189-eye.png" align="absbottom" height="15">789</td></tr></table><table border="0" cellspacing="5" cellpadding="0" align="center" bgcolor="antiquewhite" width="100%"><tr align="center"><td >贵州华信科技</td></tr></table></body>
</html>
效果展示
作业3电商页面设计
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>电商</title></head><body><table cellpadding="10px" cellspacing="0" bgcolor="azure" width="100%"><tr><th width="10%"></th><th>全部分类</th><th>广告设计</th><th>设计元素</th><th>电商设计</th><th>PPT|简历</th><th>装饰设计</th><th>电商小报</th><th width="10%"></th></tr><tr ><td colspan="9"><img src="../banner1.jpg" width="100%"></td></tr></table><table cellpadding="10" cellspacing="0" width="80%" align="center"><tr><th align="left"><strong>精选推荐</strong></th></tr><tr><td colspan="8"><hr ></td></tr><tr><td colspan="2" ><img src="../1-1.jpg" width="100%"></td><td colspan="2" ><img src="../1-2.jpg" width="100%"></td><td colspan="2" ><img src="../1-3.jpg" width="100%"></td><td colspan="2" ><img src="../1-4.jpg" width="100%"></td></tr><tr align="center"><td colspan="2"><a href="">新学期—开学季</a></td><td colspan="2"><a href="">38-妇女节</a></td><td colspan="2"><a href="">清仓-春节大促</a></td><td colspan="2"><a href="">312-植树节</a></td></tr><tr><td height="30"></td></tr><tr><td colspan="6" align="left"><strong>广告设计</strong> 妇女节 春季上新 名片设计 画册模板 招聘海报 315消费者权益日 美食海报</td><td colspan="2" rowspan="2" align="right">更多></td></tr><tr><td colspan="8"><hr ></td></tr><tr align="center"><td colspan="2"><img src="../2-1.jpg" width="100%"></td><td colspan="2"><img src="../2-2.jpg" width="100%"></td><td colspan="2"><img src="../2-3.jpg" width="100%"></td><td colspan="2"><img src="../2-4.jpg" width="100%"></td></tr> <tr align="center"> <td colspan="2"><a href="">招聘会海报</a></td><td colspan="2"><a href="">促销海报</a></td><td colspan="2"><a href="">新品海报</a></td><td colspan="2"><a href="">春季海报</a></td></tr> <tr align="center"> <td colspan="2"><img src="../3-1.jpg" width="100%"></td><td colspan="2"><img src="../3-2.jpg" width="100%"></td><td colspan="2"><img src="../3-3.jpg" width="100%"></td><td colspan="2"><img src="../3-4.jpg" width="100%"></td></tr><tr align="center"><td colspan="2"><a href="">特惠海报</a></td><td colspan="2"><a href="">清新海报</a></td><td colspan="2"><a href="">精美海报</a></td><td colspan="2"><a href="">绿色海报</a></td></tr> </table><table width="100%" border="0" cellspacing="0" cellpadding="5" align="center"><tr height="30"></tr><tr bgcolor="antiquewhite"><td align="center">贵州华信科技</td></tr></table></body>
</html>效果展示
作业4播种绿色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>播种绿色</title></head><body><table border="0" cellpadding="10" cellspacing="0" align="center" width="100%" height="50"><tr bgcolor="aquamarine"><th width="10%"></th><th>全部分类</th><th>背景墙</th><th>PPT模板</th><th>平面设计</th><th>视频</th><th width="20%"></th><th>我图网Plus</th><th>办公创意</th><th>VIP专区</th><th width="10%"></th></tr><table><img src="../image2/banner.jpg" width="100%"></table><table border="0" cellspacing="0" cellpadding="10" width="80%" align="center"><tr><td><img src="../image2/1-1.webp" width="100%"></td><td><img src="../image2/1-2.webp" width="100%"></td><td><img src="../image2/1-3.webp" width="100%"></td><td><img src="../image2/1-4.webp" width="100%"></td></table><table border="0" bgcolor="khaki" cellpadding="10" cellspacing="0" width="100%" align="center"><tr><td width="10%" colspan="10" align="center"><h1>精选专题</h1></td></tr> <tr align="center"> <td width="10%"></td><td width="10%">背景墙</td><td width="10%">平面设计</td><td width="10%">PPT模板</td><td width="10%">视频素材</td><td width="10%">电商设计</td><td width="10%">文化墙</td><td width="10%">手抄报</td><td width="10%"><a href="">更多素材</a></td><td width="10%"></td></tr> <tr> <td width="10%"></td><td width="10%" colspan="2"><img src="../image2/2-1.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/2-2.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/2-3.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/2-4.webp" width="100%"></td><td width="10%"></td></tr> <tr align="center"> <td width="10%" ></td><td width="10%" colspan="2">盘龙地板</td><td width="10%" colspan="2">精装装修</td><td width="10%" colspan="2">紊乱卧室</td><td width="10%" colspan="2">新鲜花朵</td><td width="10%"></td></tr> <tr> <td width="10%" ></td><td width="10%" colspan="2"><img src="../image2/3-1.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/3-2.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/3-3.webp" width="100%"></td><td width="10%" colspan="2"><img src="../image2/3-4.webp" width="100%"></td><td width="10%"></td> </tr> <tr align="center"><td width="10%"></td><td width="10%" colspan="2">人间天堂</td><td width="10%" colspan="2">海市蜃楼</td><td width="10%" colspan="2">黄沙大漠</td><td width="10%" colspan="2">涛涛骇浪</td><td width="10%"></td></tr></table><table border="0" cellspacing="0" cellpadding="10" bgcolor="beige" width="100%"><tr align="center"><td>贵州智原科技</td></tr></table></body>
</html>v
效果展示
HTML 框架、列表和table标签练习 第二个模块2相关推荐
- img、列表和table标签
一.img图片 <body> <a href="https://www.fmtxt.com"> <img src="images/1.jpg ...
- 【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
- html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
1. 表格 表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
- html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表 有序列表 有序列表 语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
- table标签、表格的跨行跨列、ifarme标签
table标签 需求: 制作一个带表头的三行山列的表格,并显示边框:修改表格的宽度.高度.表格的对齐方式.单元格间距. <!DOCTYPE html> <html lang=&quo ...
- HTML笔记（form与table标签区别，区分利用ul,dl与table标签）
文章目录 区分 form标签 table标签 dl标签与table标签 区分 <form>封装要被提交服务器的表单内容(一系列控件) form不管到底嵌套了多少个table标签;它只关心范 ...
- 用li列表模拟table式的表
今天我们看看如何通过li列表模拟表格,实现多列布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
- php中table是什么意思,table标签是什么意思
table标签是什么意思 table标签定义HTML表格,每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义).字母 td 指表格数据(table data),即数据单元格的内容 ...
最新文章
- 想学Python？快看看这个教程！收藏！
- Python游戏开发，pygame模块，Python实现过迷宫小游戏
- 16个免费和开源商业智能工具
- Discuz X2下tag伪静态详细设置方法
- C++处理一个动态规划的问题
- redis实践的一点思路,关于支付回调
- java data jpa_Spring Data JPA(一)简介
- 计算机网络 socket,[计算机网络]简单聊聊套接字 Socket
- scss编译输出css并转换成rem
- Golang实践录：调用C++函数的优化
- Go 字典(Map)
- python中bar是什么意思_Python中下划线的变量是什么个意思
- java 函数式编程 示例_Java套接字编程–套接字服务器，客户端示例
- CentOS7环境下MySQL升级
- Qingdao Panda进阶之路
- 两个字符串的最长公共子串（C++）
- css如何选择相同class下的第一个class元素和最后一个元素?
- 用C51单片机的外部中断设计1s定时器
- 刘润年度演讲2021：进化的力量（演讲全文）
- 人工智能节目主持人诞生