Web day2

已于 2023-09-19 23:56:45 修改
阅读量31 收藏
点赞数
分类专栏： Web 文章标签： 前端
于 2023-09-18 00:49:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41255707/article/details/132960408
版权

表格 table

<!-- border:边框线，0-无边框
cellspacing： 单元格之间的间距
cellpadding: 单元格的内边距
子表签：
tr: 行
th: 表头的列，文字是粗体
td: 数据行的列
caption: 表格名称，显示在表格上面
thead,tbody: 当有thead和tbody时，标签的顺序无关，
不管thead放在什么位置，都会把thead显示在第一行
-->
<table border="1" cellspacing="0" cellpadding="10">
    <caption>学生表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>女</td>
        </tr>
    </tbody>
</table>
  • 行列合并
<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>科目</th>
				<th>成绩</th>
				<th colspan="2">联系方式</th>
				<!-- <th>电话</th>
				<th>QQ</th> -->
			</tr>
			<tr>
			<!-- 列合并：
只会影响一行，
在要合并的第一列加colspan属性，值就是要合并的列数
后面的列删掉
-->
				<!-- 行合并：
在要合并的第一行的列上加rowspan属性，值是要合并的行数
然后把后面行的对应列都删掉 -->
				<td rowspan="2">张三</td>
				<td>Java</td>
				<td>80</td>
				<td>1234</td>
				<td>10086</td>
			</tr>
			<tr>
				<!-- <td>张三</td> -->
				<td>Web</td>
				<td>90</td>
				<td>1234</td>
				<td>10086</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>
				<td colspan="">Java</td>
				<td>85</td>
				<td>1234</td>
				<td>10086</td>
			</tr>
			<tr>
				<!-- <td>李四</td> -->
				<td>Web</td>
				<td>95</td>
				<td>1234</td>
				<td>10086</td>
			</tr>
		</table>

练习：表格合并

image-20230816085618781

  • 表格的样式

    table的border-collapse样式让边框双线重叠在一起变单线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格样式</title>
        <style type="text/css">
            table{
                /* 边框线折叠(重叠) */
                border-collapse: collapse;
            } t
            h,td{
                border: 1px solid black;
                width: 150px;
                height: 30px;
                text-align: center;
            } t
            h{
                background-color: lightgrey;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品类别</th>
                <th>商品价格</th>
                <th>商品图片</th>
                <th>商品描述</th>
            </tr>
            <tr>
                <td>1940392</td>
                <td>Meta60</td>
                <td>手机</td>
                <td>6999</td>
                <td>phone1.jpg</td>
                <td>华为Metal60手机</td>
            </tr>
            <tr>
                <td>1940392</td>
                <td>Meta60</td>
                <td>手机</td>
                <td>6999</td>
                <td>phone1.jpg</td>
                <td>华为Metal60手机</td>
            </tr>
            <tr>
                <td>1940392</td>
                <td>Meta60</td>
                <td>手机</td>
                <td>6999</td>
                <td>phone1.jpg</td>
                <td>华为Metal60手机</td>
            </tr>
            <tr>
                <td>1940392</td>
                <td>Meta60</td>
                <td>手机</td>
                <td>6999</td>
                <td>phone1.jpg</td>
                <td>华为Metal60手机</td>
            </tr>
        </table>
    </body>
</html>

表单 form

表单就是在网页上填表格，在数据的修改，新增等时候用到表单
表单类型的输入框包含文本，单选，复选，下拉框，提交按钮
表单提交后就会把我们输入的数据发送给服务器

  • 基本表单
<!-- 表单
action:后台接收数据的接口的URL
method:提交方式，get-把数据附加在url提交，长度有限制，
如：http://127.0.0.1:8848/login?userName=aaa&userPwd=123
url与参数之间是?分割；参数名与值之间是=分割；多个参数之间用&分割
post-数据隐藏提交 ，长度不受限制
enctype="multipart/form-data": 如果要上传文件，form标签需要添加这个属性
-->
<form action="/login" method="get" >
    <!-- 文本输入框，可以输入字符，数字 -->
    用户名：<input type="text" name="userName">
    <!-- 密码输入框，输入的内容以星号显示 -->
    密码：<input type="password" name="userPwd">
    <!-- 提交按钮，点击时form表单提交到后台服务器 -->
    <input type="submit" value="提交"/>
</form>
  • form 标签
<form action="#" method="get">
    <!-- 表达标签的公共的属性：
id: 标签唯一识别码，每个页面上不能有重复的id
name: 标签名，后台根据name来获取输入值
value: 输入的值
autocomplete: 是否显示历史记录, 设为off就不显示
-->
    学生姓名：<input type="text" name="stuName" value="张三"
                autocomplete="off">
    <br>
    学生年龄：<input type="number" name="stuAge">
    <br>
    <!-- 单选框：
同一组单选框name要一样
checked： 选中， 单选框和复选框都有这个属性
-->
    学生性别：<input type="radio" name="stuSex" value="男">男
    <input type="radio" name="stuSex" value="女" checked>女
    <br>
    学生爱好：<input type="checkbox" name="stuHobby" value="唱歌" checked>
    唱歌
    <input type="checkbox" name="stuHobby" value="跳舞" checked>
    跳舞
    <input type="checkbox" name="stuHobby" value="运动">运动
    <input type="checkbox" name="stuHobby" value="旅游">旅游
    <br>
    <!-- 下拉框：
option标签的value是提交到后台的值；标签体的值是显示的内容
selected属性表示当前选项被选中
select标签上添加 multiple属性，可以多选
-->
    学生籍贯：<select name="stuNativePlace">
    <option value="">请选择...</option>
    <option value="cq">重庆</option>
    <option value="sc">四川</option>
    <option value="gz" selected>贵州</option>
    <option value="yn">云南</option>
    </select>
    <br>
    <!-- 文本域：
cols： 宽度（列）
rows： 高度（行）
-->
    自我评价：<textarea name="stuDesc" cols="30" rows="10"></textarea>
    <br>
    <!-- 上传文件标签：
会打开文件浏览器让你选择文件
-->
    上传照片：<input type="file" name="stuPhoto">
    <br>
    <input type="submit" value="提交"/>
</form>

练习：表单

image-20230816090545792

CSS

选择器分组和class组合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 多个标签使用同样的样式,在选择器中逗号分割多个选择器
            */
            .p1,.p2,.p3{
                color: red;
            } .
            font20{
                font-size: 20px;
            } .
            font30{
                font-size: 30px;
            } .
            font40{
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <!-- 标签的class可以写多个，用空格分割
写样式时经常把公共的样式抽出来单独写，特有的样式另外再写一个，设置class属性用多个
样式
-->
        <p class="p1 font20">第一个p标签</p>
        <p class="p2 font30">第二个p标签</p>
        <p class="p3 font40">第三个p标签</p>
    </body>
</html>

其它选择器

  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 后续兄弟选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 两个选择器之间空格,表示后代选择器
            前一个选择器限定范围， 第二个选择器第一个选择器的所有后代（所有子子孙孙标签）
            标签中再次筛选
            */
            .box1 p{
                color: red;
            }
            /* 子元素选择器，用>分隔
            只有儿子（下一层）的标签受影响
            */
            .box2>p{
                font-size: 30px;
            } /
            * 相邻兄弟,用+分隔
            紧挨它的后续的第一个兄弟标签
            */
            .first-p+p{
                background-color: gainsboro;
            } /
            * 后续兄弟,用~分隔
            它后面的所有兄弟标签
            */
            .first-p~p{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <p>box2下的p标签</p>
                <div class="box3">
                    <p>box3下的p标签</p>
                    <span>span标签</span>
                </div>
                <p>box2下的第二个p标签</p>
            </div>
        </div>
        <div class="boxb">
            <p class="first-p">boxb下的第一个p标签</p>
            <p>boxb下的第二个p标签</p>
            <p>boxb下的第三个p标签</p>
        </div>
    </body>
</html>
  • 伪类选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a标签的伪类选择器</title>
        <style type="text/css">
            /* 未访问之前的样式 */
            a:link{
                color: aqua;
            } /
            * 已访问的样式 */
            a:visited{
                color: gray;
            }
            /* 鼠标移到链接上的样式
            hover必须要放在link和visited之后才生效
            */
            a:hover{
                color: blue;
            } /
            * 鼠标键按下时的样式
            active必须要放在hover之后
            */
            a:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="index.html">首页</a>
    </body>
</html>

背景

background-image

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                background-image: url('img/boy.jpg');
                height: 500px;
                width: 400px;
                border: 1px solid black;
                /* contain等比例放大图片,直到高或宽跟容器相等
                cover直接把图片拉伸跟容器的高宽一致（填满整个容器），图片可能会变形
                */
                background-size: cover;
                /* 背景图片不会重复(平铺) */
                background-repeat: no-repeat;
                /* 背景图片居中显示 */
                background-position: center;
                /* 透明度,取值范围0~1，0-完全透明; 1-不透明 */
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            明星图片
        </div>
    </body>
</html>

边框

border
border-style
border-width
border-color
border-radius

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                /* border: 1px solid red; */
                height: 100px;
                width: 100px;
                /* 四个值:上 右 下 左
                两个值：上下 左右
                */
                border-width: 1px 3px 5px 7px;
                border-style: dashed dotted solid dotted;
                border-color: red green blue gold;
            } /
            * 用div边框实现三角形 */
            .box2{
                height: 0px;
                width: 0px;
                border-width: 20px;
                /* transparent透明 */
                border-color: transparent transparent transparent gold;
                border-style: solid;
            } /
            * 阴影效果 */
            .box3{
                width: 200px;
                height: 60px;
                background-color: red;
                box-shadow: 5px 5px darkgray;
            }
        </style>
    </head>
    <body>
        <div class="box1">
        </div>
        <br>
        <br>
        <div class="box2">
        </div>
        <div class="box3">
        </div>
    </body>
</html>

盒子模型

image-20230816091343825

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型（内外边距）</title>
        <style type="text/css">
            .box1{
                border: 1px solid red;
                margin: 0px;
            } /
            * 每个块标签有内边距,外边距,边框. 它实际占用的尺寸是高/宽+内边距+边框+外边距 */
            .box2{
                border: 20px solid blue;
                width: 50px;
                height: 50px;
                /* 外边距 */
                margin: 20px;
                /* 内边距 */
                padding: 20px;
            }
        </style>
    </head>
    <body style="margin: 0px;">
        <div class="box1">
            <div class="box2">
                文字内容文字内容
            </div>
        </div>
    </body>
</html>

标签的显示和隐藏

display:none

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通过hover让标签显示</title>
        <style type="text/css">
            .box1{
                height: 100px;
                width: 100px;
                background-color: red;
                /* 隐藏标签： none-隐藏； block-显示 */
                display: none;
            } .
            show:hover+.box1{
                /* 显示标签 */
                display: block;
            } .
            show{
                /* 光标为手形 */
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <span class="show">显示</span>
        <div class="box1">
        </div>
    </body>
</html>
A码
关注
专栏目录
[CISCN2019 华北赛区 Day2 Web1]Hack World题解
qq_52843575的博客
04-07 3295
[CISCN2019 华北赛区 Day2 Web1]Hack World题解 判断类型 进入页面很明显就是考sql注入，与此同时页面直接告诉你表面和列名均是flag，直接开始注入，常用的注入函数均被过滤，直接fuzz爆破，查看被过滤的具体情况 结果确定此题为sql中的布尔盲注(post传参)，也同时发现一个问题，请求过快时，会被过滤掉请求 确认绕过方法 因为or被过滤，百度一波后，发现可以使用^异或来绕过 异或：相同为假，相异为真，简单来说就是 1^1=0 0^0=0 1^0=1 空格也被过滤，因此
[CISCN2019 华北赛区 Day2 Web1]Hack World
qq_46266956的博客
04-24 632
[CISCN2019 华北赛区 Day2 Web1]Hack World 注入题： 直接抓包burpsuite fuzz测试 过滤了一些关键字，但能够看出来存在bool漏洞 发现当true时，Hello，glzjin wants a girlfriend. fslse时，Error Occured When Fetch Result. 据此，写脚本 import requests import string import time timeout=None def bool_blind(url):
[CISCN2019 华北赛区 Day2 Web1]Hack World1
2301_78919866的博客
06-05 711
[CISCN2019 华北赛区 Day2 Web1]Hack World1题解
buuctf——[CISCN2019 华北赛区 Day2 Web1]Hack World
m_de_g的博客
04-22 705
【代码】buuctf——[CISCN2019 华北赛区 Day2 Web1]Hack World。
【BUUCTF】[CISCN2019 华北赛区 Day2 Web1]Hack World
aoao331198的博客
04-11 756
明确告诉了flag的位置 输入1 输入其他的基本上都没有错误回显或者信息，采用bool盲注 fuzz一波发现select没有过滤，空格过滤了 1^(ascii(substr((select(flag)from(flag)),1,1))>127) 正常回显，说明方法可行 脚本跑出每一个字符即可 import requests import time url='http://10cb7823-c884-4555-80b8-f586b15e6057.node4.buuoj.cn:81/index..
Web API day2.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
day2 day3 创建web服务器 模块化 包.xmind
10-19
day2 day3 创建web服务器 模块化 包.xmind
web-day4.rar
03-30
【标题】"Web-Day4"通常指的是一个关于Web技术的培训课程或研讨会的第四天内容，可能涵盖了Web开发中的高级主题或特定技术的深入探讨。由于没有具体的标签信息，我们无法得知具体涉及哪些技术，但根据一般的Web开发...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 376
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 430
【代码】easyexcel模板导出并且公式自动计算的方法。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1351
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
测试ASP.NET Core的WebApi项目调用WebService
gc_2299的博客
09-15 313
记录在WebApi中调用WebService的基本方式。
《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》
asd4353012的博客
09-06 1819
响应式 Web 设计是现代网页设计的重要趋势，它可以确保网页在不同设备上都能提供良好的用户体验。在实现响应式 Web 设计时，需要掌握媒体查询、弹性布局、流式布局等技术，同时还需要遵循一些最佳实践，如优先考虑移动设备、保持简洁的布局、优化图像和媒体资源、使用响应式字体和提供良好的用户体验等。响应式 Web 设计可以确保网页在不同设备上都能呈现出最佳的布局和样式，满足用户的需求。在实现响应式 Web 设计后，需要在不同的设备上进行测试，确保网页在各种设备上都能正常显示和交互。可以使用响应式字体技术，如。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 908
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 1110
（微服务项目）新闻头条——Day1
华为的仓颉和ArkTS这两门语言有什么区别
最新发布
qq_31860647的博客
09-15 455
在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。了解TypeScript的朋友都应该知道，其实TypeScript就是JavaScript的改进版本，是JS的超级，现在又出了个ArkTS，说是TS的超集。ArkTS的官网介绍说，ArkTS是TypeScript的进一步强化版本，简单来说就是包含了TS的风格，但是做了一些改进。而且，还说了是原生智能化，天生原场景，仔细关注这句话【
一文读懂 JS 中的 Set 结构
沐爸的博客
09-11 999
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
TypeScript 快速上⼿ （3：装饰器）
每天都要努力学习哦~~
09-15 590
装饰器本质是一种特殊的函数，它可以对：类、属性、方法、参数进行扩展，同时能让代码更简洁。装饰器自2015年在中被提出到现在，已将近10年。截止目前，装饰器依然是实验性特性 ，需要开发者手动调整配置，来开启装饰器支持。装饰器有 5 种：1⃣类装饰器2⃣属性装饰器3⃣方法装饰器4⃣访问器装饰器5⃣参数装饰器备注：虽然中可以直接使用**类装饰器**，但为了确保其他装饰器可用，现阶段使用时，仍建议使用配置来开启装饰器支持，而且不排除在来的版本中，官方会进一步调整装饰器的相关语法！
Day2Web服务器搭建指南：Apache配置与应用
在Day2的学习中，我们探讨了Web服务器的搭建与管理，特别是围绕Linux环境下的服务和论坛设置。首先，我们了解了Web服务器的基础概念，如网址、URL和URI地址，以及万维网（WWW）的含义。Web服务主要通过B/S（浏览器/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值