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

HTML 入门

news 2025/6/23 14:51:56

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/6/22 21:37:22

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/6/22 7:32:53

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/6/18 6:31:56

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/6/20 13:47:44

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/6/15 5:19:16

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/6/21 10:52:47

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/6/19 16:21:45

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/6/21 11:58:42

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/6/22 5:30:42

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/6/22 11:09:51