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

Java Web 01_HTML4HTML5基础标签语法

news 2025/10/20 9:48:13

HMTL基础

1.什么是HTML

Hyper Text Markup Language (超文本标记语言)标记又俗称标签(tag)，一般格式：

<tagName></tagName> 如
<h1></h1>

标签里还可以有属性(Attribute)：

<tagName Atrribute = “value” /> 如
<meta charset="utf-8" />

还有一些特殊非成对出现标签：

<hr />  <br />

HTML是由浏览器解析执行文档的基本结构

  • <! DOCTYPE html> —引用的HTML5规范
<html><head>            --头部：包含标签title、meta<meta charset=”utf-8” /><title></title>
</head><body>         ---主体</body>
</html>
  • meta
<meta charset=”utf-8” />

2.常用的编码格式

gbk : 中文简体
gb2312: 中文简体
utf-8: 国际默认编码字符
ios-8859-1: 西欧编码
big5: 大五码，繁体中文。应用：台湾地区

keywords 、 description 提供给搜索引擎

3.文本排版的常用标签

h1~h6 : 标题标签
p: 段落标签
hr: 水平线
br: 换行
strong: 字体加粗标签
em: 斜体
span: 无任何特殊样式的标签
pre: 预留格式标签
注释

<!-- 注释的内容 -->

4.特殊符号

  空格
> 大于符号
< 小于符号
" 双引号
© 版权符号

5.图像标签

<img src=”图片地址”alt=”图片加载失败后的提示”title=”鼠标悬停至图片上的提示”width=”宽度”height=”高度”
/>
  • 加载图像地址的两种方式：
1、	相对路径：<img src=”img/one.png或者../img/one.png”/>
2、	绝对路径：<img src=”https://www.baidu.com/one.png”>

7.超级链接

<a href=”链接地址” target=”目标窗口”>图像|文本 </a>

目标窗口：
_self: 当前窗口打开，默认
_blank: 新的窗口中打开
如果页面在使用frameset / frame / iframe的场景下才使用如下：
_parent: 在父级窗口中打开
_top: 在顶级窗口中打开
_自定义名称：在指定的特定窗口中打开
三种用法：

页面链接
<a href=”example03.html”>图片|文本</a>
锚链接：
<a href=”#help”></a>
这里的help可以是锚标记的name也可以id
功能链接：唤醒本地安装的某个外部程序
<a href=”emailto:3424324@qq.com”>图片|文本</a>

8.div标签

div是一个容器，常用与页面的布局

标签的分类

1.块级元素/块级标签：

如：div | p | hr | h1~h6
特性：独占一行，宽度没有设置的情况下由父容器100%决定

2.行级元素/行级标签：

如：span | strong | em | 
特性：多个行级元素可以同属一行，其宽度由内容决定，行级元素大部分设置宽高无效，除img。

3.无序列表

适用于呈现一些逻辑上有相关性的数据

<ul><li></li>
<ul>
ul里设置type属性定义标签
disc: 实心圆点
circle: 空心的圆圈
square:  实心的正方形

4.有序列表

适用于呈现一些逻辑上有相关性且有顺序的数据

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

  • 设置type属性的类型
    1: 阿拉伯数字
    a: 小写字母
    A: 大写字母
    i: 小写罗马数字
    I: 大写的罗马数字

  • 定义列表
    适用于有主题描述的信息

<dl><dt>主题</dt><dd>描述</dd>
</dl>

注意：
有序列表与无序列表可以嵌套使用，ul的下级是li,li上级是ul。

9.表格标签–重点

<table><! --- 表头 -->
<thead><tr><th></th>
</tr>
</thead><! --- 主体 -->
<tbody><tr><td></td></tr>
………
</tbody><! --- 表脚 -->
<tfoot>
<tr><td></td>
</tr>
</tfoot>
</table>

table: 表格
thead: 表头
tbody: 主体
tfoot: 表脚
tr: 行
td: 单元格
th： 单元格（一般是用于表头信息，文本信息默认加粗居中）

表格属性

width: 宽度
height: 高度
border: 边框
borderColor: 边框颜色
cellpadding: 表格填充（内）
cellspacing: 表格的间距（外）
align: 水平方向

单元格属性

align: 水平方向 left center right
valign: 垂直方向 top middle bottom
合并单元格（colspan: 跨列| rowspan: 跨行）

注意：在合并后，相应单元格的行和列的数量要发生改变。

相关文章：

Java Web 01_HTML4HTML5基础标签语法

HMTL基础 1.什么是HTML Hyper Text Markup Language (超文本标记语言)标记又俗称标签(tag)&#xff0c;一般格式&#xff1a; <tagName></tagName> 如 <h1></h1>标签里还可以有属性(Attribute)&#xff1a; <tagName Atrribute “value” />…...

编程日记 2023/12/19 22:02:00

Androidstudio加载编译时kotlin-compiler-embeddable一直下载中

打开网址 https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-compiler-embeddable/1.6.10/ 1.下载jar包 2.配置下载jar文件到.gradle文件中 文件路径:/Users/“用户名”/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-compiler-embedd…...

编程日记 2023/12/19 21:59:58

案例073:基于微信小程序的智慧旅游平台开发

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…...

编程日记 2023/12/19 21:58:57

Flink系列之：Flink 1.8.0 中的状态 TTL：如何在 Apache Flink 中自动清理应用程序状态

Flink系列之&#xff1a;Flink 1.8.0 中的状态 TTL&#xff1a;如何在 Apache Flink 中自动清理应用程序状态 一、状态的瞬态性质二、用于持续清理应用程序状态的状态 TTL三、倒垃圾四、保持完整状态快照干净五、堆状态后端的增量清理六、RocksDB 后台压缩以过滤掉过期状态七、…...

编程日记 2023/12/19 21:57:56

2023 亚马逊云科技 re:Invent 大会探秘：Aurora 无限数据库的突破性应用

文章目录 一、前言二、Amazon Aurora 无限数据库2.1 亚马逊云科技数据库产品发展历程2.2 什么是 Amazon Aurora Limitless Database&#xff08;无限数据库&#xff09;2.3 Amazon Aurora Limitless Database 设计架构2.4 Amazon Aurora Limitless Database 分片功能2.5 使用 A…...

编程日记 2023/12/19 21:56:55

IDEA添加Apifox插件后，返回参数不详细解决办法

Apifox官方文档地址(文档中返回的是特殊情况&#xff0c;跟我现在项目的返回不一样&#xff0c;因此需要更改配置) 点击跳转到官方API地址 实现步骤分为两步&#xff1a;第一步&#xff1a;添加配置&#xff0c;第二步使用注解。 1.添加配置 打开Idea设置&#xff0c;添加配置…...

编程日记 2023/12/19 21:55:54

js多图合成一张图

具体思路 先设置画布的宽高&#xff0c;再将每个图片整理成一个对象的数组通过某个方法传出合成后的base64 &#xff08;1&#xff09;、创建一个画布的类&#xff0c;他的属性是canvas虚拟dom和ctx &#xff08;2&#xff09;、构造器初始化convas对象、ctx、convas的宽高 …...

编程日记 2023/12/19 21:53:53

利用原始套接字解决mac地址错误问题【南瑞SysKeeper-2000】

一&#xff1a;案例描述 一键可视顺控图像智能项目在网络部署过程中&#xff0c;对网络限制隔离安全性要求很高&#xff0c;用到正向隔离装置&#xff08;南瑞SysKeeper-2000型号&#xff09;。 图一 正向装置示意图 现场发现问题&#xff1a;直连网线情况下&#xff0c;我方…...

编程日记 2023/12/19 21:51:51

JVM- 为什么G1垃圾回收器需要有大对象区

G1&#xff08;Garbage-First&#xff09;垃圾回收器在Java虚拟机&#xff08;JVM&#xff09;中引入了大对象区&#xff08;也称为Humongous Region或H-Region&#xff09;的概念&#xff0c;主要是为了高效地处理大型对象。在垃圾回收的上下文中&#xff0c;大对象指的是那些…...

编程日记 2023/12/19 21:49:48

操作系统的界面

(1) 请说明系统生成和系统引导的过程。 解&#xff1a; 系统的生成过程&#xff1a;当裸机启动后&#xff0c;会运行一个特殊的程序来自动进行系统的生成&#xff08;安装&#xff09;&#xff0c;生成系统之前需要先对硬件平台状况进行检查&#xff0c;或者从指定文件处读取…...

编程日记 2023/12/19 21:48:47

User 怎么在anaconda的虚拟环境中安装下载好的jieba.tar.gz包呢

...

编程日记 2023/12/19 21:47:47

1.【分布式】分布式事务详解

分布式事务 1.分布式事务是什么&#xff1f;数据库事务 2.分布式事务产生的原因&#xff1f;存储层拆分服务层拆分 3.分布式事务解决方案4.分布式事务有哪些开源组件SeateTCC 分布式服务组件基于消息补偿的最终一致性 5.两阶段提交&#xff0c;三阶段协议详解二阶段提交协议三阶…...

编程日记 2023/12/19 21:46:45

selenium-wire简介

一.简介 以下来自chatGPT回答&#xff1a; selenium-wire是一个基于selenium的Python库&#xff0c;它扩展了selenium的功能&#xff0c;使得我们可以在自动化测试中直接访问和修改浏览器的网络请求和响应。selenium-wire可以拦截和修改HTTP请求和响应&#xff0c;从而可以在…...

编程日记 2023/12/19 21:45:43

华为组播配置案例

igmp-snooping主要用于生成二层组播表项&#xff0c;防止交换机全部接口都发组播报文 PC端配置&#xff1a; 组播源配置&#xff1a; R1 interface GigabitEthernet0/0/0 ip address 10.0.0.1 255.255.255.0 pim dm interface GigabitEthernet0/0/1 ip address 192.168.0…...

编程日记 2023/12/19 21:42:41

lua语法

lua语法 1.lua数据类型 lua 脚本输出乱码&#xff0c;将lua脚本改为UTF-8编码&#xff0c;并且需要DOS下修改代码页&#xff1a;CHCP 65001 即可。 基本语法 注释 print("script lua win")-- 单行注释--[[多行注释]]--标识符 类似于&#xff1a;java当中 变量、…...

编程日记 2023/12/19 21:41:40

5A-Downloader,m3u8文件转mp4文件,音视频分离ts合并、转mp4

获取方式: 1.https://www.pgyer.com/DpxhpE 2.https://github.com/JoeLeeto/5A-Downloader 3.https://play.google.com/store/apps/details?idcom.leet.downloader...

编程日记 2023/12/19 21:40:39

标准IO与文件IO

标准IO通过缓冲机制减少系统调用&#xff0c;实现更高的效率 全缓冲&#xff1a;当流的缓冲区无数据或无空间时才执行实际IO操作 行缓冲&#xff1a;当在输入和输出中遇到换行符&#xff08;\n&#xff09;时&#xff0c;进行IO操作 当流和一个终端关联时&#xff0c;典型的行缓…...

编程日记 2023/12/19 21:35:35

流行的 React 相关库和框架

React 本身就是一个非常流行的 JavaScript 库&#xff0c;用于构建用户界面&#xff0c;特别是单页面应用。不过&#xff0c;有许多其他的库和框架与 React 结合使用&#xff0c;以提供额外的功能和优化开发体验。以下是一些最流行的 React 相关库和框架&#xff1a; Next.js&a…...

编程日记 2023/12/19 21:34:34

游戏引擎？

游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具&#xff0c;其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。大部分都支持多种操作平台&#xff0c;如Linux、…...

编程日记 2023/12/19 21:33:33

C语言--字符函数与字符串函数

大家好&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流 本文由&#xff1a;残念ing 原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各位…...

编程日记 2023/12/19 21:30:31

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/10/19 14:18:46

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/10/19 12:22:56

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/10/19 16:20:28

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2025/10/16 12:29:08

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

编程新知 2025/10/18 15:05:16

深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

编程新知 2025/9/14 17:34:44

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2025/10/19 22:55:32

【threejs】每天一个小案例讲解：创建基本的3D场景

代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone&#xff0c;无需安装依赖&#xff0c;直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景&#xff08;Scene&#xff09; 使用 THREE.Scene(…...

编程新知 2025/10/16 11:45:49