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

前端学习系列之html

news 2026/1/23 17:19:55

目录

初识html

发展史

 优势

W3C

标准

地址

格式

网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式

注释和特殊符号

特殊符号

图像、超链接

图像

常见图像格式

格式

超链接

格式

重要属性

href：规定链接指向的页面的 URL

target：链接页面的打开方式

name：定义锚名称

title：鼠标悬停显示的提示文本

状态

列表、表格、媒体元素

列表

分类

表格

优点

基本结构

使用

媒体元素

内联框架

表单及表单应用

表单

input属性

单选框

多选框

按钮

滑块

搜索框

下拉框

文本域

文件域

表单的应用

初识html

html：Hyper Text Markup Language（超文本标记语言）

发展史

 优势

1.世界知名浏览器都支持html

2. 市场需求大

3.跨平台

W3C

World Wide Web Consortium(万维网联盟)

标准

结构化标准语言：html、xml

表现标准语言：CSS

行为标准语言：DOM、ECMAScript

地址

http://www.w3.org

http://www.chinaw3c.org

格式

<head></head>:网页头部

<body></body>:主体部分

<body>、</body>等成对的标签，分别叫开放标签和闭合标签

网页基本标签

注释：<!-- 注释标签 -->

标题标签

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式

粗体：<strong></strong>

斜体：<em></em>

注释和特殊符号

注释：<!-- 注释标签 -->

特殊符号

空格：&nbsp；

大于号：&gt；

小于号：&lt；

版权符号：&copy；

图像、超链接

图像

常见图像格式

jpg、gif、png、bmp......

格式

<img src="图片地址" alt="图片替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

src ：图片地址，其中包括相对地址、绝对地址

        相对地址：../

        绝对地址：图片在电脑文件夹中的完整地址

alt：当图片找不到时，显示文字

title：鼠标悬停提示文字

超链接

<a> 标签定义超链接，用于从一个页面链接到另一个页面

格式

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

重要属性

href：规定链接指向的页面的 URL

外部链接：< a href="http:// www.baidu.com">百度</a>

内部链接：网站内部页面之间的相互链接：< a href="index.html">首页</a >

空链接：如果当时没有确定链接目标时：<a href="#">首页</a>

下载链接：如果href里面地址是一个文件会下载这个文件：<a href="xiazai.zip">下载文件</a>

锚点链接：点我们点击链接，可以快速定位到页面中的某个位置：<a href="#two">首页</a>

<h1 id="two">首页</h1 >

target：链接页面的打开方式

_top： 跳出框架打开网页。

_parent： 在父窗口打开网页。

_ framename： 在指定的框架中打开网页。

_self：为默认值当前页面打开。

_blank：为在新窗口中打开方式。

name：定义锚名称

锚：定义在某个点上

可以快速定位到页面中的某个位置：<a href="#two">首页</a>，<h1 id="two">首页</h1 >

title：鼠标悬停显示的提示文本

状态

对于a标签，一共有5种状态：:link, :visited, :hover, :focus, :active 

        :link —— 于声明未访问状态链接的样式；

        :visited —— 可以用于声明已经访问链接的样式；

        :hover —— 可以用于声明鼠标悬停在链接上的样式；

        :focus —— 可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；

        :active —— 可以用于声明浏览器点击链接的样式。

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）

列表、表格、媒体元素

列表

列表就是信息资源展现的一种形式。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能够更加快捷的获得相应的信息。

分类

有序列表

使用<ol></ol>表示

<ol>

        <li>java</li>

        <li>Python</li>

        <li>运维</li>

        <li>前端</li>

        <li>C/c++</li>

</ol>

无序列表

使用<ul></ul>表示

<ul>

        <li>java</li>

        <li>Python</li>

        <li>运维</li>

        <li>前端</li>

        <li>C/c++</li>

</ul>

自定义列表

使用<dl></dl>表示

<dl>

        <dt>学科</dt>      

        <li>java</li>

        <li>Python</li>

        <li>Linux</li>

        <li>C</li>

</dl>

其中：dl：标签

          dt：列表名称

          dd：列表内容

表格

优点

        1.简单通用

        2.结构稳定

基本结构

        1.单元格

        2.行

        3.列

        4.跨行

        5.跨列

使用

行:tr

列:td

跨列:colspan

跨行:rowspan

<table border="1px">

        <tr>

                <td>1-1</td>

                <td>1-2</td>

                <td>1-3</td>

                <td>1-4</td>

        </tr>

        <tr>

                <td>2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

                <td>3-4</td>

        </tr>

</table>

<table border="1px">

        <tr>

                <td colspan="4">1-1</td>

        </tr>

        <tr>

                <td rowspan="2">2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

        </tr>

</table>

<table border="1px">

        <tr>

                <td colspan="4">1-1</td>

        </tr>

        <tr>

                <td>2-1</td>

                <td>2-2</td>

                <td>2-3</td>

                <td>2-4</td>

        </tr>

        <tr>

                <td>3-1</td>

                <td>3-2</td>

                <td>3-3</td>

                <td>3-4</td>

        </tr>

</table>

媒体元素

格式

视频：

<video src="" controls autoplay></video>

音频：

<audio src="" controls autoplay></audio >

src：资源路径

controls ：显示进度控制条

autoplay：自动播放

内联框架

在网站中嵌入外部网站使用iframe 标签

格式：

<iframe src="" name=""></iframe>

src:引用页面地址

name:框架标识名

表单及表单应用

表单

格式：

<form action="" method="">

</from>

action:表单提交的位置，可以是网站或者请求处理地址

method:提交方式，post、get

使用：

input属性

单选框

格式：

<input type="redio" value="" name="" />

value:单选框的值

name:表示组，同一个组名，只能只能进行单选

多选框

格式：

<input type="checkbox" value="" name="" checked />

value:多选框的值

name:表示组，同一个组名，能进行多选，提交成数组形式

checked ：默认选中

按钮

格式：

<input type="button" value="" name="" />

图片按钮格式：

<input type="image" src="" />

type:按钮类型

value:按钮显示值

name:按钮名称

src:图片按钮链接地址

type="button"：普通按钮

type="image"：图片按钮

type="submit"：提交按钮

type="reset"：重置按钮

滑块

格式：

<input type="range" min="" max="" step="" name="" />

range:滑块类型

min:最小值

max:最大值

step:每次相加值

name:名称

搜索框

格式：

<input type="search" name="" />

search：搜索框类型

name：名称

下拉框

格式：

<select name="">

        <option value="" selected></option>

</select>

select:下拉框

option :下拉框选项

value:值

selected:默认选中

文本域

 格式：

<textarea name="" cols="10" rows="10">文本内容</textarea>

textarea：文本域标识

name：名称

cols：行

rows：列

文件域

 格式：

<input type="file" value="" name="" />

type:类型

value:显示值

name:名称

表单的应用

        1.hidden:隐藏

        2.readonly:只读

        3.disables:禁用

相关文章：

前端学习系列之html

目录 初识html 发展史 优势 W3C 标准 地址 格式 网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式 注释和特殊符号 特殊符号 图像、超链接 图像 常见图像格式 格式 超链接 格式 重要属性 href&#xff1a;规定链接指向的页面的 URL target…...

编程日记 2023/11/28 7:07:21

Star History 十月开源精选 ｜AI for Postgres

在 2023 年 Stack Overflow 开发者调查中&#xff0c;Postgres 顶替了 MySQL 被评为最受欢迎的数据库。一个重要因素应该是 Postgres 支持扩展&#xff1a;可扩展的架构 Postgres 仍然由社区拥有&#xff0c;Postgres 生态近年来蓬勃发展。 扩展可以看作是内置功能&#xff0c…...

编程日记 2023/11/28 7:06:20

网络运维与网络安全 学习笔记2023.11.23

网络运维与网络安全 学习笔记 第二十四天 今日目标 VRRP负载均衡、BFD原理与配置、BFD典型应用 DHCP工作原理、全局模式DHCP VRRP负载均衡 VRRP单组缺陷 每网段存在一个VRRP组&#xff0c;缺点如下&#xff1a; 主网关数据转发压力大 备份网关不转发任何数据 网络设备利用…...

编程日记 2023/11/28 7:05:19

红黑树（万字图文详解）

红黑树 1. 红黑树的概念2. 红黑树的性质3. 红黑树节点的定义4. 红黑树结构5. 红黑树的插入操作5.1 按照二叉搜索的树规则插入新节点5.2 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏5.2.1 情况一: cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红…...

编程日记 2023/11/28 7:04:17

Kotlin学习——kt入门合集博客 kt里的委派模式Delegation kt里的特性

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…...

编程日记 2023/11/28 7:03:16

数据挖掘 朴素贝叶斯

直入正题&#xff0c;直接看代码&#xff1a; 这是一段判断是不是藏话的代码 import numpy as np# 数据采集&#xff08;定义函数加载数据集&#xff09; def load_dataset():sent_list [[my, name, is, Devin],[you, are, stupid],[my, boyfriend, is, SB],[you, looks, ver…...

编程日记 2023/11/28 7:02:15

UI自动化测试工具有哪些优势?

UI自动化测试工具通过提高测试效率、覆盖率&#xff0c;减少测试时间和成本&#xff0c;以及支持持续集成等方式&#xff0c;为软件开发团队提供了一系列重要的优势&#xff0c;有助于提升软件质量和开发效率。 自动化执行&#xff1a;UI自动化测试工具可以模拟用户与应用程序的…...

编程日记 2023/11/28 7:00:12

【论文阅读笔记】InstructDiffusion: A Generalist Modeling Interface for Vision Tasks

【论文阅读笔记】StyleAvatar3D: Leveraging Image-Text Diffusion Models for High-Fidelity 3D Avatar Generation 论文阅读笔记论文信息引言动机挑战 方法结果 关键发现相关工作1. 视觉语言基础模型2. 视觉通用模型 方法/模型视觉任务的统一说明训练数据构建网络结构 实验设…...

编程日记 2023/11/28 6:59:12

笔记62：注意力汇聚 --- Nadaraya_Watson 核回归

本地笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\3.循环神经网络\第10章&#xff1a;动手学深度学习~注意力机制 a a a a a a a a a a a a a a a a...

编程日记 2023/11/28 6:58:11

给定一个n×n的方阵，本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。

7-5 矩阵运算 分数 20 全屏浏览题目 切换布局 作者 C课程组 单位 浙江大学 给定一个nn的方阵&#xff0c;本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。副对角线为从矩阵的右上角至左下角的连线。 输入格式: 输入第一行给出正整数n&#xff08;…...

编程日记 2023/11/28 6:57:10

Go语言的学习笔记3——Go语言项目布局

Go 1.11 版本开始引入 go.mod 和 go.sum 以支持Go Module构建机制&#xff0c;而这种机制成为官方的依赖包管理方式。 现在Go可执行程序项目的典型布局如下所示&#xff1a; exe-layout ├── cmd/ │ ├── app1/ │ │ └── main.go │ └── app2/ │ └…...

编程日记 2023/11/28 6:56:09

70-76-堆、贪心算法

LeetCode 热题 100 文章目录 LeetCode 热题 100堆70. 中等-数组中的第K个最大元素71. 中等-前K个高频元素72. 困难-数据流中的中位数 贪心算法73. 简单-买卖股票的最佳时机74. 中等-跳跃游戏75. 中等-跳跃游戏II76. 中等-划分字母区间 本文存储我刷题的笔记。 堆 70. 中等-数组…...

编程日记 2023/11/28 6:55:09

Qt Network

Qt Network Qt Network为使用TCP/IP的应用程序编程提供了一组API。各种C++类处理诸如请求、cookies和通过HTTP发送数据之类的操作。 标题使用模块 使用Qt模块需要直接或通过其他依赖项链接到模块库。一些构建工具对此有专门的支持，包括CMake和qmake. 标题使用CMake构建 使…...

编程日记 2023/11/28 6:53:05

Win10电脑用U盘重装系统的步骤

在Win10电脑中&#xff0c;用户遇到了无法解决的系统问题&#xff0c;用户这时候就可以考虑重装Win10系统&#xff0c;这样即可轻松解决问题&#xff0c;从而满足自己的操作需求。接下来小编给大家详细介绍关于Win10电脑中用U盘重装系统的教程步骤。 准备工作 1. 一台正常联网可…...

编程日记 2023/11/28 6:52:05

安防视频监控/磁盘阵列/集中云存储平台EasyCVR设备录像保活不生效原因是什么？该如何解决？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/11/28 6:51:03

【JDK21】详解虚拟线程

目录 1.概述 2.虚拟线程是为了解决哪些问题 2.1.线程切换的巨大代价 2.2.哪些情况会造成线程的切换 2.3.线程资源是有限的 3.虚拟线程 4.适用场景 1.概述 你发任你发&#xff0c;我用JAVA8&#xff1f;JDK21可能要对这句话say no了。 现在Oracle JDK是每4个版本&#x…...

编程日记 2023/11/28 6:50:01

UE5 - 虚幻引擎各模块流程图

来自虚幻官方的一些资料&#xff0c;分享一下&#xff1b; 一些模块的流程图&#xff0c;比如动画模块&#xff1a; 或角色相关流程&#xff1a; 由于图片比较大&#xff0c;上传到了网络&#xff0c;可自取&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1BQ2KiuP08c…...

编程日记 2023/11/28 6:49:00

vue3实现element table缓存滚动条

背景 对于后台管理系统&#xff0c;数据的展示形式大多都是通过表格&#xff0c;常常会出现的一种场景&#xff0c;从表格跳到二级页面&#xff0c;再返回上一页时&#xff0c;需要缓存当前的页码和滚动条的位置&#xff0c;以为使用keep-alive就能实现这两种诉求&#xff0c;…...

编程日记 2023/11/28 6:47:59

flutter布局详解及代码示例（下）

布局 基本布局 GridView&#xff08;二维滚动列表&#xff09;&#xff1a;比ListView多了一个方向的数据填充。ListBody&#xff08;滚动列表&#xff09;&#xff1a;相比ListView&#xff0c;没有回收复用&#xff0c;简单易用。Table&#xff08;表格布局&#xff09;&am…...

编程日记 2023/11/28 6:45:57

SQL Server：流程控制语言详解

文章目录 一、批处理、脚本和变量局部变量和全局变量1、局部变量2、全局变量 二、顺序、分支和循环结构语句1、程序注释语句2、BEGIN┅END语句块3、IF┅ELSE语句4、CASE语句5、WHILE语句6、BREAK和CONTINUE语句BREAK语句CONTINUE语句 三、程序返回、屏幕显示等语句1、RETURN语句…...

编程日记 2023/11/28 6:44:55

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/23 11:47:48

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/1/15 5:03:53

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/1/23 11:34:02

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/22 16:07:14

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/23 14:19:49

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/15 5:03:00

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22