html基础(列表(ul、ol、dl)、表格table、表单(input、button、label)、div和span、空格nbsp)

news2024/11/25 2:44:20

1无序列表<ul>和有序列表<ol>

1.1无序列表<ul>

<!-- 无序列表 -->
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>

1.2有序列表<ol>

<!-- 有序列表 -->
<ol>
<li>吃饭</li>
<li>学习</li>
<li>睡觉</li>
</ol>

1.3自定义列表<dl>

<!-- 自定义列表 -->
<dl>
<dt>帮助中心</dt>
<dd>咨询电话</dd>
<dd>售后服务</dd>
<dd>建议反馈</dd>
</dl>

2表格<table>

2.1表格标签(table、tr、td)

<!-- 表格 -->
<table>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>

2.2表格属性(border、height、width

<table border="1" height="200" width="200">
一般用cssl来设置表格的属性

2.3表格标题 <caption>、表头 <th>

<table border="1">
<caption>成绩单</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>man</td>
<td>98</td>
</tr>
</table>

2.4表格结构(thead、tbody、tfoot)

<table border="1">
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>man</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>人数</td>
<td>排名</td>
</tr>
</tfoot>

2.5合并单元格

跨行合并 rowspn
跨列合并 rowspan
<table border="1" height="500" width="500">
<tr>
<td rowspan="2">11</td>
<td>22</td>
<td>33</td>
<td>44</td>
</tr>
<tr>
<td>55</td>
<td colspan="2">66</td>
<td>77</td>
<td>88</td>
</tr>

3表单

3.1 收集input

<!-- 表单 -->
<input type="text" placeholder="请输入用户名"> 文本( placeholder是提示)
<input type="password"> 密码
<input type="radio"> 单选
<input type="checkbox"> 多选
<input type="file"> 上传文件

3.1.1单选和默认选中checked
性别:
<input type="radio" name="sex" checked>man
<input type="radio" name="sex">woman

*需要给两个input 加上相同的name

3.1.2上传多个文件 multiple
<input type="file" multiple>

3.1.3按钮<input type="button">

form是表单域,作用是限制范围,如reset属性使其在该表单域内起作用,不影响其它的。

<!-- 按钮 -->
<form action="">
<input type="text" placeholder="账号">
<input type="paasword" placeholder="密码">
<input type="submit" value="注册“>
<input type="reset">
<input type="button" value="普通按钮">
</form>

3.2按钮button

<button>按钮</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
<button button="button">button</button>

3.3下拉菜单<select>

<!-- 下拉菜单 -->
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>

3.4文本域textarea

一般用css设置

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

3.5绑定label

触碰某区域即可选中,方便选中

<input type="radio" name="sex" id="nan"> <label for="nan"> man</label> 法一
<label><input type="radio" name="sex">woman</label> 法二,且需删除for

4语义化标签div、span

div单独占一行,多个span在同一行

<!-- 语义化 -->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>

5字符实体 (空格&nbsp;)

改变一看就&nbsp;很牛就很牛

今日小结:主要学习了列表标签ol、ul,表格table、tr、td,表单input、按钮button、select、文本域、label绑定,div及span,空格&nbsp.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/385414.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电机控制中的2个重要变量(速度和转矩)

电机控制的其它相关内容,大家可以参看专栏的系列文章,链接如下: 运动控制系统(伺服3环)_运动控制三环控制周期_RXXW_Dor的博客-CSDN博客1 、这篇作为运动控制系列的第一篇吧,后续慢慢更新关于PLC的运动控制https://blog.csdn.net/m0_46143730/article/details/124075713…

阿里10年测开经验分享-我的软件测试之路也并不是一帆风顺

简单的先说一下&#xff0c;坐标西安&#xff0c;16届本科毕业&#xff0c;目前在跳槽&#xff0c;一共有面试了有5家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; 其中成功的有5家&#xff0c;另外2…

你不会工作1年了连枚举都还不知道吧?

文章目录一、枚举(Enum)1.1 枚举概述1.2 定义枚举类型1.2.1 静态常量案例1.2.2 枚举案例1.2.3 枚举与switch1.3 枚举的用法1.3.1 枚举类的成员1.3.2 枚举类的构造方法1&#xff09;枚举的无参构造方法2&#xff09;枚举的有参构造方法1.3.3 枚举中的抽象方法1.4 Enum 类1.4.1 E…

Azure OpenAI 官方指南02|ChatGPT 的架构设计与应用实例

ChatGPT 作为即将在微软全球 Azure 公有云平台正式发布的服务&#xff0c;已经迅速成为了众多用户关心的服务之一。而由 OpenAI 发布的 ChatGPT 产品&#xff0c;仅仅上线两个月&#xff0c;就成为互联网历史上最快突破一亿月活的应用。本期从技术角度深度解析 ChatGPT 的架构设…

大数据平台小结

搭建大数据平台启动流程1、启动Nginx服务&#xff08;在bdp-web-mysql服务中&#xff09;cd /usr/local/nginx/# 启动Nginx ./sbin/nginx# 查看端口是否存在 netstat -tunlp|grep 200012、启动zookeeper&#xff08;在bdp-executor-realtime123&#xff09;cd /app/bdp/apache-…

二.项目使用vue-router,引入ant-design-vue的UI框架,引入less

根据前文《使用Vue脚手架工具搭建vue项目》搭建好脚手架后使用 1.vue-router 2.引入UI框架ant design vue 3.引入less 1.vue-router vue-router分为两种模式(默认为hash模式)&#xff1a; hash history hash&#xff1a; 特征&#xff1a; 1.hash会在浏览器路径里带#号&#…

高质量数字化转型创新发展大会暨中国信通院“铸基计划”年度会议成功召开

2023年3月3日&#xff0c;由中国信通院主办的高质量数字化转型创新发展大会暨中国信通院“铸基计划”年度会议在北京成功召开。本次大会深度展示了中国信通院在数字化领域的工作成果&#xff0c;并全面展望了2023年行业的数字化发展趋势。同时&#xff0c;大会发布了中国信通院…

C语言入门知识——(7)VS2022的C语言基础调试

1、什么是bug 这个故事很多人都知道 1947年9月9日&#xff1a;第一个“Bug”被发现的时候&#xff1a;“1949年9月9日&#xff0c;我们晚上调试机器的时候&#xff0c;开着的窗户没有纱窗&#xff0c;机器闪烁的亮光几乎吸引来了世界上所有的虫子。果然机器故障了&#xff0c;…

Qt使用OpenGL进行多线程离屏渲染

基于Qt Widgets的Qt程序&#xff0c;控件的刷新默认状况下都是在UI线程中依次进行的&#xff0c;换言之&#xff0c;各个控件的QWidget::paintEvent方法会在UI线程中串行地被调用。若是某个控件的paintEvent很是耗时&#xff08;等待数据时间CPU处理时间GPU渲染时间&#xff09…

BI不是报表,千万不要混淆

商业智能BI作为商业世界的新宠儿&#xff0c;在市场上实现了高速增长并获得了各领域企业的口碑赞誉。 很多企业把商业智能BI做成了纯报表&#xff0c;二维表格的数据展现形式&#xff0c;也有一些简单的图表可视化。但是这些简单的商业智能BI可视化报表基本上只服务到了一线的…

【JAVA程序设计】【C00110】基于SSM(非maven)的车辆维修管理系统

基于SSM&#xff08;非maven&#xff09;的车辆维修管理系统项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架非maven开发的车辆维修管理系统共分为三个角色&#xff1a;管理员、用户 管理员角色包含以下功能&#xff1a; 查看用户、添加用户、查看车辆信息、故…

FPGA纯verilog实现图像视频旋转 串口指令控制旋转角度 提供工程源码和技术支持

目录1、前言2、理论基础3、设计思路和框架图像输入和采集图像旋转处理图像缓存图像输出4、vivado工程详解5、上板调试验证6、福利&#xff1a;工程代码的获取1、前言 图像旋转是一种常用的图像处理技术&#xff0c;其基本原理就是指图像以某一点为中心旋转一定的角度&#xff…

函数的极限

目录 函数极限的定义&#xff1a; 数列的极限和函数极限 定理1&#xff1a; 自变量趋向有限制时&#xff0c;函数的极限 左右极限&#xff1a; 定理&#xff1a; 需要分左右极限求极限的三种问题&#xff1a; 例题&#xff1a; 例2&#xff1a; 极限性质&#xff1a; 保号…

WebRTC标准与框架解读(1)

1、如果让我来设计webrtc框架我在分析源码的时候&#xff0c;都喜欢做这样一件事情&#xff1a;如果让我来设计它&#xff0c;我会怎么做&#xff1f;大家可以紧跟我的思路&#xff0c;分析一下WebRTC为什么如此设计。为了对整个框架有有一个全面的了解&#xff0c;我们首先要做…

外包测试3年,离职后成功入职华为,拿到offer的那天我泪目了....

一提及外包测试&#xff0c;大部分人的第一印象就是&#xff1a;工作强度大&#xff0c;技术含量低&#xff0c;没有归属感&#xff01;外包工作三年总体感受就是这份工作缺乏归属感&#xff0c;心里总有一种落差&#xff0c;进步空间不大&#xff0c;接触不到核心技术&#xf…

IO详解(文件,流对象,一些练习)

目录 文件 文件概念 文件的路径 路径有俩种表示风格 文件类型 如何区分文本文件还是二进制文件? java对文件的操作 File类中的一些方法 流对象 流对象的简单概念 java标准库的流对象 1.字节流,(操作二进制数据的) 2.字符流 (操作文本数据的) 流对象最核心的四个…

Android Framework-进程间通信——Binder

我们知道&#xff0c;同一个程序中的两个函数之间能直接调用的根本原因是处于相同的内存空间中。 比如有以下两个函数A和B&#xff1a; /*Simple.c*/ void A() { B(); } void B() { }因为是在一个内存空间中&#xff0c;虚拟地址的映射规则完全一致&#xff0c;所以函数A和B之…

【JAVA程序设计】【C00111】基于SSM的网上图书商城管理系统——有文档

基于SSM的网上图书商城管理系统——有文档项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架开发的网上在线图书售卖商城项目&#xff0c;本项目分为三种权限&#xff1a;系统管理员、卖家、买家 管理员角色包含以下功能&#xff1a; 用户信息管理、权限管理、订…

XSS跨站脚本

XSS跨站脚本XSS简介XSS验证XSS危害XSS简介 XSS被称为跨站脚本攻击(Cross-site scripting)&#xff0c;由于和CSS(Cascading Style Sheets)重名&#xff0c;所以改为XSS。XSS主要基于javascript语言完成恶意的攻击行为&#xff0c;因为javascript可以非常灵活的操作html、css和…

day57-day58【代码随想录】二刷数组

文章目录前言一、螺旋矩阵||&#xff08;力扣59&#xff09;二、螺旋矩阵&#xff08;力扣54&#xff09;三、顺时针打印矩阵&#xff08;剑指 Offer29&#xff09;四、在排序数组中查找元素的第一个和最后一个位置&#xff08;力扣34&#xff09;【二分查找】五、有多少小于当…