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

HTML笔记2

news 2026/2/9 1:03:30

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26