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

HTML笔记2

news 2025/11/13 21:55:46

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/11/12 23:46:13

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/11/10 0:12:36

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/11/12 7:08:59

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/11/12 13:40:39

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/11/3 8:50:43

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2025/11/13 19:01:49

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2025/11/13 18:58:33