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

【HTML】构建网页的基石

news 2025/7/12 12:58:41

我的主页：2的n次方_    

HTML 是一种超文本标记语言，不仅有文本，还能包含图片，音频等

1. HTML 的文件基本结构

html 标签是整个 html 文件的最顶层标签，head 标签中写页面的属性，body 标签是页面中显示的内容，title 标签是页面的标题，当把上面的代码在浏览器中运行一下可以看到：

在 VS code 中输入一个 ！就可以直接生成一个整体的框架

2. HTML 的常见标签

2.1. 标题标签

h1 - h6 分别表示 1 级标题到 6 级标题

<body><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3>
</body>

2.2. 段落标签

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

<body><h1>我是一级标题</h1><p>我是一个段落</p>
</body>

p 标签描述的段落没有缩进，会根据浏览器宽度来进行自动排版

<body><p>我是一个段落我换行了我有     空格</p>
</body>

html 内容首尾处的换行空格均无效，在 html 中文字之间加入多个空格只相当于一个空格，换行也是不会直接换行，相当于一个空格

2.3. 换行标签

如果想实现换行的话可以通过 <br/> 标签来实现，br 是一个单标签，不像上面的几个标签一样需要首尾配合使用

<body>你好<br />你好<br />
</body>

p 标签的段落换行和 br 标签的换行中间的行距也有点不一样

2.4. 图片标签

img 标签表示图片，必须带有 src 属性，表示图片的路径，同级目录下可以直接写文件名，可以写绝对路径，也可以写相对路径，还可以写网络路径，一般建议写 / ，不写 \

./ 表示当前目录， ../ 表示上一级目录

<body><img src="E:/截图/图片/壁纸.png" alt=""><img src="壁纸.png" alt="">
</body>

还可以设置图片的宽度和高度

<img src="壁纸.png" height="200px">

一般宽高指定一个就可以了，另一个会等比例缩放

2.5. 超链接标签

a 标签就表示超链接， href 表示要跳转的位置

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

除了可以跳转外部的链接，内部的链接也可以跳转，写相对路径即可

<a href="Test.html" target="_blank">跳转</a>

target 表示跳转的方式，_blank 表示在新的页面中打开，默认是在本页面打开的

还可以使用一个空连接，用 # 来进行占位，如果此时还不确定要跳转的路径是什么就可以使用 # 进行占位

<a href="#" target="_blank">占位链接</a>

3. 表格和表单

3.1. 表格标签

table：表示整个表格

tr：表示表格的一行

td：表示一个单元格

也就是 table 包含 tr，tr 包含 td

vs code 中提供了快捷输入：

<table><tr><td>a</td><td>b</td><td>c</td></tr><tr><td>d</td><td>e</td><td>f</td></tr><tr><td>g</td><td>h</td><td>i</td></tr></table>

这样就可以构建一个 3 * 3 的表格了

还可以加上边框，在 table 里加上 border 并设置大小

<table border="1px">

再加上 cellspacing 来设置内边框和外边框的间距

<table border="1px" cellspacing="0">

还可以设置边框的宽度和文字距离边框的距离

 <table border="1px" cellspacing="0" width="300px" cellpadding="20">

单元格之间还可以合并，下面是按照行合并，指定合并两列，那么就多了一个字母 c ，为了保持表格形状，把 c 列删了就行

<td colspan="2">a</td>

同理，还可以合并行

<td rowspan="2">d</td>

然后发现多了 i 的单元格，把 i 删了就行了

还可以再加入 align 设置对齐方式，这里设置为居中

 <table border="1px" cellspacing="0" width="300px" cellpadding="20" align="center">

表格就显示到浏览器的中间位置了

表格中的内容也可以设置居中

 <td colspan="2" align="center">a</td>

3.2. 表单标签

表单是让用户输入信息的一种途径，这些输入框就是一个表单，表单分成表单域和表单控件两个部分

3.2.1. input 标签

可以输入各种组件，如单行文本框，密码框，按钮，单选框，复选框等,type 就可以指定这些控件类型

 <input type="date">

date 就是一个简单的日历

文本框：

文本框 <input type="text"><br/>

密码框：密码框的输入是看不见的

文件：

文件 <input type="file"><br/>

单选按钮：

单选按钮 <input type="radio"><input type="radio"><input type="radio"><br />

按道理说单选按钮是只能选一个的，但是上面创建的三个按钮都可以选择，是因为上面的三个按钮没有关联，需要具有相同的 name 属性才能实现多选一的效果

单选按钮 <input type="radio" name="gender">男<input type="radio" name="gender">女<br />

还可以加上一个 checked 来默认勾选一个选项

<input type="radio" name="gender" checked="checked">女<br />

复选框：可以勾选多个

复选框 <input type="checkbox">篮球 <input type="checkbox"> 足球<br />

普通按钮：

普通按钮<input type="button" value="按钮">

提交按钮：代码中没有写 value 按钮上也是有提交字样的

提交按钮<input type="submit">

下拉框：

下拉框<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select>

文本域：

文本域<textarea rows="5" cols="20"></textarea>

可以点右下角拖动

3.2.2. 表单域

表单域就是包含表单元素的区域，也就是可以包含上面控件的区域，用 form 标签表示，表单控件中的内容最终都会通过表单域提交

<form action="" method="get"></form>

action 中填的就是最终要提交的路径，method 表示提交数据的方式

4. 无语义标签

div 和 span

div 是独占一行的，span 只占一块

<div><span>你好</span><span>你好</span><span>你好</span></div><div><span>你好</span><span>你好</span><span>你好</span></div>

相关文章：

【HTML】构建网页的基石

我的主页&#xff1a;2的n次方_ HTML 是一种超文本标记语言&#xff0c;不仅有文本&#xff0c;还能包含图片&#xff0c;音频等 1. HTML 的文件基本结构 html 标签是整个 html 文件的最顶层标签&#xff0c;head 标签中写页面的属性&#xff0c;body 标签是页面中显示的…...

编程日记 2024/10/17 11:10:42

rust不允许在全局区定义普通变量！

文章目录 C 中的全局变量Rust 中的全局变量设计哲学的体现 在 C 和 Rust 中&#xff0c;全局变量的处理方式体现了这两种语言设计哲学上的一些根本性差异&#xff1a; C 中的全局变量 C 允许在全局作用域中定义变量。这些变量在程序的整个生命周期内都存在&#xff0c;从程序开…...

编程日记 2024/10/17 11:08:40

量化投资中的数据驱动决策：大数据如何改变金融市场

随着科技的进步&#xff0c;金融行业迎来了前所未有的变革&#xff0c;量化投资作为其中的代表&#xff0c;逐渐成为投资市场的主流。量化投资是基于数学模型、数据分析以及算法策略的投资方式&#xff0c;与传统依赖经验和直觉的投资方法相比&#xff0c;它的核心优势在于能够…...

编程日记 2024/10/17 11:07:39

MySQL 设计数据表

一个数据表主要包含信息有 : 表名、主键、字段、数据类型、索引&#xff0c;本节主要介绍表的命名规范、字段命名、字段的数据类型选择。 新建的表都是新建在 “item_name” 数据库中的&#xff0c;新建 “item_name” 数据库命令如下 : CREATE DATABASE item_name;新建数据库…...

编程日记 2024/10/17 11:05:37

【大数据技术基础 | 实验一】配置SSH免密登录

文章目录 一、实验目的二、实验要求三、实验原理&#xff08;一&#xff09;大数据实验一体机&#xff08;二&#xff09;SSH免密认证 四、实验环境五、实验内容和步骤&#xff08;一&#xff09;搭建集群服务器&#xff08;二&#xff09;添加域名映射&#xff08;三&#xff…...

编程日记 2024/10/17 11:04:36

地级市碳排放效率测算2006-2021年

为了测算碳排放效率&#xff0c;研究者们采用了多种方法&#xff0c;其中超效率SBM&#xff08;Slack-Based Measure&#xff09;和超效率CCR&#xff08;Charnes, Cooper and Rhodes&#xff09;模型是常用的两种方法。这些模型可以有效地评估决策单元的相对有效性&#xff0c…...

编程日记 2024/10/17 11:03:35

周易解读：四象

四 象 在前面呢&#xff0c;我是讲完了太极与两仪的知识。这一节&#xff0c;我们来讲解四象的内容。 关于四象的知识&#xff0c;它在正式的周易的经文里面&#xff0c;它并没有多少用处。但是呢&#xff0c;在基础知识的学习里面&#xff0c;四象的知识&#xff0c;大家是…...

编程日记 2024/10/17 11:02:33

Java设计模式梳理：行为型模式（策略，观察者等）

行为型模式 行为型模式关注的是各个类之间的相互作用&#xff0c;将职责划分清楚&#xff0c;使得我们的代码更加地清晰。 策略模式 策略模式太常用了&#xff0c;所以把它放到最前面进行介绍。它比较简单&#xff0c;我就不废话&#xff0c;直接用代码说事吧。 下面设计的…...

编程日记 2024/10/17 11:01:32

【MySQL】入门篇—基本数据类型：使用LIMIT限制结果集

为了提高查询效率和用户体验&#xff0c;MySQL提供了LIMIT子句&#xff0c;用于限制查询结果的行数。LIMIT不仅可以提高性能&#xff0c;还可以帮助用户快速获取所需的数据&#xff0c;尤其在分页显示数据时非常有用。 应用场景&#xff1a; 分页显示&#xff1a;在网页应用中…...

编程日记 2024/10/17 11:00:30

PostgreSQL与MySQL在语法上的区别

PostgreSQL与MySQL在语法上的区别 在数据库管理系统中&#xff0c;PostgreSQL和MySQL都是非常受欢迎的选择。虽然它们都是一种关系型数据库管理系统(RDBMS)&#xff0c;但它们在语法上有一些显著的区别。本文将介绍PostgreSQL和MySQL在语法上的主要区别。 数据类型 PostgreS…...

编程日记 2024/10/17 10:58:26

frameworks 之InputDispatcher

frameworks 之InputDispatcher 1. 填充Iq2.进入循环3.进入oq4. 发布消息&#xff0c;并将数据放进去wq5. 接收消息6. 移除wq android 输入事件 主要分 2个流程 事件读取 和 事件分发。本文讲解事件分发流程。 涉及到的类如下 -frameworks/native/services/inputflinger/Input…...

编程日记 2024/10/17 10:56:24

ESP32-IDF GPIO 专题

目录 一、基本介绍1、配置结构体2、API2.1 gpio_config2.2 gpio_reset_pin2.3 gpio_set_intr_type2.4 gpio_intr_enable2.5 gpio_intr_disable2.6 gpio_set_level2.7 gpio_get_level2.8 gpio_set_direction2.9 gpio_set_pull_mode2.10 gpio_isr_register2.11 gpio_install_isr_…...

编程日记 2024/10/17 10:55:23

深度学习代码学习笔记2

1、torch.max correct 0 total 0 for xb,yb in valid_dl:outputs model(xb)_,predicted torch.max(outputs.data,1)total yb.size(0) #yb.size(0) 返回的是张量 yb 在第 0 维的大小&#xff0c;也就是 yb 中的样本数量。correct (predicted yb).sum().item() print(…...

编程日记 2024/10/17 10:53:19

016集——c# 实现CAD类库 与窗体的交互（CAD—C#二次开发入门）

第一步&#xff1a;搭建CAD类库dll开发环境。 第二步&#xff1a;添加窗体 第三步&#xff1a;添加控件 第四步&#xff1a;双击控件&#xff0c;在控件点击方法内输入代码 第五步&#xff1a;在主程序内实例化新建的form类&#xff0c;并弹窗form窗体 第六步&#xff1a;CAD命…...

编程日记 2024/10/17 10:49:14

【亲测可行】最新ubuntu搭建rknn-toolkit2

文章目录 🌕结构图（ONNX->RKNN）🌕下载rknn-toolkit2🌕搭建环境🌙配置镜像源🌙conda搭建python3.8版本的虚拟环境🌙进入packages目录安装依赖库🌕测试安装是否成功🌕其它🌙rknn-toolkit2🌙rknn_model_zoo🌙关于部署的博客发布本文的时间为2024.10.13…...

编程日记 2024/10/17 10:48:13

pico+Unity交互开发——触碰抓取

一、VR交互的类型 Hover&#xff08;悬停&#xff09; 定义&#xff1a;发起交互的对象停留在可交互对象的交互区域。例如&#xff0c;当手触摸到物品表面&#xff08;可交互区域&#xff09;时&#xff0c;视为触发了Hover。 Grab&#xff08;抓取&#xff09; 概念&#xff…...

编程日记 2024/10/17 10:47:12

16年408计算机网络

第一题&#xff1a; 解析&#xff1a; 首先我们要清楚R1,R2,R3是路由器&#xff08;网络层&#xff09;&#xff0c;Switch是以太网交换机&#xff08;数据链路层&#xff09;&#xff0c;Hub是集线器&#xff08;物理层&#xff09;。 由此可见路由器实现的最高功能层是3层&am…...

编程日记 2024/10/17 10:46:11

PDF 转 CAD 工具：实现文档格式高效转换的利器

如果你从事设计相关PDF和CAD作为两种常见且重要的文件格式&#xff0c;在不同的领域都有着广泛的应用。今天&#xff0c;我们就来介绍几个各具特色的PDF转换成CAD工具。 1.福昕PDF转换大师 链接一下>>https://www.pdf365.cn/pdf2word/ 该工具在跨领域应用中表现出明确…...

编程日记 2024/10/17 10:45:10

基于springboot的画师约稿系统的设计与实现

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的画师约稿系统的设计与实…...

编程日记 2024/10/17 10:41:07

使用Python生成SVG图片

SVG(可缩放矢量图形)是一种基于XML的图像格式,它可以无损缩放且文件大小较小。在本文中,我们将探讨如何使用Python生成SVG图片。 为什么选择SVG? 可缩放:SVG图像可以无限放大而不失真。文件小:SVG文件通常比位图文件小。可编辑:SVG文件可以通过文本编辑器修改。 使用Python…...

编程日记 2024/10/17 10:40:06

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/7/12 6:07:31

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/7/11 17:16:31

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/12 5:26:18

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/7/12 2:48:21

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/7/9 9:23:22

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/7/11 20:08:39

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/7/12 12:34:52

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/7/10 22:44:57

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/7/6 18:27:44