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

HTML总结2 [转]

news 2025/7/7 13:26:58

以下转载和参考自：HTML 表单。

1、表格  

 

 

 

  可以通过 CSS 设置表格的样式：

  如下为将上面table.lamp th,td样式中的padding注释掉，开启table.lamp中的padding的效果：

2、列表  

3、导航栏

 导航栏使用<ul>列表实现，以下为一个垂直导航栏：

  可以为导航栏添加边框，通过添加ul的border，li的border-bottom，同时将li:last-child的border-bottom设为none以防止最下面的边框线成为两行：

   以下为一个全高的固定侧导航栏：

 上面使用到的overflow属性规定如何处理超出元素框的内容，如下为其值及对应的处理，以及一个使用示例：

 

 

 

 

  以下为实现了一个水平导航栏，如果想要其固定在底部显示的话，将ul的top属性修改为bottom属性：   

  以下实现了一个粘性导航栏，鼠标滚动的时候导航栏也跟着滚动，但最多到顶部后就固定了：

  

  如下实现了一个带下拉菜单的导航栏：

4、表单

  表单用于收集用户的输入，如下图所示，<form> 用来定义表单，表单中的元素有input 元素（如text文本输入、radio单选按钮、submit提交按钮）、单选按钮、文本输入框等。提交按钮用来向表单处理程序提交表单，表单处理程序通常是包含处理数据的页面，表单的 action 属性指定提交表单时执行的动作（表单处理程序），通常表单会被提交到 web 服务器上的网页，如果省略 action 属性，则 action 会被设置为当前页面。表单中的input元素必须指定name，否则提交的时候会忽略该输入元素。

  method指定使用的HTTP方法（GET或POST）。如果不指定method属性，默认采用的是GET，其它的还有target属性设置设置提交表单后在何处显示响应（默认为_blank在新选项卡，_self为在当前页面，其它值还有_parent、_top、framename），accept-charset设置表单使用的字符集编码（默认为使用页面字符集），autocomplete设置是否打开自动完成功能，即输入的时候是否显示用户的历史输入（默认为"on"即开启），enctype指定HTTP请求的Content-Type，默认为application/x-www-form-urlencoded。novalidate属性设置为"novalidate"的话表示提交表单时不对其进行验证，即不会验证表单的输入。

  以下为一些其它input元素的示例，以及相关属性的说明（其中一些属性是布尔属性，不需要设置其值，如readonly、disabled）：

   

  以下为下拉列表、文本输入框、按钮、datalist（html5新增）这些表单元素的使用示例：

  如下为上面代码的效果，其中图1为点击按钮时的效果，图2为点击最后一个input元素时的效果： 

  元素的formaction属性会覆盖form的action属性，formaction属性适用于 type = "submit" 以及 type = "image"， 其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同：

5、canvas

  HTML5的canvas（画布）元素拥有绘制字符、圆形、图像、路径的能力，画布是一个矩形区域，可以控制其每一像素。canvas 本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

6、绘制矢量图

  矢量图是使用数学公式描述图形的图像。矢量图具有可编辑性，可以对其中的元素进行修改和调整，当我们观察一张矢量图时，我们可以看到它由许多数学方程描述的几何形状组成。不是像素点的集合，所以其文件相对于位图较小。矢量图是基于数学公式的描述，而不是像素点的集合，其在放大或缩小时能保持图像的清晰度和质量，不会失去细节或出现像素化，而位图在放大时会变得模糊，因为每个像素都会变得更大，导致失去细节。一般logo会经常使用矢量图。常见的矢量图格式包括SVG（可缩放矢量图形）、AI、EPS。

  html中使用<svg>标签定义一个矢量图，如下所示： 

   SVG与Canvas：

  HTML中的SVG使用 XML 来描述 2D 图形，因为基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素添加JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。SVG不依赖分辨率，支持事件处理器，适合大型区域渲染（比如谷歌地图），复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快），不适合游戏应用。

  Canvas 是逐像素进行渲染的，依赖分辨率。一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。Canvas不支持事件处理器，适合图像密集型的游戏（其中的许多对象会被频繁重绘）。

7、HTML5

  HTML5 是最新的 HTML 标准，它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机等）之上运行。使用<!DOCTYPE html>声明的文档类型就表示使用HTML5，HTML5 中默认的字符编码是 UTF - 8。HTML5新增了许多标签元素，如<header>、<dialog>，新增了许多表单控件，如日期、日历，新增了一些API，比如用本地存储取代 cookie。HTML5也废弃了一些标签元素，如下所示：

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

8、XHTML

  XHTML是以 XML 格式编写的 HTML，它是更严格更纯净的 HTML 版本，它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识，比如缺少关闭标签，属性值无引号等，但是对于一些小型设备，其往往缺乏解释“糟糕”的标记语言的能力，所以就必须使用XHTML。XHTML中的文档类型声明<!DOCTYPE ....>是必须的，<head>、<title> 以及 <body> 也是必须的。

9、响应式网页设计与BootStrap

  响应式网页设计（WRD，Responsive Web Design)指的是，能够以可变尺寸传递网页，即一个网站能够针对多个类型的终端（PC、移动、平板）提供不同的显示样式，而不是针对每个终端制作一个特定的版本。

  BootStrap是一个前端开发工具包（前端开发框架），基于html、css和javascript，主要用于构建响应式网站，并且是移动优先原则。BootStrap也提供了很多css样式和js插件，使得web开发更加便捷，这块与vue相比的话，BootStrap的缺点是，如果使用BootStrap现成的插件进行开发的话会很快，但是想对于组件进行订制就不太方便，自定义标签或部件的话需要一些额外的代码或查找额外的插件，而vue则适合开发自定义功能和交互比较多的web。 目前最新的BootStrap 5已经从jQuery依赖切换到了使用原生的JavaScript。 Bootstrap 5 与所有现代浏览器兼容（Chrome、Firefox、Edge、Safari 和 Opera）。

  有两种获得Bootstrap的方法，一种是引用来自 CDN 的 Bootstrap 5，一种是从其官网（ https ://getbootstrap.com/)下载 Bootstrap 5后自己托管来引用。比如我们可以使用W3School为Bootstrap 的 CSS 和 JavaScript 提供的CDN，这样用户请求的时候会从最近的缓存中获取Bootstrap，加载时间更短。如下所示为通过第一种方式来引用Bootstrap并对其使用：

  Bootstrap 5 的JavaScript 用于不同的组件，如模态、工具提示、弹出框等，如果只使用 Bootstrap 的 CSS 部分的话，可以不引用Bootstrap JS。 

相关文章：

HTML总结2 [转]

以下转载和参考自&#xff1a;HTML 表单。 1、表格 可以通过 CSS 设置表格的样式&#xff1a; 如下为将上面table.lamp th,td样式中的padding注释掉&#xff0c;开启table.lamp中的padding的效果&#xff1a; 2、列表 3、导航栏 导航栏使用<ul>列表实现&#xff0c;…...

编程日记 2023/8/31 3:04:18

【LeetCode-中等题】2. 两数相加

文章目录 题目方法一&#xff1a;借助一个进制位&#xff0c;以及更新尾结点方法一改进&#xff1a;相比较第一种&#xff0c;给head一个临时头节点&#xff08;开始节点&#xff09;&#xff0c;最后返回的时候返回head.next&#xff0c;这样可以省去第一次的判断 题目 方法一…...

编程日记 2023/8/31 3:03:17

postman接口参数化设置

为什么需要参数化&#xff1f; 我们在做接口测试的过程中&#xff0c;会遇到需要测试同一个接口使用不同的数据的情况&#xff0c;如果每次去一个个填写数据就太麻烦了&#xff0c;这时我们就需要用到接口参数化&#xff0c;我们把数据单独的存放在一个文件中管理&#xff0c;…...

编程日记 2023/8/31 3:02:15

easyexcel poi根据模板导出Excel

1.导入依赖 <!-- poi依赖--> <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.0.1</version> </dependency> <!-- poi对于excel 2007的支持依赖--> <dependency…...

编程日记 2023/8/31 3:01:12

怎么把pdf图片转换成jpg？pdf转jpg的方法分享

pdf文件在我们的日常工作中非常的常见&#xff0c;因为这种文件安全性高&#xff0c;不会轻易的乱码&#xff0c;所以受到了我们的欢迎&#xff0c;但是它不容易被编辑&#xff0c;而且占用内存会比较大&#xff0c;所以我们需要将pdf文件进行转换&#xff0c;接下来小编会为大…...

编程日记 2023/8/31 3:00:11

MongoDB 双机热备那篇文章是 “毒”

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis &#xff0c;Oracle ,Oceanbase 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请加微信号 liuaustin3 &#xff08;…...

编程日记 2023/8/31 2:59:08

Leetcode17电话号码的组合

思路&#xff1a;用字典的形式保存号码的映射&#xff0c;实际组合是前一个数字串的组合加上后面一个数字的所有可能组合 answer_dict{2:[a,b,c],3:[d,e,f],4:[g,h,i],5:[j,k,l],6:[m,n,o],7:[p,q,r,s],8:[t,u,v],9:[w,x,y,z]} class Solution:def letterCombinations(self, d…...

编程日记 2023/8/31 2:58:05

入职一家公司只会功能测试，如何进一步提升自己？

一定要帮助想上进却又迷茫的人。最近也听到一些做功能测试的同学的交流&#xff0c;天天做手工测试&#xff0c;想提升一下自己又不知道如何提升&#xff1f;其实还是在于这些同学对自己没有一个清晰的定位&#xff0c;没有明确的目标。 做为功能测试人员来讲&#xff0c;从发…...

编程日记 2023/8/31 2:57:03

WordPress导航主题源码

源码说明&#xff1a; V2.0406 添加搜索自动索引百度热搜关键词 添加首页tab标签模式加载方式切换(ajax加载和普通加载)(首页设置) 修复tab标签ajax加载模式会显示未审核的网址的bug 小屏幕热搜采用水平滚动 优化子主题支持 添加文章分页 添加解决WordPress 429的服务(…...

编程日记 2023/8/31 2:56:02

基于ADAU1452 DSP ANC和AEC算法的实现

是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？加我微信hezkz17, 本群提供音频技术答疑服务，+群附加赠送，DSP音频项目核心开发资料, 1 使用Sigma中的NLMS算法模块 对应C源代码：...

编程日记 2023/8/31 2:54:45

Wireshark数据抓包分析之传输层协议（TCP协议)

一、实验目的&#xff1a; 通过使用wireshark对TCP协议的数据包的抓取分析TCP协议的具体内容 二、预备知识: 1.需要了解TCP协议的三次握手过程 2.需要了解TCP协议的四次挥手的过程 三、网络拓扑 四、实验过程&#xff1a; part1&#xff1a;3次握手和4次挥手的数据包的获取 …...

编程日记 2023/8/31 2:53:44

ADRV9009子卡 设计原理图：FMCJ450-基于ADRV9009的双收双发射频FMC子卡 便携测试设备

FMCJ450-基于ADRV9009的双收双发射频FMC子卡 一、板卡概述 ADRV9009是一款高集成度射频(RF)、捷变收发器&#xff0c;提供双通道发射器和接收器、集成式频率合成器以及数字信号处理功能。北京太速科技&#xff0c;这款IC具备多样化的高性能和低功耗组合&#xff0c;FMC子…...

编程日记 2023/8/31 2:52:43

Linux 桌面上的 Firefox 面临着大问题

导读毫无疑问&#xff0c;无论是在桌面、笔记本电脑还是移动设备上&#xff0c;浏览器都是任何操作系统中最重要的应用之一。 如果没有一个功能强大、快速且稳定的浏览器&#xff0c;操作系统的实用性将大幅度降低&#xff0c;以至于我相当确定&#xff0c;如果一个操作系统没有…...

编程日记 2023/8/31 2:51:42

查漏补缺 - 构造函数，原型，this，原型链，继承

目录 1&#xff0c;构造函数2&#xff0c;原型3&#xff0c;this4&#xff0c;原型链1&#xff0c;特点2&#xff0c;Object.prototype.toString()3&#xff0c;instanceof 运算符4&#xff0c;Object.getPrototypeOf()5&#xff0c;创建空原型对象6&#xff0c;面试题 5&#…...

编程日记 2023/8/31 2:50:41

C# 学习笔记--个人学习使用 ＜2＞

C# 学习笔记 Chapter 2 比较硬的基础部分Section 1 委托Part 1 Action 与 func 委托的示例Part 2 自定义委托Part 3 委托的一般使用Part 4 委托的高级使用Part 5 适时地使用接口 Interface 取代一些对委托的使用 Section 2 事件Part 1 初步了解事件Part 2 事件的应用Part 3 事件…...

编程日记 2023/8/31 2:49:39

Linux网络编程Socket通信6-Libevent移植与使用

目录 libeventlibevent交叉编译并移植libevent安装安装步骤测试代码libevent执行报错解决 libevent_base根节点event_base_newevent_base_freeevent_reinit event_loop循环等待事件event_base_loopevent_base_dispatchevent_base_loopexitevent_base_loopbreak event事件event_…...

编程日记 2023/8/31 2:48:37

c#：委托 泛型委托的使用 泛型约束

委托 在 C# 中&#xff0c;delegate 是一种引用类型&#xff0c;它允许您定义和使用可以引用特定方法的对象。delegate 可以看作是一种函数指针&#xff0c;它可以在运行时动态地调用不同的方法。 以下是一个简单的例子来说明 delegate 的实际作用&#xff1a; // 1. 定义一…...

编程日记 2023/8/31 2:47:36

大数据之linux入门

一、linux是什么 linux操作系统 开发者是林纳斯-托瓦兹&#xff0c;出于个人爱好编写。linux是一个基于posix和unix的多用户、多任务、支持多线程和多CPU的操作系统。 Unix是20世纪70年代初出现的一个操作系统&#xff0c;除了作为网络操作系统之外&#xff0c;还可以作为单…...

编程日记 2023/8/31 2:46:36

MPI之MPI_Sendrecv接口以及空进程概念介绍

MPI_Sendrecv函数原型 int MPI_Sendrecv(const void *sendbuf, int sendcount, MPI_Datatype sendtype, int dest, int sendtag,void *recvbuf, int recvcount, MPI_Datatype recvtype, int source, int recvtag, MPI_Comm comm, MPI_Status *status);其中各个参数的含义如下&…...

编程日记 2023/8/31 2:45:33

Revit SDK：PointCurveCreation 创建点来拟合曲线

前言 这个例子通过留个例子来展示如何通过点来拟合曲线或者曲面。 内容 PointsParabola 生成抛物线的核心逻辑&#xff1a; double yctr 0; XYZ xyz null; ReferencePoint rp null; double power 1.2; while (power < 1.5){double xctr 0;double zctr 0;while (…...

编程日记 2023/8/31 2:44:32

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/6/21 9:41:59

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/7/6 20:40:10

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/6 3:14:03

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/7/5 12:48:43

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/7/6 14:32:21

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/7/6 4:33:49

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/7/6 20:16:18

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/7/5 17:21:18