【web前端开发】标签(基础知识详解)

浏览器能识别的标签

编码

<meta charset="UTF-8">

title

<title>helloshh</title>

标题

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

div和span

div,一个占一整行

<div>山东</div>
<div>安徽</div>

span,自己有多大占多少。【行内标签,内联标签】

<span>山东</span>
<span>安徽</span>(中间会有一个小空格)

<span>山东</span><span>安徽</span>(这样就没有小空格)

超链接

跳转到其他网站
<a href="https://www.baidu.com/">点击跳转</a>

跳转到自己网站

<a href="http://127.0.0.1:5000/show/info">自己网站</a>

或者:

<a href="/show/info">自己网站</a>

图片

<img style="height: 200px;width: 300px"   src="/static/QQ图片.jpg" alt="">

将图片放到static目录下

宽度和高度的设置:   style="height: 200px;width: 300px"

小结:

划分:

块内标签:

        <h1></h1>

        <div></div>

行内标签:

        <span></span>

        <a></a>

        <img />

嵌套:

<body><h1>商品列表</h1><a href="https://www.baidu.com/" target="_blank"><img src="/static/QQ图片.jpg" style="width: 150px"></a><a href="https://finance.sina.com.cn/stock/relnews/2024-06-08/doc-inaxyrte3372187.shtml"><img src="/static/R-C.jpg" style="width: 150px"></a><a href="https://www.jd.com/"><img src="/static/R-C2.jpg" style="width: 150px"></a>
</body>

target="_blank"会新增加一个页面跳转,而不是在当前页面跳转:

如果不加这个:【在当前页面跳转】

 

列表标签

【ul 是无序的列表】
<ul><li>移动</li><li>联通</li><li>电信</li>
</ul>

【ol  是有序的列表】

<ol><li>移动</li><li>联通</li><li>电信</li>
</ol>

表格标签

<table><thead><tr>    <th>ID</th> <th>姓名</th> <th>年龄</th>     </tr></thead><tbody><tr>    <td>10</td> <td>shh</td> <td>18</td>    </tr><tr>    <td>11</td> <td>ww</td> <td>20</td>    </tr><tr>    <td>12</td> <td>ll</td> <td>17</td>    </tr><tr>    <td>13</td> <td>xx</td> <td>119</td>    </tr></tbody>
</table>

如果加上边框:

<table border="1">

表单标签

<body><h1>商品列表</h1><table><thead><tr><th>ID</th><th>头像</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td><img src="/static/R-C.jpg" height="100px"></td><td>shh</td><td>18</td></tr><tr><td>2</td><td><img src="/static/R-C2.jpg" height="100px"></td><td>xx</td><td>20</td></tr></tbody></table>
</body>

inout系列

输入文本
<h1>输入框</h1>
<input type="text">

输入密码 
<h1>输入框</h1>
<input type="text">
<input type="password">

选择文件
<h1>输入框</h1>
<input type="text">
<input type="password">
<input type="file">

单选框
<h1>输入框</h1>
<input type="text">
<input type="password">
<input type="file">
<input type="radio" name="n1"> 男
<input type="radio" name="n1"> 女

【注意:】'name'可以随便取,但是这两个‘name’要相等,要么都等于‘n1’,要么都等于‘n2'

复选框

【可以选择多个,不用设置互斥】

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

按钮
<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox">羽毛球
<input type="checkbox">乒乓球<input type="button" value="提交">

<input type="button" value="提交">  ---->普通按钮
<input type="submit" value="提交">  ---->提交表单

下拉框

单选

<select><option>北京</option><option>上海</option><option>深圳</option>
</select>

多选【multiple】

<select multiple><option>北京</option><option>上海</option><option>深圳</option>
</select>

多行文本

<h1>多行文本</h1>
<textarea rows="3"></textarea>

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

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

相关文章

【Mtk Camera开发学习】01 MTK 平台Camera BringUp

本专栏内容针对 “知识星球”成员免费&#xff0c;欢迎关注公众号&#xff1a;小驰行动派&#xff0c;加入知识星球。 #MTK Camera开发学习系列 #小驰私房菜 这篇文章主要介绍MTK 平台&#xff0c;Camera BringUp会涉及到修改的模块。 MTK不同的平台系列&#xff0c;具体修改…

mysql order by后跟case when

在SQL中&#xff0c;ORDER BY子句用于对查询结果进行排序。当在ORDER BY后面使用CASE语句时&#xff0c;它的原理是&#xff1a;根据CASE语句中定义的条件和结果&#xff0c;为查询结果集中的每一行生成一个临时的排序值。然后&#xff0c;根据这些排序值对结果集进行排序。 具…

突发!凌晨4点某制造业大厂国产数据库集群故障...

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…

GIT生成SSH公钥图文教程

参考&#xff1a;GIT生成SSH公钥图文教程-CSDN博客 这样做好之后&#xff0c;如果要在D盘目录下载代码&#xff0c;则把id_rsa和id_rsa.pub拷贝到对应目录下 不能使用ToitoiseGit下载代码&#xff0c;只能使用Git Bash下载文件 git clone ssh://xxx.git

vivado DIAGRAM、HW_AXI

图表 描述 块设计&#xff08;.bd&#xff09;是在IP中创建的互连IP核的复杂系统 Vivado设计套件的集成商。Vivado IP集成器可让您创建复杂的 通过实例化和互连Vivado IP目录中的IP进行系统设计。一块 设计是一种分层设计&#xff0c;可以写入磁盘上的文件&#xff08;.bd&…

深入解析Kafka消息传递的可靠性保证机制

深入解析Kafka消息传递的可靠性保证机制 Kafka在设计上提供了不同层次的消息传递保证&#xff0c;包括at most once&#xff08;至多一次&#xff09;、at least once&#xff08;至少一次&#xff09;和exactly once&#xff08;精确一次&#xff09;。每种保证通过不同的机制…

AI绘画中的图像格式技术

在数字艺术的广阔天地里&#xff0c;AI绘画作为一种新兴的艺术形式&#xff0c;正在逐渐占据一席之地。不同于传统绘画&#xff0c;AI绘画依赖于复杂的算法和机器学习模型来生成图像&#xff0c;而这一切的背后&#xff0c;图像格式技术发挥着至关重要的作用。图像格式不仅关系…

量化视频1---qmt实盘交易链接,提供源代码

量化视频1---qmt实盘交易链接&#xff0c;提供源代码 量化视频1---qmt实盘交易链接&#xff0c;提供源代码 (qq.com) 源代码 from qmt_trader.qmt_trader import qmt_tradertraderqmt_trader(path rD:/国金QMT交易端模拟/userdata_mini, session_id 123456…

在Java、Java Web中放置图片、视频、音频、图像文件的方法

在Java软件中放置图片&#xff0c;通常涉及将图片文件&#xff08;如JPEG、PNG等&#xff09;作为资源包含在我们的项目中&#xff0c;并在代码中通过适当的方式引用这些资源。这可以通过多种方式实现&#xff0c;但最常见的是在Java桌面应用&#xff08;如Swing或JavaFX&#…

CTF Show MISC做题笔记

MISCX 30 题目压缩包为misc2.rar,其中包含三个文件:misc1.zip, flag.txt, hint.txt。其中后两个文件是加密的。 先解压出misc1.zip, 发现其中包含两个文件&#xff1a;misc.png和music.doc。其中后面文件是加密的。 解压出misc.png,发现图片尾部有消息&#xff1a;flag{flag…

最新区块链论文速读--CCF A会议 CCS 2023 共25篇 附pdf下载(2/4)

Conference&#xff1a;ACM Conference on Computer and Communications Security (CCS) CCF level&#xff1a;CCF A Categories&#xff1a;network and information security Year&#xff1a;2023 Num&#xff1a;25 第1~7篇区块链文章请点击此处查看上篇 8 Title: P…

【C/C++】IO流

目录 前言&#xff1a; 一&#xff0c;C语言的I/O流 二&#xff0c;C的I/O流 2-1&#xff0c;C标准IO流 2-2&#xff0c;IO流的连续输入 前言&#xff1a; “流”即是流动的意思&#xff0c;是物质从一处向另一处流动的过程&#xff0c;是对一种有序连续且具有方向性的数据…

测试基础11:测试用例设计方法-等价类划分

课程大纲 1、概述 1.1测试用例设计方法意义 穷举测试&#xff1a;每种输入都测一次。最完备&#xff0c;但不现实。 使用设计方法&#xff0c;用最少的数据&#xff08;成本&#xff09;&#xff0c;实现最大的测试覆盖。 1.2常用设计方法 ①等价类划分 ②边界值分析 ③错误推…

Python采集东方财富网股票数据建立LSTM模型预测

Python采集东方财富网股票数据建立LSTM模型预测 一、数据爬取流程二、爬虫完整代码三、LSTM模型建模预测3.1 项目背景3.2 建模预测流程3.3 数据预处理3.4 数据可视化3.5 特征工程3.6 数据缩放3.7 数据转换3.8 模型创建3.9 评价模型3.10 可视化结果3.11 总结一、数据爬取流程 先…

运维开发(DevOps):加速软件交付的关键方法

1. 什么是运维开发 运维开发&#xff08;DevOps&#xff09;是将软件开发&#xff08;Development&#xff09;与信息技术运维&#xff08;Operations&#xff09;的流程整合在一起的实践方法。DevOps的目标是通过增强开发和运维团队之间的协作&#xff0c;提高软件产品的发布…

Linux路由设置

添加路由 一&#xff1a;使用 route 命令添加 使用route 命令添加的路由&#xff0c;机器重启或者网卡重启后路由就失效了&#xff0c;方法&#xff1a; //添加到主机的路由 # route add –host 192.168.1.11 dev eth0 # route add –host 192.168.1.12 gw 192.168.1.1 //添…

【计算机视觉】数字图像处理基础:以像素为单位的图像基本运算(点运算、代数运算、逻辑运算、几何运算、插值)

0、前言 在上篇文章中&#xff0c;我们对什么是数字图像、以及数字图像的组成&#xff08;离散的像素点&#xff09;进行了讲解&#x1f517;【计算机视觉】数字图像处理基础知识&#xff1a;模拟和数字图像、采样量化、像素的基本关系、灰度直方图、图像的分类。 我们知道&a…

【ARM Cache 与 MMU 系列文章 7.3 – ARMv8/v9 MMU 块描述符与页表描述符】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 上篇文章&#xff1a;【ARM Cache 系列文章 7.2 – ARMv8/v9 MMU 页表配置详细介绍 03 】 文章目录 MMU 块描述符与页描述符Block DescriptorBlock descriptor formatsBlock Entry 介绍Block En…

Linux驱动应用编程(四)IIC(获取BMP180温度/压力数据)

本文目录 一、基础1. 查看开发板手册&#xff0c;获取可用IIC总线2. 挂载从机&#xff0c;查看从机地址。3. 查看BMP180手册&#xff0c;使用命令读/写某寄存器值。4. 查看BMP180手册通信流程。 二、IIC常用API1. iic数据包/报2. ioctl函数 三、数据包如何被处理四、代码编写流…

transformers 阅读:BERT 模型

前言 想深入理解 BERT 模型&#xff0c;在阅读 transformers 库同时记录一下。 笔者小白&#xff0c;错误的地方请不吝指出。 Embedding 为了使 BERT 能处理大量下游任务&#xff0c;它的输入可以明确表示单一句子或句子对&#xff0c;例如<问题&#xff0c;答案>。 …