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

Java Web 01_HTML4HTML5基础标签语法

news 2026/2/7 21:56:24

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/1 10:33:51

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/9/21 0:49:02

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20