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

HTML 入门

news 文章来源：https://blog.csdn.net/Yuan_o_/article/details/142900276 2025/5/6 12:57:37

1. 什么是 HTML

HTML（Hyper Text Markup Language），超文本标记语言

超文本：比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式，不仅有文本，还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等

标记语言：由标签构成的语言

HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容，如以下代码：

上面代码中的 <h1><h2><h3> 就是标签

1.1 认识 HTML 标签

HTML 代码是由 “标签” 构成的，特点如下：

  • 标签名（body）放到 < > 中
  • 大部分标签成对出现，<h1> 为开始标签，</h1> 为结束标签
  • 少数标签只有开始标签，称为 “单标签”
  • 开始标签和结束标签之间，写的是标签的内容
  • 开始标签中可能会带有 “属性” （如：id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)，如下代码
<h3 id="myId">我是三级标题</h3>

1.2 HTML 文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

  • html 标签是整个 html 文件的根标签（最顶层标签）
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

1.3 标签层次结构

  • 父子关系
  • 兄弟关系
<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

其中：

  • head 和 body 是 html 的子标签（html 就是  head 和 body 的父标签）
  • title 是 head 的子标签，head 是 title 的父标签
  • head 和 body 之间是兄弟关系

tip：

可以使用浏览器的开发者工具查看页面的结构

F12 或 鼠标右键检查，开启开发者工具，切换到 Elements 标签，就可看到页面结构细节

标签之间的结构关系，构成了一个 DOM 树，DOM 是 Document Object Mode（文档对象模型）的缩写

1.4 HTML 快速入门

开发工具：Visual Studio Code

在 VS Code 中创建文件 xxx.html，直接输入 ! ，按 Enter 或 tab 键，此时能自动生成代码的主体框架，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

在 <body></body> 标签中，任意书写文字，按 Ctrl + s 保存文件，通过浏览器访问即可，如：

1.5 HTML 常见标签

1.5.1 标题标签 h1-h6

从 h1 到 h6，数字越大，字体越小

1.5.2 段落标签：p

在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签

p 标签表示一个段落

tip：

  • p 标签描述的段落，前面没有缩进
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行、空格均无效
  • 在 html 中文字之间输入的多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行，而是相当于一个空格

1.5.3 换行标签：br

换行通过 <br/> 标签实现，br 是 break 的缩写，表示换行

br 是一个单标签（不需要结束标签）

br 标签不像 p 标签那样带有很大的空隙

<br/> 是规范写法，不建议写成 <br>，虽然浏览器有很好的 “鲁棒性”，但这里没有问题，不代表后面也没问题

1.5.4 图片标签：img

img 标签必须带有 src 属性，表示图片的路径

<img src="rose.jpg">

此时要把 rose.jpg 这个图片放到和 html 中的同级目录中

img 标签的其他属性：

width / height：控制宽度高度，高度和宽度一般改一个就行，另一个会等比例缩放，否则就会图片失衡

border：边框，参数是宽度的像素，但是一般会使用 CSS 来设定

tip：

  • 属性可以有多个，不能写到标签之前
  • 属性之间用空格分割，可以是多个空格，也可以是换行
  • 属性之间不分先后顺序
  • 属性使用 “键值对” 的格式来表示
关于目录结构：

对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好

1. 相对路径：以 html 所在位置为基准，找到图片的位置

  • 同级路径：直接写文件名即可（或者 ./）
  • 下一级路径：image/1.jpg
  • 上一级路径：../image/1.jpg

2. 绝对路径：一个完整的磁盘路径，或者网络路径

  • 磁盘路径 D:/rosr.jpg（最好使用 /，不要使用 \）
  • 网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https%3A%2F%2Fimg-blog.csdnimg.cn%2F4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11

1.5.5 超链接：a

href：必须具备，表示点击后会跳转到哪个页面

target：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开

链接的几种形式：

1. 外部链接：href 引用其他网站的地址

<a href="https://www.baidu.com">百度</a>

2. 内部链接：网站内部页面之间的链接，写相对路径即可

在一个目录中，先创建一个 demo1.html，再创建一个 demo2.html

target 设置为 _blank

3. 空链接：使用 # 在 href 中占位

<a href="#">空链接<a>

用于此处需要插入超链接，但还不知道插入哪个的时候

1.5.6 表格标签

  • table 标签：表示整个表格
  • tr：表示表格的一行
  • td：表示一个单元格
  • thead：表格的头部区域
  • tbody：表格的主体区域

table 包含 tr，tr 包含 td

表格标签中有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中：

  • align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对其方式）
  • border 表示边框，1 表示有边框（数字越大，边框越粗），"" 表示没边框
  • cellpadding：内容距离边框的距离，默认 1 像素
  • cellspacing：单元格之间的距离，默认 2 像素
  • width / height：设置尺寸

快速生成：

    <table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>18</td></tr></table>

加上属性：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">

1.5.7 表单标签

表单是让用户输入信息的重要途经，分为两个部分：

  • 表单域：包含表单元素的区域，重点是 form 标签
  • 表单控件：输入框，提交按钮等，重点是 input 标签

1) input 标签

各种输入控件，单行文本框、按钮、单选框、复选框

  • type(必须有)，取值种类很多，如：button、checkbox、text、file、image、password、radio 等
  • name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一
  • value：input 中的默认值
  • checked：默认被选中（用于单选按钮和多选按钮）

常用的类型：

1. 文本框

2. 密码框

3. 单选框

tip：单选框之间必须具备相同的 name 属性，才能实现 多选一 效果

4. 复选框

5. 普通按钮

当前点击了没有反应，需要搭配 JS 使用

6. 提交按钮

    <form action="demo1.html"><input type="text" name="username"><input type="submit" value="提交"></form>

提交按钮必须放到 form 标签中，点击后就会尝试给服务器发送请求

2) select 标签

下拉菜单，option 中定义 selected="selected" 表示默认选中

3) textarea 标签

文本域中的内容就是默认内容，空格也会有影响

rows 和 clos 不会直接使用，都是用 CSS 来改的

4) form 标签
    <form action="demo1.html">...[form 的内容]</form>

描述了要把数据按照什么方式，提交到哪个页面中

5) 无语义标签：div & span

div 标签，division 的缩写，含义是分割

span 标签，含义是跨度

类似于两个盒子，用于网页布局

div 是独占一行的，是一个大盒子

span 不独占一行，是一个小盒子

1.6 练习：用户注册

用户注册界面：

代码：

    <h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><div><input type="button" value="注册"><span>已有账号？</span><a href="#">登录</a><br/></div>

相关文章：

HTML 入门

1. 什么是 HTML HTML&#xff08;Hyper Text Markup Language&#xff09;&#xff0c;超文本标记语言 超文本&#xff1a;比文本要强大&#xff0c;通过链接和交互方式来组织和呈现信息的文本形式&#xff0c;不仅有文本&#xff0c;还可能包含图片、音频、或者自己已经审阅…...

编程日记 2024/10/14 9:19:57

前端面试题（十五）

83. ES6 中的 let 和 const let 和 const 的区别是什么&#xff1f; let 和 const 是 ES6 引入的用于声明变量的新方式&#xff0c;相比于传统的 var&#xff0c;它们具有以下特性&#xff1a; 块级作用域&#xff1a;let 和 const 声明的变量在其所在的块级作用域内有效&…...

编程日记 2024/10/14 9:18:55

如何成为 Rust 核心贡献者？Rust 开发的核​​心是什么？Rust 重要技术专家揭秘

10 月 17 - 18日&#xff0c;由 GOSIM 开源创新汇主办、CSDN 承办的 GOSIM CHINA 2024 将在北京盛大启幕。作为 GOSIM 开源年度大会的第三届盛会&#xff0c;本次活动邀请了 60 多位国际开源专家&#xff0c;汇聚了来自全球百余家顶尖科技企业、知名高校及开源社区的技术大咖、…...

编程日记 2024/10/14 9:17:54

springboot + nacos + sofarpc 整合后报错403

springboot版本 2.2.2 nacos 版本 1.4.2 rpc-sofa-boot 版本 3.2.0 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.2.RELEASE</version></parent>…...

编程日记 2024/10/14 9:16:53

小米路由器R3Gv2安装openwrt记录

前言 小米路由器R3Gv2的硬件配置与小米路由器4A千兆版一致&#xff0c;但bootloader有所不同&#xff0c;因此openwrt的固件不要互刷。另外&#xff0c;R3Gv2和R3G、4A百兆版是不同的设备&#xff0c;切勿混淆。 硬件信息 OpenWrt参数页-Xiaomi MiWiFi 3G v2 CPU&#xff1a…...

编程日记 2024/10/14 9:10:45

记录一下，android studio 登录不上github的问题

android studio 2023.3.1.18 版本的编译器&#xff0c;出现问题&#xff0c;之前连接过的项目可以正常提交和拉取到github。 但是新建立的项目无法上传到github&#xff0c;提示错误cannot load information for github.com/:request response;access to this site&#xff0c;…...

编程日记 2024/10/14 9:04:38

springcloud之基于github webhook动态刷新服务配置

前言 在实际开发中经常会有一个叫做配置中心的服务&#xff0c;这个服务经过变更参数来动态刷新线上业务数据行为配置。比如&#xff1b;行为开关、活动数据、黑白名单、本地/预发/线上环境切换等等&#xff0c;这些配置信息往往需要在我们不重启系统的时候就可以被更新执行。那…...

编程日记 2024/10/14 9:02:33

qt+opengl 实现纹理贴图，平移旋转，绘制三角形，方形

1 首先qt 已经封装了opengl&#xff0c;那么我们就可以直接用了&#xff0c;这里面有三个函数需要继承 virtual void initializeGL() override; virtual void resizeGL(int w,int h) override; virtual void paintGL() override; 这三个函数是实现opengl的重要函数。 2 我们…...

编程日记 2024/10/14 9:01:31

【动态规划】子数组系列（下）

1. 等差数列划分 413. 等差数列划分 状态表示&#xff1a;以 i 位置为结尾时的等差数列的个数 状态转移方程&#xff1a;由于至少需要三个元素才符合题目中等差数列的要求&#xff0c;所以需要判断 i - 2&#xff0c;i - 1&#xff0c;i 三个元素&#xff0c;当这三个元素符合…...

编程日记 2024/10/14 8:47:05

macos mendeley Unable to install the Microsoft Word Plugin 解决

windows也是相似的原理&#xff0c;这里主要说macos&#xff0c; 本质是 找到mendeley的插件启动项&#xff0c;放在word启动目录下&#xff0c; GPT-o1的解决方案&#xff1a; 3. Manual Installation (If Automatic Installation Fails) If the automatic installation doe…...

编程日记 2024/10/14 8:46:02

【Linux进程间通信】Linux信号机制深度解析：保存与处理技巧

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;Linux “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀Linux进程间通信 &#x1f4d2;1. 信号的保存&#x1f30a;在内核中的表示&#x1f342;sigs…...

编程日记 2024/10/14 8:45:00

常见开源组件的详解

文章目录 RPCRPC架构和工作流程为什么有了HTTP还要用RPC底层协议数据格式连接管理错误处理 使用场景常见的RPC框架 Web应用框架主要功能常见的Web应用框架Spring Boot (Java)Django (Python)Express.js (Node.js) Redis主要特点应用场景缓存问题Redis集群架构主从复制Redis Clu…...

编程日记 2024/10/14 8:43:59

rust使用教程详解

欢迎来到 Rustlings。该项目包含一些小练习&#xff0c;让您习惯阅读和编写 Rust 代码。这包括阅读和响应编译器消息&#xff01; 建议在阅读Rust 官方书籍&#xff08;学习 Rust 最全面的资源&#xff09;的同时做 Rustlings 练习 &#x1f4da;️ Rust By Example是另一个推…...

编程日记 2024/10/14 8:42:56

并查集的实现（朴素版）

这是C算法基础-数据结构专栏的第二十九篇文章&#xff0c;专栏详情请见此处。 由于作者即将参加CSP&#xff0c;所以到比赛结束前将不再发表文章&#xff01; 引入 并查集是一种可以快速合并查找集合的一种数据结构&#xff0c;这次我们将通过三道题来详细讲解并查集&#xff…...

编程日记 2024/10/14 8:41:55

WPF 为button动态设置不同的模板

有时候需要动态的设置一些按钮的状态模板。使一个button显示不同的内容&#xff0c;比如Button未点击安装显示&#xff1a; 安装后显示&#xff1a; 可以通过设置button的content&#xff0c;通过content来设置不同的模板来实现功能&#xff0c;以下是代码&#xff1a; MainWi…...

编程日记 2024/10/14 8:37:49

【C++贪心 DFS】2673. 使二叉树所有路径值相等的最小代价|1917

本文涉及知识点 C贪心 反证法 决策包容性 CDFS LeetCode2673. 使二叉树所有路径值相等的最小代价 给你一个整数 n 表示一棵 满二叉树 里面节点的数目&#xff0c;节点编号从 1 到 n 。根节点编号为 1 &#xff0c;树中每个非叶子节点 i 都有两个孩子&#xff0c;分别是左孩子…...

编程日记 2024/10/14 8:32:42

虚幻引擎GAS入门学习笔记(一)

虚幻引擎GAS入门(一) Gameplay Ability System&#xff08;GAS&#xff09; 是一个模块化且强大的框架&#xff0c;用于管理虚幻引擎中的游戏玩法逻辑。它的核心组成部分包括 Gameplay Ability&#xff08;定义和执行能力&#xff09;、Gameplay Effect&#xff08;应用和管理…...

编程日记 2024/10/14 8:29:40

Excel：vba实现合并工作表(表头相同)

这个代码应该也适用于一些表头相同的工作表的汇总&#xff0c;只需要修改想要遍历的表&#xff0c;适用于处理大量表头相同的表的合并 这里的汇总合并表 total 是我事先创建的&#xff0c;我觉得比用vba代码创建要容易一下&#xff0c;如果不事先创建汇总表就用下面的代码&…...

编程日记 2024/10/14 8:27:37

Redis：分布式 - 主从复制

Redis&#xff1a;分布式 - 主从复制 概念配置主从模式info replicationslave-read-onlytcp-nodelay 命令slaveof 主从结构一主一从一主多从 主从复制流程数据同步命令全量同步部分同步实时同步 节点晋升 概念 Redis的最佳应用&#xff0c;还是要在分布式系统中。对于非分布式…...

编程日记 2024/10/14 8:26:36

el-date-picker设置只有某些日期可选

示例图&#xff1a; <el-date-pickerv-model"topFormObj.upTime"type"date"value-format"timestamp"format"dd/MM/yyyy":picker-options"pickerOptions" /> 固定限制每周的周末周三不可选 data() {return {pickerOp…...

编程日记 2024/10/14 8:14:06

java数据库操作-cnblog

创建lib目录&#xff0c;填入jar包 选择 libraries添加lib目录 package nb;import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException;public class JDBCtest {private static final String url "jdbc:mysql://localhost:3306/test?c…...

编程日记 2024/10/14 8:11:03

HCIP-HarmonyOS Application Developer 习题（九）

(多选) 1、HarmonyOS多窗口交互能力提供了以下哪几种交互方式&#xff1f; A. 全局消息通知 B.平行视界 C.悬浮窗 D.分屏 答案&#xff1a;BCD 分析&#xff1a;系统提供了悬浮窗、分屏、平行视界三种多窗口交互&#xff0c;为用户在大屏幕设备上的多任务并行、便捷的临时任务…...

编程日记 2024/10/14 8:09:00

redis集成到spring boot中使用

&#xff08;一&#xff09;添加依赖 redis服务器在官网中公开了自己使用的协议--RESP&#xff0c;所以我们可以使用这个协议来访问redis服务器&#xff0c;但是如果我们要自己实现库&#xff0c;那肯定是非常麻烦的&#xff0c;所以我们可以使用网上的库&#xff0c;我们直接调…...

编程日记 2024/10/14 8:07:59

Spring Boot、Spring MVC和Spring有什么区别

人要长大&#xff0c;就要学会不断接受事件的变化 —— 24.10.14 spring是一个IOC容器&#xff0c;用来管理Bean&#xff0c;使用依赖注入实现控制反转&#xff0c;可以很方便的整合各种框架&#xff0c;提供AOP机制弥补OOP的代码重复问题、更方便将不同类不同方法中的共同处理…...

编程日记 2024/10/14 8:05:57

Flip动画

前言 最近在做复图标库功能时&#xff0c;感觉这个功能在使用上有些“生硬”。如随机删除一个图标&#xff0c;后面的元素在视觉上是“瞬间移动”过来补位的。想着做个小优化&#xff0c;简单加个动画效果吧。 看起来确实“花里胡哨”了&#xff0c;实现也很简单&#xff0c; …...

编程日记 2024/10/14 8:03:56

Java通过RAG构建专属知识问答机器人_超详细

RAG&#xff1a;融合检索与生成的文本精准生成技术 检索增强生成&#xff08;RAG&#xff09;是一种技术&#xff0c;它通过结合检索模型和生成模型来提高文本生成的准确性。具体来说&#xff0c;RAG首先利用检索模型从私有或专有的数据源中搜索相关信息&#xff0c;然后将这些…...

编程日记 2024/10/14 8:02:55

2.1 使用点对点信道的数据链路层

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言1 通信信道类型2 数据链路3 帧4 透明传输5 差错检测 前言 在计算机网络通信中&#xff0c;数据链路层起着关键作用。它为直接相连的网络设备之间提供可靠的数据传输服务。…...

编程日记 2024/10/14 8:01:54

台式机来电自启动设置

在前司时&#xff0c;由于有些工作需要用到台式机&#xff0c;且一到节假日或者突然停电等情况&#xff0c;电脑每次都需要自己手动开机&#xff0c;后来研究了一下&#xff0c;发现可以在BIOS里面更改设置&#xff0c;从而变成关机的情况下&#xff0c;只要来电就能自动开机&a…...

编程日记 2024/10/14 7:59:51

【最新华为OD机试E卷-支持在线评测】考勤信息(100分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ，一枚热爱算法的程序员 💻 ACM金牌🏅️团队 ｜ 大厂实习经历 ｜ 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…...

编程日记 2024/10/14 7:56:48

netdata保姆级面板介绍

netdata保姆级面板介绍 基本介绍部署流程下载安装指令选择设置KSM为什么要启用 KSM&#xff1f;如何启用 KSM&#xff1f;验证 KSM 是否启用注意事项 检查端口启动状态 netdata和grafana的区别NetdataGrafananetdata各指标介绍总览system overview栏仪表盘1. CPU2. Load3. Disk…...

编程日记 2024/10/14 7:54:46