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

Java Web 01_HTML4HTML5基础标签语法

news 文章来源：https://blog.csdn.net/weixin_64646820/article/details/134957733 2025/4/30 21:17:23

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

整理了一些热门、含免费次数的api，分享给大家

IP归属地-IPv4区县级&#xff1a;根据IP地址查询归属地信息&#xff0c;包含43亿全量IPv4&#xff0c;支持到中国地区&#xff08;不含港台地区&#xff09;区县级别&#xff0c;含运营商数据。IP应用场景- IPv4&#xff1a;IPv4应用场景是获取IP场景属性的在线调用接口&#x…...

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

Wireshark在网络性能调优中的应用

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…...

编程日记 2023/12/19 21:28:29

关于设计师的自我评价（合集）

设计师的自我评价篇一 本人接受过正规的美术教育&#xff0c;具有较好的美术功底及艺术素养&#xff0c;能够根据公司的需要进行设计制作&#xff0c;熟练掌握多种电脑制作软件&#xff0c;能够高效率地完成工作。本人性格开朗、思维活跃、极富创造力&#xff0c;易于沟通&…...

编程日记 2023/12/19 21:27:28

Hudi Clustering

核心概念 Hudi Clustering对于在数据写入和读取提供一套相对完善的解决方案。它的核心思想就是&#xff1a; 在数据写入时&#xff0c;运行并发写入多个小文件&#xff0c;从而提升写入的性能&#xff1b;同时通过一个异步&#xff08;也可以配置同步&#xff0c;但不推荐&…...

编程日记 2023/12/19 21:25:26

通过与 Team Finance 整合，Casper Network 让 Token 的创建、部署更加高效

随着 Team Finance 整合到 Casper 系统中&#xff0c;Token 创建的过程变得更加迅速而简便。Casper Network 的方案正在使代币的创建变得易于访问与调整&#xff0c;这将让任何有创意和业务理念的人能够以高效、可信的方式&#xff0c;更快速、安全地在 Casper 上推出他们的项目…...

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

Linux软件管理rpm和yum

rpm方式管理 rpm软件包名称: 软件名称 版本号(主版本、次版本、修订号) 操作系统 -----90%的规律 #有依赖关系,不能自动解决依赖关系。 举例&#xff1a;openssh-6.6.1p1-31.el7.x86_64.rpm 数字前面的是名称 数字是版本号&#xff1a;第一位主版本号&#xff0c;第二位次版本…...

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

uart和usart的区别

UART 通用异步收发器&#xff0c;一般来说&#xff0c;在单片机上&#xff0c;名为UART的接口只能用于异步串行通信。 USART 名为USART的接口既可用于同步串行通信&#xff0c;也可用于异步串行通信。...

编程日记 2023/12/19 21:22:23

原生微信小程序-使用 阿里字体图标 详解

步骤一 1、打开阿里巴巴矢量图标库 网址&#xff1a;iconfont-阿里巴巴矢量图标库 2、搜索字体图标&#xff0c;鼠标悬浮点击添加入库 3、按如下步骤添加到自己的项目 步骤二 进入微信开发者工具 1、创建 fonts文件夹 > iconfont.wxss 文件&#xff0c;将刚才的代码复制…...

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

机器学习 | 机器学习基础知识

一、机器学习是什么 计算机从数据中学习规律并改善自身进行预测的过程。 二、数据集 1、最常用的公开数据集 2、结构化数据与非结构化数据 三、任务地图 1、分类任务 Classification 已知样本特征判断样本类别二分类、多分类、多标签分类 二分类&#xff1a;垃圾邮件分类、图像…...

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

OpenHarmony鸿蒙原生应用开发，ArkTS、ArkUI学习踩坑学习笔记，持续更新中。

一、AMD处理器win10系统下&#xff0c;DevEco Studio模拟器启动失败解决办法。 结论&#xff1a;在BIOS里面将Hyper-V打开&#xff0c;DevEco Studio模拟器可以成功启动。 二、ArkTS自定义组件导出、引用实现。 如果在另外的文件中引用组件&#xff0c;需要使用export关键字导…...

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