【HTML】Day02
【HTML】Day02
- 1. 列表标签
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
- 2. 表格标签
- 2.1 合并单元格
- 3. 表单标签
- 3.1 input标签基本使用
- 3.2 上传多个文件
- 4. 下拉菜单、文本域
- 5. label标签
- 6. 按钮button
- 7. div与span、字符实体
- 字符实体
1. 列表标签
作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。
1.1 无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li , ul 是无序列表, li是列表条目
1. ul标签里面只能包裹li标签
2. li标签里面可以包裹任何内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>列表条目1</li><li>列表条目2</li></ul>
</body>
</html>
1.2 有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol嵌套li, ol是有序列表,li是列表条目。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>
</body>
</html>
1.3 定义列表
标签：dl嵌套dt和dd, dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>列表标题</dt><dd>列表描述/详情</dd><dt>列表标题x</dt><dd>列表描述/详情x</dd></dl>
</body>
</html>
2. 表格标签
网页中的表格与Excel表格类似，用来展示数据。
标签：table 嵌套 tr tr嵌套td/th
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- border边框cellspacing单元格间距cellpadding单元格距内容的距离--><table align="center" border="1" cellspacing="0"cellpadding="20"><caption>表格标题</caption><!-- tr表示行 th表头 加粗并居中 td表示列 16:20上课 --><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>28</td></tr><tr><td>2</td><td>尼古拉斯赵四</td><td>18</td></tr></table>
</body>
</html>
表格标签
2.1 合并单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="" cellspacing="" cellpadding=""><!-- colspan跨列合并 --> <!-- rowspan跨行合并 --> <tr><td align="center" colspan="2">1-1</td><td rowspan="2">1-3</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td></tr><tr><td colspan="2" align="center">3-2</td></tr></table>
</body>
</html>
3. 表单标签
3.1 input标签基本使用
input标签type属性值不同，功能也不同。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- action服务器地址 method提交方式 --><form action="http://www.tmooc.cn" method="get"><!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 value值 设置文本框的值--><input type="text" name="username"placeholder="请输入用户名" id="" value="" /><!-- 密码框 placeholder占位文本 --><input type="password" name="pwd"placeholder="请输入您的密码" id="" value="" /><hr ><!-- 单选 必须写value checked 设置默认选中-->性别: <input type="radio" name="gender" id="" value="m" />男<input type="radio" checked="checked" name="gender" id="" value="f" />女<hr ><!-- 多选 和单选类似-->爱好: <input type="checkbox" name="hobby" id=""value="cy" />抽烟<input type="checkbox" name="hobby" id=""value="hj" />喝酒<input type="checkbox" checked="checked" name="hobby" id="tt"value="tt" /><label for="tt">烫头</label><!-- label扩充点击范围 --><input type="checkbox" name="hobby" id="wz" value="wangzhe"/><label for="wz">王者荣耀</label><hr ><!-- 日期选择器-->生日:<input type="date" name="birthday" id="birthday"/><hr ><!-- 文件选择器-->靓照:<input type="file" name="pic" id="pic"/><hr ><input type="submit" value="注册"/></form></body>
</html>
3.2 上传多个文件
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>
4. 下拉菜单、文本域
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="http://www.tmooc.cn" method="get"><!-- 下拉选 -->所在城市:<select name="city"><option value="bj">北京</option><!-- selected默认选中 --><option value="sh" selected="selected">上海</option><option value="gz">广州</option></select><br><!-- 文本域 rows行 cols列-->自我介绍:<textarea name="intro" rows="3" cols="20"placeholder="说点儿啥..."></textarea><!-- 提交按钮 --><input type="submit" value="注册"/><!-- 重置按钮 --><input type="reset" /><!-- 自定义按钮 --><input type="button" value="按钮" /><button type="button">按钮</button></form><p>测试 空格<abc></p><div id="">div1</div><div id="">div2</div><div id="">div3</div><span>span1</span><span>span2</span><span>span3</span></body>
</html>
5. label标签
作用：网页中，某个标签的说明文本。
经验：用label标签绑定文本和表单控件的关系，增大表单控件的点击范围。就比如上面的王者荣耀，点击文字也能选择到
6. 按钮button
<button type="">按钮 </button>
7. div与span、字符实体
作用：布局网页(划分网页区域，摆放内容)
- div:独占一行
- span：不换行
字符实体
相关文章：
【HTML】Day02
【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签 作用：布局内容排列整齐…...
AI 自动化编程对编程教育的影响
AI 自动化编程的未来 引言 你是否曾想过，未来的程序员需要掌握哪些技能呢？随着人工智能的迅猛发展，特别是生成式AI工具的普及，编程的世界正在发生翻天覆地的变化。编程教育也在这种环境下进行着深刻的转型。那么，AI …...
Java100道面试题
1.JVM内存结构 VM内存结构指的是JVM运行时数据区结构，它主要包含以下几个部分： 堆（Heap）：线程共享。 JVM堆（Heap）是Java虚拟机中的一块内存区域（所有线程共享）&#x…...
解密人工智能：如何改变我们的工作与生活
引言：AI崛起背后的思考 在过去的几十年里，人工智能（AI）从科幻小说中的神秘存在，逐渐走进了我们的日常生活。无论是智能手机的语音助手，还是推荐心仪商品的电商平台，AI技术已悄然融入工作与生活的…...
Linux postgresql-15部署文档
一、PostgreSQL的安装 1、下载地址 postgresql安装包下载地址：https://www.postgresql.org/download/linux/redhat/ 2、安装脚本 复制下面的安装脚本即可： sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64…...
visual studio 安全模式
一、安全模式： 在 Visual Studio 中，安全模式是一种启动方式，允许你在禁用所有扩展和自定义设置的情况下启动 Visual Studio。这个模式可以帮助排除插件或扩展引起的问题，特别是在 Visual Studio 无法正常启动时。 二、安全模式下…...
Pandas-timestamp和datetime64的区别
文章目录 1. Timestamp（时间戳）2. Datetime64（日期时间64位）3. 主要区别： pandas.Timestamp 和 pandas.Datetime64 都是用于表示日期和时间的 Pandas 对象，但它们有一些关键的区别： 1. Timesta…...
@MapperScan
简介： MapperScan注解是MyBatis框架在Spring Boot中的一个重要集成注解 作用： MapperScan主要作用是告诉Spring框架在启动时扫描指定的包路径，并将该路径下的所有MyBatis的Mapper接口批量注入到Spring容器中。这样，开发者就可以…...
SQL中聚类后字段数据串联字符串方法研究
在 SQL 中，使用 聚类（GROUP BY） 后将某个字段的数据串联为一个字符串，常见的方法包括以下几种，取决于数据库管理系统（DBMS）的具体支持功能： 1. 使用 GROUP_CONCAT （MySQL…...
【嵌入式硬件】直流电机驱动相关
项目场景： 驱动履带车（双直流电机）前进、后退、转弯 问题描述 电机驱动MOS管烧毁 电机驱动采用IR2104STRH1R403NL的H桥方案（这是修改之后的图） 原因分析： 1.主要原因是4路PWM没有限幅，修改…...
CSP初赛知识学习计划（第一天）
计算机知识全解析 一、计算机的发展历程 计算机的发展堪称一部波澜壮阔的科技史诗，其源头可追溯至古老的计算工具。早期，为了满足人类在天文、历法计算以及商业贸易中对数据处理的需求，算盘、算筹等手动计算器械应运而生，它们依…...
【嵌入式硬件】嵌入式显示屏接口
数字显示串行接口（Digital Display Serial Interface） SPI 不过多赘述。 I2C-bus interface 不过多赘述 MIPI DSI MIPI (Mobile Industry Processor Interface) Alliance, DSI (Display Serial Interface) 一般用于移动设备，下面是接口…...
07-ArcGIS For JavaScript--隐藏参数qualitySettings（memory和lod控制）
目录 1、综述2、sceneview.qualitySettings2.1、sceneview.qualitySettings.memoryLimit2.2、lodFactor2.3 additionalCacheMemory 3、结论 1、综述 先上重点，SceneView.qualitySettings为隐藏对象参数，该对象的memoryLimit和lodFactor等值，…...
QML自定义数值编辑框SpinBox样式
代码展示 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.1Window {visible: truewidth: 640height: 480title: qsTr("Hello World")SpinBox {id: controlvalue: 50editable: truecontentItem: TextInput {z: 2text: control.textFromVal…...
【数据可视化-10】国防科技大学录取分数线可视化分析
🧑 博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...
深入探索：将 Elasticsearch 与 Ruby 工具结合使用
深入探索：将 Elasticsearch 与 Ruby 工具结合使用 一、背景介绍 1. Elasticsearch 与 Ruby 的结合背景 在现代软件开发中，Elasticsearch 作为一个基于 Lucene 的搜索引擎，以其分布式、可扩展、实时搜索等特点而广受欢迎。Ruby，…...
Istio 补充 Kubernetes 的不足
1 Istio 补充 Kubernetes 的不足 Kubernetes 强大但无法解决复杂分布式系统中的非功能性需求，如流量路由、协议转换、请求重试和负载均衡。Istio作为Service Mesh，通过独立的代理进程处理这些需求，避免直接修改业务代码。 2. 独立的代理进程…...
远程主机执行脚本1、无脚本内容外协。
使用 ssh rootyour_host bash -c "source <(cat)" < your_scripts.sh 或类似的命令来远程执行脚本，而不让脚本内容外泄或不让其他人看到脚本信息的原因通常是为了安全性和隐私保护。以下是几种考虑： 安全性：通过直接将脚本内…...
Jmeter进阶篇（32）Jmeter 在 MySQL 数据库压测中的应用
一、引言 在当今数字化时代，数据库性能的优化对于企业的发展至关重要。随着业务量的不断增长，数据库需要承受越来越大的压力。MySQL作为一种广泛使用的开源数据库，其性能和稳定性备受关注。为了确保数据库在高负载情况下能够正常运行，进行压测是必不可少的环节。Jmeter作为…...
Python脚本实现通过Vector VN1630A CAN盒子与ECU通信
1 安装 python-can 包 安装命令如下： pip install python-can安装完成后可用下面命令查看是否安装成功及版本。 pip show python-canName: python-can Version: 4.4.2 Summary: Controller Area Network interface module for Python Home-page: https://github.…...
Spring实现Logback日志模板设置动态参数
版权说明： 本文由博主keep丶原创，转载请保留此块内容在文首。 原文地址： https://blog.csdn.net/qq_38688267/article/details/144842327 文章目录 背景设计日志格式实现配置动态取值logback-spring.xml 相关博客 背景 多个单体服务间存在少量…...
内部类 --- （寄生的哲学）
内部类总共有 4 种（静态内部类、非静态内部类、局部内部类、匿名内部类） 作用： 一：内部类提供了更好的封装，可以把内部类隐藏在外部类之内，不允许同一个包中的其他类访问该类。 二：内部类可以…...
Python深度学习GRU、LSTM 、BiLSTM-CNN神经网络空气质量指数AQI时间序列预测及机器学习分析|数据分享...
全文链接：https://tecdat.cn/?p38742 分析师：Zhixiong Weng 人们每时每刻都离不开氧，并通过吸入空气而获得氧。一个成年人每天需要吸入空气达6500升以获得足够的氧气，因此，被污染了的空气对人体健康有直接的影响&…...
JSP基础
一、Tomcat 1.Tomcat简介： Tomcat是一个免费的开源JSP容器，是Apache的Jakarta项目中的一个核心项目因免费、稳定而成为目前比较流行的Web应用服务器网址：https://tomcat.apache.org/ 2.Tomcat的配置——环境变量 （1）…...
基于Springboot +Vue 在线考试管理系统
基于Springboot Vue 在线考试管理系统 前言 随着信息技术的飞速发展，教育领域正经历着深刻的变革。传统的考试模式因其诸多限制和不便，已难以满足现代教育的需求。基于SpringBoot和Vue框架开发的在线考试系统应运而生，它充分利用了现代互联…...
Node.js 函数
Node.js 函数 1. 概述 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者使用 JavaScript 编写服务器端和网络应用程序。在 Node.js 中，函数是一等公民，意味着它们可以作为变量传递，可以作为参数传递给其他函数，也可以从其他函数返回。本文将详细…...
JVM学习指南(9)-JVM运行时数据区
JVM学习指南(9)-JVM运行时数据区 引言 Java虚拟机（JVM）是Java程序运行的核心，它为Java程序提供了一个与平台无关的执行环境。JVM的重要性不仅在于它实现了Java的跨平台特性，还在于它对程序执行过程中内存的管理。JVM运行时数据区是程序执行过程中存储数据的关键区域，理解…...
2025/1/4期末复习 密码学 按老师指点大纲复习
我们都要坚信，道路越是曲折，前途越是光明。 --------------------------------------------------------------------------------------------------------------------------------- 现代密码学 第五版 杨波 第一章 引言 1.1三大主动攻击 1.中断…...
关于嵌入式系统的知识课堂（二）
成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于嵌入式系统的知识课堂（…...
基于ETAS工具的AutoConnect实现方案
文章目录 前言基于ISOLAR工具实现AutoConnect基于脚本实现AutoConnect总结前言 Autosar软件架构设计中，Connect通常来自于Composition之间（Assembly connectors），Component之间（Assembly connectors），Component与Composition之间（Delegation connectors），还有一种Pa…...