【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,一经查实,立即删除!

相关文章

突发!凌晨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…

vivado DIAGRAM、HW_AXI

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

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…

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常用设计方法 ①等价类划分 ②边界值分析 ③错误推…

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

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

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

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;答案>。 …

基本算法-枚举、模拟、递推(上)

目录 递归实现指数型枚举 题目描述 运行代码 代码思路 递归实现组合型枚举 题目描述 运行代码 代码思路 递归实现排列型枚举 题目描述 运行代码 代码思路 递归实现指数型枚举 题目描述 登录—专业IT笔试面试备考平台_牛客网 运行代码 #include<iostream> …

运动会信息管理系统(Springboot+MySQL)

本课题旨在实现对运动会信息的全面管理&#xff0c;提供用户友好的界面和高效的操作体验。系统的基础功能包括运动员报名比赛、比赛成绩查询、资讯留言等。为了确保系统的高扩展性和稳定性&#xff0c;选用主流的开发技术&#xff0c;实现规范的项目结构和高效的性能。 技术选型…

算法—字符串操作

394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string longestCommonPrefix(vector<string>& strs) { string retstrs[0];//***1***记得先要初始化ret&#xff0c;作为第一个比较值for(int i0;i<strs.size();i){retfoundcom…

鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 引言 当今信息技术领域日新月异&#xff0c;各种新技术和新平台层出不穷。鸿蒙&#xff08;HarmonyOS&#xff09;、Flutter、以及车载应用开发…

使用 Scapy 库编写 ICMP 不可达攻击脚本

一、介绍 ICMP不可达攻击是一种利用ICMP&#xff08;Internet Control Message Protocol&#xff09;不可达消息来干扰或中断目标系统的网络通信的攻击类型。通过发送伪造的ICMP不可达消息&#xff0c;攻击者可以诱使目标系统认为某些网络路径或主机不可达&#xff0c;从而导致…

前端开发高频面试题

好的&#xff0c;以下是对您提出的问题的详细回答&#xff1a; 说说vue动态权限绑定渲染列表&#xff08;权限列表渲染&#xff09; Vue中动态权限绑定渲染列表通常涉及以下步骤&#xff1a; 首先&#xff0c;通过API请求从服务器获取当前用户的权限数据。在Vue组件中&#xff…

Linux: ubi rootfs 故障案例 (1)

文章目录 1. 前言2. ubi rootfs 故障现场3. 故障分析与解决4. 参考资料 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. ubi rootfs 故障现场 问题故障内核日志如下&#xff1a; Starting ker…