速通HTML

目录

HTML基础

1.快捷键

2.标签

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

b.合并单元格

3.表单

a.input标签

b.单选框

c.上传文件

4.下拉菜单

5.文本域标签

6.label标签

7.按钮标签

8.无语义的布局标签div与span

9.字符实体

HTML基础

1.快捷键

 基于VS Code记录编写过程中常用的快捷键

功能快捷键
生成HTML基本骨架!+回车
保存代码Ctrl+S
在浏览器运行代码Alt+B
注释Ctrl+/
缩进Tab
取消缩进Shift+Tab
收起侧边栏Ctrl+B

先保存，再在浏览器运行才能刷新

2.标签

标签作用
h1——h6双标签标题标签，独占一行
p双标签段落标签，独占一行，段落间存在间隙
br单标签换行标签
hr单标签水平线标签
img图像
audio音频
video视频

文本格式化标签：

标签（双标签）作用
strong加粗
b加粗
em倾斜
i倾斜
ins下划线
u下划线
del删除线
s删除线

标签作用
<img src="" alt="">插入图片，src属性图像存在的位置和名称，必须写
属性
alt替换文本，图片无法显示时显示的文字
title提示文本，鼠标悬停时显示
width图片宽度值为数字，没有单位，浏览器缩放图片默认等比例缩放
height图片高度值为数字，没有单位
标签作用
<video src=""></video>视频标签，src属性视频存在的位置和名称，必须写
属性
controls显示视频控制面板，在html5内如果属性值和属性名一样，可以简写为一个单词
loop循环播放
muted静音播放
autoplay自动播放，浏览器支持在静音模式下自动播放。注意autoplay属性需要和muted配合使用才能生效
标签作用
<audio src=""></audio>音频标签，src属性音频存在的位置和名称，必须写
属性
controls显示音频控制面板
loop循环播放
autoplay自动播放，浏览器会禁止自动播放，可以通过用户点击按钮再播放
标签作用
<a href="" target=""></a>超链接标签，双标签，herf属性为链接，target=_blank表示新窗口跳转页面

相对路径：

. 表示当前文件所在文件夹

.. 表示当前文件上一级

/ 表示进入某文件夹里

常常使用相对路径

绝对路径：

直接在盘符里复制就好，在Windows系统里默认是\，其他系统是/，统一使用/

也可以使用网络上图片的在线网址

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head>
<body><!-- 跳转到网络文件 --><a href="https://www.bilibili.com/">跳转到bilibili</a><br><!-- 跳转到本地文件，但是是在同一个页面跳转实现--><br><a href="./图像标签.html">跳转到图像标签</a><!-- 跳转到新标签页 --><a href="./标题和段落标签.html" target="_blank">标题和段落标签</a><br><!-- 开发初期不知道跳转链接的情况，使用#暂时填补则不会跳转 --><a href="#">空链接</a>
</body>
</html>

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第二天</title>
</head>
<body><!-- 无序列表 --><ul><li>无序列标签1</li><li>无序列标签2</li></ul><!-- 有序列表 --><ol><li>有序列标签1</li><li>有序列标签2</li></ol><!-- 定义列表 --><dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl><!-- 表格标签，加border后能显示边框 加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略--><table border="1"><thead><tr><th>第一行表头单元格1</th><th>第一行表头单元格2</th></tr></thead><tbody><tr><td>第一行内容单元格1</td><td>第一行内容单元格2</td></tr></tbody><tfoot><tr><td>第二行汇总单元格1</td><td>第二行汇总单元格2</td></tr></tfoot></table>
</body>
</html>

b.合并单元格

注意

表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并

<!-- 合并单元格，遵循“保留最左最上”原则 --><table border="1"><tr><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>70</td><td rowspan="2">80</td><td>90</td></tr><tr><td>90</td><!-- <td>80</td> 删除--><td>70</td></tr><tr><td colspan="3">160</td><!-- <td>160</td> 删除--><!-- <td>160</td> 删除--></tr></table>

3.表单

作用：收集用户信息

使用场景：

  • 登录页面

  • 注册页面

  • 搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件

<br><!-- 表单标签——input标签使用 --><!-- 单纯的文本形式，不能换行 -->文本框：<input type="text"><br><!-- 自动非明文显示 --> <!-- input标签占位文本 -->密码框：<input type="password" placeholder="请输入密码"><br>单选框：<!-- gender是自定义名称，添加checked属性，默认选中 --><input type="radio" name="gender"> 男<input type="radio" name="gender" checked> 女<br><br><!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->上传一个文件：<input type="file" ><br>上传多个文件：<input type="file" multiple><br><br><!-- 添加checked属性，实现默认选中 -->多选框：<input type="checkbox"> 苹果多选框默认选中：<input type="checkbox" checked> 草莓<br>

4.下拉菜单

<!-- 下拉菜单，使用属性selected实现默认选中-->城市：<!-- <select name="" id=""></select> name和id等是发送数据使用的属性--><select ><option>北京</option><option>上海</option><option selected>广州</option></select><br><br>

5.文本域标签

<!-- 文本域标签 与input不同，能自动换行，右下角有拖拽功能，在未来都要使用CSS设置尺寸并禁用该功能--><textarea>请输入评论</textarea><br><br><!-- 写法一： --><input type="radio" name="gender" id="man"><label for="man">男</label><!-- 写法二： --><label> <input type="radio" name="gender"> 女</label><br><br><br>

6.label标签

作用：

  • 网页中作为某个标签的说明文本

  • 绑定文字和表单控件的关系，增大表单控件的点击范围

7.按钮标签

<!-- 按钮标签 需要使用form标签统一管理功能才能实现，action属性是要与后台链接--><form action="">用户名：<input type="text"><br>密码：<input type="password"><br><br><!-- 如果省略type属性，是默认的提交功能 --><button type="submit"> 提交</button><button type="reset"> 重置</button><!-- 普通按钮后续与JS配合使用 --><button type="button">普通按钮</button></form><br><br>

8.无语义的布局标签div与span

作用：用于布局网页，划分区域，摆放内容

  • div：独占一行，换行，（大盒子）

  • span：不换行，（小盒子）

<!-- 无语义的布局标签 --><div> div标签</div> <span> span标签1</span><span> span标签2</span><br><br>

9.字符实体

在网页中显示预留字符

常用的字符实体：

在代码中敲很多个空格，网页仅显示一个空格

<!-- 常用的字符实体 （类似转义字符）--><!-- 在代码中敲很多个空格，网页仅显示一个空格 -->明天会&nbsp;&nbsp;更好<br><br><br>

 【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

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

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

相关文章

【Python模块】——pymysql

【Python模块】——pymysql

pymysql是python操作mysql的标准库&#xff0c;可以通过pip install快速导入pymysql包操作数据库 使用pymysql操作mysql 简单demo import pymysql connect pymysql.connect(host"localhost",port3306,user"root",password"root",database&quo…
阅读更多...
IP离线库助力破解网络反诈难题

IP离线库助力破解网络反诈难题

毫秒级响应识别异常访问 IP离线库集成全球全量IP地址的详细信息&#xff0c;包括地理地址查询、运营商、经纬度、代理识别等多种维度数据。例如&#xff1a; 当用户账号频繁从北京、越南等多地IP登录时&#xff0c;系统将自动触发风险预警&#xff1b; 检测到访问IP为已知机…
阅读更多...
lattice hdl实现spi接口

lattice hdl实现spi接口

在lattice工具链中实现SPI接口通常涉及以下步骤： 定义硬件SPI接口的管脚。配置SPI时钟和模式。编写SPI主机或从机的控制逻辑。 展示了如何在Lattice工具链中使用HDL语言（例如Verilog）来配置SPI接口： lattice工程 顶层：spi_slave_top.v `timescale 1ns/ 1ps module spi_…
阅读更多...
Spring 循环依赖解析与解决方案

Spring 循环依赖解析与解决方案

文章目录 1. 什么是循环依赖&#xff1f;1.1 概念解析1.2 示例代码 2. 循环依赖的类型2.1 构造器循环依赖&#xff08;不可解决 ❌&#xff09;2.2 Setter 方式或 Autowired 方式的循环依赖&#xff08;可解决 ✅&#xff09; 3. 解决循环依赖的方式3.1 方式一&#xff1a;使用…
阅读更多...
Cesium@1.126.0,创建3D瓦片，修改样式

Cesium@1.126.0,创建3D瓦片，修改样式

第一步&#xff1a;添加3D建筑 Cesium.createOsmBuildingsAsync()这是一个异步方法&#xff0c;所以要写在一个异步函数里 创建一个函数 const create3DBuilding async (viewer) > {try {// 添加3D建筑const tileset await Cesium.createOsmBuildingsAsync();viewer.scen…
阅读更多...
力扣-贪心-1005 k次取反后最大化的数组和

力扣-贪心-1005 k次取反后最大化的数组和

思路 找到绝对值最大的&#xff0c;然后如果是负数就变成正的&#xff0c;所有数遍历完之后&#xff0c;有两种情况&#xff0c;一种是k已经为0了&#xff0c;不需要再取反了&#xff0c;一种是所有数都为正数&#xff0c;k不为0&#xff0c;此时对绝对值最小的数操作即可 代…
阅读更多...
vue2项目打包后js文件过大, 首次加载缓慢

vue2项目打包后js文件过大, 首次加载缓慢

vue2项目打包后js文件过大, 首次加载缓慢 安装插件 npm i compression-webpack-plugin6.1.1 -D配置vue.config.js const CompressionWebpackPlugin require(compression-webpack-plugin)module.exports {configureWebpack: {plugins:[new CompressionWebpackPlugin({filen…
阅读更多...
高级SQL技术在Python项目中的应用：ORM与深度性能优化

高级SQL技术在Python项目中的应用：ORM与深度性能优化

引言 在现代Python项目开发中，数据库交互远不止是数据的简单存取，它已成为构建高性能、可维护应用的核心瓶颈和关键能力所在。 仅仅依赖基础SQL查询，虽然入门简单，却难以应对日益增长的应用挑战。这些挑战主要体现在以下几个方面： 性能瓶颈: 数据量剧增: 从百万到数十亿乃…
阅读更多...
基于 C++ Qt 的 Fluent Design 组件库 QFluentWidgets

基于 C++ Qt 的 Fluent Design 组件库 QFluentWidgets

简介 QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库&#xff0c;内置超过 150 个开箱即用的 Fluent Designer 组件&#xff0c;支持亮暗主题无缝切换和自定义主题色。 编译示例 以 Qt5 为例&#xff08;Qt6 也支持&#xff09;&#xff0c;将 libQFluentWidgets.d…
阅读更多...
抖音视频如何下载保存去水印

抖音视频如何下载保存去水印

随着短视频平台的兴起&#xff0c;抖音作为国内最受欢迎的短视频平台之一&#xff0c;吸引了大量用户上传和观看各种创意视频。许多用户在浏览抖音视频时&#xff0c;往往会想要保存一些有趣或精彩的视频片段&#xff0c;但抖音视频通常会有水印&#xff0c;影响观看体验。为了…
阅读更多...
React 源码揭秘 | 更新队列

React 源码揭秘 | 更新队列

前面几篇遇到updateQueue的时候&#xff0c;我们把它先简单的当成了一个队列处理&#xff0c;这篇我们来详细讨论一下这个更新队列。 有关updateQueue中的部分&#xff0c;可以见源码 UpdateQueue实现 Update对象 我们先来看一下UpdateQueue中的内容&#xff0c;Update对象&…
阅读更多...
[SQL] 事务的四大特性（ACID）

[SQL] 事务的四大特性（ACID）

&#x1f384;事务的四大特性 以下就是事务的四大特性&#xff0c;简称ACID。 原子性&#x1f4e2;事务时不可分割的最小操作单元&#xff0c;要么全部成功&#xff0c;要么全部失败。一致性&#x1f4e2;事务完成后&#xff0c;必须使所有的数据都保持一致隔离性&#x1f4e2…
阅读更多...
DeepSeek 提示词：基础结构

DeepSeek 提示词：基础结构

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…
阅读更多...
如何使用 Python 连接 MySQL 数据库？

如何使用 Python 连接 MySQL 数据库？

在Python开发中&#xff0c;连接MySQL数据库是一个常见的需求。 我们可以使用多种库来实现这一功能&#xff0c;其中最常用的是mysql-connector-python和PyMySQL。 下面我将详细介绍如何使用这两个库来连接MySQL数据库&#xff0c;并提供一些实际开发中的建议和注意事项。 1…
阅读更多...
Apache DolphinScheduler系列1-单节点部署及测试报告

Apache DolphinScheduler系列1-单节点部署及测试报告

文章目录 整体说明一、部署环境二、版本号三、部署方案四、部署步骤4.1、上传部署包4.2、创建外部数据库4.3、修改元数据库配置4.4、上传MySQLl驱动程序4.5、初始化外部数据库4.6、启停服务4.7、访问页面五、常见问题及解决方式5.1、时间不一致5.2、异常终止5.3、大量日志5.4、…
阅读更多...
LLM之论文阅读——Context Size对RAG的影响

LLM之论文阅读——Context Size对RAG的影响

前言 RAG 系统已经在多个行业中得到广泛应用&#xff0c;尤其是在企业内部文档查询等场景中。尽管 RAG 系统的应用日益广泛&#xff0c;关于其最佳配置的研究却相对缺乏&#xff0c;特别是在上下文大小、基础 LLM 选择以及检索方法等方面。 论文原文: On the Influence of Co…
阅读更多...
人工智能（AI）：科技新纪元的领航者

人工智能（AI）：科技新纪元的领航者

摘要 人工智能&#xff08;AI&#xff09;作为当今科技领域最具变革性的力量之一&#xff0c;正以惊人的速度重塑着我们的世界。本文旨在全面且专业地介绍人工智能&#xff0c;涵盖其定义、发展历程、关键技术、应用领域、面临的挑战以及未来展望等方面&#xff0c;以期为读者…
阅读更多...
如何防止 Docker 注入了恶意脚本

如何防止 Docker 注入了恶意脚本

根据您的描述&#xff0c;攻击者通过 CentOS 7 系统中的 Docker 注入了恶意脚本&#xff0c;导致自动启动名为 “masscan” 和 “x86botnigletjsw” 的进程。这些进程可能用于网络扫描或其他恶意活动。为了解决这一问题&#xff0c;建议您采取以下步骤&#xff1a; 1. 停止并删…
阅读更多...
LLaMA-Factory|微调大语言模型初探索(4)，64G显存微调13b模型

LLaMA-Factory|微调大语言模型初探索(4)，64G显存微调13b模型

上篇文章记录了使用lora微调deepseek-7b&#xff0c;微调成功&#xff0c;但是微调llama3-8b显存爆炸&#xff0c;这次尝试使用qlora微调HQQ方式量化&#xff0c;微调更大参数体量的大语言模型&#xff0c;记录下来微调过程&#xff0c;仅供参考。 对过程不感兴趣的兄弟们可以直…
阅读更多...
详解 Spring 配置数据源的两种方式

详解 Spring 配置数据源的两种方式

在 Spring 框架中配置数据源&#xff08;DataSource&#xff09;主要有两种方式&#xff1a; 通过 Setter 注入配置数据源通过 jdbc.properties 配置文件方式 本博文将使用 Druid 作为数据源&#xff0c;其在 Spring 项目中常见且高效。 Druid 被广泛认为是性能最佳的连接池…
阅读更多...
最新文章

Copyright @ 2022~2023