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

HTML介绍

news 文章来源：https://blog.csdn.net/rzy1248873545/article/details/129177428 2025/4/23 19:10:09

文章目录

  • 一. HTML介绍
  • 二. 创建
  • 三. HTML结构
  • 四. 常见的标签
  • 五. 链接标签
  • 六. 图片标签
  • 七. 资源路径
  • 八. 列表标签
  • 九. 表格标签
  • 十. 表单标签
  • 十一. 表单提交

一. HTML介绍

  • HTML: 超文本标记语言
  • 作用: 书写前端页面
  • 前端三大技术(三大标准):
    1. HTML: 结构标准 (页面中有什么内容)
    2. CSS: 样式美化 (美化页面)
    3. Javascript (js): 行为标准, 交互效果, Jquery是JS的一个函数库

二. 创建

  • 使用vscode, 创建带 .html 后缀的文件, 直接输入一个 ! 号, 点击回车, 即可快速生成一个 html 的基本页面

三. HTML结构

  • 文档声明 (注释)
  • <html>
    • <head>
      • 设置编码
      • 设置标题
      • 引入和书写 css 文件
      • 引入和书写 js 文件
    • </head>
    • <body>
      • 可以写其他 HTML 标签
    • </body>
  • </html>

四. 常见的标签

  • 标签的分类

    • 双标记标签(双标签)
    <标签> 可以书写其他内容和标签 </标签>
    • 单标记标签(单标签)
    <标签 其他内容><标签 其他内容 />

  • 标题标签

<h1> 标题内容 </h1>
h1 到 h6 来表示
  • 段落标签
段落前后都有换行
<p> .... </p>
  • 换行标签
<br>
  • 横线
<hr>
  • div标签, 盒子标签, 没有特殊的含义, 一般用在布局, 添加div
<div>.....
</div>

五. 链接标签

默认是当前标签页打开新链接, 加 target='_blank' 可以在新标签页打开新链接
<a href='链接地址' target='_blank' >文字内容</a>

六. 图片标签

src属性: 图片的地址
alt属性: 1. 图片不能加载的时候, 显示的内容2. 读屏软件遇到图片读取的内容(例如 盲人使用的读屏软件)<img src="图片的地址" alt="xxxx">

七. 资源路径

  1. 相对路径, 从当前目录开始书写的路径, ./ 可以省略不写
  2. 绝对路径, 从根目录开始书写的路径, Linux 和 Mac 下使用 / 表示, Windows下使用 C: D: 表示
  3. 网络路径, 资源在网络中的URL地址

八. 列表标签

<!-- 有序列表 ol(order list) -->
<ol><!-- 列表中的每一项使用的标签是 li(list) --><li>pyhton</li><li>c++</li><li>go</li>
</ol>
<!-- 无序列表 ul(unorder list) -->
<ul><!-- 列表中的每一项使用的标签是 li(list) --><li>pyhton</li><li>c++</li><li>go</li>
</ul>

九. 表格标签

  • 表格标签: table
  • 行标签: tr tabke row
  • 表头标签: th table header
  • 表格中数据标签 td table data

十. 表单标签

  • 表单概念: 手机用户输入的信息, 提交给web服务器
  • input 标签属性 type
    • 单行文本 text
    • 密码框 password
    • 单选框 redio
    • 复选框 checkbox
    • 文件 file
    • 提交按钮 submit
    • 重置输入 reset
    • 普通的按钮 button
  • 多行文本框 textarea
  • 下拉框 select
    • 下拉选项 option

十一. 表单提交

  • 直接使用默认的 GET 方式提交, 会发现多了一大串, ? 后面就是提交的参数, 表单中没有设置 name 属性的标签, 默认都是on , 选择性的还需要设置value
?name=aaa&password=213&gender=on&like=on&like=on&like=on
  • 前提
    1. 需要提交的内容标签需要设置name属性
    2. 如果属性是选择性的, 还需要设置 value ,作为提交时的属性值
  • form 标签的属性
    • action 是将数据提交到指定 URL 地址, 不写的话, 默认是当前页面
    • method 是请求的方法,默认是 GET方式, 可以手动指定为 POST

相关文章：

HTML介绍

文章目录一. HTML介绍二. 创建三. HTML结构四. 常见的标签五. 链接标签六. 图片标签七. 资源路径八. 列表标签九. 表格标签十. 表单标签十一. 表单提交一. HTML介绍 HTML: 超文本标记语言作用: 书写前端页面前端三大技术(三大标准): HTML: 结构标准 (页面中有什么内容)CSS: 样…...

编程日记 2023/2/23 20:50:37

【C++】string的9道OJ题

要么庸俗&#xff0c;要么孤独… 文章目录一、仅仅反转字母二、字符串中的第一个唯一字符&#xff08;计数排序的思想&#xff09;三、字符串相加&#xff08;做好加进位的工作即可&#xff09;四、把字符串转换成整数五、反转字符串中的单词 III六、字符串相乘&#xff08;高…...

编程日记 2023/2/23 20:49:30

Odoo丨Odoo框架源码研读三：异常处理与定制化开发

Odoo丨Odoo框架源码研读三&#xff1a;异常处理与定制化开发 Odoo源码研读的第三期内容&#xff1a;异常处理与定制化开发。 *异常处理* Odoo中的Exception是对Python内置异常做了继承和封装&#xff0c;设定了自己核心的几个Exception。 而对异常的处理和Python内置异常的…...

编程日记 2023/2/23 20:48:25

Python概述 基础语法 判断 循环

Python概述常用快捷键第二章-Python基础语法01-字面量02-注释03-变量04-数据类型05-数据类型转换06-标识符07-运算符08-字符串的三种定义方式09-字符串的拼接10-字符串格式化11-字符串格式化的精度控制 12-字符串格式化-快速写法13-对表达式进行格式化14-字符串格式化练习题讲解…...

编程日记 2023/2/23 20:47:18

什么是品牌营销？学会正确推广您的业务

什么是品牌营销&#xff1f; 品牌营销涉及长期战略规划&#xff0c;以推广整个品牌&#xff0c;而不是营销单个产品或服务。它分享了一个引人入胜的故事&#xff0c;以在潜在客户中产生品牌知名度并建立声誉。 面向消费者的品牌使用品牌智能软件来了解人们对其品牌的看法&#…...

编程日记 2023/2/23 20:46:12

Golang学习Day1

&#x1f60b; 大家好&#xff0c;我是YAy_17&#xff0c;是一枚爱好网安的小白。本人水平有限&#xff0c;欢迎各位大佬指点&#xff0c;欢迎关注 &#x1f601;&#xff0c;一起学习 &#x1f497; &#xff0c;一起进步 ⭐ 。⭐ 此后如竟没有炬火&#xff0c;我便是唯一的光…...

编程日记 2023/2/23 20:45:05

《设计模式》工厂模式

《设计模式》工厂模式 工厂模式又分为简单工厂&#xff08;Simple Factory&#xff09;、工厂方法&#xff08;Factory Method&#xff09;和抽象工厂&#xff08;Abstract Factory&#xff09;都是常用的创建型设计模式&#xff0c;它们的主要区别如下&#xff1a; 简单工厂…...

编程日记 2023/2/23 20:43:59

JS - 原型对象、原型链是什么

一 阅读掘金 https://juejin.cn/post/7007416743215759373 https://juejin.cn/post/7007416743215759373 二 阅读掘金小册原型知识点 原型 涉及面试题&#xff1a;如何理解原型&#xff1f;如何理解原型链&#xff1f; 当我们创建一个对象时 let obj { age: 25 }&#xff0…...

编程日记 2023/2/23 20:42:51

STM32f103 CubeMX封装 led程序

本文代码使用 HAL 库。 文章目录前言一、LED 原理图二、CubeMX创建工程三、LED 相关函数1. 输出电平函数&#xff1a;2. 延时函数&#xff1a;3. 翻转电平函数&#xff1a;四、详细代码实验现象 &#xff1a;总结代码 源码&#xff1a;前言 从这篇文章开始&#xff0c;我们讲解…...

编程日记 2023/2/23 20:41:46

智慧教室系统--温湿度控制系统

随着科技的不断进步&#xff0c;智能化已经成为了各个行业的发展趋势&#xff0c;智慧教室作为未来教育的主流趋势之一&#xff0c;也将受益于这一趋势。而智慧教室中的温湿度控制系统是其中的重要组成部分&#xff0c;为了创造一个舒适、健康、安全的教学环境&#xff0c;智慧…...

编程日记 2023/2/23 20:40:41

只要一直向前定能到达远方，社科院与杜兰大学金融管理硕士项目为你注入动力

在人生这条道路上&#xff0c;我们很远的路要走&#xff0c;不管前方是否平坦&#xff0c;我们只要坚持前向&#xff0c;终将抵达远方。一路上我们付出很多&#xff0c;也收获很多。想要变得更强大&#xff0c;就要不断优化自身&#xff0c;积攒更多的能量&#xff0c;社科院与…...

编程日记 2023/2/23 20:39:35

Java性能-回收算法-Throughout回收算法

垃圾回收算法 理解Throughput回收器 回收器三个基本操作——回收 找到不使用的对象 释放内存 压缩堆碎片 Minor GC和Full GC&#xff0c;每个操作都会标记&#xff0c;释放和压缩对应的目标分代 [63.205s][info][gc,start ] GC(13) Pause Full (Ergonomics) [63.205s][info][…...

编程日记 2023/2/23 20:38:29

立项近7年，索尼产品经理分享PS VR2开发背后的故事

备受期待的索尼PS VR2终于正式发售&#xff0c;VR爱好者们终于有机会体验到《地平线&#xff1a;山之呼唤》等PS VR2独占的VR大作。近期&#xff0c;为了解PS VR2头显诞生背后的故事&#xff0c;外媒AV Watch采访到PS VR2的开发负责人Yasuo Takahashi&#xff0c;在本次采访中&…...

编程日记 2023/2/23 20:37:22

Kubernetes 如何通过ingress-nginx实现应用灰度发布？

在日常的工作中&#xff0c;我们会经常对应用进行发版升级&#xff0c;在互联网公司尤为频繁&#xff0c;主要是为了满足快速的业务发展。我们经常用到的发布方式有滚动更新、蓝绿发布、灰度发布。滚动更新&#xff1a;依次进行新旧替换&#xff0c;直到旧的全部被替换为止。蓝…...

编程日记 2023/2/23 20:36:15

华为OD机试 - 密室逃生游戏（Java） | 机试题+算法思路+考点+代码解析 【2023】

密室逃生游戏 小强增在参加《密室逃生》游戏，当前关卡要求找到符合给定 密码K（升序的不重复小写字母组成） 的箱子， 并给出箱子编号，箱子编号为 1~N 。 每个箱子中都有一个 字符串s ，字符串由大写字母、小写字母、数字、标点符号、空格组成， 需要在这些字符串中找到所有…...

编程日记 2023/2/23 20:35:09

redis的主从复制细节

文章目录复制机制的运作复制的一些事实master持久化关闭时&#xff0c;复制的安全性Redis复制是如何工作的只读性质的slave设置一个slave对master进行验证允许只写入N个附加的副本Redis如何处理过期键重新启动和故障转移后的部分同步复制机制的运作 master和slave的复制运作依…...

编程日记 2023/2/23 20:34:00

SparkSQL

第1章 SparkSQL 概述1.1 SparkSQL 是什么Spark SQL 是 Spark 用于结构化数据(structured data)处理的 Spark 模块。1.2 Hive and SparkSQLSparkSQL 的前身是 Shark&#xff0c;给熟悉 RDBMS 但又不理解 MapReduce 的技术人员提供快速上手的工具。Hive 是早期唯一运行在 Hadoop …...

编程日记 2023/2/23 20:32:51

Python|每日一练|栈|数组|字典树|数组|树|广度优先搜索|单选记录：逆波兰表达式求值|回文对|二叉树的层序遍历

1、逆波兰表达式求值&#xff08;栈&#xff0c;数组&#xff09; 根据 逆波兰表示法(https://baike.baidu.com/item/%E9%80%86%E6%B3%A2%E5%85%B0%E5%BC%8F/128437)&#xff0c;求表达式的值。 有效的算符包括 、-、*、/ 。每个运算对象可以是整数&#xff0c;也可以是另一个…...

编程日记 2023/2/23 20:31:44

慧教室系统--远程控制系统

随着科技的不断进步&#xff0c;越来越多的教育机构开始使用智慧教室系统来提升教学效果和学生体验。智慧教室系统不仅可以自动化管理设备&#xff0c;还可以实现远程控制&#xff0c;帮助教师和学生更加便捷地使用教室设备。智慧教室系统作为一款领先的智慧教育解决方案&#…...

编程日记 2023/2/23 20:30:35

OSCP-课外1（http万能密码、hydra密码暴力破解http、代码审计、Win缓存区溢出）

目录 难度 主机发现&端口扫描 信息收集 万能密码 hydra密码暴力破解...

编程日记 2023/2/23 20:29:29

ELK日志分析--Logstash

Logstash简介 Logstash安装 测试运行 配置输入和输出 使用Geoip过滤器插件增强数据编辑 配置接收 Beats 的输入 1.Logstash简介 Logstash管道具有两个必需元素input和output&#xff0c;以及一个可选元素filter。输入插件使用来自源的数据&#xff0c;过滤器插件根据你的…...

编程日记 2023/2/23 20:28:23

Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据

场景 Navicat通过存储过程批量插入mysql数据&#xff1a; Navicat通过存储过程批量插入mysql数据_霸道流氓气质的博客-CSDN博客 上面使用过Navicat借助存储过程批量插入数据。但是插入数据是固定的 insert语句&#xff0c;如果在本地开发时需要模拟插入一些随机数据(从指定…...

编程日记 2023/2/23 20:27:12

【基础算法】关于高精度计算的问题【很高位数数据的加减乘除(相关代码用C++实现)】

文章目录前言1.高精度加法2.高精度减法3.高精度乘法4.高精度除法写在最后前言 当我们在利用计算机进行一些计算时&#xff0c;可能会遇到这类问题 &#xff1a; 有些计算要求精度高&#xff0c;希望计算的数的位数可达几十位甚至几百位&#xff0c;虽然计算机的计算精度也算较…...

编程日记 2023/2/23 20:26:03

事理知识图谱

事理知识图谱能够有力第建模各类事件之间的演化关联关系为事理逻辑推理提供更好的数据基础。 事理图谱定义 事理知识图谱可以将文本中对事件以及事件之间的关系抽取并抽象出来&#xff0c;构建成一个有向图形式的事理知识库。在结构上&#xff0c;事理知识图谱是一个有向有环…...

编程日记 2023/2/23 20:24:57

多綫程之python爬蟲構建

目录多綫程定義簡介原理优点缺点优势代碼框架實現導包打印類爬蟲類構造方法獲取代理設置headers獲取新session獲取源代碼解析網頁解析子頁面保存數據綫程任務得到url啓動多綫程爬蟲總結多綫程 以下定義來自百度百科&#xff0c;看看就好沒仔細寫 定義 多线程&#xff08;mul…...

编程日记 2023/2/23 20:23:47

【干货】Redis在Java开发中的基本使用和巧妙用法

Redis是一款高性能的内存数据结构存储系统&#xff0c;能够支持多种数据结构类型&#xff0c;如字符串、哈希、列表、集合、有序集合等&#xff0c;也能够支持高级功能&#xff0c;如事务、发布/订阅、Lua脚本等&#xff0c;具有高可用性、高并发性和可扩展性的优点。在Java开发…...

编程日记 2023/2/23 20:22:35

历时半年，我终于阿里上岸了，附面经和Java非科班学习心得

个人经历 本科双非化学&#xff0c;跨考了电子硕士&#xff0c;研究生依然双非。无互联网实习&#xff0c;无比赛无论文。&#xff08;研究生研究方向是车辆电子和楼宇自动化&#xff0c;有自动化和高校实训讲师相关的实习经历&#xff09; 21年11开始学Java准备秋招。 阿里上…...

编程日记 2023/2/23 20:21:29

ArkUI实战，自定义饼状图组件PieChart

本节笔者带领读者实现一个饼状图 PieChart 组件&#xff0c;该组件是根据笔者之前封装的 MiniCanvas 实现的&#xff0c; PieChart 的最终演示效果如下图所示&#xff1a; 饼状图实现的拆分 根据上图的样式效果&#xff0c;实现一个饼状图&#xff0c;实质就是绘制一个个的实…...

编程日记 2023/2/23 20:20:24

工作实战之系统交互api调用认证设计

目录 前言 一、黄金段位接口交互 二、钻石段位接口交互设计 1.接口文档定义 2.工具类以及demo提供 a.调用方部分代码 b.被调用方 三.星耀段位接口访问设计 1.在钻石段位的基础上&#xff0c;进行sdk的封装 a.maven引入 b.sdk包含工具类 四.王者段位接口访问设计 1.开发详情 2.…...

编程日记 2023/2/23 20:19:14

学习系统编程No.5【虚拟地址空间】

引言: 北京时间&#xff1a;2023/2/22&#xff0c;离补考期末考试还有5天&#xff0c;不慌&#xff0c;刚午觉睡醒&#xff0c;闹钟2点20&#xff0c;拖到2点50&#xff0c;是近以来&#xff0c;唯一一次有一种睡不醒的感觉&#xff0c;但是现在却没有精神&#xff0c;因为听了…...

编程日记 2023/2/23 20:18:07