javaEE初阶 — HTML 中的常见标签

谁践踏了优雅 2023-10-04 22:47 31阅读 0赞

#### 文章目录 ####

*  注释标签
 *  标题标签：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 的注释和一般语言的注释差别很大。

如果要使用 **注释** ，将想要注释的内容使用 **< !-- -->** 选中即可，注释的内容就不会出现在网页上了。  
  
![fed79cef1f0948c8b460eef0510de5ae.png_pic_center][]  
  
如果想要查看当前的注释代码，可以在显示的网页上右击选择 **查看网页源代码**  
  
![102c570b2e2b4dbaabcf4101577f9ebf.png_pic_center][]  
  
就可以发现在源代码中注释过的代码了。  
  
![4910cd0a6c504eb296db2579242b6c42.png_pic_center][]

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

## 标题标签：h2 h6 ##

标题标签一共有 **h1 ~ h6** 6 个级别的标签，从 h1 到 h6 标题逐渐变小变细，所以最大的标题标签是 **h1**，最小的就是 **h6**。  
  
![6dc6ee73adf44f8982229000015453e8.png_pic_center][]  
  
![166af75a8fbe4678a34b57693bafe071.png_pic_center][]  
  
可以清楚地看到标签的大小是逐渐变小变细的。

这里需要注意的是每个标题都是独占一行的，不会因为代码的编写而改变。  
  
![395c2b5104ba4009b29aa99494bf6253.png_pic_center][]  
  
尽管现在的代码格式变了，但是每一个标题还是独占一行。  
  
![166af75a8fbe4678a34b57693bafe071.png_pic_center][]

## 段落标签：p ##

段落标签使用的 **< p>< /p>** 标签。  
  
![d9c0999d63114a0fa71368c30de7bf3b.png_pic_center][]  
  
![e4bb99deb03b46dbb66978102035287e.png_pic_center][]  
  
每个段落之间不光是有一个换行，同时还有一个段落间距。

也可以使用 **lorem** 来自动生成一个文档。  
  
![33d68ed30d1344ec89b42b441eb3d762.png_pic_center][]  
  
![4a6b3414106c4f87a8b76cff49ce4857.png_pic_center][]

## 换行标签：br ##

换行标签是 **br**。  
  
![696c004cecc6434ead07aa17eb9f3336.png_pic_center][]  
  
![bcdae12246094ec4a8f5041c27b721c9.png_pic_center][]  
  
可以发现有此标签处就换行了，而且是有几个 < br> 标签就换几个行。

## 格式化标签 ##

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

![8992c33eb8ec42bd9a731bd06e42f113.png_pic_center][]  
  
这些标签都不是独占一行的。

## 图片标签：img ##

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

想在网页上显示一个图片，可以采取 **绝对路径** 或者 **相对路径**。  
  
**绝对路径的方式**：  
  
![4b3b23e7a1884895958630281c10f1d0.png_pic_center][]  
  
可以发现 d 盘中有一个小姐姐图片。

直接将图片的绝对路径写在 img 标签里面即可，src 就是它的属性。  
  
![88c0e0d2d3574584bb5b1a71d82680a6.png_pic_center][]  
  
可以看到网页中正确的显示出来了。

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

首先将这个图片保存到与这个 html 文件于同一个目录。  
  
![48788eb3d8c9475db772d46b9d3035fa.png_pic_center][]  
  
这个时候的路径就是 **./xiaojiejie.jpg**

![88c0e0d2d3574584bb5b1a71d82680a6.png_pic_center][]  
  
也可以将上述的 **./** 去掉，变成以下：

![63542c05d1684741a0ec6da7510c96af.png_pic_center][]  
  
将这个图片放到一个新的文件 image 中，此时的路径应该如下书写：

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

也可以将这个图片的地址填写到浏览器中就可以直接打开图片了。  
  
![3f4138ac803b4f6999d783bba69c9f53.png_pic_center][]  
  
在网页上右击这个图片就可以获取这个图片的地址。还可以将这个图片地址放到 img 里，也可以显示出图片。

### 1. img 的 alt 属性 ###

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

![a5ea9cb6f7ed40bfb3dc2ac7073706a2.png_pic_center][]  
  
当图片挂了之后就会出现上述 alt 中的文本。

### 2. img 的 title 属性 ###

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

![55a4d20dbc5347c1a86cbca74f8e59bf.png_pic_center][]

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

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

![9e8ed8b7d8ea4659bbafbd0bd4b7bb5b.png_pic_center][]  
  
可以看到图片等比例的缩放了。

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

## 超链接标签：a ##

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

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

![7d989c1d5ca14ff0b8bff0861c539f98.png_pic_center][]  
  
点击百度和搜狗就会跳转到对应的网页了，但是新的网页会把旧的网页给替换掉。  
  
![a468af8acbe14f00b3ff6ddec5725847.png_pic_center][]  
  
可以看到点击 “搜狗” 后就把之前的页面给替换了。

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

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

## 表格标签 ##

**table**：表示整个表格。

**tr**：表示一行。

**td** 表示一个单元格。

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

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

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

![87215afe174c47b09e3cdc50893ea917.png_pic_center][]  
  
可以看到间隙已经扩大了，但是信息还没有对齐而且信息未对齐。

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

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

![f517578ccda74ac89d85fed5a0b6de9a.png_pic_center][]

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

如果要让信息对齐，就需要使用 **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>

![6927d410245e4f1ebe52f0fc026cae0e.png_pic_center][]  
  
这里的 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>

![750d787fa22143d4928130c5ae98e323.png_pic_center][]  
  
有序列表排名是分先后的，无序列表是不分先后的。

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

## 表单标签 ##

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

分成两个部分：

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

### 1. from 标签 ###

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

### 2. input 标签 ###

input 有很多的形态，能够表现成各种用户用来输入的组件。  
  
1、**单行文本框**

![f12c7fb2c0a34f85859aef9ce9ba79a6.png_pic_center][]  
  
2、下面的也是一个文本框，只不过是用来**输入密码**的。

![22d7214718394a1a9e7e11dfcf43c5bc.png_pic_center][]

3、**单选框**

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

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

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

![8a5552c9794d4bde9ca3be4d976675f4.png_pic_center][]  
  
**checked** 可以设置单选框默认选中的。

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

![c339c8b809954dd3b90b87e9150e5a58.png_pic_center][]

4、**复选框**

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

![9790c76fb6404023aa6c449c8fcad01a.png_pic_center][]  
  
复选框也是可以，使用**checked** 设置默认选中的。

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

![91ba73a3b3b9473f9d550f9d09bd2bbb.png_pic_center][]

5、**按钮**

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

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

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

7、**文件选择框**

![6c622e8be51b4398b25cac357628cc74.png_pic_center][]  
  
点击按钮，会让我们选择一个文件。

![7d2ed0125874452daa02501c1a1746a0.png_pic_center][]  
  
**input** 的功能很丰富，是和用户交互最主要的一个标签之一。

### 3. select 标签 ###

select 是**下拉菜单**

![6ce6c68133594a22875e2dbe047da5b2.png_pic_center][]  
  
可以任意选择上面的选项。

### 4. textarea 标签 ###

textarea 标签 是**多行编辑框**

![e0f08ec0599e41fcbd00df321094950a.png_pic_center][]

### 5. 无语义标签：div span ###

无语义标签指的是没有特殊含义的标签，意思就是可以在任何场景中使用。  
  
**div** 默认是独占一行的（**块级元素**），**span** 默认是不独占一行的（行内元素）。  
  
![bf94e1babc3e4d90b74d5c69b44324b9.png_pic_center][]

[fed79cef1f0948c8b460eef0510de5ae.png_pic_center]: https://img-blog.csdnimg.cn/fed79cef1f0948c8b460eef0510de5ae.png#pic_center
[102c570b2e2b4dbaabcf4101577f9ebf.png_pic_center]: https://img-blog.csdnimg.cn/102c570b2e2b4dbaabcf4101577f9ebf.png#pic_center
[4910cd0a6c504eb296db2579242b6c42.png_pic_center]: https://img-blog.csdnimg.cn/4910cd0a6c504eb296db2579242b6c42.png#pic_center
[6dc6ee73adf44f8982229000015453e8.png_pic_center]: https://img-blog.csdnimg.cn/6dc6ee73adf44f8982229000015453e8.png#pic_center
[166af75a8fbe4678a34b57693bafe071.png_pic_center]: https://img-blog.csdnimg.cn/166af75a8fbe4678a34b57693bafe071.png#pic_center
[395c2b5104ba4009b29aa99494bf6253.png_pic_center]: https://img-blog.csdnimg.cn/395c2b5104ba4009b29aa99494bf6253.png#pic_center
[d9c0999d63114a0fa71368c30de7bf3b.png_pic_center]: https://img-blog.csdnimg.cn/d9c0999d63114a0fa71368c30de7bf3b.png#pic_center
[e4bb99deb03b46dbb66978102035287e.png_pic_center]: https://img-blog.csdnimg.cn/e4bb99deb03b46dbb66978102035287e.png#pic_center
[33d68ed30d1344ec89b42b441eb3d762.png_pic_center]: https://img-blog.csdnimg.cn/33d68ed30d1344ec89b42b441eb3d762.png#pic_center
[4a6b3414106c4f87a8b76cff49ce4857.png_pic_center]: https://img-blog.csdnimg.cn/4a6b3414106c4f87a8b76cff49ce4857.png#pic_center
[696c004cecc6434ead07aa17eb9f3336.png_pic_center]: https://img-blog.csdnimg.cn/696c004cecc6434ead07aa17eb9f3336.png#pic_center
[bcdae12246094ec4a8f5041c27b721c9.png_pic_center]: https://img-blog.csdnimg.cn/bcdae12246094ec4a8f5041c27b721c9.png#pic_center
[8992c33eb8ec42bd9a731bd06e42f113.png_pic_center]: https://img-blog.csdnimg.cn/8992c33eb8ec42bd9a731bd06e42f113.png#pic_center
[4b3b23e7a1884895958630281c10f1d0.png_pic_center]: https://img-blog.csdnimg.cn/4b3b23e7a1884895958630281c10f1d0.png#pic_center
[88c0e0d2d3574584bb5b1a71d82680a6.png_pic_center]: https://img-blog.csdnimg.cn/88c0e0d2d3574584bb5b1a71d82680a6.png#pic_center
[48788eb3d8c9475db772d46b9d3035fa.png_pic_center]: https://img-blog.csdnimg.cn/48788eb3d8c9475db772d46b9d3035fa.png#pic_center
[63542c05d1684741a0ec6da7510c96af.png_pic_center]: https://img-blog.csdnimg.cn/63542c05d1684741a0ec6da7510c96af.png#pic_center
[3f4138ac803b4f6999d783bba69c9f53.png_pic_center]: https://img-blog.csdnimg.cn/3f4138ac803b4f6999d783bba69c9f53.png#pic_center
[a5ea9cb6f7ed40bfb3dc2ac7073706a2.png_pic_center]: https://img-blog.csdnimg.cn/a5ea9cb6f7ed40bfb3dc2ac7073706a2.png#pic_center
[55a4d20dbc5347c1a86cbca74f8e59bf.png_pic_center]: https://img-blog.csdnimg.cn/55a4d20dbc5347c1a86cbca74f8e59bf.png#pic_center
[9e8ed8b7d8ea4659bbafbd0bd4b7bb5b.png_pic_center]: https://img-blog.csdnimg.cn/9e8ed8b7d8ea4659bbafbd0bd4b7bb5b.png#pic_center
[d4a3350e339747d89fc6b9ab9d338bb2.png_pic_center]: https://img-blog.csdnimg.cn/d4a3350e339747d89fc6b9ab9d338bb2.png#pic_center
[7d989c1d5ca14ff0b8bff0861c539f98.png_pic_center]: https://img-blog.csdnimg.cn/7d989c1d5ca14ff0b8bff0861c539f98.png#pic_center
[a468af8acbe14f00b3ff6ddec5725847.png_pic_center]: https://img-blog.csdnimg.cn/a468af8acbe14f00b3ff6ddec5725847.png#pic_center
[af1c445618b641b69f10cc64f6dd286a.png_pic_center]: https://img-blog.csdnimg.cn/af1c445618b641b69f10cc64f6dd286a.png#pic_center
[91d4892a9c31419e99762e271014a083.png_pic_center]: https://img-blog.csdnimg.cn/91d4892a9c31419e99762e271014a083.png#pic_center
[87215afe174c47b09e3cdc50893ea917.png_pic_center]: https://img-blog.csdnimg.cn/87215afe174c47b09e3cdc50893ea917.png#pic_center
[15de5252e537426fbcaaa1cc613f5d56.png_pic_center]: https://img-blog.csdnimg.cn/15de5252e537426fbcaaa1cc613f5d56.png#pic_center
[f517578ccda74ac89d85fed5a0b6de9a.png_pic_center]: https://img-blog.csdnimg.cn/f517578ccda74ac89d85fed5a0b6de9a.png#pic_center
[6927d410245e4f1ebe52f0fc026cae0e.png_pic_center]: https://img-blog.csdnimg.cn/6927d410245e4f1ebe52f0fc026cae0e.png#pic_center
[750d787fa22143d4928130c5ae98e323.png_pic_center]: https://img-blog.csdnimg.cn/750d787fa22143d4928130c5ae98e323.png#pic_center
[d686aae503424847816756e94e532c0b.png_pic_center]: https://img-blog.csdnimg.cn/d686aae503424847816756e94e532c0b.png#pic_center
[f12c7fb2c0a34f85859aef9ce9ba79a6.png_pic_center]: https://img-blog.csdnimg.cn/f12c7fb2c0a34f85859aef9ce9ba79a6.png#pic_center
[22d7214718394a1a9e7e11dfcf43c5bc.png_pic_center]: https://img-blog.csdnimg.cn/22d7214718394a1a9e7e11dfcf43c5bc.png#pic_center
[00cbf042d9544f4ab4430ec432ff357a.png_pic_center]: https://img-blog.csdnimg.cn/00cbf042d9544f4ab4430ec432ff357a.png#pic_center
[8a5552c9794d4bde9ca3be4d976675f4.png_pic_center]: https://img-blog.csdnimg.cn/8a5552c9794d4bde9ca3be4d976675f4.png#pic_center
[c339c8b809954dd3b90b87e9150e5a58.png_pic_center]: https://img-blog.csdnimg.cn/c339c8b809954dd3b90b87e9150e5a58.png#pic_center
[9790c76fb6404023aa6c449c8fcad01a.png_pic_center]: https://img-blog.csdnimg.cn/9790c76fb6404023aa6c449c8fcad01a.png#pic_center
[91ba73a3b3b9473f9d550f9d09bd2bbb.png_pic_center]: https://img-blog.csdnimg.cn/91ba73a3b3b9473f9d550f9d09bd2bbb.png#pic_center
[a75689bf110a4049bb607dcee45d3fe0.png_pic_center]: https://img-blog.csdnimg.cn/a75689bf110a4049bb607dcee45d3fe0.png#pic_center
[6c622e8be51b4398b25cac357628cc74.png_pic_center]: https://img-blog.csdnimg.cn/6c622e8be51b4398b25cac357628cc74.png#pic_center
[7d2ed0125874452daa02501c1a1746a0.png_pic_center]: https://img-blog.csdnimg.cn/7d2ed0125874452daa02501c1a1746a0.png#pic_center
[6ce6c68133594a22875e2dbe047da5b2.png_pic_center]: https://img-blog.csdnimg.cn/6ce6c68133594a22875e2dbe047da5b2.png#pic_center
[e0f08ec0599e41fcbd00df321094950a.png_pic_center]: https://img-blog.csdnimg.cn/e0f08ec0599e41fcbd00df321094950a.png#pic_center
[bf94e1babc3e4d90b74d5c69b44324b9.png_pic_center]: https://img-blog.csdnimg.cn/bf94e1babc3e4d90b74d5c69b44324b9.png#pic_center