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

【前端】【HTML】入门基础知识

参考视频:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

一、基本结构

二、基本标签 

<h1>:一级标题,通常用于页面的主标题,字体较大且醒目。

<h2>:二级标题,用于副标题或主要章节标题,字体稍小于 <h1>

<h3>:三级标题,可用于子章节标题,以此类推,还有 <h4><h5><h6>

<p>:用于定义一个段落,文本会自动换行,段落之间会有一定的间距

<br>:用于强制换行,不产生新的段落。

<hr/>:用于在页面中插入一条水平分隔线,可用于分隔不同的内容区域。

<b/>:使文本加粗,用于强调。

<i>:使文本倾斜,常用于表示斜体文本,如书名、外来语等。

<u>:为文本添加下划线。

<!-- 这是注释内容 -->

&nbsp;表示一个空格,常用于在文本中添加额外的空格。

&lt;表示 < 符号。

&gt;表示 > 符号。

&copy;版权所有

三、图片标签

四、链接标签 

1、href:定义链接目标。

<a href="https://www.example.com">访问 Example</a>

2、target:定义链接的打开方式。

  • _blank: 在新窗口或新标签页中打开链接。
  • _self: 在当前窗口或标签页中打开链接(默认)。
  • _parent: 在父框架中打开链接。
  • _top: 在整个窗口中打开链接,取消任何框架。

<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开 </a>

3、rel:定义链接与目标页面的关系。

nofollow: 表示搜索引擎不应跟踪该链接,常用于外部链接。

noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题,尤其是使用 target="_blank" 时。

  • noopener: 防止新的浏览上下文(页面)访问window.opener属性和open方法。
  • noreferrer: 不发送referer header(即不告诉目标网站你从哪里来的)。
  • noopener noreferrer: 同时使用noopenernoreferrer。

 <a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

4、download:提示浏览器下载链接目标而不是导航到该目标。

如果指定了文件名,浏览器会提示下载并保存为指定文件名。

<a href="file.pdf" download="example.pdf">下载文件</a>

5、title:定义链接的额外信息,当鼠标悬停在链接上时显示的工具提示。

<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>

6、id:用于链接锚点,通常在同一页面中跳转到某个特定位置。

<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>

10、style: 直接在元素上定义CSS样式

五、列表

1、无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2、 有序列表

3、自定义列表

dl:标签

dt:列表名称

dd:列表内容

 六、表格标签

跨行、跨列:

七、音频视频 

八、 网页结构

九、iframe内联标签

在一个网页里嵌套另一个网页

<iframe src="/" width="200" height="200">

十、表单

1、用form创建表单

 

 2、radio单选框

3、checkbox多选框

4、按钮

5、下拉框

6、文本域

7、文件域

8、验证

9、滑块

10、搜索框 

总结:input表示的:文本框、按钮、单选框、多选框、文件域、验证、滑块、搜索框 

十一、 表单的应用

hidden 隐藏域

readonly只读

disabled禁用

十二、表单的验证

placeholder设置文本框默认值

required设置文本框不能为空

pattern正则表达式正则表达式 – 语法 | 菜鸟教程

十二、总结

 

相关文章:

【前端】【HTML】入门基础知识

参考视频&#xff1a;【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 一、基本结构 二、基本标签 <h1>&#xff1a;一级标题&#xff0c;通常用于页面的主标题&#xff0c;字体较大且醒目。 <h2>&#xff1a;二级标题&#xff0c;用于副标题或主要章节标…...

PHP获取局域网ip(192.168)

有时候&#xff0c;程序中&#xff0c;需要获取本机内网ip的情况&#xff0c;经过各种资料查找&#xff0c;最终确定一下代码&#xff1a; //获取内网ipfunction getLocalIP() {exec("ipconfig /all",$arr);$res mb_convert_encoding($arr, UTF-8, GBK);$ip ;fore…...

点击底部的 tabBar 属于 wx.switchTab 跳转方式,目标页面的 onLoad 不会触发(除非是第一次加载)

文章目录 1. tabBar 的跳转方式2. tabBar 跳转的特点3. 你的配置分析4. 生命周期触发情况5. 总结 很多人不明白什么是第一次加载&#xff0c;两种情况讨论&#xff0c;第一种情况假设我是开发者&#xff0c;第一次加载就是指点击微信开发者工具上边的编译按钮&#xff0c;每点击…...

基于PLC的酒店热水供应控制系统设计

摘 要 酒店的热水量需求比较大,热水加热消耗能源比较多,为了实现清洁能源加热实现热水供应,系统设计以太阳能作为主要能源来源,以电加热作为辅助能源来源进行系统的设计.通过集热器、储水箱、循环泵等设备组成酒店热水供水系统。通过控制温度传感器的信号&#xff0c;实现恒温…...

博客内所有项目均可在面包多平台进行购买

本人已入住面包多平台&#xff1a;我的 - 面包多 已有资料&#xff1a;...

《Mcal》--MCU模块

一、MCU模块的主要功能 控制系统时钟的产生。控制系统通用模块&#xff0c;该模块会涉及到Adc、Ftm等外设的配置。控制外设时钟。控制MCU运行的模式。初始化定义RAM Section。 比较重要的是时钟的配置。 二、系统时钟的配置 1、芯片时钟树 要想弄明白时钟配置&#xff0c;需…...

C语言:枚举类型

一、枚举类型的声明 枚举顾名思义就是一一列举。我们可以把可能的取值一一列举。比如我们现实生活中&#xff1a; 星期一到星期日是有限的7天&#xff0c;可以一一列举 &#xff1b;性别有&#xff1a;男、女、保密&#xff0c;也可以一一列举 &#xff1b;月份有12个月&#x…...

spring boot 多数据源集成mysql、postgresql、phoenix、doris等

如何搭建多数据源项目只要以下简单几步; 一. 创建核心在config.datasource文件夹里 二. 引入相对应的jar包 三. 创建数据库连接配置 四. 写逻辑代码进行验证 1.DataSource package com.irootech.config.datasource;import java.lang.annotation.*;Target({ElementType.MET…...

USB基础 -- USB 控制传输(Control Transfer)的重传机制

USB 控制传输&#xff08;Control Transfer&#xff09;的重传机制 1. 控制传输的事务结构 控制传输分为三个阶段&#xff0c;每个阶段都有自己的事务&#xff0c;并可能触发重传机制&#xff1a; 设置阶段&#xff08;Setup Stage&#xff09;&#xff1a;主机发送 8 字节的…...

云计算基础,虚拟化原理

文章目录 一、虚拟化1.1 什么是虚拟化1.2 虚拟化类型 二 、存储虚拟化2.1 存储指标2.2 存储类型2.3 存储协议2.4 RAID 三、内存 i/O虚拟化3.1 内存虚拟化基本概念地址空间转换原理内存共享与隔离原理 3.2 I/O 虚拟化基本概念模拟&#xff08;Emulation&#xff09;方式半虚拟化…...

浮点数在C语言开发中为什么不精确?

在C语言开发中&#xff0c;浮点数的精度问题是一个常见的陷阱&#xff0c;尤其是对于刚接触编程的开发者来说&#xff0c;可能会对浮点数的行为感到困惑。为什么0.1 0.2不等于0.3&#xff1f;为什么浮点数计算会出现微小误差&#xff1f;本文将从计算机底层原理出发&#xff0…...

ChatGPT网络错误如何解决

在当今的信息化社会&#xff0c;网络技术已无处不在。无论是日常生活中的在线购物&#xff0c;还是工作中的远程会议&#xff0c;网络的稳定性和可靠性成为了我们无时无刻不在关注的重要问题。而在智能技术的快速发展中&#xff0c;像ChatGPT这样的人工智能模型&#xff0c;因其…...

Vue3初学之插槽(slot)使用

在 Vue 3 中&#xff0c;插槽&#xff08;Slots&#xff09;是一种强大的内容分发机制&#xff0c;允许你在组件中定义可替换的内容区域&#xff0c;从而使组件更加通用和灵活。以下是 Vue 3 中插槽的几种常见用法&#xff1a; 默认插槽 默认插槽是最基本的插槽类型&#xff0…...

使用PVE快速创建虚拟机集群并搭建docker环境

安装Linux系统 这里以安装龙蜥操作系统AnolisOS8.9为例加以说明。 通过PVE后台上传操作系统ISO镜像。 然后在PVE上【创建虚拟机】&#xff0c;选定上传的龙蜥操作系统镜像进行系统安装。 注意&#xff1a;在安装过程中&#xff0c;要设定语言、时区、超管用户root的密码、普…...

带格式 pdf 翻译

支持 openAI 接口&#xff0c;国内 deepseek 接口兼容 openAI 接口&#xff0c; deepseek api 又非常便宜 https://pdf2zh.com/ https://github.com/Byaidu/PDFMathTranslate...

【C++】C++11(一)

目录 一、C11简介二、统一的列表初始化2.1 &#xff5b;&#xff5d;初始化2.2 std::initializer_list 三、声明3.1 auto3.2 decltype3.3 nullptr 四、范围for五、智能指针六、STL中一些变化七、右值引用和移动语义7.1 左值引用和右值引用7.2 左值引用与右值引用比较7.3 右值引…...

初学stm32 --- ADC单通道采集

目录 ADC寄存器介绍&#xff08;F1&#xff09; ADC控制寄存器 1(ADC_CR1) ADC控制寄存器 2(ADC_CR2) ADC采样时间寄存器1(ADC_SMPR1) ADC采样时间寄存器2(ADC_SMPR2) ADC规则序列寄存器 1(ADC_SQR1) ADC规则序列寄存器 2(ADC_SQR2) ADC规则序列寄存器 3(ADC_SQR3) AD…...

【动态规划篇】欣赏概率论与镜像法融合下,别出心裁探索解答括号序列问题

本篇鸡汤&#xff1a;没有人能替你承受痛苦&#xff0c;也没有人能拿走你的坚强. 欢迎拜访&#xff1a;羑悻的小杀马特.-CSDN博客 本篇主题&#xff1a;带你解答洛谷的括号序列问题&#xff08;绝对巧解&#xff09; 制作日期&#xff1a;2025.01.10 隶属专栏&#xff1a;C/C题…...

Java(day7)

字符串练习 生成验证码 package day6; /*生成验证码 内容&#xff1a;可以是小写字母&#xff0c;也可以是大写字&#xff0c;还可以是数字 规则&#xff1a; 长度为5 内容中是四位字母&#xff0c;1位数字。 其中数字只有1位&#xff0c;但是可以出现在任意的位置。*/ impor…...

Word 转成pdf及打印的开源方案支持xp

Word转成pdf、打印的方案几乎没有免费开源的方案&#xff0c;现在提供一个通过LibreOffice实现的方案 操作依赖LibreOffice需要安装&#xff0c;点此下载老版本 5.4.7.2是最后一个支持xp的 版本如需xp要请安装此版本 LibreOffice官方介绍 LibreOffice 是一款开放源代码的自…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...