HTML的学习

知己知彼百战不殆

打算学习一下javascript

所以先从基础的html语言开始

其实就是头部 和身体

头部控制整个 html的语言 title等

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习测试一下网站解法</title>
</head>

然后就是body

     

<body>
    <h1> 我需要学会html语言基本 </h1>
    <h2> 基础的东西我也要会</h2>
    <p>  段落和标题的区别
        就是这个 其实我就是正文 </p>
    <p> 不同段落需要 重新获取p标签</p>
    <a href="http://47.115.211.64:8000/login">这是一个木马链接</a>
    <img src="帅照.jpg" width=1280  height="100"    alt="网速太慢">
</body>
</html>

这里有

h标签 : 标题

p标签 : 段落

a标签 : 跳转

img标签 : 导入图片

内容就是如图所示

HTML 标签对大小写不敏感 所以 <P> = <p>

HTML属性

其实就是可以附加东西的标签

如果我们想对文本进行操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>

<b>这个文本是加粗的</b>

<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含
<sub>下标</sub>

<br />

这个文本包含
<sup>上标</sup>

</body>
</html>

a标签的属性

href:url地址

target :  _blank  _self  从本页面跳转 还是从新开一个页面跳转

这里可以通过嵌套的方式将图片设置为跳转

    <a href="http://47.115.211.64:8000/login" ><img src="帅照.jpg" alt=""></a>

然后我们通过点击图片就可以进行跳转了

这里还有一个锚点

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

通过点击 就可以进入到 下面那个a标签所在的位置

如果是想下载 指定download即可

id属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

我觉得写的很好了 菜鸟教程 就是 通过一个占位符 然后可以通过a标签 访问占位符

头标签

这里介绍一下 link 就是用于链接外部资源

介绍一下html设置表格

<p> 这里介绍一下表格</p>

 <table border="12">
    <thead>
        <tr>
            <th> id</th>
            <th> name</th>
            <th> passwd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 1</td>
            <td> admin</td>
            <td> admin123</td>
        </tr>

    </tbody>
 </table>       
 <p> 这里介绍一下列表</p>
 <ul>
    <li>1111111:</li>
    <li>2222222:</li>
 </ul>

</body>
</html>

div的布局

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

这里我们其实运行后可以发现 就是通过 <div id="名字" style 中的style进行布局控制

★★HTML的表单

这个要好好看一下

是参数传递的功能

表单是收集用户信息
<form> 是创建表单的 参数包括 action: 提交的url  method:提交的方式 POST/GET/PUT等


<input> 创建文本框  type 定义输入框类型  id 用于关联 table 元素

name 用于标识
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入界面</title>
</head>
<body>
    <form action="/test-web/dir.php" method="post">
        <label for="name">用户名:</label>
        <input type="text" name="name" id="name" required>

        <br>

        <label for="passwd">密码:</label>
        <input type="password" name="passwd" id="passwd" required>

        <br>

        <input type="submit" value="提交">
    </form>
    
</body>
</html>

最基本的写法

差不多会了 写个登入查询是否存在用户的网站吧

index.html

<<!DOCTYPE html>
<html lang="en">
<!---flag{fuc3-yo3}-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习测试一下网站解法</title>
</head>
<body>
    <h1> 我需要学会html语言基本 </h1>
    <hr>
    <h2> 基础的东西我也要会</h2>
    <p>  段落和标题的区别
        就是这个 其实我就是正文 </p>
        <hr>
    <p> 不同段落需要 重新获取p标签</p>
    <a href="帅照.jpg" download>下载帅照</a>
    <p>这是一个段落标签<br>但是我使用br分段</p>


<p> 这里介绍一下表格</p>

 <table border="12">
    <thead>
        <tr>
            <th> id</th>
            <th> name</th>
            <th> passwd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 1</td>
            <td> admin</td>
            <td> admin123</td>
        </tr>

    </tbody>
 </table>       
 <p> 这里介绍一下列表</p>
 <ul>
    <li>1111111:</li>
    <li>2222222:</li>
 </ul>
 <form action="/test-web/dir.php" method="post"> 
    <label for="name">用户名</label>
    <input type="text" name="name" id="name">
    <br>
    <label for="passwd">密码:</label>
    <input type="password" name="passwd" id="passwd">
    <br>
    <input type="submit" value="提交">
    <a href="http://127.0.0.1:3000/zhuce.php">注册</a>
</form>
 
</body>
</html>

dir.php

<?php
// highlight_file(__FILE__);	
$m = new MongoDB\Driver\Manager("mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb");
$name = $_POST['name'];
$passwd = $_POST['passwd'];
$id = $_POST['id'];
if(!$id){
	$query = new MongoDB\Driver\Query(['name'=>$name,'password'=>$passwd]);

	$res = $m -> executeQuery('test.admin',$query)->toArray();

	$count = count($res);
	// $queryString = json_encode($res);
	// echo '查询结果: ' . $queryString . '<br>';
	if($count>0){
		foreach($res as $a){
			$a = (array)$a;
			echo '====Login Success====<br>';
			echo 'username: ' . $a['name'] . '<br>'; 
		}
	}else{
		echo '<script>alert("账号密码错误"); window.location="index.html";</script>';
	}
}else{
$bulk = new MongoDB\Driver\BulkWrite();

// 创建要插入的文档
$document = [
    '_id' => new MongoDB\BSON\ObjectID(),
    'id' => $id,
    'name' => $name,
    'password' => $passwd
];

// 添加插入操作
$bulk->insert($document);

// 指定数据库和集合名称
$database = 'test';
$collection = 'admin';

// 执行写入操作
$writeConcern = new MongoDB\Driver\WriteConcern(MongoDB\Driver\WriteConcern::MAJORITY, 1000);
$result = $m->executeBulkWrite("$database.$collection", $bulk, $writeConcern);

if ($result->getInsertedCount() > 0) {
    echo "注册成功";
} else {
    echo "注册失败";
}
}

zhuce.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
</head>
<body>
    <form action="/test-web/dir.php" method="post">
        <label for="id">ID值</label>
        <input type="id" name="id" id='id'>
        <br>
        <label for="name">用户名</label>
        <input type="text" name='name' id ='name'>
        <br>
        <label for="passwd">密码</label>
        <input type="password" name="passwd" id="passwd">
        <input type="submit" value="注册">
        <a href="http://127.0.0.1:3000/index.html">返回</a>
    </form>
    
</body>
</html>

 最基本的查询网站 加入了注册界面

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

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

相关文章

vue项目引入element-plus

文章目录 引入框架遇到的问题引入的时候&#xff0c;报错 ...(reading replace)...报错&#xff1a;The template root requires ...eslint报错&#xff1a; 运行 引入框架 使用add引入 遇到的问题 引入的时候&#xff0c;报错 …(reading ‘replace’)… Cannot read prop…

Springboot将多个图片导出成zip压缩包

Springboot将多个图片导出成zip压缩包 将多个图片导出成zip压缩包 /*** 判断时间差是否超过6小时* param startTime 开始时间* param endTime 结束时间* return*/public static boolean isWithin6Hours(String startTime, String endTime) {// 定义日期时间格式DateTimeFormatt…

【深度学习】学习率及多种选择策略

学习率是最影响性能的超参数之一&#xff0c;如果我们只能调整一个超参数&#xff0c;那么最好的选择就是它。相比于其它超参数学习率以一种更加复杂的方式控制着模型的有效容量&#xff0c;当学习率最优时&#xff0c;模型的有效容量最大。本文从手动选择学习率到使用预热机制…

单元测试-java.lang.NullPointerException

报错信息 java.lang.NullPointerException 空指针异常 空对象引用 来源 对Controller层进行单元测试&#xff0c;解决完Spring上下文报错后继续报错。 解决 在测试方法执行前要为字段完成对象的注入&#xff0c;否则就报空指针异常。 测试例子 public class SysUserContr…

NX二次开发UF_CAM_update_list_object_customization 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CAM_update_list_object_customization Defined in: uf_cam.h int UF_CAM_update_list_object_customization(tag_t * object_tags ) overview 概述 This function provids the…

Ubuntu 1.84.2Visual Studio Code 下载配置与vscode查看内存Hex Editor插件,简单易懂

目录 前言 一 首先我为啥要重装Vs Code呢&#xff1f; 二 下载1.84.2Visual Studio Code 三 配置Vscode终端字体 四 安装插件 前言 这是一篇将老版本的VsCode下载至最新版的博文&#xff0c;从下载到调试全篇 一 首先我为啥要重装Vs Code呢&#xff1f; 因为我想安装这个…

【HMS Core】推送问题的小九九

【问题描述1】 不在华为应用市场上架&#xff0c;是否可以使用推送服务&#xff0c;申请自分类&#xff1f; 【解决方案】 目前使用推送服务不强制要求上架&#xff0c;不上架也可正常使用、申请自分类权限。 【问题描述2】 数据存储位置改变后&#xff0c;自分类权限申请按…

148W+奖池!目标检测、图像分类新赛事!2023无锡国际人工智能算法大赛赛题详解来了!

各位人工智能卓越的推动者们&#xff0c;我们诚邀您参与【2023年无锡国际人工智能算法大赛】&#xff0c;探索未来AI创新的巅峰之战&#xff01; 报名链接&#xff1a;极市开发者平台-计算机视觉算法开发落地平台-极市科技 【大赛进程】 12月11日12:00&#xff1a;报名及初…

JAVA小游戏“飞翔的小鸟”

第一步是创建项目 项目名自拟 第二步创建个包名 来规范class 再创建一个包 来存储照片 如下&#xff1a; 代码如下&#xff1a; package game; import java.awt.*; import javax.swing.*; import javax.imageio.ImageIO;public class Bird {Image image;int x,y;int width…

SageMath安装

Sagemath工具是免费开源的&#xff0c;针对数学计算的一个工具。 网页版免安装&#xff1a;https://sagecell.sagemath.org/ Sagemath是根据Linux系统编写的&#xff0c;所以Windows上使用的话&#xff0c;会创建一个Linux系统运行。 1. 安装 Windows本地安装参考&#xff1…

多线程的实现方式

点击链接返回标题-> Java线程的学习-CSDN博客 第一种方式&#xff0c;继承Thread类 Thread类是java.lang包下的类&#xff0c;是多线程经常需要使用的类。 ①通过自定义子类去继承Thread类&#xff0c;并重写其中的run()方法。 class myThread extends Thread {//自定义子类…

(5秒解决)ImportError: attempted relative import with no known parent package

寻找了很多方法&#xff0c;发现大家把事情讲的复杂了。我这里用最简单的办法来解决父包引用找不到的问题。 报错提示&#xff1a;ImportError: attempted relative import with no known parent package 先给大家看看我的目录结构&#xff0c;model.py和test目录在同一级。tra…

Ubuntu 23.10 服务器版本 ifconfig 查不到网卡 ip(已解决)

文章目录 1、问题描述2、 解决方案 1、问题描述 服务器&#xff1a;ubuntu 23.10 经常会遇到虚拟机添加仅主机网卡后&#xff0c;通过 ifconfig 无法获取其网卡 ip 2、 解决方案 修改网卡配置文件&#xff1a; # 进入网卡配置文件目录 cd /etc/netplan # 备份原始文件 cp …

C/C++ 递归指数型枚举

个人主页&#xff1a;仍有未知等待探索_C语言疑难,数据结构,小项目-CSDN博客 专题分栏&#xff1a;算法_仍有未知等待探索的博客-CSDN博客 目录 一、前言 二、递归指数型枚举 1、题目信息 题目描述 输入格式 输出格式 样例 提示 2、解析 3、代码 一、前言 之前进行枚举…

数据结构与算法编程题14

设计一个算法&#xff0c;通过一趟遍历在单链表中确定值最大的结点。 #include <iostream> using namespace std;typedef int Elemtype; #define ERROR 0; #define OK 1;typedef struct LNode {Elemtype data; //结点保存的数据struct LNode* next; //结构体指针…

优思学院|2024年质量管理的大趋势

2023年我们已经顺利度过了整年的大部分时间&#xff0c;2024年质量管理的趋势和问题在全球范围内都已经引起了关注&#xff0c;或者仍然是企业导航的首要任务。 1. 通货膨胀与质量管理 2023年&#xff0c;全球范围内通货膨胀和严峻的经济状况成为企业最关心的问题之一。尽管物…

BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解(学习总结---从入门到深化)

目录 表格二 表单_基础表单 表单_被支持的控件 表单_表单状态 表格二 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑&#xff0c;单元格中的内补&#xff08;padding&#xff09;均会减半 <table class"table table-condensed table-bordered"…

C#语言高阶开发

目录 数据结构 集合 动态数组ArrayList 习题&#xff1a;声明一个Monster类&#xff0c;有一个Attack方法,用一个ArrayList去封装Monster的对象,装10个&#xff0c;遍历monster的list让他们释放攻击方法 哈希表HashTable 创建一个武器类&#xff0c;有一个属性叫做id,每个…

SeaTunnel及SeaTunnel Web部署指南(小白版)

现在你能搜索到的SeaTunnel的安装。部署基本都有坑&#xff0c;官网的文档也是见到到相当于没有&#xff0c;基本很难找到一个适合新手小白第一次上手就能成功安装部署的版本&#xff0c;于是就有了这个部署指南的分享&#xff0c;小主已经把可能遇到的坑都填过了&#xff0c;希…

android keylayout键值适配

1、通过getevent打印查看当前keyevent数字对应事件和物理码 2、dumpsys input 查看输入事件对应的 KeyLayoutFile: /system/usr/keylayout/Vendor_6080_Product_8060.kl 3、通过物理码修改键值映射&#xff0c;修改/system/usr/keylayout/目录下的文件