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

news2024/11/25 4:44:59

浏览器能识别的标签

编码

<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.coloradmin.cn/o/1803829.html

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

相关文章

ChatTTS增强版V2,批量导出srt,语速控制,情感控制,支持朗读数字,问题修复

ChatTTS增强版最新版本已经发布&#xff0c;本次更新我主要增加了多文本批量、SRT导出、语速控制、情感控制、停顿控制等新功能&#xff0c;并针对上一版本中存在的数字读音异常、随机uv_break等问题进行了修复。 视频版本 【ChatTTS增强版V2&#xff0c;批量导出srt&#xff…

【计算视觉】学习计算机视觉你不得不膜拜的CVPR大神:何凯明

目录 第一章&#xff1a;CVPR——计算机视觉的终极擂台 第二章&#xff1a;何凯明——计算机视觉领域的耀眼星辰 第三章&#xff1a;高引用论文——计算机视觉研究的璀璨星辰 第四章&#xff1a;何凯明的CVPR论文——深度学习的探索之旅 第五章&#xff1a;结语——向何凯…

网页文档下载不了怎么办 网页文档下载方法

一个方法&#xff0c;搞定所有网页文档下载。如果你也需要从网页下载各种文档&#xff0c;那么本文一定可以帮到你。无须充值会员&#xff0c;各大平台文档下到爽。看到就是赚到&#xff0c;还不赶快学起来。有关网页文档下载不了怎么办&#xff0c;网页文档下载方法的问题&…

Java中的IO流字节流(FileOutputStream与FileInputStream)+编码与解码

目录 ​编辑 IO流 File0utputstream FileOutputstream写数据的3种方式 void write(int b) 一次写一个字节数据 void write(byte[] b) 一次写一个字节数组数据 void write(byte[] b,int off,int len) 一次写一个字节数组的部分数据 FileOutputstream写数据的…

MathType 7.8最新版核心功能特性 及免费汉化版安装包下载地址

大家好&#xff01;今天我要给大家种草一个非常实用的数学公式编辑器——MathType 7.8&#xff01;作为一名软件评测专家&#xff0c;我对这款软件进行了详细的测试和试用&#xff0c;下面来给大家分享一下我的使用体验。 我们来说说MathType 7.8的核心特性吧&#xff01;它是一…

智能网联汽车信息安全风险识别与应对策略研究综述

摘要&#xff1a;随着智能网联汽车技术的飞速发展&#xff0c;其信息安全问题逐渐成为公众关注的焦点。本文概述了智能网联汽车技术的发展背景和信息安全风险的来源&#xff0c;采用STRIDE威胁分析方法对智能网联汽车的四层模型进行风险识别&#xff0c;进一步探讨了抗女巫攻击…

进口电动流量调节阀的选型-美国品牌

进口电动流量调节阀的选型需要综合考虑多个因素&#xff0c;以确保所选阀门能够满足实际应用需求。以下是选型时需要考虑的主要方面&#xff1a; 一、明确应用需求 工作介质&#xff1a;了解介质的性质&#xff0c;包括流体类型、温度、压力以及是否具有腐蚀性或特殊性质。流…

6.7.11 一种新的迁移学习方法可提高乳房 X 线摄影筛查中乳腺癌的诊断率

分割是一种将图像分割成离散区域的技术&#xff0c;以便将感兴趣的对象与周围环境分开。为了制定治疗计划&#xff0c;分割可以帮助医生测量乳房中的组织量。 二元分类问题的目的是将输入数据分为两组互斥的数据。在这种情况下&#xff0c;训练数据根据要解决的问题以二进制格…

基于JSP技术的网络视频播放器

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员界面 用户界…

2024年G3锅炉水处理证考试题库及G3锅炉水处理试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年G3锅炉水处理证考试题库及G3锅炉水处理试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大纲随机…

大模型管理工具Ollama搭建及整合springboot

目录 一、Ollama介绍 1.1 什么是Ollama 1.2 Ollama特点与优势 二、Ollama本地部署 2.1 版本选择 2.2 下载安装包 2.3 执行安装 2.4 Ollama常用命令 三、使用Ollama部署千问大模型 3.1 千问大模型介绍 3.2 部署过程 四、springboot接入Ollama 4.1 引入Ollama依赖 4…

最小栈、栈的弹出(C++)

1.最小栈 思路分析&#xff1a; 代码&#xff1a; class MinStack { public:MinStack() {}void push(int val) {st.push(val);//两种情况需要更新最小值//1.最小栈为空(就是存最小值的那个栈)//2.插入的值小于或等于最小栈的栈顶元素if(minstack.empty()||minstack.top()>…

将10个整数按由小到大的顺序排列

在之前的文章中介绍过可以用数组名作函数的参数&#xff0c;并多次强调&#xff1a;数组名代表数组首元素的地址。用数组名作函数的参数&#xff0c;传递的是数组首元素的地址。很容易推想&#xff1a;用指针变量作函数形参&#xff0c;同样可以接收从实参传递来的数组首元素的…

Tongweb7重置密码优化版*(by lqw )

如图所示&#xff0c;输入初始密码是会报错的&#xff0c;说明已经修改了密码 首先我们先备份一下tongweb的安装目录&#xff0c;避免因为修改过程中出现的差错而导致tongweb无法启动&#xff1a; 备份好了之后&#xff0c;我们关闭掉tongweb。 方式一&#xff1a; Cd 到tong…

C盘满了怎么办,Windows11的C盘没有磁盘清理选项怎么办,一次搞定

问题&#xff1a; 太久没清电脑了&#xff0c;满的跟垃圾堆一样。。。C盘红色看上去很不妙。 一. C盘满了怎么办&#xff1a; 1. 删除临时文件 找到 C:\Windows\Temp&#xff0c;进入Temp资料夹&#xff0c;选中所有文件夹和文件&#xff0c;按下ShiftDelete键&#xff0c;彻…

推荐系统三十六式学习笔记:原理篇.内容推荐05|从文本到用户画像有多远?

目录 从文本开始构建用户画像一、结构化文本1、TF-IDF2、TextRank3、内容分类&#xff1a;4、实体识别5、聚类6、词嵌入 二、标签选择1、卡方检验2、信息增益 总结 对于一个早期的推荐系统来说&#xff0c;基于内容推荐离不开用户构建一个初级的画像&#xff0c;这种初级的画像…

攻防世界---misc---小小的PDF

1、题目描述&#xff0c;下载附件是一个PDF&#xff0c;打开之后是这样&#xff0c;有两页PDF 2、用winhex分析&#xff0c;没有发现奇怪的地方 3、在kali中binwalk发现有多张照片 4、接着使用foremost将图片分离出来&#xff0c; 5、得到3张图片&#xff0c;打开第3张图片&am…

数字滤波器和模拟滤波器(一)

模拟滤波器和数字滤波器&#xff08;一&#xff09; 下面介绍模拟滤波器和数字滤波器的频率响应的异同&#xff0c;以及如何使用python地scipy.signal来绘制其频谱响应和冲激阶跃响应。在第二期将谈到如何设计模拟滤波器和数字滤波器。 在正文之间&#xff0c;应该介绍连续时…

Spark 性能调优——分布式计算

前言 分布式计算的精髓&#xff0c;在于如何把抽象的计算流图&#xff0c;转化为实实在在的分布式计算任务&#xff0c;然后以并行计算的方式交付执行。今天这一讲&#xff0c;我们就来聊一聊&#xff0c;Spark 是如何实现分布式计算的。分布式计算的实现&#xff0c;离不开两个…

Shell脚本学习_字符串变量

目录 1.Shell字符串变量&#xff1a;格式介绍 2.Shell字符串变量&#xff1a;拼接 3.Shell字符串变量&#xff1a;字符串截取 4.Shell索引数组变量&#xff1a;定义-获取-拼接-删除 1.Shell字符串变量&#xff1a;格式介绍 1、目标&#xff1a; 能够使用字符串的三种方式 …