Javaweb学习之HTML

原创已于 2024-01-07 21:33:07 修改 · 998 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #html #前端

于 2024-01-07 21:32:12 首次发布

本文介绍了JavaWeb开发中HTML的基础知识，包括HTML的结构、如何在IDEA中创建HTML文件，以及各种HTML标签如头部、标题、字体、颜色、链接、列表、表格、表单、input元素、div、p和span标签的使用和属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了从安全的角度学习Javaweb等知识，所以内容不是特别全面，只是记录一下自己学习的笔记内容。

一、HTML介绍

HTML即超文本标签语言
HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等
HTML的结构包括头部（Head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容

二、使用idea编写第一个HTML文件

打开idea，选择新建项目

选择JavaScript选项，填写好项目要存储的位置，然后创建项目

创建html页面

相应结构解释说明

<!DOCTYPE html>：<!文档类型说明 注释>

<html lang="en">：使用的语言 en表示英国美国
<head>：Head表示HTML的头
    <meta charset="UTF-8">：文件的字符集
    <title>Title</title>：文件标题
</head>
<body>：主体部分，里面包的就是主体内容
        hello, HTML学习
</body>
</html>

三、HTML的标签、元素

说明
- HTML的标签用两个"<>"括起来
- HTML一般是双标签，例如，第一个是起始标签，后一个为结束标签
- 两个标签之间的文本就是HTML元素的内容
- 某些标签称为“单标签”，这类标签只需要单独使用就能表达出意思，例如：、
- HTML元素指的是从开始标签到结束标签的所有代码
一些使用上的细节
- 标签不能嵌套使用
- 标签必须正确关闭
- 注释不能嵌套
- HTML语法不严谨，有时候标签不闭合，属性值不带""也不报错

font标签

font标签是修饰文字的，可以修改文本的字体、颜色、大小，属性的顺序没有要求
- color 修改颜色
- face 修改字体
- size 修改大小
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<font size="50px" face="微软雅黑" color="blue">123123123</font>
</body>
</html>

字符实体

在网页上需要显示一些特殊的符号，称为字符实体
常用的特殊字符
- < : <
- : >
- 空格 :

标题标签

标题使用
-
标签进行定义。
为最大的标题，
定义最小的标题
align：属性都是对齐属性
- left：左对齐（默认）
- center：居中
- right：右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5 align="right">标签5</h5>
<h6>标签6</h6>
</body>
</html>

超链接标签

超链接是指从一个网页指向另一个路标的链接关系，这个目标可以使另一个网页，也可以是相同网页位置上的不同位置，还可以是一个图片、电子邮件地址、文件。
a 标签是超链接
- href 属性设置连接的地址
- target 属性设置哪个目标进行跳转
  - _self：表示当前页面(默认值)
  - _blank：表示打开新页面来跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_blank">百度 2</a><br/>
<a href="mailto:tom@baidu.com">联系管理员</a>

</body>
</html>

无序列表 ul/li

列表内容
- - ：设定符号款式，其值有三种，默认为type="disc" type="disc"时的列项符号为实心圆点 type="circle"时的列项符号为空心圆 type="square"时的列项符号为空心正方形 ``` Title

``` ![image.png](https://img-blog.csdnimg.cn/img_convert/99f1e2fdb4de058c50064d1aebe1e2fb.png) ### 有序列表

1. 称为顺序列表标签。
2. 则用以标示列表项目。又称编号列表

列表内容

type 属性:指定列表项前排序方式
type 设定数目款式，其值有五种，默认为 start=“1”。
i 可以取以下值中的任意一个:
- 1 阿拉伯数字 1, 2, 3, …
- a 小写字母 a, b, c, …
- A 大写字母 A, B, C, …
- i 小写罗马数字 i, ii, iii, …
- I 大写罗马数字 I, II, III, … 。

图像标签

img标签可以在HTML页面上显示图片
src：属性可以设置图片的路径
width：属性设置图片的宽度
height：属性设置图片的高度
border：属性设置图片边框大小
alt：属性设置当指定路径找不到图片时，用来代替显示的文本内容
相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名

表格标签

<table border="边框大小" cellspacing="空隙大小" cellpadding="填充大小"></table>

table: 标签是表格标签 border: 设置表格标签
width: 设置表格宽度 height: 设置表格高度
align: 设置表格相对于页面的对齐方式
cellspacing: 设置单元格间距
tr :是行标签 th :是表头标签 td :是单元格标签
align: 设置单元格文本对齐方式 b :是加粗标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="500" border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>
</body>
</html>

跨行跨列表格标签
- 合并列 : colspan=“列数”
- 合并行 : rowspan=“行数”
- cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙
- bordercolor: 指定表格边框的演示
- border: 表格边框
- width: 表格的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="500">
    <tr>
        <td align="center" colspan="3">第1行第1列</td>
    </tr>
    <tr>
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
    <tr>
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
    </tr>
    <tr>
        <td>第5行第2列</td>
        <td>第5行第3列</td>
    </tr>

</table>
</body>
</html>

表单标签

form 表示表单
action: 属性设置提交的服务器地址/资源
method: 提交方式 ,常用 get (默认值)和 post
input type=text 输入框
input type=password 密码框
input type=submit 提交按钮
input type=reset 重置按钮

<body>
<h1>登录系统</h1>
<form action="ok.html" method="get">
    用户名：<input type="text" name="username"><br/>
    密  码：<input type="password" name="password"><br/>
            <input type="submit" value="登录"><input type="reset" value="重新填写">
</form>
</body>

input标签

input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中 input
type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中
textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

div标签

div标签可以吧文档分割成独立的、不同的部分
div是一个块级元素。它的内容自动的开始一个新行

<body>
hello,world
<div>
    <h3 style="color: blue">hello hello</h3>
</div>
</body>

p标签

标签定义段落
p元素会自动在其前后创建一些空白

<body>
hello
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>

span标签

span标签是内联标签，不像块级元素（如：div标签、p标签等）有换行的效果
如果不对span应用样式，span标签没有任何的显示效果
语法：内容

<body>
这里有<span style="color: blueviolet">1000</span>元人民币
</body>