今日html笔记

原手写笔记 

-------------------------------------------------------------------------------------------------------
关于超链接的使用
<a href="https://www.luogu.com.cn/" target="_blank">//href属性指定了超链接的目标地址,即当用户点击超链接时,浏览器会跳转到这个地址。<p>测试图片超链接转向目标网站洛谷</p><img src="../image/5082.png" alt="测试图片" width="500" height="500">//两个a标签之间的内容都可以被设置成超链接形式,包括图片和文字,或者混合。
</a>
//上述内容的效果是<p>和img标签都被设置成了超链接,当用户点击时,浏览器会跳转到href属性指定的地址。//关于<img src="../image/5082.png" alt="测试图片" width="500" height="500">的使用src属性指定了图片的路径,alt属性指定了图片的替代文本,当图片无法加载时,会显示这个文本。width和height属性指定了图片的宽度和高度。之所以能指定宽度和高度,是因为img标签是一个自闭合标签,不需要结束标签。或者说 img是个行内元素,可以设置宽度和高度。target="_blank"属性指定了超链接的打开方式,即当用户点击超链接时,浏览器会打开一个新的窗口来显示目标地址的内容。如果没有这个blank属性,则会在当前窗口打开目标地址的内容。
-------------------------------------------------------------------------------------------------------网页元素的分类1.块级元素:上下摆放块级元素会独占一行,可以设置宽度和高度。常见的块级元素有:div,p,h1-h6,ul,ol,li,table,form等。其中div是最常用的块级元素。
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form>
2.行内元素（内联元素）:左右摆放
行内元素不会独占一行 a,b,em,i,span,strong等。设置宽高属性也不会生效。
<a href=""></a> <b></b> <em> </em> <i></i> <span> </span> <strong> </strong>
3.行内块元素:
行内块元素不会独占一行,可以设置宽度和高度,如果不设置宽度,则宽度会根据内容的宽度来决定。
常见的行内块元素有:img,input,button等。
<img src="" alt=""> <input type="text"> <button> </button>
-------------------------------------------------------------------------------------------------------
关于列表的话，最常用的是无序列表和有序列表。
其中li是块级元素,ul是无序列表,ol是有序列表。
1.有序列表:
有序列表使用ol标签来定义,每个列表项使用li标签来定义。
有序列表的列表项前面会有一个数字。
有序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
<ol><li>第一行</li><li>第二行</li>
</ol>
1.无序列表:
无序列表使用ul标签来定义,每个列表项使用li标签来定义。
无序列表的列表项前面会有一个小圆点。
无序列表的列表项可以嵌套,即一个列表项里面可以再嵌套一个列表。
<ul><li>第一行</li><li>第二行</li>
</ul>
-------------------------------------------------------------------------------------------------------
关于表格的话,最常用的是表格标签table。
表格标签table使用tr标签来定义行,使用td标签来定义单元格。
表格标签table的属性有:border,cellpadding,cellspacing,width,height等。
border属性指定了表格的边框,cellpadding属性指定了单元格的内边距,
cellspacing属性指定了单元格之间的间距,width和height属性指定了表格的宽度和高度。
border的参数有:
1.0-10:指定边框的宽度,单位为像素。
cellspacing的参数有:
1.0-10:指定单元格之间的间距,单位为像素。
width和height的参数有:
1.0-100%:指定表格的宽度和高度,单位为像素或百分比。宽的百分比指的是占比当前页面的比例。
1.auto:指定表格的宽度和高度,单位为像素或百分比。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>
关于表格的特定行或特定列合并
1.合并行:
合并行使用rowspan属性来指定,rowspan属性的值指定了要合并的行数。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td rowspan="2">第一行第一列</td>//切记该属性要放在第一个td标签中,否则会无效。即需要指定合并的是哪一列的多少行。<td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第二列</td><td>第二行第三列</td></tr>//th标签是表格的表头标签,可以用来定义表格的表头。//th标签是块级元素,可以设置宽度和高度。<tr><th width = "500" height = "500">第三行第一列</th>//宽会影响整个表格的宽度,高只会影响该行的高度。<td>第三行第二列</td><td>第三行第三列</td></tr>
</table>
2.合并列:
合并列使用colspan属性来指定,colspan属性的值指定了要合并的列数。
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td colspan="2">第一行第二列</td>//同样该属性也要放在td标签中,否则会无效。即需要指定合并需要从是该行的多那一列开始向后合并。</tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>
//无论是合并行还是合并列,都需要注意合并的初始位置,以及合并的行数或列数。最重要的是记得删除多余的td标签。
//比如上述例子中,第一行的第一列,向后合并2列,那么第一行的第二列就不需要了。
因为位置已经被合并了。如果不及时删除,会导致表格显示错误，多余的会被挤出。
-------------------------------------------------------------------------------------------------------
关于表单的话,最常用的是表单标签form。
表单标签form使用action属性来指定表单提交的地址,使用method属性来指定表单提交的方式。
表单的内容包括:输入框,下拉框,复选框,单选框,按钮等。
<form action="" method="">文本输入框测试 <input type="text" value = "请输入你想输入的文本">  //type属性指定了输入框的类型,text是文本输入框,如果想初始化输入框的内容,可以使用value属性来指定。text也可以改成time 或者 number等,前者只能填入时间，后者只能填入数字，并且有个小按钮可以增减数值。当然还有其他类型的输入框,比如:date 日期输入框,month 月份输入框,week 周输入框,datetime 日期时间输入框,datetime-local 本地日期时间输入框,range 范围输入框,color 颜色输入框。<input type="password">//password是密码输入框,输入的内容会被隐藏,也可以使用value属性来指定初始密码,但没啥必要。密码输入测试<input type="submit" value="这是一个按钮">//submit是提交按钮,点击后会提交表单的数据。value属性指定了按钮的文本。默认是“提交”。重置按钮测试<input type="reset"  value="点击它，所填的信息会被重置">//reset是重置按钮,点击后会重置表单的数据。value属性指定了按钮的文本。默认是“重置”。<input type="button">//button是按钮,需要用js来链接指定作用。value属性指定了按钮的文本。默认是“按钮”。选择一<input type="checkbox" name = "选择一">选择二<input type="checkbox" name = "选择二">选择三<input type="checkbox" name = "选择三">选择四<input type="checkbox" name = "选择四">默认勾选测试<input type="checkbox" name = "选择五" checked>//checkbox是复选框,可以选择多个选项。复选框的name属性指定了复选框的名称,可以使用name属性来获取复选框的值。也可以指定默认选中的复选框,可以使用checked属性来指定。例如:单选一<input type="radio" name = "1">单选二<input type="radio" name = "1">单选三<input type="radio" name = "1">单选四<input type="radio" name = "1" checked>//radio是单选框,只能选择一个选项。单选框的name属性指定了单选框的名称,可以使用name属性来获取单选框的值。也可以指定默认选中的单选框,可以使用checked属性来指定。如果name属性相同,则只能在属性相同的选项中选择一个选项，实现单选的效果。<select><option>选项1</option><option>选项2</option><option>选项3</option></select>//select是下拉框,可以选择一个选项。option是下拉框的选项,可以使用value属性来指定选项的值。也可以使用selected属性来指定默认选中的选项,默认是第一个选项。<textarea></textarea>//textarea是文本域,可以输入多行文本。这是一个按钮<button>我是个按钮</button>//button是按钮,需要用js来链接指定作用。
</form>
按钮的长度一般都会根据文本长度会自动调整,不会超出按钮的宽度。
-------------------------------------------------------------------------------------------------------

知识点分离

一、超链接的使用

超链接在网页中用于实现页面跳转等功能，通过 <a> 标签来创建。

解析：
href 属性指定了超链接的目标地址，当用户点击超链接时，浏览器会跳转到这个地址。target="_blank" 属性指定了超链接的打开方式，即当用户点击超链接时，浏览器会打开一个新的窗口来显示目标地址的内容；若没有该属性，则会在当前窗口打开目标地址的内容。<a> 标签之间的内容都可以被设置成超链接形式，包括图片和文字，或者混合。对于 <img> 标签，src 属性指定了图片的路径，alt 属性指定了图片的替代文本，当图片无法加载时，会显示这个文本，width 和 height 属性指定了图片的宽度和高度，img 标签是自闭合标签（行内元素）。

代码示例：

<a href="https://www.luogu.com.cn/" target="_blank"><p>测试图片超链接转向目标网站洛谷</p><img src="../image/5082.png" alt="测试图片" width="500" height="500">
</a>

二、网页元素的分类

网页元素主要分为块级元素、行内元素和行内块元素。

  1. 块级元素：上下摆放，会独占一行，可以设置宽度和高度。常见的块级元素有 div、p、h1-h6、ul、ol、li、table、form 等，其中 div 是最常用的块级元素。
  2. 行内元素（内联元素）：左右摆放，不会独占一行 ，如 a、b、em、i、span、strong 等，设置宽高属性也不会生效。
  3. 行内块元素：不会独占一行，可以设置宽度和高度，如果不设置宽度，则宽度会根据内容的宽度来决定。常见的行内块元素有 img、input、button 等。

<!-- 块级元素示例 -->
<div></div>
<p></p>
<h1></h1>
<table></table>
<form action=""></form><!-- 行内元素示例 -->
<a href=""></a> 
<b></b> 
<em> </em> 
<i></i> 
<span> </span> 
<strong> </strong><!-- 行内块元素示例 -->
<img src="" alt=""> 
<input type="text"> 
<button> </button>

三、列表的使用

列表常用的有无序列表和有序列表，li 是块级元素，ul 是无序列表，ol 是有序列表。

  1. 有序列表：使用 ol 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个数字，且列表项可以嵌套。
  2. 无序列表：使用 ul 标签来定义，每个列表项使用 li 标签来定义，列表项前面会有一个小圆点，列表项也可以嵌套。
<!-- 有序列表示例 -->
<ol><li>第一行</li><li>第二行</li>
</ol><!-- 无序列表示例 -->
<ul><li>第一行</li><li>第二行</li>
</ul>

四、表格的使用

最常用的表格标签是 table，使用 tr 标签来定义行，使用 td 标签来定义单元格。
table 标签的属性有 border（指定表格的边框，参数为 0-10，单位为像素）、cellpadding（指定单元格的内边距）、cellspacing（指定单元格之间的间距，参数为 0-10，单位为像素）、width 和 height（指定表格的宽度和高度，单位为像素或百分比，也可取值 auto）。合并行使用 rowspan 属性指定，值为要合并的行数，且该属性要放在第一个 td 标签中；合并列使用 colspan 属性指定，值为要合并的列数，该属性也要放在 td 标签中。th 标签是表格的表头标签，是块级元素，可以设置宽度和高度。

<!-- 基础表格示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table><!-- 合并行示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td rowspan="2">第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td></tr><tr><td>第二行第二列</td><td>第二行第三列</td></tr><tr><th width = "500" height = "500">第三行第一列</th><td>第三行第二列</td><td>第三行第三列</td></tr>
</table><!-- 合并列示例 -->
<table border="5" cellspacing="5" width="100%" height="50"><tr><td>第一行第一列</td><td colspan="2">第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr>
</table>

五、表单的使用

最常用的表单标签是 form，form 标签使用 action 属性来指定表单提交的地址，使用 method 属性来指定表单提交的方式。
表单的内容包括输入框、下拉框、复选框、单选框、按钮等。输入框的 type 属性指定了输入框的类型，如 text（文本输入框，可通过 value 属性初始化内容）、password（密码输入框，输入内容会被隐藏）、submit（提交按钮，点击提交表单数据）、reset（重置按钮，点击重置表单数据）、button（普通按钮，需用 js 链接指定作用）等。checkbox 是复选框，name 属性指定名称，可通过 checked 属性指定默认选中；radio 是单选框，name 属性相同的选项只能选一个，也可通过 checked 属性指定默认选中。select 是下拉框，option 是选项，可通过 value 属性指定选项值，selected 属性指定默认选中。textarea 是文本域，可输入多行文本。

<form action="" method="">文本输入框测试 <input type="text" value = "请输入你想输入的文本">  <input type="password">密码输入测试<input type="submit" value="这是一个按钮">重置按钮测试<input type="reset"  value="点击它，所填的信息会被重置"><input type="button">选择一<input type="checkbox" name = "选择一">选择二<input type="checkbox" name = "选择二">选择三<input type="checkbox" name = "选择三">选择四<input type="checkbox" name = "选择四">默认勾选测试<input type="checkbox" name = "选择五" checked>单选一<input type="radio" name = "1">单选二<input type="radio" name = "1">单选三<input type="radio" name = "1">单选四<input type="radio" name = "1" checked><select><option>选项1</option><option>选项2</option><option>选项3</option></select><textarea></textarea>这是一个按钮<button>我是个按钮</button>
</form>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/77927.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【人工智能】Ollama 负载均衡革命：多用户大模型服务的高效调度与优化

【人工智能】Ollama 负载均衡革命：多用户大模型服务的高效调度与优化

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 在 多用户大模型推理 场景下，负载均衡 是确保高并发、低延迟的关键挑战。本文以 Ollama（一个流行的本地大模型运行框架）为例，深入探讨 …
阅读更多...
线上救急-AWS限频

线上救急-AWS限频

线上救急-AWS限频 问题 在一个天气炎热的下午&#xff0c;我正喝着可口可乐&#xff0c;悠闲地看着Cursor生成代码&#xff0c;忽然各大群聊中出现了加急➕全体的消息&#xff0c;当时就心里一咯噔&#xff0c;点开一看&#xff0c;果然&#xff0c;线上服务出问题&#xff0…
阅读更多...
Maven 项目中引入本地 JAR 包

Maven 项目中引入本地 JAR 包

在日常开发过程中&#xff0c;我们有时会遇到一些未上传到 Maven 中央仓库或公司私有仓库的 JAR 包&#xff0c;比如第三方提供的 SDK 或自己编译的库。这时候&#xff0c;我们就需要将这些 JAR 包手动引入到 Maven 项目中。本文将介绍两种常见方式&#xff1a;将 JAR 安装到本…
阅读更多...
解锁webpack：对html、css、js及图片资源的抽离打包处理

解锁webpack：对html、css、js及图片资源的抽离打包处理

面试被问到webpack&#xff0c;可别只知道说 HtmlWebpackPlugin 了哇。 前期准备 安装依赖 npm init -y npm install webpack webpack-cli --save-dev配置打包命令 // package.json {"scripts": {// ... 其他配置信息"build": "webpack --mode pr…
阅读更多...
SpringBoot整合SSE，基于okhttp

SpringBoot整合SSE，基于okhttp

一、引入依赖 <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.10.0</version> </dependency> <dependency><groupId>com.squareup.okhttp3</groupId><…
阅读更多...
【哈希表】1399. 统计最大组的数目

【哈希表】1399. 统计最大组的数目

1399. 统计最大组的数目 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数 n 。请你先求出从 1 到 n 的每个整数 10 进制表示下的数位和&#xff08;每一位上的数字相加&#xff09;&#xff0c;然后把数位和相等的数字放到同一个组中。 请你统计每个组中的数字数目&…
阅读更多...
手动实现LinkedList

手动实现LinkedList

前言 大家好&#xff0c;我是Maybe。最近在学习数据结构中的链表&#xff0c;自己手动实现了一个LinkedList。我想与大家分享一下。 思维导图 代码部分 package Constant;public class constant {public static final String INDEX_IS_WRONG"输入的下标不合法"; }p…
阅读更多...
如何检查浏览器是否启用了WebGL2.0硬件加速

如何检查浏览器是否启用了WebGL2.0硬件加速

一：WebGL Inspector使用 打开 Chrome 或 Edge（推荐使用 Chromium 内核浏览器）。 安装插件： 👉 Spector.js on Chrome Web Store 安装完成后，在浏览器工具栏看到绿色的 S 图标 二：捕获 WebGL 渲染帧 打开你要分析的 Web3D 网站（比如 https://3dviewer.net）。 点击浏…
阅读更多...
“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

电子表格时间处理真理&#xff1a;数值存储最瘦身&#xff0c;真身闯关通四海。 笔记模板由python脚本于2025-04-23 22:25:59创建&#xff0c;本篇笔记适合喜欢在电子表格中探求时间格式的coder翻阅。 【学习的细节是欢悦的历程】 博客的核心价值&#xff1a;在于输出思考与经验…
阅读更多...
AXOP39062: 25MHz轨到轨输入输出双通道运算放大器

AXOP39062: 25MHz轨到轨输入输出双通道运算放大器

AXOP39062是用于低压应用(1.5V~5.5V)的双通道运算放大器&#xff0c;具有轨到轨的输入输出工作范围&#xff0c;非常适合需要小尺寸、大容性负载驱动能力的低压应用。产品具有25MHz的增益带宽&#xff0c;具有优异的噪声性能和极低的失真度。 主要特性 轨到轨的输入输出范围低…
阅读更多...
基于大模型的胃食管反流病全周期预测与诊疗方案研究

基于大模型的胃食管反流病全周期预测与诊疗方案研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、胃食管反流病概述 2.1 疾病定义与分类 2.2 流行病学特征 2.3 发病机制 三、大模型技术原理与应用基础 3.1 大模型简介 3.2 适用于胃食管反流病预测的大模型类型 3.3 数据收集与预处理 四、大模型在胃食…
阅读更多...
西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

一、前言 本系列是我继 《西门子S7-1200PLC 控制步进电机 MD-4240-PN》系列专栏后&#xff0c;新开的一篇专栏。 系列的主题围绕 S7-200SMART Profinet闭环步进(MD-4250-PN) 触摸屏的硬件&#xff0c;预计作四篇文章&#xff0c;分别为&#xff1a;专栏介绍、硬件介绍、PLC…
阅读更多...
bedtools coverage 获取每个位置的测序深度

bedtools coverage 获取每个位置的测序深度

1.bedtools 文档 $ bedtools --version bedtools v2.31.1coverage Compute the coverage over defined intervals. Usage:bedtools coverage [OPTIONS] -a <FILE> \-b <FILE1, FILE2, ..., FILEN>(or):coverageBed [OPTIONS] -a <FILE> \-b <FILE1,…
阅读更多...
反向代理和DDNS的区别是什么？

反向代理和DDNS的区别是什么？

反向代理&#xff08;Reverse Proxy&#xff09;和动态域名解析&#xff08;DDNS&#xff0c;Dynamic Domain Name System&#xff09;是两种不同的网络技术&#xff0c;虽然它们都与外部访问内部服务相关&#xff0c;但解决的问题和应用场景完全不同。具体区别如下&#xff1a…
阅读更多...
缩放点积注意力

缩放点积注意力

Scaled Dot-Product Attention 论文地址 https://arxiv.org/pdf/1706.03762 注意力机制介绍 缩放点积注意力是Transformer模型的核心组件&#xff0c;用于计算序列中不同位置之间的关联程度。其核心思想是通过查询向量&#xff08;query&#xff09;和键向量&#xff08;key&am…
阅读更多...
可吸收聚合物：医疗科技与绿色未来的交汇点

可吸收聚合物：医疗科技与绿色未来的交汇点

可吸收聚合物&#xff08;Biodegradable Polymers&#xff09;作为生物医学工程的核心材料&#xff0c;正引领一场从“金属/塑料植入物”到“智能降解材料”的范式转移。根据QYResearch&#xff08;恒州博智&#xff09;预测&#xff0c;2031年全球可吸收聚合物市场销售额将突破…
阅读更多...
房地产项目绩效考核管理制度与绩效提升

房地产项目绩效考核管理制度与绩效提升

房地产项目绩效考核管理制度的核心目的是通过合理的绩效考核机制&#xff0c;提升项目的整体运作效率&#xff0c;并鼓励项目团队成员的积极性。该制度适用于所有房地产项目部工作人员&#xff0c;涵盖了项目经理和项目成员的考核。考核的主要内容包括项目经理和项目部成员的工…
阅读更多...
【算法笔记】动态规划基础（一）：dp思想、基础线性dp

【算法笔记】动态规划基础（一）：dp思想、基础线性dp

目录 前言动态规划的精髓什么叫“状态”动态规划的概念动态规划的三要素动态规划的框架无后效性dfs -> 记忆化搜索 -> dp暴力写法记忆化搜索写法记忆化搜索优化了什么&#xff1f;怎么转化成dp&#xff1f;dp写法 dp其实也是图论首先先说结论&#xff1a;状态DAG是怎样的…
阅读更多...
pytorch 51 GroundingDINO模型导出tensorrt并使用c++进行部署，53ms一张图

pytorch 51 GroundingDINO模型导出tensorrt并使用c++进行部署，53ms一张图

本专栏博客第49篇文章分享了将 GroundingDINO模型导出onnx并使用c++进行部署，并尝试将onnx模型转换为trt模型，fp16进行推理，可以发现推理速度提升了一倍。为此对GroundingDINO的trt推理进行调研，发现 在GroundingDINO-TensorRT-and-ONNX-Inference项目中分享了模型导出onnx…
阅读更多...
一个关于相对速度的假想的故事-6

一个关于相对速度的假想的故事-6

既然已经知道了速度是不能叠加的&#xff0c;同时也知道这个叠加是怎么做到的&#xff0c;那么&#xff0c;我们实际上就知道了光速的来源&#xff0c;也就是这里的虚数单位的来源&#xff1a; 而它的来源则是&#xff0c; 但这是两个速度的比率&#xff0c;而光速则是一个速度…
阅读更多...
最新文章

Copyright @ 2022~2023