HTML 复习

文章目录

  • 路径问题
  • 标题标签
  • 段落标签
  • 换行标签
  • 列表标签
    • `<ol>` 有序列表
    • `<ul>` 无序标签
    • 标签嵌套
  • 超链接标签
  • 多媒体标签
    • `<img>` 图片标签
    • `<audio>` 音频标签
    • `<video>` 视频标签
  • 表格标签
    • `<colspan>` 跨行
    • `<rowspan>` 跨列
    • 组合使用
  • 表单标签
    • 基本表单标签
    • 表单项标签
      • 输入控件
      • 选择控件
      • 特殊控件
      • 按钮控件
      • 禁用控件
      • 标签绑定
      • 下拉列表
    • `Value` 值问题
      • `<input>` 相关
      • `<textarea>` 文本域
      • `<select>` 下拉列表
  • 布局相关标签

路径问题

相对路径：以当前资源所在路径为出发点找目标资源

  • ./：代表当前路径【可以不写，默认从当前路径开始找
  • ../：代表上一级目录

绝对路径：以盘符开始的

比如：<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" alt="沙漠图片">

标题标签

标题标签一般用于在页面上定义一些标题性的内容，如新闻标题,文章标题等，有 h1 到 h6 六级标题

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>

在这里插入图片描述

段落标签

段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果

<body><p>记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。</p><p>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。</p><p> 近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。</p>
</body>

在这里插入图片描述

换行标签

单纯实现换行的标签是 br, 如果想添加分隔线,可以使用 hr 标签

<body>工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。<br>国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。<hr>中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

在这里插入图片描述

列表标签

<ol> 有序列表

  • 列表标签 <ol>
  • 列表项标签 <li>
<ol><li>JAVA</li><li>前端</li><li>大数据</li>
</ol>

在这里插入图片描述

<ul> 无序标签

  • 列表标签 <ul>
  • 列表项标签 <li>
<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li>
</ul>

在这里插入图片描述

标签嵌套

<ol><li>JAVA<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li></ul></li><li>前端</li><li>大数据</li></ol>

在这里插入图片描述

超链接标签

点击后带有链接跳转的标签 ,也叫作 <a> 标签

target 属性

  • _blank 在新窗口中打开目标资源
  • _self 在当前窗口中打开目标资源
<body><!-- href属性用于定义连接href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URLtarget用于定义打开的方式_blank 在新窗口中打开目标资源_self  在当前窗口中打开目标资源--><a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br><a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br><a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br></body>

在这里插入图片描述

多媒体标签

<img> 图片标签

用于在页面上引入图片

属性

  • src：用于定义图片的连接
  • title：用于定义鼠标悬停时显示的文字
  • alt：用于定义图片加载失败时显示的提示文字
<!-- 
src用于定义图片的连接
title用于定义鼠标悬停时显示的文字
alt用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />

在这里插入图片描述

<audio> 音频标签

属性

  • src：用于定义目标声音资源
  • autoplay：用于控制打开页面时是否自动播放
  • controls：用于控制是否展示控制面板
  • loop： 用于控制是否进行循环播放
   <!-- src用于定义目标声音资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />

在这里插入图片描述

<video> 视频标签

属性

  • src：用于定义目标视频资源
  • autoplay：用于控制打开页面时是否自动播放
  • controls：用于控制是否展示控制面板
  • loop：用于控制是否进行循环播放
<body><!-- src用于定义目标视频资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>

在这里插入图片描述

表格标签

  • <table>：定义 HTML 表格，是整个表格结构的基础容器。
  • <thead>：定义表格的表头部分，通常包含列标题。虽然可以省略，但明确使用它有助于提高代码的语义性和可维护性
  • <tbody>：定义表格的主体部分，包含表格的主要数据行。同样可以省略，但在复杂表格中明确使用有助于样式设置和脚本操作
  • <tfoot>：定义表格的表尾部分，通常包含一些汇总信息。也可省略
  • <tr>：定义表格中的一行，每个<tr>内可以包含多个<td> 或 <th>
  • <td>：定义表格行内的一个单元格，用于存放数据。
  • <th>：类似于 <td>，但它自带加粗和居中效果，通常用于表头单元格。
  • <caption> ：定义表格的标题，一般位于表格的上方。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML Table Example</title>
</head><body><table border="1"><!-- 表格标题 --><caption>学生成绩表</caption><!-- 表头部分 --><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr></thead><!-- 表体部分 --><tbody><tr><td>张三</td><td>85</td><td>90</td><td>88</td></tr><tr><td>李四</td><td>78</td><td>82</td><td>75</td></tr></tbody><!-- 表尾部分 --><tfoot><tr><th>平均分</th><td>81.5</td><td>86</td><td>81.5</td></tr></tfoot></table>
</body></html>

在这里插入图片描述

<colspan> 跨行

  • 作用：用于设置单元格跨列，即一个单元格可以跨越多个列。
  • 语法：colspan="值"，其中 “值” 是一个正整数，表示该单元格要跨越的列数。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colspan Example</title><style>table {border-collapse: collapse;}th,td {border: 1px solid black;padding: 8px;}</style>
</head><body><table><tr><!-- 这个单元格跨越两列 --><th colspan="2">个人信息</th></tr><tr><td>姓名</td><td>张三</td></tr><tr><td>年龄</td><td>25</td></tr></table>
</body></html>

在这里插入图片描述

<rowspan> 跨列

作用：用于设置单元格跨行，即一个单元格可以跨越多个行。
语法：rowspan="值"，其中 “值” 是一个正整数，表示该单元格要跨越的行数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Rowspan Example</title><style>table {border-collapse: collapse;}th,td {border: 1px solid black;padding: 8px;}</style>
</head><body><table><tr><th rowspan="2">联系方式</th><td>电话</td><td>123456789</td></tr><tr><td>邮箱</td><td>zhangsan@example.com</td></tr></table>
</body></html>

在这里插入图片描述

组合使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Rowspan and Colspan Example</title><style>table {border-collapse: collapse;}th,td {border: 1px solid black;padding: 8px;}</style>
</head><body><table><tr><!-- 这个单元格既跨行又跨列 --><td rowspan="2" colspan="2">合并区域</td><td>普通单元格</td></tr><tr><td>普通单元格</td></tr><tr><td>普通单元格</td><td>普通单元格</td><td>普通单元格</td></tr></table>
</body></html>

在这里插入图片描述

表单标签

基本表单标签

<from> ：表单标签，其内部用于定义可以让用户输入信息的表单项标签

  • action 属性：用于定义信息提交的服务器的地址
  • method 属性：用于定义信息的提交方式
    • get 方式 —— 数据会缀到 url 后,以?作为参数开始的标识,多个参数用&隔开
    • post 方式 —— 数据会通过请求体发送,不会在缀到url后

<input>：主要的表单项标签,可以用于定义表单项

  • name 属性：用于定义提交的参数名
  • type 属性：用于定义表单项类型

表单项标签

输入控件

  • 文本框：<input type = "text">
  • 密码框：<input type = "password>"
  • 文本域：<textarea>

<textarea> 属性

  • clos：表示文本区域的宽度大约能显示 X 个平均字符
  • rows：表示文本区域的高度大约能显示 X 行文本
<from action="#" method="get">用户名 <input type="text" name="username"> <br>密码 <input type="password" name="password">自我介绍 <textarea name = "textarea" cols="10" rows="10"></textarea><input type="submit" value="提交数据">
</from>

在这里插入图片描述

选择控件

通用属性：checked = "checked" 表示默认的选择
单选框：<input type = "radio">

<body><form action="#" method="get">性别: 男<input type="radio" name="sex" value="1" checked="checked">女<input type="radio" name="sex" value="2"><br><input type="submit" value="提交数据"></form>
</body>

在这里插入图片描述

多选框

使用 <input type="checkbox"> 来创建多选框。可以通过 name 属性为多选框分组，value 属性指定每个选项的值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>多选框基础使用</title>
</head><body><form><p>请选择你喜欢的水果：</p><input type="checkbox" id="apple" name="fruits" value="apple"><label for="apple">苹果</label><br><input type="checkbox" id="banana" name="fruits" value="banana"><label for="banana">香蕉</label><br><input type="checkbox" id="orange" name="fruits" value="orange"><label for="orange">橙子</label><br><input type="submit" value="提交"></form>
</body></html>

特殊控件

  • 文件上传：<input type="file">

需要在表单 from 中添加属性 enctype="multipart/form-data" 表示可以提交二进制文件

<body><form action="#" method="post" enctype="multipart/form-data">上传头像<input type="file" name="file"><br><input type="submit" value="提交数据"></form>
</body>

在这里插入图片描述

按钮控件

  • 提交按钮：<input type="submit"> 没有 value 默认文字就是提交
  • 重置按钮：<input type="reset"> 没有 value 默认文字就是重置，
  • 普通按钮：<input type="button"> 没有 value 默认是空白

说明

  • 普通按钮: 点击后无效果，需要通过 JavaScript 绑定单击响应函数
  • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
  • 提交按钮: 点击后提交表单

常用事件属性

  • onclick ：当用户点击带有该属性的元素（如<button>）时，会触发指定的 JavaScript 函数或代码块
  • ondblclick：当元素被双击时触发指定的 JavaScript 代码
  • onmouseover：当鼠标指针移动到元素上时触发。`
  • onmouseout：当鼠标指针从元素上移开时触发
<body><form action="#">用户名<input type="text" name="username"><br>提交<input type="submit" value="提交数据"><br>重置<input type="reset" value="重置数据"><br>普通按钮<input type="button" value="普通按钮">//以下也行<button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button></form>
</body>

在这里插入图片描述

禁用控件

属性：disabled = "disabled"：禁用控件

<body><from action="#">用户名<input type="text" name="username" disabled = "disabled" value="zhangsan"></from>
</body>

这里的 value 就是禁用框里的值
在这里插入图片描述

标签绑定

用户跳转到 id 绑定的内容，点击这个就等于点击那个框框
.
<label for="id名"><label>

<body><form accept="#"><label for="inputText">用户名</label><input id="inputText" type="text" name="username"></form>
</body>

点击用户名 就是 点击搜索框
在这里插入图片描述

下拉列表

<select> 元素用于创建下拉列表，<option> 元素用于定义下拉列表中的选项。

  • 属性：selected 属性来设置默认选中的选项。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>设置默认选中项</title>
</head><body><form><label for="city">选择一个城市:</label><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai" selected>上海</option><option value="guangzhou">广州</option></select><input type="submit" value="提交"></form>
</body></html>

Value 值问题

<input> 相关

  • type="text"、type="password"、type="hidden"等文本输入相关类型：
  • 用于设置初始显示在输入框中的默认值，以便为用户提供示例或提示信息。比如，<input type="text" value="请输入用户名">。
  • 框中值就提交，没值看 value 默认值。如果都没有就为空字符串
  • type="radio"（单选按钮）和type="checkbox"（复选框）
  • 确定被选中时提交到服务器的值。例如，<input type="radio" name="gender" value="male">男，当这个单选按钮被选中时，提交到服务器的值为 “male”
  • 对于复选框，如果有多个复选框具有相同的name属性，每个复选框的value值将决定被选中时提交的值。
  • 按钮通常都要 value
  • type="button"和type="submit"、type="reset"
  • 当按钮的 type 为 submit 时，除了显示文本，value 属性的值会作为表单数据的一部分提交到服务器（前提是按钮设置了name 属性）。服务器端可以根据这个值来判断用户点击的是哪个提交按钮，从而执行不同的业务逻辑。
  • 其他就是改变文本作用

<textarea> 文本域

提交时，的内容会以键值对的形式发送到服务器，键是 textarea 元素的 name 属性值，值就是文本域内的实际内容。如果用户未修改则是初始内容；若用户进行了编辑，则是编辑后的内容

<select> 下拉列表

  • <option> 元素的 value 属性主要用于确定当该选项被选中并提交表单时，会发送到服务器的值。这个值可以是任意字符串，它不一定与选项显示给用户的文本内容相同。
  • 如果 <option> 元素没有设置 value 属性，那么在该选项被选中并提交表单时，选项的文本内容将作为提交的值发送到服务器。

布局相关标签

  • div标签 俗称"块",主要用于划分页面结构,做页面布局
  • span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰

div

<body><div>我是块级标签</div><div>我是块级标签</div><div>我是块级标签</div>
</body>

在这里插入图片描述
span

<body><span>我是行级标签</span><span>我是行级标签</span><span>我是行级标签</span>
</body>

在这里插入图片描述

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

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

相关文章

hot100（8）

hot100（8）

71.10. 正则表达式匹配 - 力扣&#xff08;LeetCode&#xff09; 动态规划 题解&#xff1a;10. 正则表达式匹配题解 - 力扣&#xff08;LeetCode&#xff09; 72.5. 最长回文子串 - 力扣&#xff08;LeetCode&#xff09; 动态规划 1.dp数组及下标含义 dp[i][j] : 下标i到…
阅读更多...
114，【6】攻防世界 web wzsc_文件上传

114，【6】攻防世界 web wzsc_文件上传

进入靶场 传个桌面有的 直接空白了 我们 访问一下上传的东西 /index 没显示用于解析的.htaccess和.user.ini 文件&#xff0c;还两个都不显示 但上传的时候bp查看状态码是200&#xff0c;意味着上传成功了 别的博主说这是服务器在短时间内就立刻将其删掉了&#xff0c;需…
阅读更多...
禅道社区版项目管理软件部署（记录篇）

禅道社区版项目管理软件部署（记录篇）

系统要求&#xff08;这里推荐使用docker容器化方式&#xff09;安装前的准备Docker快速安装最后通过查看地址验证是否部署成功开始界面化安装配置 禅道&#xff08;ZenTao&#xff09;是一款国产开源的项目管理软件&#xff0c;专注于敏捷开发流程&#xff0c;支持 Scrum 和 K…
阅读更多...
B站自研的第二代视频连麦系统（上）

B站自研的第二代视频连麦系统（上）

导读 本系列文章将从客户端、服务器以及音视频编码优化三个层面&#xff0c;介绍如何基于WebRTC构建视频连麦系统。希望通过这一系列的讲解&#xff0c;帮助开发者更全面地了解 WebRTC 的核心技术与实践应用。 背景 在文章《B站在实时音视频技术领域的探索与实践》中&#xff…
阅读更多...
Selenium记录RPA初阶 - 基本输入元件

Selenium记录RPA初阶 - 基本输入元件

防止自己遗忘&#xff0c;故作此为记录。 爬取网页基本元件并修改后爬取。 包含元件&#xff1a; elements: dict[str, str] {"username": None,"password": None,"email": None,"website": None,"date": None,"ti…
阅读更多...
Ubutun本地部署DeepSeek R1

Ubutun本地部署DeepSeek R1

目录 一、本地部署&终端命令行交互 二、网页端交互 三、参考链接 一、本地部署&终端命令行交互 Ollama 是一个轻量级的大语言模型管理工具&#xff0c;支持 Windows / Mac / Linux。 Ollama官网&#xff1a;Ollama # 下载安装ollama curl -fsSL https://ollama.co…
阅读更多...
NacosRce到docker逃逸实战

NacosRce到docker逃逸实战

NacosRce到docker逃逸实战 1、Nacos Derby Rce打入内存马 这个漏洞的原理大家应该都知道&#xff0c; 2.3.2 < Nacos < 2.4.0版本默认derby接口未授权访问&#xff0c;攻击者可利用未授权访问执行SQL语句加载构造恶意的JAR包导致出现远程代码执行漏洞。 在日常的漏洞挖…
阅读更多...
保姆级教程Docker部署KRaft模式的Kafka官方镜像

保姆级教程Docker部署KRaft模式的Kafka官方镜像

目录 一、安装Docker及可视化工具 二、单节点部署 1、创建挂载目录 2、运行Kafka容器 3、Compose运行Kafka容器 4、查看Kafka运行状态 三、集群部署 四、部署可视化工具 1、创建挂载目录 2、运行Kafka-ui容器 3、Compose运行Kafka-ui容器 4、查看Kafka-ui运行状态 …
阅读更多...
[创业之路-286]：《产品开发管理-方法.流程.工具 》-1- IPD两个跨职能团队的组织

[创业之路-286]：《产品开发管理-方法.流程.工具 》-1- IPD两个跨职能团队的组织

IPD&#xff08;集成产品开发&#xff09;中的两个重要跨职能组织是IPMT&#xff08;集成产品管理团队&#xff09;和PDT&#xff08;产品开发团队&#xff09;。 在IPD&#xff08;集成产品开发&#xff09;体系中&#xff0c;IRB&#xff08;投资评审委员会&#xff09;、IPM…
阅读更多...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f383;1.修改密码 -持久…
阅读更多...
网络编程day1

网络编程day1

一、思维导图
阅读更多...
02.06 网络编程_概述

02.06 网络编程_概述

思维导图 总图&#xff1a;
阅读更多...
初阶数据结构：树---堆

初阶数据结构：树---堆

目录 一、树的概念 二、树的构成 &#xff08;一&#xff09;、树的基本组成成分 &#xff08;二&#xff09;、树的实现方法 三、树的特殊结构------二叉树 &#xff08;一&#xff09;、二叉树的概念 &#xff08;二&#xff09;、二叉树的性质 &#xff08;三&#…
阅读更多...
【LeetCode】day15 142.环形链表II

【LeetCode】day15 142.环形链表II

142. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则…
阅读更多...
2025.2.6

2025.2.6

一、C思维导图&#xff1a; 二、C&#xff1a; 三、注释代码 1> 配置文件&#xff1a;.pro文件 QT core gui # 引入的类库&#xff0c;core表示核心库 gui图形化界面库greaterThan(QT_MAJOR_VERSION, 4): QT widgets # 超过版本4的qt&#xff0c;会自动加widgets…
阅读更多...
CSS(三）less一篇搞定

CSS(三）less一篇搞定

目录 一、less 1.1什么是less 1.2Less编译 1.3变量 1.4混合 1.5嵌套 1.6运算 1.7函数 1.8作用域 1.9注释与导入 一、less 1.1什么是less 我们写了这么久的CSS,里面有很多重复代码&#xff0c;包括通配颜色值、容器大小。那我们能否通过js声明变量来解决这些问题&…
阅读更多...
643. 子数组最大平均数 I

643. 子数组最大平均数 I

目录 一、题目二、思路2.1 解题思路2.2 代码尝试2.3 疑难问题 三、解法四、收获4.1 心得4.2 举一反三 一、题目 二、思路 2.1 解题思路 和之前一样&#xff0c;用一个sum来存储统计情况&#xff0c;窗口滑动边统计&#xff0c;用两个for循环&#xff0c;一个初始化&#xff0…
阅读更多...
go数据结构学习笔记

go数据结构学习笔记

本博文较为完整的实现了go的链表、栈&#xff0c;队列&#xff0c;树&#xff0c;排序&#xff0c;链表包括顺序链表&#xff0c;双向链表&#xff0c;循环链表&#xff0c;队列是循环队列&#xff0c;排序包含冒牌、选择 1.链表 1.1 顺序链表 type LNode struct {data intn…
阅读更多...
机器学习--python基础库之Matplotlib (1) 超级详细!!!

机器学习--python基础库之Matplotlib (1) 超级详细!!!

机器学习--python基础库Matplotlib 机器学习--python基础库Matplotlib0 介绍1 实现基础绘图-某城市温度变化图1.1绘制基本图像1.2实现一些其他功能 2 再一个坐标系中绘制多个图像3 多个坐标系显示-plt.subplots(面向对象的画图方法)4 折线图的应用场景 机器学习–python基础库M…
阅读更多...
Java 23新特性

Java 23新特性

文章目录 Java 23新特性一、引言二、Markdown文档注释&#xff08;JEP 467&#xff09;示例 三、ZGC&#xff1a;默认的分代模式&#xff08;JEP 474&#xff09;1. 为什么要引入分代模式2. 使用分代模式的优势3. 如何启用分代模式 四、隐式声明的类和实例主方法&#xff08;JE…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023