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

HTML笔记2

news 2025/8/28 8:11:36

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

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/8/5 6:58:22

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/7/5 22:36:20

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/8/23 14:30:37

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2025/8/27 8:41:28

C++11 constexpr和字面类型：从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2025/8/22 5:36:31

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

编程新知 2025/8/25 20:54:10