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

HTML 入门

news 2025/9/30 12:49:34

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

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/9/29 19:19:25

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/30 9:17:16

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/9/28 3:34:35

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/9/30 1:40:08

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2025/9/25 22:50:42

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/9/28 2:19:15

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/9/24 0:05:41