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

HTML速查

HTML 基本文档

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文档标题</title></head><body>可见文本...</body>
</html>

基本标签(Basic Tags)

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<hr size="2px" color="blue" width="80%" align="left"> (水平线)
<p>这是一个段落。</p>
<br> (换行)
<font face="楷体" size="6" color="red">字体标签</font>
<!-- 这是注释 -->

文本格式化(Formatting)

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<u>有下划线文本</u>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)

链接(Links)

普通的链接:<a href="http://www.example.com/">链接文本</a>
图像链接: <a href="http://www.example.com/"><img src="URL" title="点我到达..." alt="替换文本"></a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
书签:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片(Images)

<img src="URL" title="图片标题" alt="替换文本" height="42" width="42">

样式/区块(Styles/Sections)

<style type="text/css">h1 {color:red;}p {color:blue;}
</style>
<div>文档中的块级元素</div> (占一整行)
<span>文档中的内联元素</span> (占一块)

无序列表

<ul><li>项目</li><li>项目</li>
</ul>

有序列表

<ol><li>第一项</li><li>第二项</li>
</ol>

定义列表

<dl><dt>项目 1</dt><dd>描述项目 1</dd><dt>项目 2</dt><dd>描述项目 2</dd>
</dl>

表格(Tables)

<table border="1"><tr><th>表格标题</th><th>表格标题</th></tr><tr><td>表格数据</td><td>表格数据</td></tr>
</table>

框架(Iframe)

<iframe src="demo_iframe.htm"></iframe>

表单(Forms)

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50"> (普通文本)
<input type="password"> (密码框)
<label for="name">用户名:</label> (label的for属性指向input标签的id属性)
<input type="text" id="name" name="name" required>
<input type="radio" checked="checked"> (单选框)
<input type="checkbox" checked="checked"> (复选框)
<input type="file"/> (上传文件)
<input type="date"/> (选择时间)
<input type="submit" value="Send"> (提交按钮)
<input type="reset"> (重置按钮)
<input type="hidden"> (隐藏域)
<select> (下拉选择框)
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea> (from标签的子标签,多行文本域)
</form>
标签通用属性:name(元素名),value(选择默认值),checked(默认选中),readonly(是否只读),disabled(是否可用),placeholder(提示信息)

实体(Entities)

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©
&nbsp; 等同于 半个英语字母英文空格
&emsp; 等同于 一个汉字中文空格
&amp; 等同于&
&times; 等同于×
&yen; 等同于¥
&dollar; $

示例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>我的示例页面</title><style type="text/css">h1 {color: red;}p {color: blue;}</style>
</head>
<body><h1>这是我的示例页面</h1>
<h2>基本内容</h2>
<p>这是一个段落,包含 <b>粗体文本</b><i>斜体文本</i></p><h3>文本格式化示例</h3>
<p><em>强调文本</em>, <kbd>键盘输入</kbd>,
<pre>预格式化文本</pre>
,
<small>更小的文本</small>, <strong>重要的文本</strong>
</p><h2>链接示例</h2>
<p>普通的链接:<a href="http://www.example.com/">访问示例网站</a></p>
<p>邮件链接:<a href="mailto:webmaster@example.com">发送邮件</a></p><h2>图片示例</h2>
<p><img src="https://via.placeholder.com/150" alt="替换文本" height="150" width="150"></p><h2>列表示例</h2>
<h3>无序列表</h3>
<ul><li>无序项目 1</li><li>无序项目 2</li>
</ul><h3>有序列表</h3>
<ol><li>第一项</li><li>第二项</li>
</ol><h3>定义列表</h3>
<dl><dt>项目 1</dt><dd>描述项目 1</dd><dt>项目 2</dt><dd>描述项目 2</dd>
</dl><h2>表格示例</h2>
<table border="1"><tr><th>表头 1</th><th>表头 2</th></tr><tr><td>表格数据 1</td><td>表格数据 2</td></tr>
</table><h2>框架示例</h2>
<iframe src="https://www.example.com" width="600" height="400"></iframe><h2>表单示例</h2>
<form action="demo_form.php" method="post"><label for="email">邮箱:</label><input type="text" id="email" name="email" size="40" maxlength="50"><br><br><label for="password">密码:</label><input type="password" id="password" name="password"><br><br><input type="checkbox" id="subscribe" name="subscribe" checked><label for="subscribe">订阅</label><br><input type="radio" id="option1" name="option" checked><label for="option1">选项 1</label><br><input type="radio" id="option2" name="option"><label for="option2">选项 2</label><br><input type="submit" value="发送"><input type="reset" value="重置"><br><br><select><option>苹果</option><option selected="selected">香蕉</option><option>樱桃</option></select><br><br><textarea name="comment" rows="4" cols="50" placeholder="在这里输入评论..."></textarea>
</form><h2>实体示例</h2>
<p>使用实体:&lt; 等同于 &lt;, &gt; 等同于 &gt;, &#169; 等同于 ©.</p><hr> <!-- 水平线 -->
<footer><address>联系信息:<a href="mailto:webmaster@example.com">webmaster@example.com</a></address>
</footer>
</body>
</html>

相关文章:

HTML速查

HTML 基本文档 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>文档标题</title></head><body>可见文本...</body> </html>基本标签&#xff08;Basic Tags&#xff09; <h1>最大的…...

day-102 二进制矩阵中的最短路径

思路 BFS 解题过程 从起点依次向八个方向尝试&#xff08;之后也一样&#xff09;&#xff0c;如果某个位置在矩阵内且值为0且没有访问过&#xff0c;将其添加到一个队列中&#xff0c;依次类推&#xff0c;直到到达出口 Code class Solution {public int shortestPathBinar…...

SQL Server大批量数据插入

数据库连接及相关操作 public class DataBase {/*** 驱动*/private static final String DRIVER PropertiesUtil.getString("spring.datasource.driver-class-name");/*** 数据库地址*/private static final String URL PropertiesUtil.getString("spring.da…...

在 Ubuntu 下通过 Docker 部署 Caddy 服务器

嘿&#xff0c;伙伴们&#xff01;今天我们来聊聊如何在 Ubuntu 系统下通过 Docker 部署 Caddy 服务器。Caddy 是一个现代的 Web 服务器&#xff0c;支持自动 HTTPS&#xff0c;简单易用&#xff0c;特别适合快速搭建网站。而 Docker 则是一个让你可以隔离和管理应用的神器。结…...

ZooKeeper注册中心实现

具体步骤 安装ZooKeeper&#xff08;启动端口占用&#xff0c;2181&#xff1a;客户端&#xff0c;8080&#xff1a;管理端&#xff09;引入客户端依赖实现注册中心接口SPI补充ZooKeeper注册中心 引入依赖 <!-- zookeeper --> <dependency><groupId>org.a…...

数仓建模:如何进行实体建模?

目录 1 如何进行实体建模? 业务建模 领域建模 逻辑建模 2 实体建模具体步骤 需求分析...

Python编程技术

设计目的 该项目框架Scrapy可以让我们平时所学的技术整合旨在帮助学习者提高Python编程技能并熟悉基本概念&#xff1a; 1. 学习基本概念&#xff1a;介绍Python的基本概念&#xff0c;如变量、数据类型、条件语句、循环等。 2. 掌握基本编程技巧&#xff1a;教授学生如何使…...

「Mac玩转仓颉内测版55」应用篇2 - 使用函数实现更复杂的计算

本篇教程基于仓颉编程语言扩展了计算器功能&#xff0c;支持加减乘除的基础运算&#xff0c;以及幂运算和开平方等高级功能。代码经过简化后&#xff0c;移除了对输入的复杂校验&#xff0c;提升了程序的可维护性和交互效率。 关键词 仓颉编程语言函数封装高级运算 一、功能说…...

map参数详解

const items new Array(15).fill(null).map((_, index) > ({key: index 1,label: nav ${index 1}, })); $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)&#xff0c;并将处理结果封装为新的数组返回。 注意&#xff1a;1. 在jQuery 1.6 之前&#…...

OSI 七层模型 | TCP/IP 四层模型

注&#xff1a;本文为 “OSI 七层模型 | TCP/IP 四层模型” 相关文章合辑。 未整理去重。 OSI 参考模型&#xff08;七层模型&#xff09; BeretSEC 于 2020-04-02 15:54:37 发布 OSI 的概念 七层模型&#xff0c;亦称 OSI&#xff08;Open System Interconnection&#xf…...

高转速风扇|无刷暴力风扇方案设计

在当今科技高速发展的时代&#xff0c;电子设备的性能不断提升&#xff0c;散热问题也日益成为关注的焦点。而 13w 高转速暴力风扇方案的出现&#xff0c;为解决各种设备的散热难题提供了强大的技术支持。 一、高转速暴力风扇的重要性 随着电子设备的不断升级&#xff0c;其功率…...

GPU 进阶笔记(三):华为 NPU/GPU 演进

大家读完觉得有意义记得关注和点赞&#xff01;&#xff01;&#xff01; 1 术语 1.1 CPU1.2 GPU1.3 NPU / TPU1.4 小结2 华为 DaVinci 架构&#xff1a;一种方案覆盖所有算力场景 2.1 场景、算力需求和解决方案2.2 Ascend NPU 设计3 路线一&#xff1a;NPU 用在手机芯片&…...

计算机网络 (13)信道复用技术

前言 计算机网络中的信道复用技术是一种提高网络资源利用率的关键技术。它允许在一条物理信道上同时传输多个用户的信号&#xff0c;从而提高了信道的传输效率和带宽利用率。 一、信道复用技术的定义 信道复用&#xff08;Multiplexing&#xff09;就是在一条传输媒体上同时传输…...

数据库约束和查询

一 约束意义 这个后面的字段是什么意思呢? 先前说数据类型是一种约束&#xff0c;约束我们只能放该类型的数据&#xff0c;还有其它的约束来保证数据的合法性&#xff0c;下面的字段就和约束有关。 编译器的编译就是一个约束&#xff0c;保证我们的代码一定是语法合格的。我们…...

网工日记:FTP两种工作模式的区别

FTP 的主动模式和被动模式在连接建立的发起方、数据传输端口以及对网络环境的适应性等方面存在明显区别&#xff1a; 1. 连接发起方 主动模式&#xff1a;数据连接由服务器主动发起。在控制连接建立后&#xff0c;客户端通过 PORT 命令告知服务器自己用于接收数据的临时端口号…...

NLP模型工程化部署

文章目录 一、理论-微服务、测试与GPU1&#xff09;微服务架构2&#xff09;代码测试3&#xff09;GPU使用 二、实践-封装微服务&#xff0c;编写测试用例和脚本&#xff0c;并观察GPU1&#xff09;微服务封装(RestFul和RPC)2&#xff09;测试编写(unit_test\api_test\load_tes…...

分布式版本管理工具——git 中忽略文件的版本跟踪(初级方法及高级方法)

git工具忽略指定文件的版本跟踪 一、简单方式实现二、复杂方式实现&#xff08;模式匹配&#xff09;1. 相关规则2. 应用案例a) 忽略所有内容b) 忽略所有目录&#xff08;不忽略当前目录的具体文件&#xff09;c)忽略指定目录下的所有文件&#xff0c;但排除某文件d&#xff09…...

【LangChain】Chapter4 - Question and Answer Over Documents

说在前面 文档问答&#xff0c;是常见的一类LLM应用&#xff0c;给定一段可能是从 PDF文件、网页或某公司内部文档库中提取的文本&#xff0c;使用LLM回答关于这些文档内容的问题。这样的应用非常的强大&#xff0c;它可以将LLM与完全没被训练的数据相结合&#xff0c;可以灵活…...

TCP/IP 协议演进中的瓶颈,权衡和突破

所有(去掉 “几乎” 修饰)问题都来自于生长速度的不一致&#xff0c;换句话说&#xff0c;膨胀不是均匀的&#xff0c;从而产生瓶颈甚至触碰极限&#xff0c;TCP/IP 从协议到实现面临的多方问题与动物体型不能无限大&#xff0c;摩天大楼不能无限高本质上一样。 如今被高性能网…...

软件测试面试八股文,查漏补缺(附文档)

大家好&#xff0c;最近有不少小伙伴在后台留言&#xff0c;准备面试了&#xff0c;又不知道从何下手&#xff01;为了帮大家节约时间&#xff0c;特意准备了一份面试相关的资料&#xff0c;内容非常的全面&#xff0c;真的可以好好补一补&#xff0c;希望大家在都能拿到理想的…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...