HTML用法介绍

news2024/11/22 16:35:14

文章目录

  • 一、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.coloradmin.cn/o/1685085.html

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

相关文章

从需求角度介绍PasteSpider(K8S平替部署工具适合于任何开发语言)

从需求角度介绍PasteSpider(K8S平替部署工具适合于任何开发语言)

你是否被K8S的强大而吸引&#xff0c;我相信一部分人是被那复杂的配置和各种专业知识而劝退&#xff0c;应该还有一部分人是因为K8S太吃资源而放手&#xff01; 这里介绍一款平替工具PasteSpider&#xff0c;PasteSpider是一款使用c#编写的linux容器部署工具(使用PasteSpider和…
阅读更多...
如何将Windows PC变成Wi-Fi热点？这里提供详细步骤

如何将Windows PC变成Wi-Fi热点？这里提供详细步骤

序言 Windows 10和Windows 11都有内置功能，可以将你的笔记本电脑（或台式机）变成无线热点，允许其他设备连接到它并共享你的互联网连接。以下是操作指南。 由于Windows中隐藏的虚拟Wi-Fi适配器功能，你甚至可以在连接到另一个Wi-Fi网络或无线路由器时创建Wi-Fi热点，通过另…
阅读更多...
CSS学习笔记之高级教程（二）

CSS学习笔记之高级教程（二）

10、CSS 3D 转换 通过 CSS transform 属性&#xff0c;您可以使用以下 3D 转换方法&#xff1a; rotateX()rotateY()rotateZ() 10.1 rotateX() 方法&#xff08;使元素绕其 X 轴旋转给定角度&#xff09; <!DOCTYPE html> <html lang"en"><head&g…
阅读更多...
NLP（17）--大模型发展（1）

NLP（17）--大模型发展（1）

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…
阅读更多...
ARP基本原理

ARP基本原理

相关概念 ARP报文 ARP报文分为ARP请求报文和ARP应答报文&#xff0c;报文格式如图1所示。 图1 ARP报文格式 Ethernet Address of destination&#xff08;0–31&#xff09;和Ethernet Address of destination&#xff08;32–47&#xff09;分别表示Ethernet Address of dest…
阅读更多...
Linux中解决普通用户使用不了sudo问题

Linux中解决普通用户使用不了sudo问题

目录 sudo的使用场景sudo使用不了的原因解决方法 sudo的使用场景 之前我们介绍了文件的权限问题 如果一个普通用户想去执行一个它命令之外的权限&#xff0c;只能使用sudo 比如普通用户使用yum去安装软件&#xff0c;需要sudo yum xxxx sudo使用不了的原因 这里我们用普通用户…
阅读更多...
浏览器的下载行为基本原理

浏览器的下载行为基本原理

浏览器解析 在使用浏览器访问某些资源时&#xff0c;有些资源是直接下载有些资源是直接打开。例如前端的html&#xff0c;xml&#xff0c;css&#xff0c;图片等资源都是直接打开&#xff0c;而txt&#xff0c;excel等文件是直接下载。那么如何控制访问一个资源时是下载文件还…
阅读更多...
C# run Node.js

C# run Node.js

C# run nodejs Inter-Process Communication&#xff0c;IPC Process类 启动Node.js进程&#xff0c;通过标准输入输出与其进行通信。 // n.js// 监听来自标准输入的消息 process.stdin.on(data, function (data) {// 收到消息后&#xff0c;在控制台输出并回复消息console.l…
阅读更多...
MyBatisPlus标准分页功能制作，以及设置分页拦截器，selectPage(new Page＜＞(current,size),null)

MyBatisPlus标准分页功能制作，以及设置分页拦截器，selectPage(new Page＜＞(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…
阅读更多...
从零开始傅里叶变换

从零开始傅里叶变换

从零开始傅里叶变换 1 Overview2 傅里叶级数2.1 基向量2.2 三角函数系表示 f ( t ) f(t) f(t)2.2.1 三角函数系的正交性2.2.2 三角函数系的系数 2.3 复指数函数系表示 f ( t ) f(t) f(t)2.3.1 复指数函数系的系数2.3.2 复指数函数系的正交性 2.4 傅里叶级数总结 3 傅里叶变换…
阅读更多...
基于轻量级神经网络GhostNet开发构建CIFAR100数据集场景下的图像识别分析系统，对比不同分辨路尺度下模型的性能情况

基于轻量级神经网络GhostNet开发构建CIFAR100数据集场景下的图像识别分析系统，对比不同分辨路尺度下模型的性能情况

Cifar100数据集是一个经典的图像分类数据集&#xff0c;常用于计算机视觉领域的研究和算法测试。以下是关于Cifar100数据集的详细介绍&#xff1a; 数据集构成&#xff1a;Cifar100数据集包含60000张训练图像和10000张测试图像。其中&#xff0c;训练图像分为100个类别&#x…
阅读更多...
肯尼亚大坝决堤反思：强化大坝安全监测的必要性

肯尼亚大坝决堤反思：强化大坝安全监测的必要性

一、背景介绍 近日&#xff0c;肯尼亚发生了一起严重的大坝决堤事件。当地时间4月29日&#xff0c;肯尼亚内罗毕以北的一座大坝决堤&#xff0c;冲毁房屋和车辆。当地官员称&#xff0c;事故遇难人数已升至71人。这起事件再次提醒我们&#xff0c;大坝安全无小事&#xff0c;监…
阅读更多...
SpringMVC源码解读[1] -Spring MVC 环境搭建

SpringMVC源码解读[1] -Spring MVC 环境搭建

源码地址: https://github.com/chen-jiacheng/springmvc-quickstart 一、使用 IDEA 创建 Spring MVC 项目 直接创建项目即可 默认项目结构: springmvc-quickstart ├── pom.xml └── src├── main│ ├── java│ │ └── com│ │ └── chenjiache…
阅读更多...
微软开发者大会：编程进入自然语言时代、“AI员工”闪亮登场

微软开发者大会：编程进入自然语言时代、“AI员工”闪亮登场

当地时间周二&#xff0c;美国科技公司微软召开年度Build开发者大会。在CEO纳德拉的带领下&#xff0c;微软各个产品团队再一次展现出惊人的执行力&#xff0c;在发布会上又拿出了接近50个新产品或功能更新。 整场发布会持续了接近两个小时&#xff0c;在这里挑选了一些投资者…
阅读更多...
深度学习之基于YoloV5入侵检测系统

深度学习之基于YoloV5入侵检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。入侵检测系统&#xff08;IDS&#xff0…
阅读更多...
[图解]产品经理创新模式01物流变成信息流

[图解]产品经理创新模式01物流变成信息流

1 00:00:01,570 --> 00:00:04,120 有了现状的业务序列图 2 00:00:04,960 --> 00:00:08,490 我们就来改进我们的业务序列图了 3 00:00:08,580 --> 00:00:11,010 把我们要做的系统放进去&#xff0c;改进它 4 00:00:13,470 --> 00:00:15,260 怎么改进&#xff1f;…
阅读更多...
第五节 Starter 的加载全貌

第五节 Starter 的加载全貌

tips&#xff1a;下载源码&#xff0c;再结合本章内容&#xff0c;学习整个加载过程。 上一章&#xff0c;我们理解了 spring.factories 的触发时机&#xff0c;但放在 SpringBoot 的整个加载过程来讲&#xff0c;只能算部分。 而这一章&#xff0c;将从 SpringBoot 的加载全貌…
阅读更多...
Day 60 84.柱状图中最大的矩形

Day 60 84.柱状图中最大的矩形

柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 1 < heights.length <10^50 < heights[i] < 10^4 ​ 这道题很明显&…
阅读更多...
word自制书法字帖教程

word自制书法字帖教程

阅读更多...
x264码率控制基础

x264码率控制基础

x264码率控制模型 x264码率控制也是基于率失真模型即，D为失真，R为码率，为拉格朗日因子，当取值较大时，倾向于低码率高失真的情况；当取值较小时，倾向于高码率低失真的情况。由拉格朗日乘数法知， 参考[1], x264采用的是高码率下码率和失真之间的关系
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023