html列表元素练习以及简易简历单填写的制作

最新推荐文章于 2023-12-13 17:34:42 发布
最新推荐文章于 2023-12-13 17:34:42 发布
阅读量371 收藏
点赞数 5
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44318919/article/details/117468659
版权

主要知识点如下：

代码展示如下：

<!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>list</title>

</head>

<body>

    <div>

    <h2>搜索引擎排名</h2>

    <ol type="1">

        <li>Google</li>

        <li>Baidu</li>

        <li>Bing</li>

        <li>Sougou</li>

    </ol>

    

    </div>

    <div>

    <h2>软件编程语言</h2>

    <ul>

        <li>Java</li>

        <li>C++</li>

        <li>Python</li>

        <li>JavaScript</li>

    </ul>

    

    </div>

    <div>

        <h2>健康食品</h2>

        <dl>

            <dt>水果</dt>

            <dd>苹果</dd>

            <dd>香蕉</dd>

            <dt>蔬菜</dt>

            <dd>西兰花</dd>

            <dd>菠菜</dd>

        </dl>

    </div>

</body>

</html>

排行榜代码：

<!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>novelsh</title>

    <style>

        body{text-align: center;} table{margin: auto;}

    </style>

</head>

<body>

   

   <div >

    <table border="1" cellspacing="0" margin:auto >

        <caption><h2>小说排行榜</h2></caption>        

        <thead>            

 

        <tr >                

            <th>排名</th> <th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th>  <th>相关链接</th>               

        </tr> 

        </thead>      

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="up.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>  

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="down.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td><img src="up.jpg" alt=""></td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>        

        <tr>                

            <td>1</td> <td>鬼吹灯</td><td>1</td> <td>356</td><td>3560</td> <td><a href="http://baidu.com">贴吧</a> <a href="http://baidu.com">图片</a><a href="http://baidu.com">百科</a></td>          

        </tr>                  

        

    

       

        

       </table>

 

   </div>

</body>

</html>

简易简历表制作：

<!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>Document</title>

    <style>

        body {

            text-align: center;

        }

 

        table {

            margin: auto;

        }

 

        td {

            width: 70px;

            overflow: hidden;

            height: 25px;

        }

 

        input {

            width: 100%;

        }

    </style>

</head>

 

<body>

    <form action="">

        <table border="1" align="center">

            <h2>个人简历</h2>

            <tr>

                <td>姓名</td>

                <td><input type=“text”></td>

                <td>性别</td>

                <td><input type=“text”></td>

                <td>出生年月</td>

                <td><input type=“text”></td>

                <td rowspan="4" style="vertical-align: top;"><input type="file"></td>

 

            </tr>

            <tr>

                <td>民族</td>

                <td><input type=“text”></td>

                <td>政治面貌</td>

                <td><input type=“text”></td>

                <td>身高</td>

                <td><input type=“text”></td>

            </tr>

            <tr>

                <td>学制</td>

                <td><input type=“text”></td>

                <td>学历</td>

                <td><input type=“text”></td>

                <td>户籍</td>

                <td><input type=“text”></td>

            </tr>

            <tr>

                <td>专业</td>

                <td><input type=“text”></td>

                <td colspan="2">毕业学校</td>

                <td colspan="2"><input type=“text”></td>

            </tr>

            <tr>

                <td colspan="7"><b>技能、特长和爱好</b></td>

 

            </tr>

            <tr>

                <td>外语等级</td>

                <td colspan="2"><input type=“text”></td>

                <td>计算机</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

            <tr>

                <td colspan="7"><b>个人履历</b></td>

 

            </tr>

            <tr>

                <td>时间</td>

                <td colspan="2">单位</td>

                <td colspan="4">经历</td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

            <tr>

                <td><input type=“text”></td>

                <td colspan="2"><input type=“text”></td>

                <td colspan="4"><input type=“text”></td>

            </tr>

 

            <td colspan="7">个人履历</td>

            <tr>

                <td>通信地址</td>

                <td colspan="2"><input type=“text”></td>

                <td>联系电话</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

            <tr>

                <td>E-mail</td>

                <td colspan="2"><input type=“text”></td>

                <td>邮编</td>

                <td colspan="3"><input type=“text”></td>

            </tr>

 

            <td colspan="7">自我评价</td>


 

        </table>

    </form>

</body>

 

</html>

李欣没有梦
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
html表格练习
qq_42312396的博客
01-20 528
代码，数据是随便写的 <table> <caption> 各项数据 </caption> <!-- 标题 --> <thead> <tr> <th scope="col" rowspan="2" colspan="2"></th> <th scope="col" rowspan="2">种类</th> <th sc
[php学习八]html的列表练习
灵眼儿上方
07-21 324
[php学习八]html的列表练习
HTML
IDOBLUE的博客
04-25 180
JAVAWEB学习 HTML第一天 用户登录 <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0p...
html 表格练习
qq_35860368的博客
12-15 343
Title 对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 1 1 1 1 2 2
HTML的表格练习
PC_small_wang的博客
12-02 315
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阶段测试二</title> </head> <body> <h1>英雄技能</h1> <table b...
html静态网页制作，包含个人简历、导航、简易博客等
最新发布
12-22
在这个“html静态网页制作，包含个人简历、导航、简易博客等”的主题中，我们将深入探讨如何利用HTML来创建这些功能丰富的页面。 一、HTML基础 HTML由一系列元素（tags）组成，每个元素都有其特定的含义和用途。...
简易简历 ASP.NET 简易个人信息填写
12-13
【标题】"简易简历 ASP.NET 简易个人信息填写"是一个基于ASP.NET技术开发的简单个人信息填写系统。这个系统旨在帮助用户快速、便捷地创建和管理个人简历，它可能包括基本信息、教育背景、工作经验、技能特长等内容。...
Jquery练习1：制作简易的当当购物车页面.zip
08-27
在实践中，我们需要编写HTML结构来表示商品列表、购物车以及相关按钮。接着，利用jQuery为这些元素添加事件监听器，并编写处理逻辑。例如，点击“加入购物车”按钮时，将商品信息添加到购物车并显示动画效果。同时，...
html基础练习 css部分练习 盒模型定位部分练习
11-27
这个压缩包文件中的"html基础练习"部分，很可能是对HTML基本语法、元素、属性等内容的练习题，包括如何创建文档结构，如使用`<html>`, `<head>`, `<body>`等标签，以及如何插入文本、图像、链接等元素，如`<p>`, `...
html+css-实战电商品优购网页制作_源码.zip
03-12
此外，还会用到`<a>`（链接）、`<img>`（图像）、`<h1>`至`<h6>`（标题）、`<p>`（段落）以及`<ul>`、`<ol>`、`<li>`（无序和有序列表）等元素，来创建网页的内容。 CSS（Cascading Style Sheets）则是负责网页样式...
html练习.zip
07-25
其中部分文件为自己建立的，是自己在学习HTML知识时做的练习，部分文件下载自siki学院的学习资料，仅供学习参考
HTML制作个人简历的简单实现
09-28
下面小编就为大家带来一篇HTML制作个人简历的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML中表格练习
wyqwilliam的博客
12-05 352
<html> <head> <title>表格的学习</title> <meta charset="UTF-8"/> </head> <body> <h3>表格的学习</h3> <hr /> <table style="border-bottom...
HTML巩固练习之列表的使用
qq_23901235的博客
03-20 485
文中使用了两个有序列表和一个无序列表 问卷调查 绿叶学习网问卷调查 你通过什么途径来到绿叶学习网 1.百度搜索 2.360搜索 3.其他 你觉得绿叶学习网页面设计怎么样 1.美观 2.粗糙 3.还行 绿叶学习网的"HTML入门课程"如何？（多选） 浅显易懂，重点突出
HTML 框架、列表和table标签练习 第二个模块2
菜鸟心声：学的不仅是技术，更是梦想！
01-10 1270
HTML 框架和table标签练习HTML 框架iframe标签案例07HTML 列表无序列表案例08有序列表列表嵌套案例9作业作业1制作方块导航器作业2使用table实现如下企业主页作业3电商页面设计作业4播种绿色 HTML 框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。 HTML`中有很多框架标签，但是大多数都弃用了，沿用至今的就是`<iframe> iframe标签 iframe语法: <iframe src="URL"></iframe> i
html表单练习
weixin_45239190的博客
08-06 2616
<!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>...
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2513
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML表格列表表单练习
2301_80121720的博客
12-13 418
【代码】HTML表格列表表单练习。
HTML学习笔记3（列表练习）
YanMCui的博客
06-02 95
历程1历程2描述：描述：坤技名称二段释放三段释放第二章第二章
网页制作基础语言-HTML(1).ppt
11-20
- 列表：有序列表和无序列表，以及列表项。 - 表格：、（行）、（单元格）和（表头）用于创建表格。 - 字幕、音频和视频：HTML5引入了（表标题）、和元素，支持多媒体内容的嵌入。 - 框架：和元素创建多窗口页面，但...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值