当前位置: 首页 > news >正文

HTML (总结黑马的)

<br>换行
<hr>水平线
div  独占一行
span 不换行
header  网页头部
nav     网页导航
footer  网页底部
aside   网页侧边栏
section 网页区块
article 网页文章
&nbsp;  空格
&lt;    小于号
&gt;    大于号

图片:
<img src="./cat.jpg" alt="替换文本" title="提示文本">            替换文本是图片没有显示的时候显示对应的文字;提示文本是鼠标悬停上面的时候显示的文字


超链接:
<a href="https://www.baidu.com">跳转到百度</a>
href  超链接的跳转地址
      #  开发初期不确定跳转地址,#表示空链接,页面不会跳转,在当前页面刷新一次
target="_blank" 实现在新窗口打开页面


音频:
<audio src="音频的 URL"></audio>  支持这三种格式:MP3、ogg、wav
    controls  显示音频播放面板
    loop      循环播放
    autoplay  自动播放(为提升用户体验,浏览器一般会禁用自动播放功能)


视频:
<video src="视频的 URL"></video>   支持格式:MP4、Ogg、WebM
    controls  显示音频播放面板
    loop      循环播放
    muted       静音播放
    autoplay  自动播放(为提升用户体验,浏览器支持在静音状态下自动播放)


列表:(有三种)
无序列表:                ul 申明是无序列表  li:写列表条目 (最总效果类似于微博热搜的展示)
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ul>
有序列表:                标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。  类似于word的缩进
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li> ……
</ol>
定义列表:                标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情    类似于苹果官网最下面的那个效果
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd> ……
</dl>


表格:            标签:table 嵌套 tr,tr 嵌套 td / th
    table   表格
    tr         行
    th        表头单元格
    td        内容单元格
    提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

    表格结构标签:
    thead  表头内部  表格头部内容
    tbody  表头主体    主要内容区域
    tfood  表格底部  汇总信息区域

    合并单元格:
    rowspan  跨行合并 保留最上面的单元格
    colspan  跨列合并 保留最做的单元格 


表单:
<input type="..." >
<input type="..." placeholder="提示信息">
    placeHoder 占位文本

    text 文本框,用于输入单行文本
    password  密码框
    radio  单选框
        name  控件名称  (控件分组,同组中只能选中一个(单选功能))
        checked  默认选中  属性名和属性值相同时,简写为一个单词
    checkbox  多选框
        checked  默认选中
    file    上传文件
        multiple  上传文件时实现多选
<input type="file" multiple>        默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女


下拉菜单:       标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。   默认显示第一项,selected 属性实现默认选中功能
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>


文本域:
<textarea>默认提示文字</textarea>
• 实际开发中,使用 CSS 设置 文本域的尺寸
• 实际开发中,一般禁用右下角的拖拽功能


lable标签:
写法一:
<input type="radio" id="man">
<label for="man">男</label>
写法二:
<label><input type="radio"> 女</label>


按钮:
<button type="">按钮</button>
    submit  提交按钮,点击之后提交数据到后台
    reset   重置按钮,点击后表单控件恢复默认值
    button  普通按钮,默认没有功能,一般配合JS使用


拓展:属性名和属性值相同时,可以简写为一个单词

相关文章:

HTML (总结黑马的)

<br>换行 <hr>水平线 div 独占一行 span 不换行 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章 空格 < 小于号 > 大于号 图片&#xff1a; <img src"./cat.jpg" alt&q…...

YOLOv8 segment介绍

1.YOLOv8图像分割支持的数据格式&#xff1a; (1).用于训练YOLOv8分割模型的数据集标签格式如下: 1).每幅图像对应一个文本文件&#xff1a;数据集中的每幅图像都有一个与图像文件同名的对应文本文件&#xff0c;扩展名为".txt"; 2).文本文件中每个目标(object)占一行…...

PMBOK® 第六版 项目整合管理概念

目录 读后感—PMBOK第六版 目录 项目往往会牵涉到众多专业的知识以及来自不同专业、具有不同性格且可能处在不同地理位置的人员&#xff0c;存在着诸多不同分工的状况。要是没有统一的目标&#xff0c;相互之间也没有有效的沟通机制&#xff0c;并且不存在计划、监控以及平衡等…...

【Qt】【模型视图架构】代理模型

文章目录 代理模型简单介绍QSortFilterProxyModel类简单介绍排序过滤子类化 代理模型简单介绍 代理模型的作用是可以将一个模型中的数据进行排序或者过滤&#xff0c;然后提供给视图进行显示。 如下所示&#xff0c;创建一个源模型、一个代理模型&#xff0c;界面上创建一个列…...

Flutter 中的 IconTheme 小部件:全面指南

Flutter 中的 IconTheme 小部件&#xff1a;全面指南 Flutter 是一个功能丰富的 UI 开发框架&#xff0c;它允许开发者使用 Dart 语言来构建跨平台的移动、Web 和桌面应用。在 Flutter 的丰富组件库中&#xff0c;IconTheme 是一个用于设置应用中图标主题的小部件&#xff0c;…...

virtualbox虚拟机、centos7安装增强工具

文章目录 1. virtualBox语言设置2. 设置终端启动快捷键3. 添加virtualbox 增强工具4. 设置共享文件夹 1. virtualBox语言设置 virtualbox -> file -> perferences -> language ->选择对应的语言 -> OK virtualbox -> 管理 -> 全局设定 -> 语言 -> …...

Kotlin 泛型

文章目录 定义泛型属性泛型函数泛型类或接口 where 声明多个约束泛型具体化in、out 限制泛型输入输出 定义 有时候我们会有这样的需求&#xff1a;一个类可以操作某一类型的对象&#xff0c;并且限定只有该类型的参数才能执行相关的操作。 如果我们直接指定该类型Int&#xff…...

Tomcat 面试题(一)

1. 简述什么是Tomcat &#xff1f; Tomcat是一个开源的Java Servlet容器&#xff0c;它实现了Java Servlet和JavaServer Pages (JSP)技术&#xff0c;提供了一个运行Java Web应用程序的平台。Tomcat由Apache软件基金会维护&#xff0c;并广泛用于开发和部署Web应用程序。 Tom…...

跟踪一个Pytorch Module在训练过程中的内存分配情况

跟踪一个Pytorch Module在训练过程中的内存分配情况 代码输出 目的:跟踪一个Pytorch Module在训练过程中的内存分配情况 方法: 1.通过pre_hook module的来区分module的边界 2.通过__torch_dispatch__拦截所有的aten算子,计算在该算子中新创建tensor的总内存占用量 3.通过tensor…...

LeetCode 2965.找出缺失和重复的数字:小数据?我选择暴力(附优化方法清单:O(1)空间方法×3)

【LetMeFly】2965.找出缺失和重复的数字&#xff1a;小数据&#xff1f;我选择暴力&#xff08;附优化方法清单&#xff1a;O(1)空间方法3&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-missing-and-repeated-values/ 给你一个下标从 0 开始的二维…...

【运维】VMware Workstation 虚拟机内无网络的解决办法(或许可行)

【使用桥接模式】 【重置网络】 这个过程涉及管理Linux系统中的网络驱动程序和网络管理工具。以下是每个步骤的详细解释&#xff1a; 卸载网络驱动模块&#xff1a; sudo rmmod e1000 sudo rmmod e1000e sudo rmmod igb这些命令使用 rmmod&#xff08;remove module&#xff…...

如何使用Dora SDK完成Fragment流式切换和非流式切换

我想大家对Fragment都不陌生&#xff0c;它作为界面碎片被使用在Activity中&#xff0c;如果只是更换Activity中的一小部分界面&#xff0c;是没有必要再重新打开一个新的Activity的。有时&#xff0c;即使要更换完整的UI布局&#xff0c;也可以使用Fragment来切换界面。 何…...

低代码开发平台(Low-code Development Platform)的模块组成部分

低代码开发平台&#xff08;Low-code Development Platform&#xff09;的模块组成部分主要包括以下几个方面&#xff1a; 低代码开发平台的模块组成部分可以按照包含系统、模块、菜单组织操作行为等维度进行详细阐述。以下是从这些方面对平台模块组成部分的说明&#xff1a; …...

Java网络编程(上)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f649; 内容推荐:Java文件IO&#x1f649; &#x1f439;今日诗词:来如春梦几多时&#xff1f;去似朝云无觅处&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&a…...

Spring Kafka 之 @KafkaListener 注解详解

我们在开发的过程中当使用到kafka监听消费的时候会使用到KafkaListener注解&#xff0c;下面我们就介绍下它的常见属性和使用。 一、介绍 KafkaListener 是 Spring Kafka 提供的一个注解&#xff0c;用于声明一个方法作为 Kafka 消息的监听器 二、主要参数 1、topic 描述&…...

【量算分析工具-贴地距离】GeoServer改造Springboot番外系列九

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…...

【linux】(1)文件操作及vi

文件和目录的创建 创建文件 touch 命令&#xff1a;创建一个新的空文件。 touch filename.txtecho 命令&#xff1a;创建一个文件并写入内容。 echo "Hello, World!" > filename.txtcat 命令&#xff1a;将内容写入文件。 cat > filename.txt然后输入内容&…...

【5】MySQL数据库备份-XtraBackup - 全量备份

MySQL数据库备份-XtraBackup-全量备份 前言环境版本 安装部署下载RPM 包二进制包 安装卸载 场景分析全量备份 | 恢复备份恢复综合 增量备份 | 恢复部分备份 | 恢复 前言 关于数据库备份的一些常见术语、工具等&#xff0c;可见《MySQL数据库-备份》章节&#xff0c;当前不再重…...

数据治理-数据标准演示

数据字典 数据标准-数据字典 词根 数据标准-词根 业务字典映射 数据标准-业务字典映射 标准文档 数据标准-标准文档...

基于Chisel的FPGA流水灯设计

Chisel流水灯 一、Chisel&#xff08;一&#xff09;什么是Chisel&#xff08;二&#xff09;Chisel能做什么&#xff08;三&#xff09;Chisel的使用&#xff08;四&#xff09;Chisel的优缺点1.优点2.缺点 二、流水灯设计 一、Chisel &#xff08;一&#xff09;什么是Chise…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...