【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.mfbz.cn/a/691219.html

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

相关文章

Redis 实现持久化

Redis ⽀持 RDB ( 定期备份 ) 和 AOF ( 实时备份 ) 和 混合持久化 (结合RDB 和 AOF 的特点) 持久化机制&#xff0c;持久化功能有效地避免因进程退出造成数据丢失问题&#xff0c; 当下次重启时利⽤之前持久化的⽂件即可实现数据恢复。 RDB&#xff08;Redis DataBase&#xff…

网络编程之XDP技术介绍

一、简介 XDP&#xff1a;eXpress Data Path&#xff0c;快速数据面&#xff0c;听名字是不是很高大上。其实它就是一个快速处理Rx数据包的数据面技术。为什么现在对数据处理如此敏感&#xff1f;原因非常简单&#xff0c;随着网络的不断覆盖社会的各个层面&#xff0c;海量的…

手撕C语言题典——相交链表

目录 前言 一&#xff0c;思路 1&#xff09;暴力 2)同步指针 二&#xff0c;代码实现 前言 依旧是力扣上的一道题&#xff0c;有许多新思路提供给我们 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/intersection-of-two-linked-li…

烧写uboot、linux镜像、根文件系统到开发板

烧写uboot、linux镜像、根文件系统到开发板 环境介绍 本博客使用x6818开发板。 公司&#xff1a;三星 ARM架构 Cortex-A53核 型号&#xff1a;S5P6818 特性&#xff1a;8核&#xff0c;最高主频2GHz 烧写uboot 使用网络烧写 网络烧写上位机是Ubuntu虚拟机。 先利用上…

运 算 符

算术运算符 算术运算符包括&#xff1a;&#xff0c;-&#xff0c;*&#xff0c;/&#xff0c;%&#xff0c;&#xff0c;-- 当左右两边都是数值型时&#xff0c;则做加法运算。 当左右两边有一方为字符串&#xff0c;则做拼接运算。任何一个 Java 对象都可以转换为字符串。 …

【Python】 闭包

什么是闭包 用一句话粗略概况为&#xff1a;在一个函数内&#xff0c;读取外部函数定义的变量的机制。更一般地说&#xff0c;闭包函数是带有状态的函数&#xff0c;状态是指调用环境的上下文&#xff0c;当函数带上了状态就是闭包。 如下代码&#xff0c;在函数f内定义了一个…

pyinstall 打包 paddleocr 成为.exe文件步骤

一、首先进入虚拟环境 使用pip安装pyinstaller pip install pyinstaller我的已经安装完成 二、用cmd进入当前打包文件夹下&#xff0c;新建使spec文件内容如下 注意&#xff1a;其中需要修改的部分是pathex中文件所在路径文件内容摘抄自另一篇博文(❄点击可查看❄) # -*- m…

pytorch 加权CE_loss实现(语义分割中的类不平衡使用)

加权CE_loss和BCE_loss稍有不同 1.标签为long类型&#xff0c;BCE标签为float类型 2.当reduction为mean时计算每个像素点的损失的平均&#xff0c;BCE除以像素数得到平均值&#xff0c;CE除以像素对应的权重之和得到平均值。 参数配置torch.nn.CrossEntropyLoss(weightNone,…

2024 cicsn ezbuf

文章目录 参考protobuf逆向学习复原结构思路exp 参考 https://www.y4ng.cn/posts/pwn/protobuf/#ciscn-2024-ezbuf protobuf 当时压根不知道用了protobuf这个玩意&#xff0c;提取工具也没提取出来&#xff0c;还是做题做太少了&#xff0c;很多关键性的结构都没看出来是pro…

Vue的基础知识:v-model的原理,由:value与@input合写。

原理&#xff1a;v-model本质上是一个语法糖&#xff0c;比如应用在输入框上&#xff0c;就是value属性和input事件的合写。&#xff08;补充说明&#xff1a;语法糖就是语法的简写&#xff09; 作用&#xff1a;提供数据的双向绑定 1.数据变&#xff0c;视图&#xff08;也就…

spring-kafka-生产者服务搭建测试(SpringBoot整合Kafka)

文章目录 1、生产者服务搭建1.1、引入spring-kafka依赖1.2、application.yml配置----v1版1.3、使用Java代码创建主题分区副本1.4、发送消息 1、生产者服务搭建 1.1、引入spring-kafka依赖 <?xml version"1.0" encoding"UTF-8"?> <project xml…

王学岗鸿蒙开发(北向)——————(七)ArkUi的各种装饰器

arts包含如下&#xff1a;1&#xff0c;装饰器 &#xff1b;2&#xff0c;组件的描述(build函数)&#xff1b;3&#xff0c;自定义组件(Component修饰的),是可复用的单元&#xff1b;4&#xff0c;系统的组件(鸿蒙官方提供)&#xff1b;等 装饰器的作用:装饰类、变量、方法、结…

【Qt】Frame和Widget的区别

1. 这两个伙计有啥区别&#xff1f; 2. 区别 2.1 Frame继承自Widget&#xff0c;多了一些专有的功能 Frame Widget 2.2 Frame可以设置边框

【Python列表解锁】:掌握序列精髓,驾驭动态数据集合

文章目录 &#x1f680;一、列表&#x1f308;二、常规操作&#x1f4a5;增&#x1f4a5;删&#x1f4a5;改&#x1f4a5;查 ⭐三、补充操作 &#x1f680;一、列表 列表是一个能够存储多个同一或不同元素的序列 列表&#xff1a;list ---- [] 列表属于序列类型&#xff08;容器…

Unity2D游戏制作入门 | 09(之人物动画制作)

上期链接&#xff1a;Unity2D游戏制作入门 | 08-CSDN博客 人物走路动画逻辑补充&#xff08;该帖没有的内容&#xff0c;我给补充了请先看完这帖&#xff0c;再去看补充&#xff09;&#xff1a;人物按下shifit走路动画设定09&#xff08;第九期先行补充&#xff09; 上期我们…

汇编语言(keil)

1、读内存&#xff1a;Load LDR R0,[R1,#4]; 读地址“R14”&#xff0c;得到的4字节数据存入R0。 2、写内存&#xff1a;Stroe STR R0,[R1,#4]; 把R0的4字节数据写入地址“R14”。 3、加减 ADD R0,R1,R2; R0R1R2 ADD R0,R0,#1; R0R01 SUB R0,R1,R2; R0R1-R…

GiantPandaCV | 提升分类模型acc(一):BatchSizeLARS

本文来源公众号“GiantPandaCV”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;提升分类模型acc(一)&#xff1a;BatchSize&LARS 在使用大的bs训练情况下&#xff0c;会对精度有一定程度的损失&#xff0c;本文探讨了训练的b…

【CS.SE】端午节特辑:Docker容器化技术详解与实战

端午节, 先祝愿大家端午安康&#xff0c;阖家幸福, 哈哈&#xff01;这篇讲下Docker这一现代软件开发中不可或缺的技术。软件工程涉及软件开发的整个生命周期&#xff0c;包括需求分析、设计、构建、测试、部署和维护。Docker作为一种容器化技术&#xff0c;直接关联到软件部署…

WWDC 2024前瞻:苹果如何用AI技术重塑iOS 18和Siri

苹果下周的全球开发者大会有望成为这家 iPhone 制造商历史上的关键时刻。在 WWDC 上&#xff0c;这家库比蒂诺科技巨头将展示如何选择将人工智能技术集成到其设备和软件中&#xff0c;包括通过与 OpenAI 的历史性合作伙伴关系。随着重大事件的临近&#xff0c;有关 iOS 18 及其…

uniapp引入uview无代码提示

前提安装正确&#xff1a; 无论是基于npm和Hbuilder X方式安装&#xff0c;一定要配置正确。 解决办法 以前在pages.json里面的写法&#xff1a; "easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }但是现在hbuilderx要求规范ea…