javaEE初阶 — HTML 中的常见标签

news2025/7/10 11:43:57

文章目录

  • 注释标签
  • 标题标签：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 默认是不独占一行的（行内元素）。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/396492.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++的OpenCV】第十一课-OpenCV图像常用操作（八）：直方图计算（cv.calc()）

【C++的OpenCV】第十一课-OpenCV图像常用操作（八）：直方图计算（cv.calc()）

&#x1f389;&#x1f389;&#x1f389;欢迎各位来到小白piao的学习空间&#xff01;\color{red}{欢迎各位来到小白piao的学习空间&#xff01;}欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496;&#x1f496;&#x1f496…
阅读更多...
发布新闻稿的流程与步骤

发布新闻稿的流程与步骤

发布新闻稿需要遵循一定的流程和步骤&#xff0c;以下是一般的新闻发布流程&#xff1a;1、编写新闻稿新闻稿的内容应当简洁、明确、准确&#xff0c;力求突出新闻价值和亮点。企业和组织可以根据新闻稿的主题和目的&#xff0c;选择不同的写作风格和语言表达方式&#xff0c;以…
阅读更多...
春季训练营 | 前端+验证直通车-全实操项目实践，履历加成就业无忧

春季训练营 | 前端+验证直通车-全实操项目实践，履历加成就业无忧

“芯动的offer”是2023年E课网联合企业全新推出集训培优班&#xff08;线下&#xff09;&#xff0c;针对有一定基础&#xff08;linux、verilog、uvm等&#xff09;在校学生以及想要通过短时间的学习进入到IC行业中的转行人士&#xff0c;由资深IC设计工程师带教&#xff0c;通…
阅读更多...
openpnp - 贴片前, 放入一块新板子后, 对板子的坐标矫正

openpnp - 贴片前, 放入一块新板子后, 对板子的坐标矫正

文章目录openpnp - 贴片前, 放入一块新板子后, 对板子的坐标矫正概述笔记实验前置条件实验开始建立自己板子上的Mark点封装, 用于自己人工圈定判断Mark点位置是否正确建立mark点封装根据多个mark点, 来精确定位板子左下角原点坐标ENDopenpnp - 贴片前, 放入一块新板子后, 对板子…
阅读更多...
图像边缘检测

图像边缘检测

文章目录前言一、图像边缘检测二、边缘检测算子1. Roberts算子2. Prewitt算子3. Sobel算子三、代码实现总结前言 有了图像放大缩小&#xff0c;图像灰度化处理等相关基础知识过后&#xff0c;就可以进行图像边缘检测了。边缘检测最后也会在FPGA上面实现&#xff0c;此处小编已经…
阅读更多...
神经网络分类任务（手写数字识别）

神经网络分类任务（手写数字识别）

1.Mnist分类任务 网络基本构建与训练方法&#xff0c;常用函数解析 torch.nn.functional模块 nn.Module模块 学习方法&#xff1a;边用边查&#xff0c;多打印&#xff0c;duogua 使用jupyter的优点&#xff0c;可以打印出每一个步骤。 2.读取数据集 自动下载 %matplotl…
阅读更多...
移动设备配置文件管理

移动设备配置文件管理

什么是移动设备上的设备配置文件 随着移动设备在工作中使用量的迅速增加&#xff0c;有必要将这些设备置于企业管理之下&#xff0c;以确保企业数据安全且设备符合行业标准。移动设备上的配置文件允许 IT 管理员通过对员工使用的智能手机、平板电脑和笔记本电脑实施公司策略和…
阅读更多...
三维人脸实践：基于Face3D的渲染、生成与重构 ＜一＞

三维人脸实践：基于Face3D的渲染、生成与重构 ＜一＞

face3d: Python tools for processing 3D face git code: https://github.com/yfeng95/face3d paper list: PaperWithCode 该方法广泛用于基于三维人脸关键点的人脸生成、属性检测&#xff08;如位姿、深度、PNCC等&#xff09;&#xff0c;能够快速实现人脸建模与渲染。推荐…
阅读更多...
学生使用的台灯该怎么选择？2023适合学生房间的灯推荐

学生使用的台灯该怎么选择？2023适合学生房间的灯推荐

随着社会的进步发展&#xff0c;我们的生活水平越来越高&#xff0c;很多家庭的孩子都开始使用台灯这种家居产品&#xff0c;对于学习任务繁重的他们来说&#xff0c;台灯确实可以起到保护眼睛、提高学习专注度的作用。那么不知道朋友们是否了解过&#xff0c;台灯该怎么选择呢…
阅读更多...
本地开发vue项目联调遇到访问接口跨域问题

本地开发vue项目联调遇到访问接口跨域问题

本地开发vue项目联调遇到访问接口跨域问题 修改本地的localhost 一&#xff1a;按winr打开运行窗口&#xff0c;输入drivers &#xff0c;然后回车 二&#xff1a;打开etc文件夹&#xff0c;然后用记事本的方式打开里面的hosts文件&#xff0c; 三&#xff1a;这时我们就可…
阅读更多...
oneblog_justauth_三方登录配置【QQ】

oneblog_justauth_三方登录配置【QQ】

文章目录oneblog添加第三方平台QQ互联平台创建三方应用完善信息登录oneblog添加第三方平台 1.oneblog管理端&#xff0c;点击左侧菜单 网站管理——>社会化登录配置管理 ,添加一个社会化登录 2.编辑信息如下&#xff0c;选择QQ平台后复制redirectUri,然后去QQ互联平台获取…
阅读更多...
UART 串口通信

UART 串口通信

第18.1讲 UART串口通信原理讲解_哔哩哔哩_bilibili 并行通信 一个周期同时发送8bit的数据&#xff0c;占用引脚资源多 串行通信 串行通信的通信方式&#xff1a; 同步通信 同一时钟下进行数据传输 异步通信 发送设备和接收设备的时钟不同 但是需要约束波特率&#xff08;…
阅读更多...
大数据｜HDFS分布式文件系统

大数据｜HDFS分布式文件系统

前文回顾&#xff1a;Hadoop系统 目录 &#x1f4da;HDFS概述 &#x1f4da;HDFS在设计时的假设和目标 &#x1f4da;HDFS的基本特征 &#x1f4da;HDFS的体系结构 &#x1f407;目录节点 &#x1f407;数据节点 &#x1f4da;HDFS的副本机制 &#x1f4da;HDFS的数据存…
阅读更多...
KD500全自动电容电感测试仪

KD500全自动电容电感测试仪

一、产品特点 1.本仪器采用了先进的测量原理与四端测量技术&#xff0c;可以精确测量、测试重复性能好&#xff1b; 2.能在不拆线的状态下&#xff0c;测量成组并联着的单个电容器的电容量和成组并联着电容器组的总电容量&#xff1b; 3.大屏幕液晶显示屏&#xff08;320X24…
阅读更多...
关于Activiti7审批工作流绘画流程图（2）

关于Activiti7审批工作流绘画流程图（2）

文章目录一、25张表详解二、安装插件一.定制流程提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、25张表详解 虽然表很多&#xff0c;但是仔细观察&#xff0c;我们会发现Activiti 使用到的表都是 ACT_ 开头的。表名的第二部分用两个字母表明表的用…
阅读更多...
vuex基础之初始化功能、state、mutations、getters、模块化module的使用

vuex基础之初始化功能、state、mutations、getters、模块化module的使用

vuex基础之初始化功能、state、mutations、getters、模块化module的使用一、Vuex的介绍二、初始化功能三、state3.1 定义state3.2 获取state3.2.1 原始形式获取3.2.2 辅助函数获取(mapState)四、mutations4.1 定义mutations4.2 调用mutations4.2.1 原始形式调用($store)4.2.2 辅…
阅读更多...
数据分析方法及名词解释总结_(面试2)

数据分析方法及名词解释总结_(面试2)

1、用户画像 1.1、什么是用户画像&#xff1f;如何构建用户画像&#xff1f; - 知乎提到用户画像&#xff0c; 很多人都可能存在的错误认知&#xff0c;即把用户画像简单理解成用户各种特征&#xff0c;比如说姓名、性别、…https://www.zhihu.com/question/372802348/answer/2…
阅读更多...
spi 子系统

spi 子系统

spi在应用层的体现 spi 分为主机模式和从机模式&#xff0c;一般soc 自带的spi 控制器&#xff0c;我们都将它用作主机模式与外挂的从设备通信。从设备例如 oled芯片、flash芯片、陀螺仪芯片等等。 那么spi 驱动和设备&#xff0c;自然也就分为主机驱动、设备和从机驱动、设备…
阅读更多...
云原生时代顶流消息中间件Apache Pulsar部署实操之Pulsar IO与Pulsar SQL

云原生时代顶流消息中间件Apache Pulsar部署实操之Pulsar IO与Pulsar SQL

文章目录Pulsar IO (Connector连接器)基础定义安装Pulsar和内置连接器连接Pulsar到Cassandra安装cassandra集群配置Cassandra接收器创建Cassandra Sink验证Cassandra Sink结果删除Cassandra Sink连接Pulsar到PostgreSQL安装PostgreSQL集群配置JDBC接收器创建JDBC Sink验证JDBC …
阅读更多...
redis cluster配置之read-mode

redis cluster配置之read-mode

背景生产部署了redis集群&#xff0c;三台机器&#xff08;三主三从&#xff0c;主从不在同一台机器上&#xff09;&#xff0c;redission连接使用。当有一个master节点挂掉时&#xff0c;redis整个集群不可用。解决过程运维登上机器上&#xff0c;执行cluster info发现集群OK状…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023