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

HTML基础知识点

news 2025/7/7 18:00:33

目录

​编辑一、使用 vscode

二、研究代码的特点

三、HTML 常见标签 

注释标签

标题标签

段落标签

换行标签

格式化标签

图片标签

超链接标签

表格标签

列表标签

表单标签：

form 标签

input标签：

select 

 textarea标签：

无语义标签：

案例一：展示简历信息

一、使用 vscode

 vscode 没有 “项目” 这个概念，都是使用 目录 来组织的

我们就可以选择一个当前想要代码的目录，打开这个目录（打开目录就相当于以这个目录作为项目目录）

1、打开目录

2、创建代码文件

3、编写代码

此时，代码高亮/ 提示 / 自动缩进 就都有了

写完代码之后，记得保存（ctrl + s）

如果存在这个小圆点，说明是为保存的，就需要进行保存

4、允许代码

仍然是使用浏览器运行

 

 然后在弹出的文件资源管理器中，双击 html 或者拖拽到浏览器中运行，此时代码就能跑起来了

二、研究代码的特点

1、html 代码是通过标签来组织的

形如 <html> </html> 用尖括号组织的，成对出现的这个东西，就是 “标签” ，也可以叫做元素

2、一个标签通常是成对出现的

<html> 开始标签，</html> 结束标签

这俩之间的是标签的内容

3、标签是可以嵌套的

一个标签的内容可以是其他一个或者多个标签，此时，这些标签构成了一个树形结构：

4、在开始标签中，给标签赋予属性

属性可以相当于是键值对，可以有一个或者多个 

HTML 就基本的语法结构，就是这几个简单的规则，下一步要了解的，是当前 HTML 中都支持哪些标签，这些标签又是干什么的，每个标签有哪些基本属性......

三、HTML 常见标签 

HTML 不支持自定义标签

html 是一个 html 文件最顶层的标签，相当于树根节点

head 存放了这个页面的一些属性

body 存放了这个页面包含了哪些内容

 ！ + tab 可以快速的生成一个基本的页面，我们只需要编辑 body 的内容即可，这个功能叫做 emmet 快捷键

注释标签

代码的注释，html 的注释，和一般的语言注释，差别很大

注释的内容，不会再在页面中显示

但是，如果我们右键查看网络源代码，是可以看到注释的

vscode 里，可以使用 ctrl + / 快速注释 

标题标签

h1 ：最大，h6 最小

每个标题标签都是独占一行的，这个独占一行和代码的编写无关

在 html 里面，标签是否换行和代码的编写无关，而是和标签自身有关（有的标签独占一行，有的标签不独占）

在 html 源代码中写的 换行 会被忽略，写的空格，多个连续空格会被视作一个（有的时候忽略，有的时候视为一格）

段落标签

每个段落之间，不光是换黄，同时还有一个明显的段落间距

换行标签

br 标签表示换行

br 是一个单标签，不是成双成对出现的

格式化标签

这些标签都是不独占一行的

图片标签

网页上，是可以显示图片的，报纸上也是可以有图片的

img 有个核心属性，src（必填）

src 描述了该图片的路径（路径可以是本地的绝对路径，也可以是相对路径和网络路径）

使用相对路径的时候，一定要明确，工作目录是哪一个，html 的工作目录，就是 html 当前的所在的目录

img 别的属性：

alt 属性：在图片挂了的时候，就会显示 alt 对应的文本

title 属性：鼠标悬停在图片上，会给出一个提示

width / height ： 描述图的尺寸

宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个就会等比例缩放

单位是 px ：像素，这是在前端开发中最常见的单位

超链接标签

链接： link （快捷方式）

超：链接跳转到的页面，可以是当前网站之外的

还有一个属性：target 

一般都是写作 target = "_blank"，就可以打开一个新的标签页，而不会替换原有页面

这里的域名，是可以替换成 ip 地址的

表格标签

table 表示整个表

tr 表示一行

td 表示一个单元格

th 表示表头中的一个单元格

 为了让这个表格看上去更像表格，我们可以在 table 后面添加属性：

如果想要让文字居中，就得使用到 CSS 了

 这个操作就是让所有 td 标签中的文字都居中

列表标签

有序列表 ol  ordered list

无序列表 ul  unordered  list

列表项 li   list item

表单标签：

form 标签

使用 form 进行前后端交替，把页面上，用户进行的 操作 / 输入 提交到服务器上

（在后面学习http 的时候，会具体写）

input标签：

有很多形态，能够表现成各种用户用来输入的组件

单行文本框

 也是单行文本框，但是是用来输入密码的 

 

单选按钮

对于单选框，需要加一个 name 属性，name 属性相同的单选框，值之间是互斥的，也就是只能选择一个，也可以加一个 checked 属性，加了 checked 的是初始被选择的

 

 复选框，可以反复选择，也可以使用 checked 属性来设置默认选中的

按钮，对于按钮点击之后要干什么，需要通过 js 来配合

还有一种是提交按钮，需要搭配 form 使用，外表和 buttoon 是差不多的，会触发 form 和服务器的交互

文件选择框

select 

下拉菜单

 textarea标签：

 多行编辑框

 

上述标签，也可以称为是 “控件” ，是构成一个图形化界面的基本要素

无语义标签：

前面的标签都是由特定含义的，无语义标签没有特定含义，意思是可以用在各种场景

div默认是独占一行的 [块级元素]

span 是不独占一行的 [行内元素]

如果一个页面中，全用 div 也不是不行，但是一般不建议这么做，表示一个内容还是优先考虑语义更贴切的标签

案例一：展示简历信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h1>馒头警告的简历</h1><h2>基本信息</h2><img src="C:\Users\Huang\Desktop\照片\馒头.jpg" alt="" height="200px"><div>求职意向：软件开发工程师</div><div>联系方式：110</div><div>邮箱：123456@qq.com</div><div><a href=https://blog.csdn.net/weixin_73616913?spm=1000.2115.3001.5343"> 馒头警告的博客</a></div><h2>教育背景</h2><ol><li>1990 - 1996 小葵花妈妈幼儿园</li><li>1997 - 2000 小葵花中学</li><li>2001 - 2020 小葵花高中</li><li>2021 - 2023 小葵花大学</li></ol><h2>专业技能</h2><ul><li>熟练掌握 Java 基本语法</li><li>熟悉常用的青年大学习</li><li>熟悉掌握学习强国技能</li></ul><h2>我的项目</h2><ol><li><h3>项目一</h3><p>开发时间：xxxx年 x 日</p><div>功能介绍</div><ul><li>功能一：xxxxxxx</li><li>功能二：xxxxxxx</li></ul></li><li><h3>项目二</h3><p>开发时间：xxxx年 x 日</p><div>功能介绍</div><ul><li>功能一：xxxxxxx</li><li>功能二：xxxxxxx</li></ul></li></ol><h2>个人评价</h2>这是一段个人评价.....
</body>
</html>

相关文章：

HTML基础知识点

目录 ​编辑一、使用 vscode 二、研究代码的特点 三、HTML 常见标签 注释标签 标题标签 段落标签 换行标签 格式化标签 图片标签 超链接标签 表格标签 列表标签 表单标签&#xff1a; form 标签 input标签&#xff1a; select textarea标签&#xff1a; 无语…...

编程日记 2023/8/25 15:42:36

基于CBAM-CNN卷积神经网络预测研究（Python代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/25 15:41:34

iOS开发Swift-基本运算符

1.一元、二元、三元运算符 一元单一操作对象-a !b c!二元两个操作对象2 3三元三目运算符a ? b : c 2.赋值运算符() let a 10 var b 5 b a let (x, y) (1, 2)赋值运算符不返回任何值&#xff0c;所以 if x y { ... } 无效。 3.算术运算符 - * / 默认不允许数…...

编程日记 2023/8/25 15:40:32

Flink java 工具类

flink 环境构建工具类 public class ExecutionEnvUtil {/*** 从配置文件中读取配置(生效优先级&#xff1a;配置文件<命令行参数<系统参数&#xff09;** param args* return org.apache.flink.api.java.utils.ParameterTool* date 2023/8/4 - 10:05 AM*/public static …...

编程日记 2023/8/25 15:39:31

2023年你需要知道的最佳预算Wi-Fi路由器清单

买新路由器？让我们帮助你挑选一些既有很多功能和性能，又经济实惠的产品。 购买Wi-Fi路由器并不一定要倾家荡产，尤其是如果你不需要一个提供数百Mbps速度的路由器。廉价路由器是一个很好的选择，它包含了许多功能，不会对钱包造成影响。 一、2023年在廉价Wi-Fi路由器中寻找…...

编程日记 2023/8/25 15:38:30

Go语言基础之流程控制

流程控制是每种编程语言控制逻辑走向和执行次序的重要部分&#xff0c;流程控制可以说是一门语言的“经脉”。 Go语言中最常用的流程控制有if和for&#xff0c;而switch和goto主要是为了简化代码、降低重复代码而生的结构&#xff0c;属于扩展类的流程控制。 if else(分支结构…...

编程日记 2023/8/25 15:37:29

Git 安装、配置并把项目托管到码云 Gitee

错误聚集篇&#xff1a; 由于我 git 碰见大量错误&#xff0c;所以集合了一下&#xff1a; git 把项目托管到 码云出现的错误集合_打不着的大喇叭的博客-CSDN博客https://blog.csdn.net/weixin_49931650/article/details/132460492 1、安装 git 1.1 安装步骤 1.1.1 下载对应…...

编程日记 2023/8/25 15:36:26

C++信息学奥赛1147：最高分数的学生姓名

#include <iostream> #include <string> using namespace std; int main() {int n;// 输入一个整数ncin>>n;cin.ignore();string arr;string str;int max0;int fen;// 循环读取n个评分和对应的字符串for(int i0;i<n;i){cin>>fen>>arr;if(fen&…...

编程日记 2023/8/25 15:35:25

STM32使用PID调速

STM32使用PID调速 PID原理 PID算法是一种闭环控制系统中常用的算法&#xff0c;它结合了比例&#xff08;P&#xff09;、积分&#xff08;I&#xff09;和微分&#xff08;D&#xff09;三个环节&#xff0c;以实现对系统的控制。它的目的是使 控制系统的输出值尽可能接近预…...

编程日记 2023/8/25 15:34:24

【UE5：CesiumForUnreal】——3DTiles数据属性查询和单体高亮

目录 0.1 效果展示 0.2 实现步骤 1 数据准备 2 属性查询 2.1 射线检测 2.2 获取FeatureID 2.3 属性查询 2.4 属性显示 3 单体高亮 3.1 构建材质参数集 3.2 材质参数设置 3.3 添加Cesium Encode Metadata插件 3.4 从纹理中取出特定FeatureId属性信息 3.5 创建…...

编程日记 2023/8/25 15:33:23

无涯教程-PHP - 返回类型声明

在PHP 7中&#xff0c;引入了一个新函数返回类型声明&#xff0c;返回类型声明指定函数应返回的值的类型&#xff0c;可以声明返回类型的以下类型。 intfloatbooleanstringinterfacesarraycallable 有效返回类型 <?phpdeclare(strict_types1);function returnIntValue(i…...

编程日记 2023/8/25 15:32:22

DOS常见命令

DOS常见命令 DOS是什么如何打开DOScmd常见的命令集合 DOS是什么 DOC命令是我们浏览器中的终端 &#xff0c;但不同的是我们打开软件的方式 使用的是点击文件图标&#xff0c;点击图标的同时 我们也相当于使用一个命令 只是我们看不见而已 在电脑上操作的时候 通常都是使用命令…...

编程日记 2023/8/25 15:31:21

Qt应用开发(拓展篇)——示波器/图表 QCustomPlot

一、介绍 QCustomPlot是一个用于绘图和数据可视化的Qt C小部件。它没有进一步的依赖关系&#xff0c;提供友好的文档帮助。这个绘图库专注于制作好看的&#xff0c;出版质量的2D绘图&#xff0c;图形和图表&#xff0c;以及为实时可视化应用程序提供高性能。 QCustomPl…...

编程日记 2023/8/25 15:30:20

【精度丢失】后端接口返回的Long类型参数，不同浏览器解析出的结果不一样

1、业务背景 有个同事找我帮他看一个问题&#xff0c;他给前端提供了一个接口。 这个接口是用来反查id的&#xff0c;他这里这个参数正常的返回值应该是 283232039247028226。 但前端反馈他&#xff0c;前端在浏览器&#xff08;火狐&#xff09;获取的值是 283232039247028…...

编程日记 2023/8/25 15:29:19

2023年国赛 高教社杯数学建模思路 - 案例：感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…...

编程日记 2023/8/25 15:28:17

java-红黑树

节点内部存储 红黑树规则 或者&#xff1a; 红黑树添加节点规则&#xff1a; 添加节点默认是红色的&#xff08;效率高&#xff09; 红黑树示例 注&#xff1a;红黑树增删改查性能都很好...

编程日记 2023/8/25 15:27:15

vue2 vue中的常用指令

一、为什么要学习Vue 1.前端必备技能 2.岗位多&#xff0c;绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能&#xff08;Vue2Vue3&#xff09; 二、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 **构建用户界面 ** 的 渐进式 …...

编程日记 2023/8/25 15:26:14

AI驱动下的智能制造：工业自动化的新纪元

随着人工智能&#xff08;AI&#xff09;技术的持续进步&#xff0c;其在工业自动化领域的影响日益显著。作为现代科技的代表&#xff0c;AI不仅为各行业带来了前所未有的商机和技术思路&#xff0c;更在工业自动化领域中引发了一场深刻的变革。本文将深入探讨AI对智能制造的影…...

编程日记 2023/8/25 15:25:13

docker 命令

一、docker命令 1、镜像保存 docker save imageid -o modelzoozl.tar #把镜像保存到本地 docker load -i dockername #把tar包load下来&#xff0c;load成镜像 docker export CONTAINERID/CONTAINERNAME -o modelzoozl.tar #把启动着的镜像导出 docker import modelzo…...

编程日记 2023/8/25 15:24:12

2023年高教社杯数学建模思路 - 复盘：光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&…...

编程日记 2023/8/25 15:23:12

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/7/6 7:25:51

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/7/7 0:36:31

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/7/7 7:23:14

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/7/6 21:12:40

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/7/7 10:28:26

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/7/6 16:48:36

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/7/6 20:17:04

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/7/6 5:56:02

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/7/4 23:10:40