当前位置: 首页 > 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…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...