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

html基础学习

初识HTML

HTML: 超文本标记语言

一.HTML的基本结构

根控制标记(头)

​ 头控制标记(头)

标题

标题标记

​ 头控制标记(尾)

​ 网页显示区域(一般要实现的代码都在这里写)

</body> 根控制标记(尾)

二.网页的基本标签

  1. 标题标签
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
  1. 段落标签
  1. 换行标签

  2. 水平线标签


  3. 字体标识标签 粗体 用strong

    ​ 斜体 :em

  4. 特殊符号

    空格 &nbsp

    大于号 &gt

    小于号 &lt

    版权所有 &copy

三.图像标签

<img src = "", alt = "">
src为必填项 表示图片的地址
alt 表示图片的名字

四.超链接

  1. 锚链接

    (1)需要一个锚标记

    (2) 跳转到标记#

  2. 功能性链接 :邮箱链接 mailto:

  3. 行内元素和块元素

五.列表

有序列表
<ol><li></li><li></li></ol>无序列表
<ul><li></li><li></li></ul>自定义列表
<dl>标签<dt>列表名称</dt><dd>列表内容</dd>
</dl>

六 表格标签

<table><tr>行</tr><td>列</td></table><td colspan = "4"> 跨列</td>
<td rowspan = "4"> 跨行</td>

七 媒体元素

​ 音频 audio

​ 视频 video

八 网页的简单布局

头部

脚部

主体

九 内联框架

iframe

<iframe src = "path" name = "mainFrame"></iframe>

十 表单

action:表单提交的位置,可以是网站,也可以是一个请求处理地址

post:比较安全,适合传输大文件

get: 可以再URL中看到我们提供的信息,不安全但是高效

<form action="1.我的第一个网页.html" method="get"><!--文本输入框--><p>名字:<input type="text" name="username" value="hhh" maxlength="8" size="30" readonly></p><!--密码框--><p>密码:<input type="password" name="pwd" hidden></p><!--单选框--><p>性别:<input type="radio" value="boy" name="sex" checked disabled/>男<input type="radio" value="girl" name="sex"/>女</p><!--多选框--><p>爱好:<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby" checked>敲代码<input type="checkbox" value="chat" name="hobby">聊天</p><!--按钮--><p>按钮:<input type="button" name="btn1" value="点击变长"><!--<input type="image" src="../resources/image/1.PNG" >--></p><!--下拉框,列表框--><p>国家:<select name="列表名称" ><option value="China">中国</option><option value="us">美国</option><option value="rth" selected>瑞士</option></select></p><p>文本域:<textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea></p><p>文件域:<input type="file" name="files" ></p><!--邮件验证--><p>邮箱:<input type="email" name="email"></p><!--URL--><p>URL:<input type="url" name="url"></p><!--数字--><p>数字:<input type="number" name="number" max="200" min="0" step="10"></p><!--滑块--><p>滑块:<input type="range" name="voice" max="100" min="0" step="1"></p><!--搜索框--><p>搜索框:<input type="search" name="search" max="200" min="0" step="10"></p><p><input type="submit"><input type="reset"></p>

十一 表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

十二 表单初级验证

提示信息 placeholder

非空判断 required

正则表达式 pattern

相关文章:

html基础学习

初识HTML HTML: 超文本标记语言 一.HTML的基本结构 根控制标记(头) ​ 头控制标记(头) ​ 标题 标题标记 ​ 头控制标记(尾) ​ 网页显示区域(一般要实现的代码都在这里写) </body> 根控制标记(尾) 二.网页的基本标签 标题标签 <h1> 一级标题</h1> <…...

leetcode_贪心算法

贪心算法相关题简单题目455.分发饼干1005.K次取反后最大化的数组和860.柠檬水找零序列问题376.摆动序列法一&#xff1a;贪心法法二&#xff1a;动态规划单调递增的数字简化版本有点难度53.最大子序和贪心算法动态规划134.加油站968.监控二叉树两个维度权衡问题分发糖果406.根据…...

C语言每日一题】——杨氏矩阵

【C语言每日一题】——倒置字符串&#x1f60e;前言&#x1f64c;杨氏矩阵&#x1f64c;总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01;&#xff01;&#xff01; &#x1f60a;作者简介…...

最佳iOS设备管理器imazing 2.16.9官网Mac/Windows下载电脑版怎么下载安装

imazing 2.16.9官网Mac/Windows下载电脑版是款针对苹果设备所打造的管理工具。iMazing为用户提供多种设备管理功能&#xff0c;每一位用户都能以自己的形式管理苹果设备。iMazing与苹果设备连接后&#xff0c;用户就可以轻松传输文件&#xff0c;浏览保存信息等。 应用介绍 iM…...

八大排序算法之堆排序的实现+经典TopK问题

目录 一.堆元素的上下调整接口 1.前言 2.堆元素向上调整算法接口 3.堆元素向下调整算法接口 二.堆排序的实现 1.空间复杂度为O(N)的堆排序(以排升序为例) 思路分析: 代码实现: 排序测试: ​时空复杂度分析: 2. 空间复杂度为O(1)的堆排序(以排降序为例) 将数组arr调…...

使用AppSmith(PagePlug )低代码平台快速构建小程序应用实践

文章目录一、入门&#xff08;一&#xff09;介绍&#xff08;二&#xff09;功能特性&#xff08;三&#xff09;体验一下&#xff08;四&#xff09;参考教程二、使用Appsmith构建商城微信小程序&#xff08;一&#xff09;说明&#xff08;二&#xff09;应用配置&#xff0…...

第52章 短信验证服务和登录的后端定义实现

1 Services.Messages.SmsValidate using Core.Domain.Messages; using Data; using Microsoft.EntityFrameworkCore; namespace Services.Messages { /// <summary> /// 【短信验证服务--类】 /// <remarks> /// 摘要&#xff1a; /// 通过类中的方法成员实…...

谷歌验证码的使用

1. 表单重复提交之验证码 1.1 表单重复提交三种常见情况 提交完表单。服务器使用请求转来进行页面跳转。这个时候&#xff0c;用户按下功能键 F5&#xff0c;就会发起最后一次的请求。造成表单重复提交问题。解决方法&#xff1a;使用重定向来进行跳转用户正常提交服务器&…...

Git学习入门(1)- git的安装与配置

title: git学习&#xff08;1&#xff09; - git的安装与配置CSDN: https://blog.csdn.net/jj6666djdbbd?typeblogBlog: https://helloylh.comGithub: https://github.com/luumodtags: gitabbrlink: 12001description: 本文主要讲解了git的安装&#xff0c;配置基本工作date: …...

【Python】使用Playwright断言方法验证网页和Web应用程序状态

作为测试框架&#xff0c;Playwright 提供了一系列断言方法&#xff0c;您可以使用它们来验证网页和 Web 应用程序的状态。在这篇博客中&#xff0c;田辛老师将介绍 Playwright 中可用的各种断言方法&#xff0c;并为每种方法提供示例。 assert page.url() expected_url &…...

libgdx导入blender模型

具体就是参考 官网 https://libgdx.com/wiki/graphics/3d/importing-blender-models-in-libgdx blender 教程可以看八个案例教程带你从0到1入门blender【已完结】 这里贴一下过程图。 1.初始环境搭建略过。 2.打开blender 选中摄像机和灯光&#xff0c;右键进行删除。 3.选中…...

【20230227】回溯算法小结

回溯法又叫回溯搜索法&#xff0c;是搜索的一种方式。回溯法本质是穷举所有可能。如果想让回溯法高效一些&#xff0c;可以加一些剪枝操作。回溯算法解决的经典问题&#xff1a;组合问题切割问题子集问题排列问题棋盘问题如何去理解回溯法&#xff1f;回溯法解决的问题都可以抽…...

centos安装rocketmq

centos安装rocketmq1 下载rocketmq二进制包2 解压二进制包3 修改broker.conf4 修改runbroker.sh和runserver.sh的JVM参数5 启动NameServer和Broker6 安装rockermq dashboard(可视化控制台)1 下载rocketmq二进制包 点击rocketmq二进制包下载地址&#xff0c;下载完成之后通过ft…...

汇编语言程序设计(二)之寄存器

系列文章 汇编语言程序设计&#xff08;一&#xff09; 寄存器 在学习汇编的过程中&#xff0c;我们经常需要操作寄存器&#xff0c;那么寄存器又是什么呢&#xff1f;它是用来干什么的&#xff1f; 它有什么分类&#xff1f;又该如何操作&#xff1f;… 你可能会有许多的…...

华为OD机试Golang解题 - 单词接龙 | 独家

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典文章目录 华为Od必看系列使用说明本期题目…...

Elasticsearch的搜索命令

Elasticsearch的搜索命令 文章目录Elasticsearch的搜索命令数据准备URI Searchq&#xff08;查询字符串&#xff09;analyzer&#xff08;指定查询字符串时使用的分析器&#xff09;df&#xff08;指定查询字段&#xff09;_source&#xff08;指定返回文档的字段&#xff09;s…...

为什么人们宁可用Lombok,也不把成员设为public?

目录专栏导读一、从零了解JavaBean1、基本概念2、JavaBean的特征3、JavaBean的优点二、定义最简单的JavaBean三、思考一个问题&#xff0c;为何属性是private&#xff0c;然后用get/set方法&#xff1f;四、下面系统的分析以下&#xff0c;why?五、不和谐的声音&#xff0c;禁…...

【Redis】Redis 如何实现分布式锁

Redis 如何实现分布式锁1. 什么是分布式锁1.1 分布式锁的特点1.2 分布式锁的场景1.3 分布式锁的实现方式2. Redis 实现分布式锁2.1 setnx expire2.2 set ex px nx2.3 set ex px nx 校验唯一随机值&#xff0c;再删除2.4 Redisson 实现分布式锁1. 什么是分布式锁 分布式锁其实…...

C++ 断言

文章目录前言assertstatic_assert前言 断言(Assertion)是一种常用的编程手段&#xff0c;用于排除程序中不应该出现的逻辑错误。它是一种很好的Debug工具。其作用是判断表达式是否为真。C提供了assert和static_assert来进行断言。在C库中也有断言&#xff0c;其中断言与C的相同…...

C++修炼之练气期第五层——引用

目录 1.引用的概念 2.引用的性质 3.常量引用 4.使用场景 1.作参数 2.作返回值 5.传值与传引用的效率比较 6.值和引用作为返回值的性能比较 7.引用与指针 指针与引用的不同点 要说C语言中哪个知识点最难学难懂&#xff0c;大部分人可能和我一样的答案——指针。C既然…...

Hi-C数据分析进阶:如何用dcHiC精准识别癌症样本中的区室转换事件?

Hi-C技术解密&#xff1a;从染色质区室动态到癌症表观遗传调控 染色质三维结构研究已成为癌症表观遗传学的前沿领域。随着Hi-C技术的普及&#xff0c;科学家们能够以前所未有的分辨率观察基因组在细胞核内的空间组织形式。本文将深入探讨染色质区室&#xff08;A/B compartment…...

PyCharm远程调试避坑指南:从数据集同步到依赖安装,搞定AuToDL服务器上的代码运行

PyCharm远程调试避坑指南&#xff1a;从数据集同步到依赖安装&#xff0c;搞定AuToDL服务器上的代码运行 在深度学习项目的实际开发中&#xff0c;本地环境往往难以满足大规模计算需求。许多开发者选择将代码迁移到AuToDL等云服务器上运行&#xff0c;却常常在远程调试环节遇到…...

JDK 25模块路径在统信UOS/麒麟V10上启动失败?3步定位osgi-container冲突、jni.so符号缺失与jmod签名验签绕过方案

第一章&#xff1a;Java 25 模块化部署国产化适配方案Java 25 引入了更严格的模块系统约束与原生镜像增强能力&#xff0c;为在麒麟V10、统信UOS、openEuler等国产操作系统上实现轻量、安全、可验证的Java应用部署提供了新路径。适配核心聚焦于JVM层兼容性、模块图裁剪、国密算…...

文件日期更改器:在 Windows 上修改文件日期的完整指南

需要更改文件创建日期或编辑修改时间戳&#xff1f;我们的综合指南揭示了三种有效的文件日期修改方法&#xff0c;其中包括评价最高的文件属性日期修改工具——视频转换器的文件日期修改器。学习专业的文件日期修改技巧&#xff0c;同时确保数据完整性。为什么您可能需要更改文…...

Wan2.2-I2V-A14B在微信小程序开发中的应用:实时图片转视频功能实现

Wan2.2-I2V-A14B在微信小程序开发中的应用&#xff1a;实时图片转视频功能实现 1. 引言 "一张照片能变成视频吗&#xff1f;"这是很多社交类小程序用户常有的疑问。想象一下&#xff0c;用户在电商小程序上传商品图片后&#xff0c;系统自动生成一段展示视频&#…...

【OFDM通信】室内NOMA-OFDM-VLC系统仿真【含Matlab源码 15240期】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;&#x1f49e;Matlab领域博客之家&#x1f49e;&…...

应对维普AIGC史诗级升级:2026降重急救包!5款工具基准测试 x 4大手改重构技巧

论文初稿快要交了&#xff0c;维普却突然搞了个大动作&#xff0c;把系统给升级了。说实话&#xff0c;这事真挺让人头疼的&#xff0c;有人前两天查还是绿的&#xff0c;以为稳了&#xff0c;结果升级完再一测&#xff0c;AI率直接飙红。 但别慌&#xff0c;也别怀疑自己是不…...

ROS路径规划实战:用move_base让机器狗在Gazebo中自主导航(避坑指南)

ROS路径规划实战&#xff1a;用move_base让机器狗在Gazebo中自主导航&#xff08;避坑指南&#xff09; 当机器狗在仿真环境中流畅地绕过障碍物走向目标点时&#xff0c;那种成就感就像看着自家宠物第一次成功接住飞盘。作为ROS开发者&#xff0c;掌握move_base实现自主导航的能…...

避开这些坑!用MATLAB做QPSK调制解调仿真时,你的成形滤波和匹配滤波设置对了吗?

QPSK仿真中的成形滤波与匹配滤波陷阱&#xff1a;MATLAB实战避坑指南 在数字通信系统的设计与验证过程中&#xff0c;MATLAB仿真扮演着至关重要的角色。许多工程师和研究人员在QPSK调制解调仿真中&#xff0c;常常遇到性能不达预期或结果与理论不符的情况。本文将深入剖析成形滤…...

RMBG-2.0模型量化压缩:减小体积提升速度

RMBG-2.0模型量化压缩&#xff1a;减小体积提升速度 1. 引言 抠图工具RMBG-2.0确实效果惊艳&#xff0c;但原版模型动不动就几个GB的大小&#xff0c;在普通电脑上跑起来慢吞吞的&#xff0c;更别说在手机或边缘设备上部署了。如果你也遇到过模型太大、推理太慢的问题&#x…...