Day2—HTML使用列表标签和表格标签完成实例

最新推荐文章于 2022-07-11 15:12:23 发布
最新推荐文章于 2022-07-11 15:12:23 发布
阅读量162 收藏
点赞数 6
分类专栏： 实训 文章标签： html 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45313388/article/details/117452686
版权

要求

1.完成《列表标签》练习，包含无序列表、有序列表；
2.完成《小说排行榜》练习，要求包含图片、链接。

具体内容

  1. 有序列表
<ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sougou</li>
</ol>

2.无序列表

<ul>
     <li>Java</li>
    <li>C++</li>
    <li>Python</li>
    <li>JavaScript</li>
 </ul>

3.定义列表（definition list）

<dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>西兰花</dd>
        <dd>菠菜</dd>
        </dl>
  1. HTML 表格
  • 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成;
  • tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
<table border="1" align="center">
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>

5.超链接标签

  • 用于从一张页面链接到另一张页面
  • < a>元素最重要的属性是 href 属性，它指示链接的目标。

代码：<a href="https://tieba.baidu.com/p/6180944180">贴吧</a>

源代码如下：

<!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>
    <h1>搜索引擎排名</h1>
    <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sougou</li>
    </ol>
    <h1>软件编程语言</h1>
    <ul>
        <li>Java</li>
    <li>C++</li>
    <li>Python</li>
    <li>JavaScript</li>
    </ul>
    <h1>健康食品</h1>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>西兰花</dd>
        <dd>菠菜</dd>
        </dl>
        <h2><div class="text" style=" text-align:center;">小说排行榜</div></h2>
        <table border="1" align="center">
            <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"  height=13 width=13></img></td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
                
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"  height=13 width=13></img></td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="up.jpg"  height=13 width=13></img></td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>1</td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>1</td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>1</td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>1</td>
                <td>356</td>
                <td>3560</td>
                <td><a href="https://tieba.baidu.com/p/6180944180">贴吧</a>   <a href="https://item.ule.com/tu/3766517-0-1.html">图片</a>   <a href="https://wenku.baidu.com/view/fd50f9ea647d27284a735198.html">百科</a></td>
            </tr>
        </table>

</body>
</html>

6.结果
有序列表
无序列表
定义列表
表格

一朵风中摇曳的水仙花-
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML列表标签复习
weixin_47683287的博客
10-25 269
HTML列表标签 !<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html c
HTML列表标签与表格标签
weixin_49217619的博客
06-02 194
HTML列表标签与表格标签 一、表格标签 table：表格标签 属性： border：边框线大小 width：表格的宽度 height：表格的高度 align：对齐方式 bgcolor：背景色 tr：行标签 td：单元格标签 单元格的合并： colspan：合并列 rowspan：合并行 thead：表头
11. 列表标签及其应实例
qq_41632427的博客
07-11 71
java
11. 列表标签及其应实例
歌谣的博客
10-01 153
列表标签及其应实例
html描述列表在线实例,HTML的列表标签
weixin_32705179的博客
05-31 216
在HTML中使用ul(无序列表)、ol(有序列表)和dl(自定义列表)。下面通过实例来学习HTML的列表。标签描述定义有序列表。定义无序列表。定义列表项。定义定义列表。定义定义项目。定义定义的描述。已废弃。使用 代替它。已废弃。使用 代替它。元素的属性属性值描述compactcompact不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。startnumber不赞成使用。请使用...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
Day8 智慧商城 Vue2
最新发布
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
Day06-07
03-14
9. **CSS样式**：虽然不是HTML的一部分，但常常与HTML一起使用，通过`<style>`元素内联添加，或外部引用`<link>`标签链接CSS文件，用于美化和布局网页。 10. **响应式设计**：利用媒体查询（`@media`），可以创建...
FE21-JS-DAY01-Julia-莱西亚
03-03
2. **文本、链接、图像和列表**：如何创建和格式化文本，创建超链接，插入图片，使用无序和有序列表。 3. **段落与区块元素**：div、span、p、h1-h6等元素的使用。 4. **表格与表单**：创建和布局表格，理解表单...
Day13-14:第13-14天的作业
03-22
10. **练习与实践**：作业中的"Day13-14-main"可能包含完成这些概念的实例代码，学生应通过编写和修改HTML代码来加深理解，并尝试创建自己的简单网页。 总的来说，HTML的学习不仅仅是记住各种标签和属性，更重要的...
3.2图片标签和列表标签的实例
P_ning的博客
04-13 209
1. 2. 3.
html利用列表写单选题,请写出利用列表标签实现如下图所示效果的HTML代码:
weixin_30478241的博客
06-16 346
【判断题】服务消费过程中各个步骤的不同性质取决于服务是高接触度服务还是低接触度服务。【单选题】下列不能形成氨配合物的离子是( )。【判断题】线性无关组的任意一个部分向量组的线性相关性为相关。【单选题】火腿的腌制方法为()。【填空题】用 修饰符修饰的成员只能在自己类中直接访问。【判断题】威尔克斯统计量在多元方差分析中是用于检验均值是否相等的统计量。【单选题】净重为61kg的生丝,实际回潮率为12.6...
HTML标签练习
weixin_30492047的博客
07-19 274
<html> <> <body> <h4>一个无序列表：</h4> <ul> <li><a href="#"style="text-decoration:none">水水水</a><u>水</u>水</li> <br>...
列表标签（自用html笔记）
m0_53093412的博客
10-08 109
目录 列表 无序列表（重点）： 有序列表（理解）： 自定义列表： 列表更多的实例： 列表 （表格用来显示数据，列表用来布局） 列表特点：整齐，整洁。 列表分为无序列表，有序列表和自定义列表、 无序列表（重点）： <ul>标签表示HTML页面中的无序列表 列表项用<li>标签定义 例如：你喜欢吃什么？ 牛奶 咖啡 其他 <ul> 你喜欢吃什么？ <li>牛奶</li> <l.
HTML的文本及表格标签示例
SingleWorld
07-28 998
以代码为HTML的文本和表格的基本标签示例,分别将其拷贝到文本中,文件扩展名改为html,便可预览效果. HTML的文字标记示例    字体标签演示    文字字体演示,这是二级标题.  font 标签  粗体演示  下划线演示  斜体演示  删除线演示  这是上标演示  这是下标演示   HTML的表格设计属性示例    表格标签演示       表格演示    
表格标签和列表标签综合案例练习
weixin_66455621的博客
03-02 343
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>综合案例练习</tit.
凭借这份前端面试宝典，我成功拿到了字节跳动、腾讯、阿里巴巴等六家大厂offer！
热门推荐
pig_html的博客
03-05 1万+
前言 又逢金三银四，拿到大厂的offer一直是程序员朋友的一个目标，我是如何拿到大厂offer的呢，今天给大家分享我拿到大厂offer的利器，前端核心知识面试宝典，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题\数据结构与算法。 整个核心知识点的内容很详细，很多知识点在总结的时候会有一些纰漏，不会在文章中将所有内容都展示给大家，全部都整理在了一个pdf里面，对大家面试有帮助的可以关注小编+评论留言领取！ HTML面试题部分 1.H5的新特性有哪些 2.Label的作用是什么？
列表习题练习
yrl1813dada的博客
05-07 528
1.创建一个列表，列表中有10个数字, 保证列表中元素的顺序，对列表进行排重,并对列表使用进行降序排序 例如：随机生成了[70, 88, 91, 70, 107, 234, 91, 177, 282, 197] — 去重之后 [70, 88, 91, 107, 234, 177, 282, 197] ---- 降序排序 [282, 234, 197, 177, 107, 91, 88, 70] list = [70, 88, 91, 70, 107, 234, 91, 177, 282, 197] new_
HTML 框架、列表和table标签练习 第二个模块2
菜鸟心声：学的不仅是技术，更是梦想！
01-10 1273
HTML 框架和table标签练习HTML 框架iframe标签案例07HTML 列表无序列表案例08有序列表列表嵌套案例9作业作业1制作方块导航器作业2使用table实现如下企业主页作业3电商页面设计作业4播种绿色 HTML 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 HTML`中有很多框架标签，但是大多数都弃用了，沿用至今的就是`<iframe> iframe标签 iframe语法: <iframe src="URL"></iframe> i
Spring4_day03讲义2: 使用AOP增强DAO权限校验和事务管理
今天的Spring_day03课程主要围绕着引入AOP约束展开，任务包括使用Spring的AOP对客户管理的DAO进行增强以及使用Spring完成转账的事务管理。教学导航中强调掌握Spring的声明式事务和SSH的整合，而教学方法则采用案例...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值