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

前端基础-2day

前端基础

这里写目录标题

  • 前端基础
    • div和span标签
      • div 标签
      • span标签
    • 列表
      • 有序列表
      • 无序列表
      • 自定义列表
    • 图片
    • 超链接标签
    • 表格 table
        • 表格合并
    • 表单标签
        • 表单控键属性

div和span标签

div 标签

没有具体的含义,用于划分页面区域,独占一行 快捷键:div={}*3

span标签

文本独立,需要修饰,独立修饰,由里面的内容决定宽度和高度,内容多宽,结果就多宽。

列表

有序列表


形式: 
<ol><li></li>
</ol>

有序列表的1,2,3…都是自动生成
《li》中间可以放任意标签,但是ol当中只能放li 标签

< ol>的属性

  1. type= “1”;“a”;“A”;“i”;“I” 表示选择的排序的方式
  2. start = “2”… 表示从那个开始哦排序

无序列表

 形式:  <ul> <li></li> </ul>

但是ul当中只能放li 标签
前面的符号默认为黑色的实心圆

《ul》的属性
type = “disc”(黑色实心圆) ;”cicle“(空心圆) ”square(正方形)“ ‘none(什么都没有,用的最多)’

自定义列表

自定义列表多用于图文混排的现象

 形式: <dl> <dt> 我是图片</dt>  <dd>  我是文字</dd> </dl>

图片

标签:img

形式: <img  src = ''>

图片标签的属性

  1. src = "‘图片的路径
  2. ’title =鼠标悬停在上面的提示信息
  3. alt =图片不显示后的提示信息
  4. width 宽度
  5. height 高度
    注意:高度和宽度会等比例运算

超链接标签

标签:a

形式: <a href = '路径' title = ""> </a>

超链接标签的属性

  1. href :路径
  2. title 鼠标悬停的提示
  3. target 规定在新窗口还是当前窗口打开页面 新窗口(blank),默认是当前窗口打开页面

表格 table

标签:table

形式: 
< table>< tr>< td>< td>< /tr>
</table>

tr 表示的是行 ,td 表示的是列。
表格的属性

  1. width 宽度
  2. height 高度
  3. border 边框
  4. bgrdercolor 边框颜色
  5. bgcolor 背景颜色
  6. align 水平对齐
  7. cellspacing 单元格与单元格之间的间距
  8. cellpadding 单元格和内容之间的空隙
tr 的属性 td的属性
height 行高 行高
bgcolor 背景颜色 背景颜色
align 文字对齐 文字对齐
valign 文字垂直对齐 文字垂直对齐

表格合并

  1. colspan 所需要合并的单元格的列数
  2. rowspan 所需要合并的单元格的行数

表单标签

形式:
<form menthod = '' action = ''>#框框
<input type = 'text'/>#按键
</form>

实例:

<form action="form_action.asp" method="get">First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" /><input type="submit" value="Submit" />
</form>

表单控键属性

type

  1. text 文本框
  2. password 密码框
  3. submit 提交框
  4. button 按钮框
  5. reset 重置框
    placeholder 输入前提示
    name 必须设置,否则不会发送给服务器
    value 校验

相关文章:

前端基础-2day

前端基础 这里写目录标题前端基础div和span标签div 标签span标签列表有序列表无序列表自定义列表图片超链接标签表格 table表格合并表单标签表单控键属性div和span标签 div 标签 没有具体的含义&#xff0c;用于划分页面区域&#xff0c;独占一行 快捷键&#xff1a;div{}*3 …...

在线一键JS混淆还原

当今&#xff0c;随着互联网的发展&#xff0c;越来越多的网站开始使用JavaScript来实现动态交互和用户体验。但是&#xff0c;由于JavaScript代码的开放性和易于复制&#xff0c;网站管理员需要采取一些措施来保护他们的代码。这就是JavaScript混淆工具产生的原因。 jsjiami.…...

Java基本语法

目录 一、注释方式 1、单行注释 // 2、多行注释 /*...*/ 3、文档注释 /**....*/ 二、标识符和关键字 三、数据类型 拓展及面试题讲解 1、整数拓展 进制 二进制0b 八进制0 十六进制0x 2、字符拓展 编码Unicode表 2字节 0~65536 3、字符串拓展 4、布尔值拓展 一、注释方式…...

什么表单设计工具能快速提升办公效率?

在信息化快速发展的年代&#xff0c;谁能掌握更先进的技术&#xff0c;谁就能拥有更广阔的发展前景。在以前的办公环境中&#xff0c;传统的表单制作工具占据了主流地位&#xff0c;随着办公自动化的快速发展&#xff0c;传统表单工具的弊端也暴露出来了&#xff0c;采用更先进…...

SystemVerilog——Axi4Lite_To_Localbus

摘要&#xff1a;用SystemVerilog对Axi4转localbus进行编写与仿真 如果需要从PS端对PL进行寄存器的读写操作&#xff0c;从znyq M_AXI_HPM_FPD出来&#xff0c;经过axi_interconnect 模块分出多个通道&#xff08;不同的地址&#xff09;&#xff0c;经过一个axi_slave模块&am…...

硬件_IMX6ULL的LCD控制器

硬件_IMX6ULL的LCD控制器 文章目录硬件_IMX6ULL的LCD控制器一、 LCD控制器模块介绍1.1 硬件框图1.2 数据传输与处理1.3 时序控制二、 LCD控制器寄存器简介2.1 LCDIF_CTRL寄存器2.2 LCDIF_CTRL1寄存器2.3 LCDIF_TRANSFER_COUNT寄存器2.4 LCDIF_VDCTRL0寄存器2.5 LCDIF_VDCTRL1寄…...

ICLR 2022—你不应该错过的 10 篇论文(下)

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 ICLR 2023已经放榜&#xff0c;但是今天我们先来回顾一下去年的ICLR 2022&#xff01; ICLR 2022将于2022年 4 月 25 日星期一至 4 月 29 日星期五在线举行&#xff08;连续第三年&#xff01;&#x…...

国内外优秀程序员的私域博客大全

文章目录 国内外优秀程序员的私域博客大全**国内的优秀程序员****国外的优秀程序员**结语国内外优秀程序员的私域博客大全 国内的优秀程序员 1、风雪之隅-惠新宸 擅长领域:PHP、PECL等 Laruance惠新宸——国内最有影响力的PHP技术专家,PHP开发组核心成员, Zend顾问, PHP7及…...

【C++ Primer Plus】第六章:分支语句和逻辑运算符

文章目录第六章 分支语句和逻辑运算符6.1 字符函数库cctype6.2 ?:运算符6.3 读取数字的输入6.4 cin的处理过程char类型intdoublechar数组使用char数组来存储输入6.5 写入到文本文件中6.6 读取文本文件6.7 总结第六章 分支语句和逻辑运算符 6.1 字符函数库cctype C从C语言继承…...

堡垒机的主要功能是什么?为什么需要堡垒机?

堡垒机是一种用于管理和控制服务器的工具&#xff0c;其主要功能是为管理人员提供安全、便捷的远程管理和操作方式。为什么需要堡垒机呢&#xff1f;下面我们将详细阐述堡垒机的主要功能和必要性。 一、堡垒机的主要功能&#xff1a; ①、用户认证和授权管理&#xff1a;堡垒机…...

记录spring中Transactional事务注解失效的六个场景

记录spring中Transactional事务注解失效的六个场景 方法内的自调用 原因&#xff1a;通过this内部调用其他带有Transactional注解的方法&#xff0c;是通过this进行调用&#xff0c;并没有通过cglib代理对象进行调用&#xff0c;导致方法未被增强导致无法检测内部事务 解决方…...

【23种设计模式】行为型模式详细介绍(下)

前言 本文为 【23种设计模式】行为型模式 相关内容介绍&#xff0c;下边将对访问者模式&#xff0c;模板模式&#xff0c;策略模式&#xff0c;状态模式&#xff0c;观察者模式&#xff0c;备忘录模式&#xff0c;中介者模式&#xff0c;迭代器模式&#xff0c;解释器模式&…...

dbeaver工具连接达梦数据库

、一 概述 DBeaver 是一个基于 Java 开发&#xff0c;免费开源的通用数据库管理和开发&#xff0c;DBeaver 采用 Eclipse 框架开发&#xff0c;支持插件扩展&#xff0c;并且提供了许多数据库管理工具&#xff1a;ER 图、数据导入/导出、数据库比较、模拟数据生成等&#xff0…...

比Teambition、Worktile 更适合研发团队的几大工具盘点

Worktile 和 Teambitiom 哪个更好&#xff1f;两个产品各有特点。1.Teambition 优势&#xff1a;操作简单、个人版永不收费、更适合小型团队&#xff1b;2.Teambition 劣势&#xff1a;无法满足中大型团队复杂的项目管理、自定义能力弱、无法与钉钉以外的工具打通等&#xff1b…...

matlab图像处理常用功能以及函数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、matlab灰度处理相关二、形态学的一些函数1.腐蚀2.膨胀3.开运算4.闭运算三、其他一些可能会用到的方法1.使用hough进行直线检测2.圆检测3.闭合形状检测4.寻找…...

eBPF 之 ProgramType、AttachType和InputContext

1. ProgramType 定义定义在 include/uapi/linux/bpf.h 文件中&#xff0c;不同 Linux 版本会有变化&#xff0c;以下是 Linux 5.19 版本定义&#xff1a;enum bpf_prog_type {BPF_PROG_TYPE_UNSPEC,BPF_PROG_TYPE_SOCKET_FILTER,BPF_PROG_TYPE_KPROBE,BPF_PROG_TYPE_SCHED_CLS,…...

C++运行时类型识别RTTI

C技能 runtime type identification(RTTI) 运行时类型识别在使用多态的时候经常用到。本文将会介绍RTTI的几个特征。1. 运行时类型转换下面的程序模仿了dynamic_cast<type_id>()类型转化符号&#xff0c;根据每个类的id来判断当前的类型&#xff0c;如果id不匹配&#xf…...

idea多时编辑多行-winmac都支持

1背景介绍 idea编辑器非常强大&#xff0c;其中一个功能非常优秀&#xff0c;很多程序员也非常喜欢用。这个功能能够大大大提高工作效率-------------多行代码同时编辑 2win 2.1方法1 按住alt鼠标左键上/下拖动即可 这样选中多行后&#xff0c;可以直接多行编辑。 优点&a…...

BI是报表?BI是可视化?BI到底是什么?

很多企业认为只要买一个前端商业智能BI分析工具就可以解决企业级的商业智能BI所有问题&#xff0c;这个看法实际上也不可行的。可能在最开始分析场景相对简单&#xff0c;对接数据的复杂度不是很高的情况下这类商业智能BI分析工具没有问题。但是在企业的商业智能BI项目建设有一…...

Python基础-数据类型之元组

一、元组的定义 nums (1, 2, 3, 4, 5) 元组是序列的其中一种&#xff0c;每个元素都以逗号分隔&#xff0c;用()包围。 当元组中只有一个元素时&#xff0c;需要在元素后面加逗号分隔&#xff0c;nums (1,)&#xff0c;否则括号会被当成运算符 nums (1) print(type(nums…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...