当前位置: 首页 > 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 是一款开放源代码的自…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...