HTML用法介绍

文章目录

  • 一、HTML概念和模版
  • 二、常用标签及用法
    • 1.p标签
    • 2.span标签
    • 3.h标签
    • 4.hr标签
    • 5.img标签
    • 6.a标签
    • 7.input标签
    • 8.table标签

一、HTML概念和模版

HTML的全称为超文本标记语言，它包括一系列标签组成，模版及各部分注释如下：

<!--声明文档类型-->
<!DOCTYPE html><!--HTML页面开始-->
<html lang="en">   <!--1、HTML头部-->
<head><meta charset="UTF-8">  <!--A、文档的编码：UTF-8--><title>小十一</title>    <!--B、title：HTML标题-->
</head><!--2、HTML主体内容-->
<body></body></html>
<!--HTML页面结束-->

故而对HTML的学习，其实是学习各种标签的用法

二、常用标签及用法

HTML标签非常多，这里只介绍一些常用标签

1.p标签

p标签是段落标签，特点是独占一行显示，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>P标签</title>
</head>
<body><!--p标签: paragraph  是霸道, 独占一行-->
<p>我是段落标签 -- 1</p>
<p>我是段落标签 -- 2</p>
<p>我是段落标签 -- 3</p></body>
</html>

运行结果如下：
在这里插入图片描述

2.span标签

span标签是文本标签，特点是连续显示在一行，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span标签</title>
</head>
<body><!--span: 文本标签 -- 连续的--><span>我是文本标签 -- 1</span>
<span>我是文本标签 -- 2</span>
<span>我是文本标签 -- 3</span>
<span>我是文本标签 -- 4</span>
<span>我是文本标签 -- 5</span>
<span>我是文本标签 -- 6</span></body>
</html>

运行结果如下：
在这里插入图片描述

3.h标签

h标签是标题标签，共6级，从h1-h6，，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H标签</title>
</head>
<body><!-- 标题标签:  6级-->
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<h5>我是5级标题</h5>
<h6>我是6级标题</h6></body>
</html>

运行结果如下：
在这里插入图片描述

4.hr标签

hr标签是分隔线标签，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hr标签</title>
</head>
<body><!-- 标题标签:  6级-->
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3><hr><p>我来比大小</p></body>
</html>

运行结果如下：
在这里插入图片描述

5.img标签

img标签是图片标签，里面有两个参数，src表示当前图片来源，也就是图片路径，alt表示报错提示，当图片加载失败的时候提示性话语，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>img标签</title>
</head>
<body>
<!--img标签  image：图片标签  src：图片来源  alt：报错提示-->
<img src="小姐姐.jpg" alt="图片未加载">
</body>
</html>

运行结果如下：
在这里插入图片描述

6.a标签

a标签是超链接标签，里面有两个参数，href参数表示超链接网址，target参数表示链接的目标网页是否以当前窗口打开，target=“_blank"表示新开窗口打开，target=”_self"表示以当前窗口打开，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>a标签</title>
</head>
<body>
<!--a标签：超链接标签   href：超链接网址-->
<a href="https://www.baidu.com" target="_blank">我是百度一下</a>
</body>
</html>

运行结果如下：
在这里插入图片描述

7.input标签

input标签用来获取用户的输入，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text">
密码: <input type="text">
</body>
</html>

运行结果如下：
在这里插入图片描述

我们发现，两个输入框位于同一行，因为input标签默认就是显示在一行，如果要实现换行，用到br标签，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text"><br>
密码: <input type="text">
</body>
</html>

运行结果如下：
在这里插入图片描述
在里面输入姓名和密码：
在这里插入图片描述

我们会发现这个很明显不合适，因为密码是明文显示，所以这里要将密码输入的input标签中，type参数值改为password，如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text"><br>
密码: <input type="password">
</body>
</html>

运行之后再输入用户名和密码如下图：
在这里插入图片描述
我们可以打开豆瓣网站做个实验，输入用户名和密码，发现密码也是隐藏不显示，在源码中可以看到input标签的类型就是password
在这里插入图片描述

这时候我们把类型改为text看看，可以看到改掉之后，密码就是明文显示
在这里插入图片描述
综上，我们就知道，input标签中type类型值为text，代表当前输入的是用户名；type类型值为password，代表当前输入的是密码。

继续对上面的代码做升级，我们重新看下刚才的代码运行结果，会发现当光标点进去输入内容时候没有任何提示，一般都会有提示用户输入类型的话语
在这里插入图片描述

这里需要用到参数placeholder，参数值自己填入，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码">
</body>
</html>

运行结果如下：
在这里插入图片描述
继续升级代码，给用户添加性别，让用户可以选择自己性别，这里用到单选框，需要将type类型值改为radio，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio">男 <input type="radio">女
</body>
</html>

代码运行结果如下：
在这里插入图片描述

这时候我们点击性别会发现，两个都能同时选中，如下图：
在这里插入图片描述
这就没有实现我们想要的单选功能，怎么办呢？将两个性别输入框设为同一类型，需要用到name参数，值自己随便写，但是要求两个值要相同，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女
</body>
</html>

运行之后结果如下图，这下就可以了，只能选其一：
在这里插入图片描述

继续改进代码，为用户设置一些爱好，这里要用多选框，因为用户爱好有多个，多选框的type类型值是checkbox，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球
</body>
</html>

运行之后结果如下：
在这里插入图片描述

用户所有信息填好之后需要进行提交，这里提交使用type类型值是submit，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br>
<input type="submit">
</body>
</html>

运行结果如下：
在这里插入图片描述

这时候提交是整体作为一份表单提交到服务器的后台，后台数据库再和表单里面的数据逐一匹配，所以刚才所有的信息必须是在一个大的框架里面，也就是一份表单中，就需要用到form标签，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
<form action="后台网址">姓名: <input type="text" placeholder="请输入姓名"><br>密码: <input type="password" placeholder="请输入密码"><br>性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br><input type="submit">
</form></body>
</html>

还有一种情况，用户填写完信息之后，发现有的填错了，想重新全部填写，在提交之前是可以重置的，重置用到type类型值是reset，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input标签</title>
</head>
<body>
<form action="后台网址">姓名: <input type="text" placeholder="请输入姓名"><br>密码: <input type="password" placeholder="请输入密码"><br>性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br><input type="submit"><input type="reset">
</form></body>
</html>

运行后结果如下，填完所有信息后，可以点击重置全部清空：
在这里插入图片描述

8.table标签

table标签是表格标签，用来在网页上创建表格，表格有行有列，行用tr标签，几行就是几个tr；列区分是否是表头，如果是表头则用th标签，我们可以先写代码看看：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table标签</title>
</head>
<body><table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
</table></body>
</html>

代码运行结果如下：
在这里插入图片描述

可以看到表头确实加粗显示，很醒目，但是没有边框，这里要用到table标签的border属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table标签</title>
</head>
<body><table border="1px"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
</table></body>
</html>

运行结果如下：
在这里插入图片描述

接下来再写表格中的内容，也就是数据，数据不是表头，没必要特殊显示加粗，所以在内容中的列用td标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table标签</title>
</head>
<body><table border="1px"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>19</td><td>女</td></tr>
</table></body>
</html>

运行后结果如下：
在这里插入图片描述

这时候我们发现还没有表名，设置表名用caption标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table标签</title>
</head>
<body><table border="1px"><caption>学生信息表</caption><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>19</td><td>女</td></tr>
</table></body>
</html>

运行后结果如下：
在这里插入图片描述

最后用table标签完成一个案例：酒店菜谱，代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1px"><caption>十一酒店菜谱</caption><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr><tr><td>辣椒炒肉</td><td>剁椒鱼头</td><td>麻辣鸡丝</td><td>爆炒牛肚</td><td>红烧鱼块</td><td>上海青</td><td>红烧肥肠</td></tr><tr><td>海带汤</td><td>球白菜</td><td>油豆腐炒肉</td><td>爆炒猪耳</td><td>清蒸鱼</td><td>红烧排骨</td><td>蚂蚁上树</td></tr>
</table></body>
</html>

运行后结果如下：
在这里插入图片描述

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

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

相关文章

ROS基础学习-话题通信机制研究

ROS基础学习-话题通信机制研究

研究ROS通信机制 研究ROS通信机制 0.前言1.话题通信1.1 理论模型1.2 话题通讯的基本操作1.2.1 C++1.2.2 Python中使用自己的虚拟环境包1.2.2.1 参考11.2.2.2 参考21.2.2.3 /usr/bin/env:“python”:没有那个文件或目录1.2.3 Python1.2.2.1 发布方1.2.2.2 订阅方1.2.2.3 添加可执…
阅读更多...
《征服数据结构》目录

《征服数据结构》目录

我们知道要想学好算法&#xff0c;必须熟练掌握数据结构&#xff0c;数据结构常见的有 8 大类&#xff0c;分别是数组&#xff0c;链表&#xff0c;队列&#xff0c;栈&#xff0c;散列表&#xff0c;树&#xff0c;堆&#xff0c;图。但如果细分的话就比较多了&#xff0c;比如…
阅读更多...
go-zero 实战（2）

go-zero 实战（2）

go-zero 实战&#xff08;1&#xff09; 中&#xff0c;使用了go-zero 创建了order 和 user 两个微服务。而order作为grpc的客户端&#xff0c;user 作为grpc的服务端&#xff0c;打通了 order 到 user的调用。接下来&#xff0c;我们在user中&#xff0c;加入mysql组件。确保数…
阅读更多...
我说同事咋找工作命中率这么高，原来是学习了这些招式

我说同事咋找工作命中率这么高，原来是学习了这些招式

最近有两个同事离职了&#xff0c;其中一个还是专科&#xff0c;他俩一个是前端开发&#xff0c;一个是python开发&#xff0c;两个人都接近35岁了。我们还劝告他们&#xff0c;不要离职&#xff0c;要骑驴找马。但了解后&#xff0c;他俩非常有信心的说&#xff1a;不怕&#…
阅读更多...
3D视觉技术|螺栓分拣测试

3D视觉技术|螺栓分拣测试

随着制造业自动化程度的不断提高&#xff0c;某大型汽配企业为提升生产效率、减少人力成本&#xff0c;提出了使用复合机器人完成螺栓分拣的需求。富唯智能通过采用复合机器人&#xff0c;结合3D工业相机和高性能控制器&#xff0c;实现螺栓的自动抓取&#xff0c;从而提升生产…
阅读更多...
鸿蒙OS开发：【一次开发，多端部署】（一多天气）项目

鸿蒙OS开发：【一次开发，多端部署】（一多天气）项目

一多天气 介绍 本示例展示一个天气应用界面&#xff0c;包括首页、城市管理、添加城市、更新时间弹窗&#xff0c;体现一次开发&#xff0c;多端部署的能力。 1.本示例参考一次开发&#xff0c;多端部署的指导&#xff0c;主要使用响应式布局的栅格断点系统实现在不同尺寸窗…
阅读更多...
【Qt 学习笔记】Qt窗口 | 工具栏 | QToolBar的使用及说明

【Qt 学习笔记】Qt窗口 | 工具栏 | QToolBar的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt窗口 | 工具栏 | QToolBar的使用及说明 文章编号&#xff1a;Qt 学习…
阅读更多...
opencv文档py_contours示例整理

opencv文档py_contours示例整理

文章目录 目录说明contours_begin目标什么是轮廓?如何画等高线?轮廓逼近法contour_features目标1.Moments 时刻2. Contour Area 轮廓面积3. Contour Perimeter 轮廓周长4. Contour Approximation 轮廓近似5. Convex Hull 凸包6. Checking Convexity 检查凸性7. Bounding Rect…
阅读更多...
嵌入式进阶——RTC时钟

嵌入式进阶——RTC时钟

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 RTC时钟原理图PCF8563寄存器控制与状态寄存器 设备地址I2C环境初始化RTC寄存器数据读取RTC寄存器数据写入RTC闹钟设置RTC定时器设置…
阅读更多...
2024.5.28晚训题解

2024.5.28晚训题解

提前预告&#xff0c;市赛初中组会考算法题&#xff0c;应该会有两道模板题 比如DFS BFS 二分 简单动态规划&#xff0c;虽然我们没学多久&#xff0c;但是模板题你还是要会写的 A题 编辑距离 动态规划 注意多组输入 #include<iostream> using namespace std; int dp[1…
阅读更多...
9、C#【进阶】特性

9、C#【进阶】特性

特性 文章目录 1、特性概念2、自定义特性 Attribute3、特性的使用4、限制自定义特性的使用范围5、系统自带特性1、过时特性2、调用者信息特性3、条件编译特性4、外部dll包函数特性 1、特性概念 特性是一种允许我们向程序的程序集添加元数据的语言结构 它是用于保存程序机构信息…
阅读更多...
【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样？以LeNet-5为例说明。

【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样？以LeNet-5为例说明。

一个简单的经典CNN网络结构由&#xff1a;输入层、卷积层、池化层、全连接层和输出层&#xff0c;这五种神经网络层结构组成。它最最经典的实例是LeNet-5&#xff0c;它最早被设计用于手写数字识别任务&#xff0c;包含两个卷积层、两个池化层、几个全连接层&#xff0c;以及最…
阅读更多...
ansible批量漏洞升级openssh版本

ansible批量漏洞升级openssh版本

1、ansible宿主机准备好环境&#xff0c;并写好hosts文件 [rootoxidized ansible]# cat hosts [all] 10.10.200.33 10.10.200.34 10.10.200.35跑playbook之前记得提前发送秘钥 ssh-copy-id 10.10.200.33/34/352、下载好安装包&#xff0c;然后编写yml [rootoxidized ansible]…
阅读更多...
【实用的 IDEA 配置和操作技巧总结】

【实用的 IDEA 配置和操作技巧总结】

前置知识 IDEA的设置快捷键为ctrlalts键&#xff0c;后文介绍IDEA常见的配置就不再赘述这一点了。 基础配置 取消默认打开上次项目 日常开发都会打开不同的项目&#xff0c;初次安装IDEA之后&#xff0c;每次打开IDEA都会开启上一次启动的项目&#xff0c;所以我们需要进入设…
阅读更多...
0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKB方案

大纲 序列化反序列化完整TypeHandlerSQL XML完整XML Mapper测试代码代码 在《0基础学习Mybatis系列数据库操作框架——Mysql的Geometry数据处理之WKT方案》中&#xff0c;我们介绍WTK方案的优点&#xff0c;也感受到它的繁琐和缺陷。比如&#xff1a; 需要借助ST_GeomFromText…
阅读更多...
350种类型、10W+量级的API，企业应该怎么管？

350种类型、10W+量级的API，企业应该怎么管？

忽如一夜春风来&#xff0c;万物皆可API。 在互联网时代&#xff0c;API无处不在&#xff1a;企业对外开放的数据、服务和业务能力&#xff0c;以API的形式提供给合作方&#xff1b;企业内部应用与应用、App与App之间的通信&#xff0c;通过API进行&#xff1b;甚至应用内部的…
阅读更多...
php 连接sqlserver步骤

php 连接sqlserver步骤

1.首先要确定使用的是sqlserver的哪个版本&#xff0c;比如sqlserver2012 2.确定服务器是64位还是32位的 3.确认一下使用php的哪个版本&#xff0c;比如php7.1 SQL Server 的 Microsoft PHP 驱动程序 Microsoft Drivers for PHP 支持矩阵 - PHP drivers for SQL Server | Mi…
阅读更多...
怎么做好客户信息管理？

怎么做好客户信息管理？

根据Forrester的调查表示&#xff0c;客户满意度的影响可能会使某些行业的收入每年增加高达 10 亿美元。而提升客户满意度的关键环节便是做好客户信息管理。但企业在进行客户信息管理中往往会遇到以下问题&#xff1a; 客户信息乱&#xff1a;客户信息存在各个 Excel表格、个人…
阅读更多...
PMP报考条件怎么查询？如何判定自己是否符合条件？

PMP报考条件怎么查询？如何判定自己是否符合条件？

PMP报考条件在PMI官网上就可以查询&#xff0c;PMP报考条件只需要符合项目管理培训经历和项目管理经验两个方面的要求即可&#xff0c;大家可以对照下方的规定判断自己是否符合PMP报名条件 PMP报考条件 以下是PMI&#xff08;中国&#xff09;官网对于PMP报名条件的规定&…
阅读更多...
ubuntu strace命令

ubuntu strace命令

strace 是 Linux 系统中的一个调试工具&#xff0c;用于跟踪并记录系统调用&#xff08;system calls&#xff09;和信号&#xff08;signals&#xff09;。在 Ubuntu 中&#xff0c;strace 命令可以帮助开发者和系统管理员了解一个程序在运行时如何与操作系统内核进行交互&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023