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

HTML笔记2

news 2026/2/8 22:55:38

11，路径

<!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>

   <!-- 相对路径 -->

    <!-- 1jpg -->

    <img src="./1.jpg" alt=""><br>

    <!-- 2jpg -->

    <img src="../2.png" alt=""><br>

    <!-- 3jpg -->

    <img src="../../3.png" alt=""><br>

   

    <!-- 绝对路径 -->

    <!-- 1.jpg在自己电脑里的图片 -->

    <img src="C:\Users\user\Desktop\vc\photo\picture\code\1.jpg" alt=""><br>

    <!-- 不在自己电脑里的图片复制图片地址 -->

    <img src="https://static.web.sdo.com/jijiamobile/pic/ff14/wallpaper/20221220patch62/ffxiv_6.2patch_01_300x169.jpg" alt="">

</body>

</html>

12， 超链接

<a href="...">

<!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>

    <!-- 点击跳转 -->

    <a href="https://www.baidu.com/">跳转到百度</a><br>

    <a href="./01—标签的写法.html">跳转到01——标签的写法</a><br>

    <!-- 打开为新页面 target="_blank" -->

    <a href="./01—标签的写法.html" target="_blank">跳转到01——标签的写法新页面</a>

    <!-- herf属性值写#，不会跳转 -->

    <a href="#">不会跳转</a>

</body>

</html>    

13，音频标签

<audio src="..." controls loop aotoplay></audio>

<!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>

    <!-- 在hmtl5里面，属性名和属性值完全一样，则可以简写为一个单词，如controls -->

    <audio src="./BUMP OF CHICKEN - Hello,world!.flac" controls loop aotoplay></audio>

</body>

</html>

14，视频标签

<video src="..." controls loop muted aotoplay></video> 

<!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>

    <video src="./视频.mp4" controls loop muted aotoplay></video>

</body>

</html>

15，列表标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 无序列表 -->

    <ul>

        <li>条目列表1</li>

        <li>条目列表2</li>

        <li>条目列表3</li>

    </ul>

    <!-- 有序列表 -->

    <ol>

        <li>第一名</li>

        <li>第二名</li>

        <li>第三名</li>

    </ol>

    <!-- 定义列表 -->

    <dl>

        <dt>防护职能</dt><br>

       

        <dd>剑盾小b</dd>

        <dd>撅枪小b</dd>

        <dd>绿刀小b</dd>

        <dd>暗堕小b</dd>

    </dl>

</body>

</html>

16，表格标签

<!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="1">

        <thead>

        <tr>

            <th>姓名 </th>

            <th>语文</th>

            <th>数学</th>

            <th>总分</th>

        </tr>

      </thead>

      <tbody>

        <tr>

            <td>张三</td>

            <td>99</td>

            <td>97</td>

            <td>196</td>

           

        </tr>

        <tr>

            <td>李四</td>

            <td>97</td>

            <td>97</td>

            <td>194</td>

        </tr>

     </tbody>

     <tfoot>

        <tr>

            <td>平均分</td>

            <td>98</td>

            <td>97</td>

            <td>195</td>

        </tr>

        </tfoot>

    </table>

</body>

</html>

 17，合并单元格

<!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="1">

        <thead>

        <tr>

            <th>姓名 </th>

            <th>语文</th>

            <th>数学</th>

            <th>总分</th>

        </tr>

      </thead>

      <tbody>

        <tr>

            <td>张三</td>

            <td>99</td>

            <td rowspan="2">97</td>

            <td>196</td>

           

        </tr>

        <tr>

            <td>李四</td>

            <td>97</td>

           

            <td>194</td>

        </tr>

     </tbody>

        <tr>

            <td>平均分</td>

            <td>98</td>

            <td>97</td>

            <td>195</td>

        </tr>

        <tfoot>

            <tr>

            <td>排名</td>

            <td colspan="3">全市第一</td>

            <!-- <td>全市第一</td> -->

            <!-- <td>全市第一</td> -->

          </tr>

        </tfoot>

    </table>

</body>

</html>

18， 表单

文本框：<input type="text"> 

密码框：<input type="password">

单选框： <input type="radio">

多选框1： <input type="checkbox" >

多选框2： <input type="checkbox" >

上传文件： <input type="file">

占位文本：<input type="password" placeholder="请输入密码">

默认选中：<checked> 

上传多个文件： <input type="file" multiple>

<!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>

    <!-- 输入什么，客户页面就显示什么 -->

    文本框：<input type="text">

    <br><br>

    <!-- 输入什么都显示为星号 -->

    密码框：<input type="password">

    <br><br>

    <!-- 单选 -->

    单选框: <input type="radio">

    <br><br>

    <!-- 多选 -->

    多选框1: <input type="checkbox" >

    多选框2: <input type="checkbox" >

    <br><br>

    <!-- 上传文件夹 -->

    上传文件: <input type="file">

    <br><br>

    <!-- 占位文本 -->

    文本框:<input type="text" placeholder="请输入用户名">

    <br><br>

    密码框:<input type="password" placeholder="请输入密码">

    <br><br>

    <!-- radio单选功能的实现用name，默认选中checked -->

    性别:

    <input type="radio" name="gender" checked> 男

    <input type="radio" name="gender"> 女

    <br><br>

    <!-- 上传多个文件 -->

    上传多个文件: <input type="file" multiple>

    <br><br>

    <!-- 默认多选 -->

    用户协议:

    <br>

    <input type="checkbox" checked>条款一<br>

    <input type="checkbox" checked>条款二

</body>

</html>

19，下拉菜单

<select>

        <option>...</option>

</select>

<!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>

    城市:

    <select>

        <option>北京</option>

        <option>上海</option>

        <option>广州</option>

        <!-- selected 属性规定在页面加载时预先选定该选项 -->

        <option selected>深圳</option>

    </select>

</body>

</html>

20,，文本域

<textarea>...</textarea>

<!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>

    <!-- 右下角可拖拽放大，以后会禁用 -->

    <textarea>请输入评论</textarea>

</body>

</html>

相关文章：

HTML笔记2

11&#xff0c;路径 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Document</title> <…...

编程日记 2024/3/12 2:33:32

使用Docker实现Jenkins+Python + Pytest +Allure 接口自动化

一、Jenkins搭建 参考《Docker 安装 Jenkins》 进入 jenkins 容器 CLI 界面 docker exec -itu root jenkins /bin/bash二、准备条件 1、替换镜像内源 为了安装wget&#xff0c;默认用yum会安装不上wget命令&#xff0c;参考文章《docker容器内如何更换yum源【只想换成国内…...

编程日记 2024/3/12 2:31:30

论企业安全漏洞扫描的重要性

前言 随着信息技术的迅猛发展和互联网的广泛普及&#xff0c;网络安全问题日益凸显。在这个数字化的世界里&#xff0c;无论是企业还是个人&#xff0c;都面临着前所未有的安全威胁。安全漏洞&#xff0c;作为这些威胁的源头&#xff0c;常常被忽视或无法及时发现。 而安全漏洞…...

编程日记 2024/3/12 2:29:28

23.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-实现配置工具数据结构

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;22.加载配置文件…...

编程日记 2024/3/12 2:28:26

STM32CubeMX学习笔记20——SD卡FATFS文件系统

1. FATFS文件系统简介 文件系统是操作系统用于明确存储设备或分区上的文件的方法和数据结构&#xff08;即在存储设备上组织文件的方法&#xff09;。操作系统中负责管理和存储文件信息的软件机构称为文件管理系统&#xff0c;简称文件系统&#xff1b;不带文件系统的SD卡仅能…...

编程日记 2024/3/12 2:26:24

Facebook商城号为什么被封？如何防封？

由于Facebook商城的高利润空间&#xff0c;越来越多的跨境电商商家注意到它的存在。Facebook作为全球最大、用户量最大的社媒平台&#xff0c;同时也孕育了一个巨大的商业生态&#xff0c;包括广告投放、商城交易等。依托背后的大流量&#xff0c;Facebook商城起号较快&#xf…...

编程日记 2024/3/12 2:25:23

【教程】APP备案全攻略：确保你的应用合规上线

【教程】APP备案全攻略&#xff1a;确保你的应用合规上线 摘要 本文详细介绍了中国大陆地区互联网信息服务提供者&#xff08;AP&#xff09;进行APP备案的流程、要求和注意事项。包括备案对象、备案方式、备案内容、备案流程等方面的详细说明&#xff0c;帮助开发者顺利完成…...

编程日记 2024/3/12 2:24:22

Vue入门2

v-model 原理&#xff1a;v-model本质上是一个语法糖。例如应用于输入框&#xff0c;就是value属性和input事件的合写。 作用&#xff1a;提供数据的双向绑定 数据变&#xff0c;视图跟着变 :value视图变&#xff0c;数据跟着变 input 注意&#xff1a;$event用于在模板中&…...

编程日记 2024/3/12 2:20:18

简介：CMMI软件能力成熟度集成模型

前言 CMMI是英文Capability Maturity Model Integration的缩写。 CMMI认证简称软件能力成熟度集成模型&#xff0c;是鉴定企业在开发流程化和质量管理上的国际通行标准&#xff0c;全球软件生产标准大都以此为基点&#xff0c;并都努力争取成为CMMI认证队伍中的一分子。 对一个…...

编程日记 2024/3/12 2:18:15

mysql的其他问题

1.MySQL数据库作发布系统的存储&#xff0c;一天五万条以上的增量&#xff0c;预计运维三年,怎么优化&#xff1f; a. 设计良好的数据库结构&#xff0c;允许部分数据冗余&#xff0c;尽量避免join查询&#xff0c;提高效率。 b. 选择合适的表字段数据类型和存储引擎&#xf…...

编程日记 2024/3/12 2:17:14

数据结构---复杂度（2）

1.斐波那契数列的时间复杂度问题 每一行分别是2^0---2^1---2^2-----2^3-------------------------------------------2^(n-2) 利用错位相减法&#xff0c;可以得到结果是&#xff0c;2^(n-1)-1,其实还是要减去右下角的灰色部分&#xff0c;我们可以拿简单的数字进行举例子&…...

编程日记 2024/3/12 2:11:08

【设计模式】设计原则和常见的23种经典设计模式

设计模式 1. 设计原则&#xff08;记忆口诀&#xff1a;SOLID&#xff09;【记忆口诀&#xff1a;单开里依接迪合&#xff08;单开礼仪接地和&#xff09;】 &#xff08;1&#xff09;单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09; &#xff…...

编程日记 2024/3/12 2:10:07

Spring Cloud Gateway自定义断言

问题&#xff1a;Spring Cloud Gateway自带的断言&#xff08;Predicate&#xff09;不满足业务怎么办&#xff1f;可以自定义断言&#xff01; 先看Spring Cloud Gateway是如何实现断言的 Gateway中断言的整体架构如下&#xff1a; public abstract class AbstractRoutePred…...

编程日记 2024/3/12 2:08:05

智能测径仪在胶管行业的应用

关键字&#xff1a;胶管外径尺寸测量&#xff0c;胶管检测仪器&#xff0c;胶管外径检测&#xff0c;高温胶管外径检测&#xff0c;软硬胶管检测&#xff0c; 智能测径仪在家胶管行业中的应用主要体现在对胶管外径的精确测量和控制上。在胶管生产过程中&#xff0c;外径的大小直…...

编程日记 2024/3/12 2:06:04

vue自定义主题皮肤方案

方案一&#xff1a;CSS变量换肤&#xff08;推荐&#xff09; 利用css定义变量的方法&#xff0c;用var在全局定义颜色变量&#xff08;需将变量提升到全局即伪类选择器 :root&#xff09;然后利用js操作css变量&#xff0c;document.getElementsByTagName(‘body’)[0].style…...

编程日记 2024/3/12 2:05:03

iOS中使用schema协议调用APP和使用iframe打开APP的例子

大家好我是咕噜美乐蒂&#xff0c;很高兴又和大家见面了&#xff01; 当调用自定义 URL scheme 或使用 iframe 打开应用程序时&#xff0c;可以采取以下详细步骤&#xff1a; 使用自定义 URL scheme 协议调用应用程序 1.首先&#xff0c;确认目标应用程序已经注册了自定义 U…...

编程日记 2024/3/12 2:02:00

2024.3.11

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 #include <iostream> #include<string> using namespace std;int main() {cout << "please input a string:" << endl;string str;g…...

编程日记 2024/3/12 2:00:59

Web服务器需要警惕的一些安全隐患

Web服务器需要警惕的一些安全隐患有哪些&#xff0c;今天德迅云安全就带您来了解下。熟悉了解了就知道怎么规避风险。不过无论是什么漏洞&#xff0c;都体现着安全是一个整体的真理&#xff0c;考虑Web服务器的安全性&#xff0c;必须要考虑到与之相配合的操作系统。 1.物理路径…...

编程日记 2024/3/12 1:57:56

MinGW-w64的下载与安装

文章目录 1 下载2 安装3 配置环境变量4 验证 1 下载 官网地址&#xff1a;https://www.mingw-w64.org/github地址&#xff1a;https://github.com/niXman/mingw-builds-binaries/releases windows下载 跳转github下载 版本号选择&#xff1a;13.2.0是GCC的版本号&#xff1b…...

编程日记 2024/3/12 1:54:53

docker使用笔记

查看本机上所有镜像 docker images打包项目&#xff08;打包完成后自动载入镜像&#xff09; The command docker build -t search-server . you provided is a standard way to build a Docker image. The -t flag tags the resulting image, and search-server is the tag …...

编程日记 2024/3/12 1:52:51

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/2/7 17:44:12

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/2/6 5:51:08