前端知识与基础应用#2

标签的分类

关于标签我们可以分为 ：

单标签：img, br hr

双标签：a，h,div

按照属性可分为：

块儿标签（自己独自占一行）：h1-h6, p,div

行内（内联）标签（自身多大就占多少）：a, span,u,i,b

当我们输入h标签和a标签时可以看到

我们所输入的结果是这样的，其实这就是块儿标签和行内标签的区别

div标签和span标签

div和span标签单独拿出来是没有任何意义的，主要的作用是页面布局，在布局当中

div的作用是占位置布局

span是文本布局

标签的嵌套

标签之间是可以互相嵌套的，块儿级元素是可以嵌套所有的标签，要注意的是p标签不能嵌套块儿级元素，但是可以 嵌套行内元素

行内元素只能嵌套行内元素，不能嵌套块儿级元素

针对前端来说不会轻易的报错，如果我们写的不对，只会没有对应的效果

例：

我们以小米商城为例：在小米商城中可以发现这些都是使用div用来占位的，而span是文本占位

并且使用了标签的嵌套。

img标签

关键字 src

img标签是展示图片的 ，如果width设置了width=“500px” height=“200”，如果不一致则会出现变形失真，所以一般情况下只写一个就行。

当图片损坏时，在alt中填写内容时会发现

我们也可以不使用外链，使用本地的图片

这样就出来了

当地址文件不在当前文件夹内时，我们可以使用

如果在上一级时，也可以使用

总结：src：

1. 可以使用外链的地址

2。 可以使用本地的地址

title：
    鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度

alt：当图片不存在的时候，显示的内容

a标签

关键字 href

target 后面如果是_self 自己直接跳转到页面了，但是如果是_blank 则会新建页面然后跳转

标签自带的两种属性

id  值：一个文本中只能有唯一的id值，id值不能重复

class 值：一个标签可以有多个class值，一个class值可以被多个标签使用

当我们使用标签c1来找，可以找到d1，d3 和d4.想要使用id值，必须使用#查找

想要使用class值时使用点（.查找）

<div id="d1" class="c1"></div>
<div id="d2" class="c2"></div>
<div id="d3" class="c1 c2 c3"></div>
<div id="d4" class="c1"></div>

列表

关键字<ul>

无序列表

<body>
<ul><li>第一个</li><li>第二个</li><li>第三个</li>
</ul></body>

可以更改上面的符号

<body>
<ul type="circle"><li>第一个</li><li>第二个</li><li>第三个</li>
</ul></body>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）
有序列表

关键字：<ol><ol>

区别就是加上了序号，使用type可以更改

<ol type="I"><li>第一个</li><li>第二个</li><li>第三个</li>
</ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

标题列表

关键字<dl>

  </ol><dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容2</dd></dl>
</body>

表格

添加多行数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="2"><thead><tr><th>id</th><th>name</th><th>age</th><th>gender</th><th>salary</th></tr></thead><tbody><tr><td>1</td><td>kiki</td><td>21</td><td>female</td><td>22222</td></tr><tr><td>2</td><td>kiki1</td><td>22</td><td>male</td><td>12222</td></tr> <tr><td>3</td><td>lll</td><td>25</td><td>female</td><td>22242</td></tr></tbody>
</table></body>
</html>

加上边框结果<table 属性>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

form表单标签

input加上属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="">
<!--  使用div或p都可以--><div>
<!--    <lable for=""></lable>点击后直接选中填写，绑定id值--><label for="1">账号:<input type="text" id="1"></label></div><div><label for="2">
<!--      type=password：所填密码使用密文显示-->密码：<input type="password" id="2"></label><p><label for="3">
<!--      type=date：表示日期-->日期：<input type="date" id="3"></label></p><p><lable>这是按钮：<input type="button" value="普通按钮"></lable></p><p>
<!--      添加复选(多选)--><input type="checkbox"> 读书<input type="checkbox"> 游戏<input type="checkbox"> 足球</p><p>
<!--      添加单选，需要id一致--><input type="radio" name="gender" /> 男<input type="radio" name="gender" /> 女<input type="radio" name="gender" /> 未知</p><p><input type="submit" value="登录"><input type="reset">
<!--      选择单个文件-->
<!--      <input type="file">-->
<!--      选择多个文件--><input type="file"multiple></p><p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p></div></form>
</body>
</html>

结果：

<input> 元素会根据不同的 type 属性，变化为多种形态

属性说明:

  • name：表单提交时的“键”，注意和id的区别
  • value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用

select标签
<p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">安徽</option></select></p>

属性：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

验证form表单朝后端提交数据

!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index">
<!--  使用div或p都可以--><div>

后端：

from flask import Flask,request
app = Flask(__name__)#路由：网络的路径
@app.route('/index',methods=['GET','POST'])    # 默认情况下只允许get提交加上methods=['GET', 'POST']
def index():print('sasas')print(request.form)    # 接受post提交过来的数据print(request.files)   # 接受文件的return'index'
app.run(

<form action="">
    action:        填写的是后端提交的地址

这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
        1. 什么都不写：朝当前地址提交
        2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
        3. 只写后缀
            /index/-------->IP:PORT/index

后端的结果就是所填的内容

form表单要想把数据提交到后端，每一个标签都要有一个name属性

name的属性值就是提交到后端数据的key值，用户输入的内容就是value值

针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项

1. 请求方式必须是post
2. 数据编码方式：
    1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. json
    
3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
     username=&password=&date=&hidden=123&myfile=&city=
    
6. form-data编码格式的数据：
    username=&password=&date=&hidden=123&myfile=&city=
    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
    文件数据
    """对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7.  form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman

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

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

相关文章

One-to-N N-to-One: Two Advanced Backdoor Attacks Against Deep Learning Models

One-to-N N-to-One: Two Advanced Backdoor Attacks Against Deep Learning Models

One-to-N & N-to-One: Two Advanced Backdoor Attacks Against Deep Learning Models----《一对N和N对一&#xff1a;针对深度学习模型的两种高级后门攻击》 1对N&#xff1a; 通过控制同一后门的不同强度触发多个后门 N对1&#xff1a; 只有当所有N个后门都满足时才会触发…
阅读更多...
3.5每日一题（求齐次方程组的特解）

3.5每日一题（求齐次方程组的特解）

1、判断类型选择方法&#xff1a;看出为齐次方程&#xff08;次幂都一样&#xff09; 2、 化为变量可分离&#xff1b;按变量可分离的方法求出通解&#xff08;此题等式两边同时除以 x &#xff09; 3、把x1&#xff0c;y0带入通解&#xff0c;定常数C&#xff0c;求出特解 …
阅读更多...
用大白话聊聊SpringBoot的自动配置原理（面试题详解）

用大白话聊聊SpringBoot的自动配置原理（面试题详解）

首先&#xff0c;SpringBoot的自动配置不等于自动装配&#xff01; 自动配置是Auto-Configuration&#xff0c;针对的是SpringBoot中的配置类&#xff0c; 而自动装配是Autowire&#xff0c;针对的是Spring中的依赖注入。 进入主题&#xff1a; 自动配置简单来说就是自动去把…
阅读更多...
java八股文(基础篇)

java八股文(基础篇)

面向过程和面向对象的区别 面向过程&#xff1a;在解决问题时&#xff0c;特别自定义函数编写一步一步的步骤解决问题。 面向对象&#xff1a;其特点就是 继承&#xff0c;多态&#xff0c;继承&#xff0c;在解决问题时&#xff0c;不再注重函数的编写&#xff0c;而在于注重…
阅读更多...
Spring Boot 3系列之一（初始化项目）

Spring Boot 3系列之一（初始化项目）

近期&#xff0c;JDK 21正式发布&#xff0c;而Spring Boot 3也推出已有一段时间。作为这两大技术领域的新一代标杆&#xff0c;它们带来了许多令人振奋的新功能和改进。尽管已有不少博客和文章对此进行了介绍&#xff0c;但对于我们这些身处一线的开发人员来说&#xff0c;有些…
阅读更多...
【Linux】从零开始学习Linux基本指令(三)

【Linux】从零开始学习Linux基本指令(三)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;Linux入门 &#x1f525;该文章主要了解Linux操作系统下的基本指令。 ⚡️该篇为Linux指令部分的终章&#xff0c;如果您想了解前两篇文章的…
阅读更多...
【Docker】Linux网络命名空间

【Docker】Linux网络命名空间

命名空间 Namespace是Linux提供的一种对于系统全局资源的隔离机制&#xff1b;从进程的视角来看&#xff0c;同一个namespace中的进程看到的是该namespace自己独立的一份全局资源&#xff0c;这些资源的变化只在本namespace中可见&#xff0c;对其他namespace没有影响。容器就…
阅读更多...
Linux学习第26天：异步通知驱动开发： 主动

Linux学习第26天：异步通知驱动开发： 主动

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 在正式开启今天的学习前&#xff0c;讲一讲为什么标题中加入了【主动】俩字。之前学习的阻塞和非阻塞IO&#xff0c;都是在被动的接受应用程序的操作。而今天的学…
阅读更多...
rust入门

rust入门

目录 一&#xff0c;输入输出 二&#xff0c;函数 1&#xff0c;main函数 2&#xff0c;普通函数 3&#xff0c;库函数 4&#xff0c;常用库函数 三&#xff0c;变量 1&#xff0c;变量绑定、let、mut 2&#xff0c;变量作用域 四&#xff0c;数据结构 1&#xff0c…
阅读更多...
风云七剑攻略，最强阵容搭配

风云七剑攻略，最强阵容搭配

今天的风云七剑攻略最强阵容搭配给大家推荐以神仙斋减怒回血为主的阵容。 关注【娱乐天梯】&#xff0c;获取内部福利号 首先&#xff0c;这个角色在这个阵容当中&#xff0c;所有的角色当中&#xff0c;他的输出系数是最高的&#xff0c;已经达到了200%的层次&#xff0c;而且…
阅读更多...
商业模式画布的9大模块全解读，产品经理不可不知！

商业模式画布的9大模块全解读，产品经理不可不知！

“商场如战场”&#xff0c;在当今瞬息万变的商业环境中&#xff0c;创造出独特且创新的商业模式是每个企业家、策略家和决策者的首要任务。为了在激烈的市场竞争中取得优势&#xff0c;我们需要一个强大且直观的工具来帮助我们规划和塑造公司的商业模式&#xff0c;这个经常被…
阅读更多...
H5游戏源码分享-跳得更高

H5游戏源码分享-跳得更高

H5游戏源码分享-跳得更高 控制跳动踩到云朵上 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><meta http-equiv"Content-Type" content"text/html;"&g…
阅读更多...
【.NET Core】创建一个在后台运行的控制台程序（ConsoleApp)

【.NET Core】创建一个在后台运行的控制台程序（ConsoleApp)

文章目录 1. 添加Nuget包2. 修改Program.cs3. 添加TestService 借助.NET的通用主机&#xff08;IHostBuilder&#xff09;可以轻易创建一个可以执行后台任务的程序 1. 添加Nuget包 Microsoft.Extensions.Hosting 2. 修改Program.cs 通过Host获取IHostService&#xff0c;然…
阅读更多...
[UDS] --- ECUReset 0x11

[UDS] --- ECUReset 0x11

1 0x11功能描述 根据ISO14119-1标准中所述&#xff0c;诊断服务11主要用于Client向Server(ECU)请求重启行为。该重启行为将会导致Server复位回归到特定的初始状态&#xff0c;具体是什么初始状态取决于Client的请求行为。 2 0x11应用场景 一般而言&#xff0c;对于11诊断服务…
阅读更多...
Ansible的安装和部署

Ansible的安装和部署

目录 1.Ansible的安装 2.构建Ansible清单 直接书写受管主机名或ip 设定受管主机的组[组名称] 主机规格的范围化操作 指定其他清单文件 ansible命令指定清单的正则表达式 3.Ansible配置文件参数详解 配置文件的分类与优先级 常用配置参数 4.构建用户级Ansible操作环…
阅读更多...
goland无法调试问题解决

goland无法调试问题解决

goland 无法调试问题解决 golang 版本升级后&#xff0c;goland 无法进行调试了 首先请看自己下载的版本是否有误 1.apple系 M系列芯片的 arm64版本 2.apple系 intel系列芯片的x86_64 3.windows系 intel解决如下&#xff1a; 查看gopath ericsanchezErics-Mac-mini gww-api…
阅读更多...
docker 安装minio,访问地址进不去

docker 安装minio,访问地址进不去

文章目录 黑马头条P37docker安装minio文图一、启动后页面一直是加载状态进不去 黑马头条P37docker安装minio文图 一、启动后页面一直是加载状态进不去 通过docker logs -f (容器id)查看日志 通过这个报错信息&#xff0c;得知最近minio 升级&#xff0c;一些启动信息和之前不…
阅读更多...
FPGA_Signal TapII 逻辑分析仪 在线信号波形抓取

FPGA_Signal TapII 逻辑分析仪 在线信号波形抓取

FPGA_Signal TapII 逻辑分析仪 在线信号波形抓取 由于一些工程的仿真文件不易产生&#xff0c;所以我们可以利用 quartus 软件自带的 SignalTap 工具对波形进行抓取 对各个信号进行分析处理&#xff0c;让电子器件与FPGA进行正常通讯工作&#xff0c;也验证所绘制的波形图是否一…
阅读更多...
【设计模式三原则】

【设计模式三原则】

设计模式三原则 单一职责原则开放封闭原则依赖倒转原则里氏代换原则 我们在进行程序设计的时候&#xff0c;要尽可能地保证程序的可扩展性、可维护性和可读性&#xff0c;所以需要使用一些设计模式&#xff0c;这些设计模式都遵循了以下三个原则&#xff0c;下面来依次为大家介…
阅读更多...
探求flutter全栈开发

探求flutter全栈开发

显示一种网络图片 import package:flutter/material.dart; main(){runApp(MaterialApp(theme: ThemeData.dark(),home:Home(),));}class Home extends StatelessWidget{overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar:AppBar(t…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023