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

Java Web 01_HTML4HTML5基础标签语法

news 2026/2/8 16:52:52

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

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/20 21:59:36

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

编程新知 2026/2/6 22:23:38