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

javaEE初阶 — HTML 中的常见标签

news 2025/7/18 20:32:26

文章目录

注释标签
标题标签：h1 h6
段落标签：p
换行标签：br
格式化标签
图片标签：img
- 1. img 的 alt 属性
- 2. img 的 title 属性
- 3. width 与 heigth 属性用来描述图的尺寸
超链接标签：a
表格标签
列表标签
表单标签
- 1. from 标签
- 2. input 标签
- 3. select 标签
- 4. textarea 标签
- 5. 无语义标签：div span

注释标签

html 的注释和一般语言的注释差别很大。

如果要使用注释，将想要注释的内容使用 < !-- --> 选中即可，注释的内容就不会出现在网页上了。

如果想要查看当前的注释代码，可以在显示的网页上右击选择 查看网页源代码

就可以发现在源代码中注释过的代码了。

可以使用 Ctrl + / 来快速注释代码，按一下就是注释，再按一下就是取消注释。

标题标签：h1 h6

标题标签一共有 h1 ~ h6 6 个级别的标签，从 h1 到 h6 标题逐渐变小变细，所以最大的标题标签是 h1，最小的就是 h6。

可以清楚地看到标签的大小是逐渐变小变细的。

这里需要注意的是每个标题都是独占一行的，不会因为代码的编写而改变。

尽管现在的代码格式变了，但是每一个标题还是独占一行。

段落标签：p

段落标签使用的 < p>< /p> 标签。

每个段落之间不光是有一个换行，同时还有一个段落间距。

也可以使用 lorem 来自动生成一个文档。

换行标签：br

换行标签是 br。

可以发现有此标签处就换行了，而且是有几个 < br> 标签就换几个行。

格式化标签

格式化标签有 变粗、倾斜、删除线、下划线 这几种。

<html>
<head></head><body><strong>变粗</strong><b>变粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u></body>
</html>

这些标签都不是独占一行的。

图片标签：img

网页上是可以显示图片的，这里用到的是 img。img 有一个核心的属性— src 这是必须填的。

想在网页上显示一个图片，可以采取 绝对路径 或者 相对路径。

绝对路径的方式：

可以发现 d 盘中有一个小姐姐图片。

<html>
<head></head><body><img src="d:/xiaojiejie.jpg"></body>
</html>

直接将图片的绝对路径写在 img 标签里面即可，src 就是它的属性。

可以看到网页中正确的显示出来了。

相对路径的方式：

使用相对路径的时候一定要明确 工作目录是哪个！！！（有个基准）
html 的工作目录就是该 html 文件所在的目录。

首先将这个图片保存到与这个 html 文件于同一个目录。

这个时候的路径就是 ./xiaojiejie.jpg

<html>
<head></head><body><img src="./xiaojiejie.jpg"></body>
</html>

也可以将上述的 ./ 去掉，变成以下：

<html>
<head></head><body><img src="xiaojiejie.jpg"></body>
</html>

将这个图片放到一个新的文件 image 中，此时的路径应该如下书写：

<html>
<head></head><body><img src="image/xiaojiejie.jpg"></body>
</html>

此时的网页依然可以显示出这个小姐姐的图片。

也可以将这个图片的地址填写到浏览器中就可以直接打开图片了。

在网页上右击这个图片就可以获取这个图片的地址。还可以将这个图片地址放到 img 里，也可以显示出图片。

1. img 的 alt 属性

alt 属性：在图片挂了的时候，就会显示出 alt 对应的文本。

<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐"></body>
</html>

当图片挂了之后就会出现上述 alt 中的文本。

2. img 的 title 属性

有了这个属性，鼠标悬停在这个上面的时候就会给出一个提示。

<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐"></body>
</html>

3. width 与 heigth 属性用来描述图的尺寸

宽度和高度可以是同时设置，也可以是只设置一个。如果只设置一个，另一个就会等比例的进行缩放或者放大。

<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐" width="100px"></body>
</html>

可以看到图片等比例的缩放了。

<html>
<head></head><body><img src="image/xiaojiejie.jpg" alt="这一个小姐姐" title="小姐姐" width="100px" height="100px"></body>
</html>

宽度和高度如果是同时设置的，图片就可能会变形，以上的图片就有些许的变形。

超链接标签：a

“链接” 是快捷方式的意思，而 “超” 链接则是指可以跳转到当前网页之外的页面。

这个标签是利用 href 属性来实现快捷跳转的。

<html>
<head></head><body><a href="https://www.baidu.com">百度</a><a href="https://www.sogou.com">搜狗</a></body>
</html>

点击百度和搜狗就会跳转到对应的网页了，但是新的网页会把旧的网页给替换掉。

可以看到点击 “搜狗” 后就把之前的页面给替换了。

超链接标签还有一个属性：target，
这个属性一般都是写作 target=“_blank”，此时就可以打开一个新的标签页而不会替换掉之前的标签页。

<html>
<head></head><body><a href="https://www.baidu.com" target="_blank">百度</a><a href="https://www.sogou.com" target="_blank">搜狗</a></body>
</html>

可以看到点击 “百度” 后，并没有将原来的页面替换掉。

表格标签

table：表示整个表格。

tr：表示一行。

td 表示一个单元格。

th 表示表头的中一个单元格

<html>
<head></head><body>
<table><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>

虽然对应的信息已经显示出来了，但是它还没有单元格，此时这还不是一个表格。而且信息的间隙还比较密集。

下面首先将信息的间隙扩大，给表格设置宽度和高度。

<html>
<head></head><body>
<table width="500px" height="300"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>

可以看到间隙已经扩大了，但是信息还没有对齐而且信息未对齐。

此时要解决的是表格该没有线条的问题，使用 border 这个属性即可解决，将这个属性设置为1。

<html>
<head></head><body>
<table width="500px" height="300" border="1"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>

仔细看的话这里的表格边线是有两条的，这里给它设置为一条边线。
这里用到的属性是 cellspacing，将这个属性的值设为0即可。

<html>
<head></head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>

接下来要解决的就是对齐的问题。

如果要让信息对齐，就需要使用 CSS

<html>
<head>
<style>td {text-align: center;}
</style>
</head><body>
<table width="500px" height="300" border="1" cellspacing="0"><tr><th>姓名</th><th>电话</th></tr><tr><td>张三</td><td>111</td></tr><tr><td>李四</td><td>222</td></tr><tr><td>王五</td><td>333</td></tr></table></body>
</html>

这里的 head 标签里的代码意思就是让页面中所有的 td 标签中的文字到水平居中。
这里的 CSS 只是简单的提一下，后面会细讲。

列表标签

列表标签分为 有序列表、无序列表、列表项，
有序列表是 ol，这是 ordered list 的简写，无序列表是 ul，这是 unordered list 的简写。
列表项是 li，这是 list item 的简写。

<html>
<head></head><body><h3>我的老婆们</h3><ol><li>咬人猫</li><li>兔总裁</li><li>张奶糖</li><li>阿叶君</li></ol><ul><li>咬人猫</li><li>兔总裁</li><li>张奶糖</li><li>阿叶君</li></ul></body>
</html>

有序列表排名是分先后的，无序列表是不分先后的。

在浏览器中按下 F12 或者 右键选择检查，就可以打开浏览器的 “开发者工具”，借助这个工具就可以看到这个页面是怎么实现的。

表单标签

表单是让用户输入信息的重要途径。

分成两个部分：

表单域： 包含表单元素的区域，重点是 from 标签。
表单控件： 输入框，提交按钮等，重点是 input 标签。

1. from 标签

使用 from 标签来进行前后端的交互，把页面上，用户的操作或者是输入提交到服务器上。
这里后面再进行讲解，这里暂时只是提一嘴。

2. input 标签

input 有很多的形态，能够表现成各种用户用来输入的组件。

1、单行文本框

<body><input type="text">
</body>

2、下面的也是一个文本框，只不过是用来输入密码的。

<body><input type="password">
</body>

3、单选框

<body>请选择性别：<input type="radio"> 男<input type="radio"> 女
</body>

此时会发现两个选择都可以选，这是不符合逻辑的。
因此对于单选框，我们可以使用 name 属性来进行设置，name 属性相同的，单选框的值之间是互斥的。

<body>请选择性别：<input type="radio" name="gender"> 男<input type="radio" name="gender"> 女
</body>

checked 可以设置单选框默认选中的。

<body>请选择性别：<input type="radio" name="gender" checked="checked"> 男<input type="radio" name="gender"> 女
</body>

4、复选框

<body>你每天都干什么：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 学习
</body>

复选框也是可以，使用checked 设置默认选中的。

<body>你每天都干什么：<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉<input type="checkbox" checked="checked"> 学习
</body>

5、按钮

<body><input type="button" value="这是一个按钮">
</body>

对于按钮点击后会有什么作用，需要通过 js 来配合，以后会讲解。

6、提交按钮（搭配 from 使用）

type=“submit”，外表和 button 是差不多的，会触发 from 和服务器的交互。
具体以后再讲。

7、文件选择框

<body><input type="file">
</body>

点击按钮，会让我们选择一个文件。

input 的功能很丰富，是和用户交互最主要的一个标签之一。

3. select 标签

select 是下拉菜单

<body><select><option>吃饭</option><option>睡觉</option><option>学习</option><option>运动</option></select>
</body>

可以任意选择上面的选项。

4. textarea 标签

textarea 标签是多行编辑框

<body><textarea cols="30" rows="10"></textarea>
</body>

5. 无语义标签：div span

无语义标签指的是没有特殊含义的标签，意思就是可以在任何场景中使用。

div 默认是独占一行的（块级元素），span 默认是不独占一行的（行内元素）。