列表表格

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量60 收藏
点赞数
文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31926899/article/details/116984286
版权

<!-- ul无序列表 ol有序列表 dl定义列表 -->

<!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">

<style>

        .header{

            background-color: yellow;

        }

        .main{

            background-color: aqua;

        }

        .part1{

            background-color: greenyellow;

        }

        .part2{

            background-color: grey;

        }

        table,tr,td{

            border-collapse: collapse;

        }

    </style>

    <title>Document</title>

</head>

<body>

    <ul type="circle">

        <li>牛奶</li>

        <li>咖啡

            <p>千万不要买黑咖啡太苦了！</p>

        </li>

        <li>水果</li>

    </ul>

    <!-- li不呢散着放，ul的子标签只能是li,li里面可以放任何东西 -->

    <ul>

        <li>

            <h2>北京市</h2>

            <ul>

                <li>朝阳区</li>

                <li>海淀区</li>

                <li>昌平区</li>

            </ul>

        </li>

        <li>

            <h2>上海市</h2>

            <ul>

                <li>静安区</li>

                <li>浦东新区</li>

            </ul>

        </li>

    </ul>

    <h1>考试成绩排名</h1>

    <ol type="I" start="8" reversed>

        <li>小慕</li>

        <li>小明</li>

        <li>小红</li>

        <li>小强</li>

    </ol>

    <!-- a小写字母编号A大写字母编号i小写罗马数字编号I大写罗马数字编号1数字编号 -->

    <h1>前端主要技术简介</h1>

    <dl>

        <dt>html</dt>

        <dd>超文本标记语言</dd>

        <dt>CSS</dt>

        <dd>层叠式样式表</dd>

        <dt>JavaScript</dt>

        <dd>JS脚本程序</dd>

    </dl>

    

<div class="header">

        <div>网站的logo</div>

        <h1>软件简介</h1>

    </div>

    <div class="main">

        <div class="part1">

            <h2>软件历史</h2>

            <h3>2000年前的历史</h3>

            aaaaaaaaaaaaaaaaaaaa

            bbbbbbbbbbbbbbbbbbbb

            <p>aaaaaaaaaaaaaaaaa</p>

            <p>bbbbbbbbbbbbbbbbb</p>

            <h3>2000年后的历史</h3>

        </div>

        <div class="part2">

            <h2>软件分类</h2>

            <h3>传统软件</h3>

            <h4>图书管理系统</h4>

            <h4>管理员系统</h4>

            <h3>新型软件</h3>

            <h4>QQ</h4>

            <h4>淘宝</h4>

        </div>

        <div>

            <h2>软件的开发</h2>

        </div>

    </div>

    <p>文字文字文字     

        文字文字文字文字

    </p>

    <p>     文字文字文字文字      </p>

    我们今天学习了<p></p>标签对的作用是段落

    <p>大于号&gt;</p>

    <p>小于号&lt</p>

    <p>空格 文字文字&nbsp;&nbsp;文字</p>

    <p>版权符号&copy;</p>

    我们今天学习了&lt;p>&lt;/p>标签对的作用是段落

    

 <form action="" method="POST">

        <p>

            请输入你的姓名：<input type="text">

        </p>

        <p>

            报考院校:<input type="text" value="清华大学" disabled>

        </p>

        <p>

            毕业学校：<input type="text" placeholder="请输入真实的毕业院校哦">

        </p>

        <p>

            性别：

            <label><input type="radio" name="sex" value="男" checked> 男</label>

            <label><input type="radio" name="sex" value="女"> 女</label>

        </p>

        <p>

            血型:

            <input type="radio" name="bloodtype" checked id="A"><label for="A">A</label>

            <input type="radio" name="bloodtype" id="B"><label for="B">B</label>

            <input type="radio" name="bloodtype" id="C"><label for="C">C</label>

            <input type="radio" name="bloodtype" id="o"><label for="o">o</label>

            <input type="radio" name="bloodtype" id="AB"><label for="AB">AB</label>

        </p>

        <p>

            爱好

            <label>

                <input type="checkbox" name="hobby" value="足球">足球

            </label>

            <label>

                <input type="checkbox" name="hobby" value="篮球">篮球

            </label>

            <label>

                <input type="checkbox" name="hobby" value="羽毛球">羽毛球

            </label>

            <label>

                <input type="checkbox" name="hobby" value="游泳">游泳

            </label>

        </p>

        <p>

            请输入密码

            <input type="password">

        </p>

        <p>

            <select>

                <option value="JavaScript">JavaScript</option>

                <option value="Java">Java</option>

                <option value="PHP">PHP</option>

                <option value="C++">C++</option>

            </select>

        </p>

        <p>

            留言：

            <textarea cols="30" rows="10"></textarea>

        </p>

        <p>

            <button>我是一个普通按钮</button>

        </p>

        <p>

            <input type="button" value="我是一个普通按钮">

        </p>

        <p>

            <input type="submit" value="提交表单">

        </p>

        <p>

            <input type="reset" value="重置表单">

        </p>

        <p>

            颜色选择：

            <input type="color">

        </p>

        <p>

            日期选择：

            <input type="data">

        </p>

        <p>

            时间选择：

            <input type="time">

        </p>

        <p>

            电子邮件：

            <input type="email">

        </p>

        <p>

            必填：

            <input type="text" required>

        </p>

        <p>

            数字：

            <input type="number" min="10" max="20">

        </p>

        <p>

            拖拽条

            <input type="range" min="10" max="20">

        </p>

        <p>

            搜索框

            <input type="search">

        </p>

        <p>

            <input type="url">

        </p>

        <p>

            省份：

            <input type="text" list="lis">

            <datalist id="lis">

                <option value="山西">

                <option value="山东">

                <option value="广西">

                <option value="广东">

                <option value="陕西">

                <option value="湖南">

                <option value="湖北">

            </datalist>

        </p>

    </form>

    

<table border="1" width="600">

        <caption>我是表格的标题</caption>

        <tr>

            <th>第一季度</th>

            <th>第二季度</th>

            <th>第三季度</th>

            <th>第四季度</th>

        </tr>

        <tr>

            <td colspan="2">A</td>

            <td>B</td>

            <td>C</td>

        </tr>

        <tr>

            <td>E</td>

            <td colspan="3">F</td>

        </tr>

        <!-- rowspan行跨度 -->

        <tr>

            <td>L</td>

            <td>I</td>

            <td>J</td>

            <td>K</td>

        </tr>

    </table>

    <table border="1">

        <thead>

            <tr>

                <th colspan="2">第一季度</th>

                <th colspan="2">第二季度</th>

                <th colspan="2">第三季度</th>

                <th colspan="2">第四季度</th>

            </tr>

            <tr>

                <th>国内</th>

                <th>国外</th>               

                <th>国内</th>

                <th>国外</th>               

                <th>国内</th>

                <th>国外</th>               

                <th>国内</th>

                <th>国外</th>               

            </tr>

        </thead>

        <tbody></tbody>

        <tfoot></tfoot>

    </table>

</body>

</html>

榊sakaki
关注
基础 格式 表单 框架 图像 音频/视频 链接 列表 表格
11-22
基础 格式 表单 框架 图像 音频/视频 ...列表 表格 样式/节 元信息 编程 HTML5 中添加的属性。 属性 描述 = HTML5 中新的事件属性。 Window 事件属性 Form 事件 Keyboard 事件 Mouse 事件 Media 事件
JavaScript实现鼠标经过表格某行时此行变色
01-21
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE ...
HTML表格表单以及列表
lh11223326的博客
03-31 1887
标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。HTML常用的图片标签和超链接标签-CSDN博客HTML常用文本标签-CSDN博客：表示表格，表格的所有内容需要写在和
基于Vue uni-app的自定义列表表格信息展示组件
chenchuang0128的博客
05-28 1724
随着软件技术的不断发展，前端开发面临着越来越多的挑战。特别是在业务场景复杂多变的情况下，如何提高开发效率和降低维护成本成为了关键。本文旨在探讨组件化开发在前端应用中的重要性，并以Vue uni-app自定义列表表格为例，介绍如何实施组件化开发，从而优化开发过程，提升产品质量。一、引言随着前端应用规模的不断扩大，开发复杂度也在逐渐提高。传统的整体式开发方式往往导致代码耦合度高，任何小的改动都可能引起整体逻辑的变动，这无疑增加了开发和维护的难度。因此，组件化开发成为了一种有效的解决方案。
表格与列表
DF_jie的博客
11-20 2182
表格 表格主要用于显示、展示数据。 表格不是用来布局页面的,而是用来展示数据的。 如图：展示出看一个很直观的数据。 单元格用法: <table> <!-- <td>单元格内的文字</td> --> <tr> <th>姓名</th> <th>性别</th> <.
前端Vue uni-app自定义列表表格信息展示可用于商品规格参数展示
chenchuang0128的博客
06-21 2015
前端Vue自定义列表表格信息展示可用于商品规格参数展示， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13131 效果图如下： #### 使用方法 ```使用方法 <!-- table-list:表格数组 数组里对象可自定义字段 --> <cc-defineTable :table-list="tableArr"></cc-defineTable> ``` #### HTM
Markdown列表中插入表格
SWY's Workshop
03-30 2184
Markdown列表中插入表格 如题。 编辑MArkdown时，如果在有序列表的一项中插入表格，会无法显示表格样式。此时，在列表项中（输入表格前）多键入一个enter即可。 ...
列表与表格（自己的学习分享）
hzx229的博客
03-12 1779
列表表格
labview 表格
weixin_39926429的博客
11-06 2223
（1）按如下图所示创建该表格的调用节点（关于设定单元格的）放置到程序框图里。（2）输入x-index(列号)、Y-index(行号)，value。（5）将除行首和列首的数据清空：遍历表格单元格，设定为空字符串。(3)设定行首和列首的字体大小，设定列首的高度。本文列举了labveiw原生表格的常用问题。(3) 设置是否需要垂直和水平滚动条。按图下图活动表格的"选择区域起始"属性。2.横向和纵向拉伸初步设定宽度和高度。(5) 勾选需要水平和垂直滚动线。(4) 勾选需要行首和列首。(2) 行数和列数。
LaTeX学习(二) 列表 表格等内容
backer
03-04 1798
接上篇：http://blog.csdn.net/qq_31390999/article/details/79431524这篇主要讲表格，列表的使用列表之前的与上篇相同列表可以进行嵌套（就像PPT一样）为了对列表的命名进行更改，使用一个宏包\usepackage{enumerate}这是enumerate默认的生成列表情况，如果想要更改命名情况，类似于以下情况这种情况是以A. B.开头也可以更改编...
前端之HTML列表、表格及表单
一切随心走的博客
09-15 2948
文章目录1、表格 table1.1、创建表格1.2、表格属性1.3、表头单元格标签th1.4、表格标题caption1.5、合并单元格1.5.1、合并单元格2种方式1.5.2、合并单元格顺序1.5.3、合并单元格三步曲1.6、总结表格1.7、表格划分结构2、列表标签2.1、无序列表 ul2.2、有序列表 ol2.3、自定义列表2.4、列表总结3、表单标签3.1、input控件3.1.1、type属性3.1.2、value属性值3.1.3、name属性3.1.4、checked属性3.1.5、input属性小
一文搞懂HTML中的表格、表单、列表
一个非常Cool的人
01-21 2614
讲述了表格、表单、列表的语法,举例了代码如何使用,并对其适合做什么工作进行了分析。
内网安全管理功能列表表格模板.doc
09-20
内网安全管理功能列表表格模板.doc
易语言超级列表框画表格线
06-05
经试验发现，窗口重绘消息是排在列表框重绘消息之后，这样就好办了，我们在列表框重绘消息里发送一个窗口重绘消息，然后在窗口重绘消息里对列表框画表格线。经试验此法获得成功，效果不错。 @lijianye。
前端学习——CSS——李白代表作品页面(3)
2301_80073593的博客
10-02 1629
在一个无序列表中，列表项的标志是指出现在各列表项旁边的圆点或其他符号。
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 472
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
【CSS】position
最新发布
小秀的博客
10-02 461
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
在线css像素px到rem的转换器
key12315的专栏
09-30 501
在线css像素px到rem的转换器
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 1038
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
HTML编程指南：列表、表格与媒体元素
本资源主要介绍了HTML的基本结构和常用元素，包括列表、表格、媒体的使用，以及HTML编程中的语义化和标签属性的简洁写法。此外，还提到了几种常用的浏览器，如Chrome和百度浏览器。 在HTML编程中，语义化是一个重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值