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

web前端——HTML

news 2025/10/30 8:27:41

目录

一、HTML概述

1.HTML是什么？

2.HTML具体化解释

二、HTML基本语法

1.声明

2. Head头标签

3.body身体标签

4.一个html的基本结构

5.标签

6.标签属性

①属性的格式 

②属性的位置

③添加多个属性

三、基本常用标签

1.超链接

2.图像标签

①图像标签的基本用法

3.特殊符号转义

四、表格

1.表格的基本构成标签

2.表格的基本结构

3.表格属性

五、表单

1.form标签：表单

2.表单——文本

3.表单——其它表单 

4.表单——下拉框

5.表单——多行文本域

6.表单——按钮 

一、HTML概述

1.HTML是什么？

HTML是超文本标记语言 (HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

2.HTML具体化解释

浏览器根据不同的HTML标签，解析成我们看到的网页 

二、HTML基本语法

1.声明

html5的文档声明     <!DOCTYPE html>
！！！如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现

2. Head头标签

！！！Head标签包含了所有的头部标签
● 头部区域的标签标签为:
<title>, <style>, <meta>, <link>, <script>
<title>    标签可定义网页的标题
<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度               的描述和关键词。
<meta> /<meta charset="utf-8" />标签位于文档的头部
<link rel="icon" href="ico地址">标题处添加图标

● 具体代码实现: 

<!-- 头标签 --><head><meta charset="utf-8" /> <!-- 网页字符集 --><meta name="Keywords"  content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎查找的 --><title>我的第一张网页</title> <!-- 网页标题 --><link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 --></head>

3.body身体标签

身体标签，用来写网页内容的

<!-- 身体标签，用来写网页内容的 --><body text="yellow" bgcolor="blue">网页内容</body>

4.一个html的基本结构

<!-- <!DOCTYPE html>html5的文档声明 -->
<!DOCTYPE html>
<html><!-- 头标签 --><head><meta charset="utf-8" /> <!-- 网页字符集 --><meta name="Keywords"  content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎查找的 --><title>我的第一张网页</title> <!-- 网页标题 --><link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 --></head><!-- 身体标签，用来写网页内容的 --><body text="yellow" bgcolor="blue">网页内容</body>
</html>

5.标签

● HTML中的标记指的就是标签
● HTML使用标记标签来描述网页
结构：
<开始标签> 标签体 </结束标签> 闭合标签（双标签）
          
 <标签名>  属性=""  />完成一个特定的设置功能，没有标签体 自闭和标签（单标签）
      <meta charset="utf-8" />
          <br/> 换行标签

6.标签属性

标签可以拥有属性,属性进一步说明了该标签的显示或使用特性。属性写在标签的开始标签中
， 一个标签可以有多个属性
如：<body text="red" bgcolor="green"> 
 属性名="值"
如：<body text=”red”>

①属性的格式 

属性名 = “属性值“

②属性的位置

<标签名 属性名 = “属性值“ >xxx</标签名>

③添加多个属性

<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

三、基本常用标签

● 标题标签 <h1></h1>…..<h6></h6>

● 段落标签 <p></p>

● 换行标签 <br/>
● 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
● 超链接<a></a>
● 图像标签<img/>

1.<a>超链接

HTML使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
target:默认值为_self
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
URL(Uniform Resource Locator)统一资源定位符 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 超链接标签href="链接地址"   URL-- 文件的地址target="打开的位置"  _self(默认) 在自己本窗口打开一个新的网页--><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_blank">百度</a><a href="index.html">首页</a></body>
</html>

 

2.图像标签

①图像标签的基本用法

注！！！ 图片的宽高一般不建议使用 

<html><head><meta charset="utf-8"><title></title></head><body><a id="top"></a><a  href="#p1">图片1</a><a  href="#p2">图片2</a><a  href="#p3">图片3</a><a  href="#p4">图片4</a><a  href="#p5">图片5</a><h2><a id="p1"></a>图片1</h2><img src="img/1.png"/><!-- <a id="p1"></a> 在网页中定义一个锚点--><h2><a id="p2"></a>图片2</h2><img src="img/2.png"/><h2><a id="p3"></a>图片3</h2><img src="img/3.png"/><h2><a id="p4"></a>图片4</h2><img src="img/4.png"/><h2><a id="p5"></a>图片5</h2><img src="img/5.png"/><p align="right"><a href="#top">返回顶部</a></p></body>
</html>

3.特殊符号转义

①< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签；

②<b> 会被解析为b标签；

③空格,再多的空格都会当一个空格处理；

为了可以使用这些预留字符，我们必须在html中使用字符转义
小于号<                      &lt;
版权(C)                       &copy;
大于号>                     &gt;
商标(TM)                    &trade;
空格                          &nbsp;
注册商标(R)              &reg;   
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>&lt;b&gt;标签的功能是加粗文件百&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度&reg;&copy;&trade;</body>
</html>

 

四、表格

1.表格的基本构成标签

table标签：表格标签
tr标签：     表格中的行
th标签:       表格的表头
td标签：    表格单元格

2.表格的基本结构

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
tr    表示一个行
th    表示一个单元格，还是表头，内容会加粗，并且居中 设置宽度
td    表示一个普通单元格

3.表格属性

width  表格的宽
height  表格的高
cellspacing 设置内容到 边框和内边距
cellpadding 设置单元格与单元格之间的外边距
align 设置内容水平对齐方式  left center right
valign
cospan 合并列  从哪列开始合并,在哪列添加colspan="合并的数量" 记得删除多余的单元格
rowspan 合并行  跨行合并单元格 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" width="400" cellspacing="0"><tr height="40"><th>姓名</th><th>java</th><th width="100">C</th><th>python</th></tr><tr><td>zz</td><td>78</td><td>80</td><td>95</td></tr><tr><td>yy</td><td>78</td><td>80</td><td>95</td></tr><tr><td>ll</td><td>78</td><td>80</td><td>95</td></tr><table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" width="400" height="300"><tr><td colspan="4" ></td></tr><tr><td></td><td></td><td></td><td rowspan="3"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>

五、表单

1.form标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器

2.表单——文本

3.表单——其它表单 

• 密码框基本语法
<input type=“password ” value=“ 123456 ” />
• 单选按钮基本语法
<input type="radio" value="男" checked="checked“/>
• 复选框基本语法
<input type=“checkbox” name="cb2“ value="talk“/>
!!!注意：单选框通过name属性来分组，name相同是一组才可实现单选。单选和复选不能输入内                  容，所以必须指定value的值
• 文件选择框语法
<input type=“file” name=“img”/>
accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

4.表单——下拉框

● 基本语法

！！！下拉框的name,id,事件等需要在select中定义，而value需要在option中定义

5.表单——多行文本域

● 多行文本域基本语法
<textarea name= "textarea" cols= "40" rows= "6"> 文本域中的内容 </ textarea >

6.表单——按钮 

● 按钮基本语法

<input type="reset" name="Reset" value=" 重填 ">
type="submit" 提交按钮 触发表单的提交
 type="reset"  重置按钮  让表单回到默认状态
 type="button" 普通按钮  是用来触发事件 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="server.html" method="get">账号:<input type="text" name="account" value="" placeholder="请输入用户名" /> <br/>	 密码:<input type="password" name="password"/> <br/>	性别:<input type="radio" name="gender" value="男" checked/> 男<input type="radio" name="gender" value="女"/> 女<br/>是否满意:<input type="radio" name="a" value="同意" checked/>同意<input type="radio" name="a" value="不同意"/>不同意<br/>课程: <input  type="checkbox" name="course" value="java" checked/>java	<input  type="checkbox" name="course" value="c"/>c		<input  type="checkbox" name="course" value="sql"/>sql		<input  type="checkbox" name="course" value="html"/>html	<br/>附件: <input  type="file" name="file"/>		<br/>省份: <select name="province"><option>请选择</option><option value="101">北京</option><option value="102" selected>上海</option><option value="103">陕西</option></select> <br/>1111地址:<textarea rows="5" cols="30" name="address">1111</textarea>		<br/><input  type="submit" value="保存"/><br/><input type="reset"/><input  type="button" value="登录" onclick="alert('你好');"/></form></body>
</html>

相关文章：

web前端——HTML

目录 一、HTML概述 1.HTML是什么&#xff1f; 2.HTML具体化解释 二、HTML基本语法 1.声明 2. Head头标签 3.body身体标签 4.一个html的基本结构 5.标签 6.标签属性 ①属性的格式 ②属性的位置 ③添加多个属性 三、基本常用标签 1.超链接 2.图像标签 ①图像标…...

编程日记 2024/6/28 1:36:39

C++的模板(九)：模板的实例化问题

前文子系统中的例子&#xff0c; SubSystem内部用了STL库的map模板: template <class Event, class Response> class SubSystem{ public:map<Event*, Response*> table; public:void bind(Event *e, Response *r);void unbind(Event *e); public:int OnMessage(E…...

编程日记 2024/6/28 1:33:36

Clickhouse Projection

背景 Clickhouse一个视图本质还是表&#xff0c;只支持一种order By&#xff0c;不然要维护太多的视图。 物化视图能力有限。 在设计聚合功能时&#xff0c;考虑使用AggregatingMergeTree表引擎&#xff0c;现在有了projections&#xff0c;打算尝试使用一下 操作 ADD PROJE…...

编程日记 2024/6/28 1:30:33

放烟花短视频素材去哪里找？去哪里下载？烟花素材网分享

在当代社会&#xff0c;短视频凭借其独有的魅力成为大众传递情感、记录生活、分享快乐的新兴方式。特别是在庆祝节日和特殊时刻时&#xff0c;烟花的绚丽效果常常被用来吸引观众的目光&#xff0c;成为视频作品中的亮点。然而&#xff0c;对于短视频制作者来说&#xff0c;寻找…...

编程日记 2024/6/28 1:29:32

爬虫笔记14——爬取网页数据写入MongoDB数据库，以爱奇艺为例

下载MongoDB数据库 首先&#xff0c;需要下载MongoDB数据库&#xff0c;下载的话比较简单&#xff0c;直接去官网找到想要的版本下载即可&#xff0c;具体安装过程可以看这里。 pycharm下载pymongo库 pip install pymongo然后在在python程序中我们可以这样连接MongoDB数据库…...

编程日记 2024/6/28 1:27:30

Jenkins教程-10-发送飞书测试报告通知

上一小节我们学习了发送企业微信测试报告通知的方法&#xff0c;本小节我们讲解一下发送飞书测试报告通知的方法。 1、自动化用例执行完后&#xff0c;使用pytest_terminal_summary钩子函数收集测试结果&#xff0c;存入本地status.txt文件中&#xff0c;供Jenkins调用 conft…...

编程日记 2024/6/28 1:26:29

Swift开发——简单App设计

App的界面设计需要具有大量的图像并花费大量的时间，这样的应用不方便学习和交流，这里重点介绍SwiftUI界面元素的用法，通过简单App设计过程的讲解，展示图形用户界面应用程序的设计方法。 01、简单App设计 按照9.1节工程MyCh0901的创建方法，创建一个新的工程MyCh0902，此时工…...

编程日记 2024/6/28 1:22:25

Python操作mysql

一、python连接mysql 1.python连接mysql代码示例 from pymysql import Connection# 获取到mysql数据艰苦的连接对象 conn Connection(hostlocalhost,port3306,userroot,passwordroot ) # 打印mysql数据库软件信息 print(conn.get_server_info()) # 关闭到数据库的连接 conn.…...

编程日记 2024/6/28 1:20:22

监控易产品升级动态：V7.6.6.15版本全面升级

随着信息技术的不断发展&#xff0c;企业对系统监控和数据管理的需求日益增加。为了满足广大用户的实际需求&#xff0c;监控易团队经过不懈努力&#xff0c;成功推出了V7.6.6.15版本&#xff0c;对产品进行了全面升级和优化。本次升级不仅增强了产品的稳定性和可靠性&#xff…...

编程日记 2024/6/28 1:19:21

Vue3 + Element-plus + TS —— 动态表格自由编辑

前期回顾 《 穿越时空的代码、在回首&#xff1a;Evil.js两年后的全新解读 》-CSDN博客 Vue3 TS Element-Plus 封装Tree组件 《亲测可用》_ https://blog.csdn.net/m0_57904695/article/details/131664157?spm1001.2014.3001.5501 态表格 自由编辑 目录 ♻️ 效果图…...

编程日记 2024/6/28 1:17:17

虚拟机配置桥接模式

背景 因为要打一些awd比赛,一些扫描工具什么的,要用到kali,就想着换成一个桥接模式 但是我看网上的一些文章任然没弄好,遇到了一些问题 前置小问题 每次点开虚拟网络编辑器的时候都没有vmnet0,但是点击更改的时候却有vmnet0 第一步: 点击更改设置 第二步: 把wmnet0删掉 …...

编程日记 2024/6/28 1:14:14

星戈瑞DSPE-SS-PEG-CY7近红外花菁染料

DSPE-SS-PEG-CY7是一种具有复杂而精细结构的复合纳米材料&#xff0c;其在生物医学领域的应用增多。该材料结合了磷脂&#xff08;DSPE&#xff09;、聚乙二醇&#xff08;PEG&#xff09;、二硫键&#xff08;SS&#xff09;以及荧光染料&#xff08;CY7&#xff09;的特点&am…...

编程日记 2024/6/28 1:13:13

LeetCode：503. 下一个更大元素 II（Java 单调栈）

目录 503. 下一个更大元素 II 题目描述&#xff1a; 实现代码与解析&#xff1a; 单调栈 原理思路&#xff1a; 503. 下一个更大元素 II 题目描述&#xff1a; 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&…...

编程日记 2024/6/28 1:12:12

代码重构：解读重构概念及重构实战

目录 一.重构是什么(what) 1.重构的本质 2.重构≠性能优化 二.重构的目的(why) 1.去写好的代码 2.去写更灵活的代码 三.重构的时机(when and where) 1.何时重构 2.何时不重构 四.重构的方法(how) 1.重构关键核心 2.重构方法 3.重构工具 小结 一.重构是什么(what)…...

编程日记 2024/6/28 1:11:10

java.util.Optional类介绍

java.util.Optional 是 Java 8 引入的一个容器类，用于表示可能包含或不包含非空值的对象。它的设计初衷是为了减少程序中的空指针异常（NullPointerException），并使代码更加简洁和易读。 Optional 类的介绍 1. 特点 避免显式的 null 检查：使用 Optional 可以避免显式的 n…...

编程日记 2024/6/28 1:10:09

PhotoShop自动生成号码牌文件

1、说明 设计卡牌的时候&#xff0c;遇到自动生成编号&#xff0c;从01500到-02500&#xff0c;一个一个的手写&#xff0c;在存储保存成psd格式的文件&#xff0c;会很耗时。 下面将介绍如何使用ps自动生成psd格式的文件 2、使用excle生成数字 从01500到-02500 第一步&…...

编程日记 2024/6/28 1:08:07

02逻辑代数与硬件描述语言基础

2.1 逻辑代数&#xff08;简单逻辑的运算&#xff09; 2.2 逻辑函数的卡诺图&#xff08;从图论的角度&#xff09;化简法 2.3 硬件描述语言Verilog HDL基础&#xff08;研究生阶段才用得到&#xff09; 要求&#xff1a; 1、熟悉逻辑代数常用基本定律、恒等式和规则。 2、掌握…...

编程日记 2024/6/28 1:06:05

OpenGL3.3_C++_Windows(21)

抗锯齿 遇到模型边缘有锯齿&#xff1a;光栅器将顶点数据转化为片段的方式有关 抗锯齿&#xff1a;产生更平滑的边缘SSAA超采样抗锯齿&#xff1a;使用比正常分辨率更高的分辨率&#xff0c;来渲染场景&#xff0c;它也会带来很大的性能开销。 光栅器&#xff1a; 位于最终处…...

编程日记 2024/6/28 1:02:00

clickhouse学习

ClickHouse学习 安装部署 1.下载rpm文件 下载地址&#xff1a;https://packages.clickhouse.com/rpm/stable/ clickhouse-client-23.2.1.2537.x86_64.rpm clickhouse-common-static-23.2.1.2537.x86_64.rpm clickhouse-common-static-dbg-23.2.1.2537.x86_64.rpm clickhous…...

编程日记 2024/6/28 1:00:59

MySQL高级-索引-使用规则-前缀索引

文章目录 1、前缀索引2、前缀长度3、查询表数据4、查询表的记录总数5、计算并返回具有电子邮件地址&#xff08;email&#xff09;的用户的数量6、从tb_user表中计算并返回具有不同电子邮件地址的用户的数量7、计算唯一电子邮件地址&#xff08;email&#xff09;的比例相对于表…...

编程日记 2024/6/28 0:59:57

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/9/11 12:55:08

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/10/23 18:29:35

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/20 17:52:30

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/10/23 23:21:34

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/10/27 21:47:56

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/10/27 11:51:48

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/10/28 14:25:12