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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

iptables练习题

iptables练习题

目录 练习题1. 显示当前的iptables规则2. 允许所有来自192.168.1.0/24的TCP流量到本机的22端口&#xff08;SSH&#xff09;3. 禁止所有来自10.0.0.0/8的ICMP流量4. 允许所有出站流量5. 拒绝所有来自外部的HTTP流量&#xff08;80端口&#xff0c;tcp协议&#xff09;6. 删除IN…
阅读更多...
设计模式19——观察者模式

设计模式19——观察者模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 观察者模式&#xff08;Observ…
阅读更多...
利用cherry pick巧妙地将某次提交单独合并到其他分支

利用cherry pick巧妙地将某次提交单独合并到其他分支

0. 引言 最近在进行系统的多版本并行开发&#xff0c;涉及一些共有基础功能提交时就遇到了麻烦&#xff0c;一份代码需要向多个版本分支进行同步&#xff0c;以保证多版本都能有更新该基础功能。 多次对比提交的方式显然会带来巨大的工作量。但实际上我们可以通过git的cherry…
阅读更多...
同时安装python2 和python3

同时安装python2 和python3

最近的项目因为工具的原因 需要同时安装python2 和python3 我又想学着使用python 写东西 导致遇到了很多问题 记录下来 1 同时安装 python2 和python 1.1 安装完把/确认 Path 环境变量里 同时有python2,python2\Scripts和python3 ,python3\Scripts四个环境变量 修改python3…
阅读更多...
IT人的拖延——渴望成功与害怕成功的矛盾

IT人的拖延——渴望成功与害怕成功的矛盾

很多人都以为&#xff0c;害怕失败是拖延的主要诱因&#xff0c;但其实“害怕成功”也是拖延的主要诱因之一。要说这个原因&#xff0c;我们不得不提起Bible中的一个人“约拿”&#xff0c;让我们先来看看他的故事带给我们什么启示。 约拿情结简介 约拿是Bible中的一名先知&a…
阅读更多...
hexo静态博客 部署到xxx.github.io github 静态页

hexo静态博客 部署到xxx.github.io github 静态页

hexo安装 npm install hexo-cli -g hexo init blog cd blog npm install hexo server key配置 ssh-keygen -t ed25519 -C “emaile.com” 添加key到github err gitgithub.com: Permission denied (publickey). fatal: Could not read from remote repository. 配置GitHub仓…
阅读更多...
go select

go select

select 是与 switch 相似的控制结构&#xff0c;与 switch 不同的是&#xff0c;select 中虽然也有多个 case&#xff0c;但是这些 case 中的表达式必须都是 channel 的收发操作。 select 能够让 goroutine 同时等待多个 channel 可读或者可写&#xff0c;在多个 channel 状态改…
阅读更多...
【Python】 用Python的Pandas库美化打印Series和DataFrame

【Python】 用Python的Pandas库美化打印Series和DataFrame

基本原理 在Python的数据分析领域&#xff0c;Pandas是一个非常重要的库。它提供了丰富的数据结构和数据分析工具&#xff0c;使得处理大型数据集变得简单高效。当你使用Pandas处理数据时&#xff0c;经常需要查看数据的预览&#xff0c;这时候美化打印&#xff08;Pretty-pri…
阅读更多...
5、xss-labs之level6

5、xss-labs之level6

一、level6-----大小写绕过 1、测试分析 测试了之前用过的payload&#xff0c;发现都不行&#xff0c;并且level4使用的Java伪协议也不行&#xff0c;可以得出<>、script、onclick都被过滤 2、构造payload 因为href被过滤&#xff0c;可以试一下大写HREF 初试payload…
阅读更多...
Android应用开发之AndroidManifest.xml

Android应用开发之AndroidManifest.xml

一.AndroidManifest.xml介绍 1.定义 AndroidManifest官方解释是应用清单&#xff08;manifest意思是货单&#xff09;&#xff0c;每个应用的根目录中都必须包含一个&#xff0c;并且文件名必须一模一样。 它是Android程序的全局配置文件&#xff0c;是每个 android程序中必须…
阅读更多...
linux 定时执行shell、python脚本

linux 定时执行shell、python脚本

在linux里设置定时执行一般是用crontab&#xff0c;如果没有的话&#xff0c;可以先安装&#xff1a; 安装 查看是否安装 cron -v # 对于基于Debian的系统&#xff08;如Ubuntu&#xff09; sudo apt-get install cron# 对于基于RedHat的系统&#xff08;如CentOS&#xff…
阅读更多...
selenium学习笔记

selenium学习笔记

什么是selenium 比较官方的解释 Selenium是一个自动化测试工具&#xff0c;用于在Web应用程序中模拟用户操作。它提供了一组API&#xff0c;可以通过编程方式控制浏览器&#xff0c;并模拟用户的交互行为&#xff0c;例如点击、输入文本和导航等。Selenium支持多种编程语言&a…
阅读更多...
论文阅读 - TIME-LLM: TIME SERIES FORECASTING BY REPROGRAMMING LARGE LANGUAGE MODELS

论文阅读 - TIME-LLM: TIME SERIES FORECASTING BY REPROGRAMMING LARGE LANGUAGE MODELS

论文链接&#xff1a; https://arxiv.org/abs/2310.01728 目录 摘要 1 INTRODUCTION 2 RELATED WORK 3 METHODOLOGY 3.1 MODEL STRUCTURE 4 MAIN RESULTS 4.1 长期预测 4.2 短期预测 4.3 FEW-SHOT FORECASTING 5 CONCLUSION AND FUTURE WORK 摘要 动机&#xff1a; 时…
阅读更多...
黎加厚教授：生成式人工智能对课程教材教法的影响

黎加厚教授：生成式人工智能对课程教材教法的影响

01 生成式人工智能与过去的信息技术有哪些不一样的地方 2023年&#xff0c;生成式人工智能&#xff08;GenAI&#xff09;犹如百年惊雷&#xff0c;改变了我对计算机的认识。最先让我折服的是AI绘画&#xff0c;我只需要把心中想象的场景用提示词详细描述&#xff0c;立刻就生…
阅读更多...
VS code 无法go to以及全局搜索不到问题

VS code 无法go to以及全局搜索不到问题

一、无法goto问题 需要安装插件C/C。 安装完成后&#xff0c;检查设置是否生效。步骤如下&#xff1a; 1. 点开设置&#xff1a; 2. 搜索c/c查找引擎&#xff0c;确认其为默认值&#xff0c;即可。 二、全局搜索不到 VS code有时候全局搜索内容&#xff0c;搜索不到或者搜索…
阅读更多...
基于51单片机的汽车智能灯光控制系统

基于51单片机的汽车智能灯光控制系统

一.硬件方案 本设计硬件部分&#xff0c;中央处理器采用了STC89C52RC单片机&#xff0c;另外使用两个灯珠代表远近光灯&#xff0c;感光部分采用了光敏电阻&#xff0c;因为光敏电阻输出的是电压模拟信号&#xff0c;单片机不能直接处理模拟信号&#xff0c;所以经过ADC0832进…
阅读更多...
C语⾔：内存函数

C语⾔：内存函数

1. memcpy使⽤和模拟实现&#xff08;对内存块的复制&#xff0c;不在乎类型&#xff09; void * memcpy ( void * destination, const void * source, size_t num ); • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇…
阅读更多...
卷积神经网络实现手写数字识别 pytorch

卷积神经网络实现手写数字识别 pytorch

卷积神经网络实现手写数字识别 导入相关的库 import torch import torch.nn as nn from torch.autograd import Variable import torch.utils.data as Data import torchvision import matplotlib.pyplot as plt设置相应的超参数 EPOCH1 BATCH_SIZE50 LR0.001 DOWNLOAD_MNIS…
阅读更多...
将 KNX 接入 Home Assistant 之二 准备软件

将 KNX 接入 Home Assistant 之二 准备软件

写在前面&#xff1a; 在KNX官网也有关于 Home Assistant 的教程&#xff0c;地址是 Get started with Home Assistant x KNX 需要的东西是 a KNX IP Interface or Routera Raspberry Pian SD Card at least 32 GB 安装 Home Assistant 系统 下载镜像&#xff1a; 地址&…
阅读更多...
网络原理-HTTPS协议

网络原理-HTTPS协议

在前面说到HTTP中,我们通过抓包,可以看到许多信息内容,其中往往会包含一些敏感信息,这些都是明文传输,当我们的请求被黑客或者不法分子截获后,那就很危险了,因此衍生出了HTTPS协议来对传输数据进行加密。 一、加密原理 基本原理如下&#xff1a; 明文 密钥 > 密文 密文…
阅读更多...
最新文章

Copyright @ 2022~2023