当前位置: 首页 > 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;希望大家在都能拿到理想的…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

怎么开发一个网络协议模块(C语言框架)之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...