Web Day2

已于 2023-09-07 23:15:32 修改
阅读量146 收藏
点赞数
文章标签： 前端 html css
于 2023-09-07 23:14:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51944132/article/details/132747759
版权

Web

day2_2023.9.7

Css

概念：层叠样式单

作用：主要用来美化页面，完成网页的布局设置，完成字体，颜色等标签样式的设置。

块元素和行内元素

块元素 ： 单独成一行的标签，将来可以设置宽和高，h1-h6 , p , div, 列表，表格

行内元素 ： 标签中的内容，并排显示，不能设置宽和高， a , b, i, span

行内块元素：既有块元素的特点，又有行内元素的特点，并排显示，可以调整宽高，img，input

Css的使用

1,行内使用

2，文档内部使用

3，外部引用

h2{
	color: #ff00ff;
	font-size: 50px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 在head中，加上一对style标签，将样式写在标签中 */
			/* 通过选择器可以找到标签，找到标签后，可以添加样式 */
			div{
				color: blue;
				font-size: 40px;
			}
			h1{
				color: #81efff;
			}
		</style>
		<!-- 通过link标签完成css文件的引入 -->
		<link rel="stylesheet" href="css/test.css">
	</head>
	<body>
		<!-- css行内的用法，直接在开始标签中，添加style属性 -->
		<p style="color: red;font-size: 30px;">这是一段文本内容</p>
		
		<!-- css文档内部使用方式，配合选择器来使用 -->
		<div>这是一段文本内容</div>
		<h1>这是一个标题</h1>
		
		<!-- css外部引入的使用方式 -->
		<h2>这是外部引用改变样式的标签</h2>
	</body>
</html>

Css的特性

1，层叠

1个html标签可能会有很多个样式，生效的只有一个，可以通过权重值，觉得到低生效的是哪一个

权重值 ： 从0开始计算，

​ 行内样式 + 1000 ，

​ id选择器 +100，

​ 属性选择器、class选择器、伪类选择器 + 10

​ 标签选择器、伪元素选择器 + 1

​ !important +1000

2，继承

有些样式，父标签设置之后，内部嵌套的子标签，也能获得样式效果

Css选择器

选择器的作用 ： 就是用来找到html中某个具体的标签，并通过样式属性给这个标签加上指定的样式

写法 ： 选择器 { 样式属性 ： 样式的值 }

简单选择器（根据名称、id、类来选取元素）
CSS 元素选择器

直接以标签名来选择

CSS id 选择器

通过标签指定的id属性值来选择

写法： #id值{ }

CSS 类选择器

通过标签指定的class属性来选择

写法 ： .class值{ }

CSS 通用选择器

**

写法：*{ }

CSS 分组选择器

多个选择器写在一起的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{ /*标签选择器*/
				color: red;
			}
			#mydiv{ /*id选择器，选择指定id值的*/
				color: blue;
			}
			.myclass{ /*class选择器*/
				color: coral;
			}
			*{ /*选择全部的标签*/
				font-size: 50px;
			}
			#mydiv,.myclass,p{ /*选择多个选择器，并设置样式*/
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<div>这是普通的div标签中的内容</div>
		<div id="mydiv">这个是div中包含id属性的内容展示</div>
		<div class="myclass">这个是div中包含class属性的内容展示</div>
		<p>这是p标签的内容</p>
		<span>这是span标签内容</span>
	</body>
</html>
组合器选择器（根据它们之间的特定关系来选取元素）

后代选择器 (空格)：选择某个标签的后代标签

写法 ： 父标签 后代标签{}

子选择器 (>) : 选择某个标签的子代标签

写法 ： 父标签>子标签

相邻兄弟选择器 (+) ： 选择相邻的标签

写法： 标签a+标签b

兄弟选择器 (~) ： 选择同一个层级的标签

写法 ： 标签a~标签b

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*后代选择器   空格*/
			div span{
				color: red;
			}
			/* 子代选择器 */
			div>span{
				font-size: 30px;
			}
			/* 相邻兄弟 选择器 + ,找某个标签下面相邻的标签*/
			p+span{
				background-color: aquamarine;
			}
			/* 兄弟选择器 ~  */
			p.myclass~#mydiv{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div>这是父级div标签1
			<p class="myclass">这是div的子标签p2
				<span>这是p标签的子类span，div的后代3</span>
			</p>
			<span>
				这个span是div的子标签span4
			</span>
			<div id="mydiv">
				这是外层div的子标签div5
			</div>
		</div>
	</body>
</html>
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
所有 CSS 伪类

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link{ /*没访问过的*/
				color: red;
			}
			a:visited{ /*已访问过的*/
				color: aqua;
			}
			a:hover{  /*鼠标滑过内容*/
				background-color: orange;
			}
			a:active{ /*选中某个链接(鼠标按住)*/
				color: blue;
			}
      div:hover+p{
				display: none;
			}

      p::before{
				content: "abc";
				color: blue;
			}
			p::selection{
				background-color: green;
			}
		</style>
	</head>
	<body>
		
		<a id="taobao" href="http://www.taobao.com">淘宝</a>
		<a id="jd" href="http://www.jd.com">京东</a>
		<a id="baidu" href="http://www.baidu.com">百度</a>
		<a id="qq" href="http://www.tecent.com">腾讯</a>

    <div>这是div块的内容</div>
		<p>这是p标签的内容</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul :first-child{
				color: red;
			}
			ul li:last-child{
				color: blue;
			}
			ul li:nth-child(3){
				color: orange;
			}
			
			ul li:first-of-type{
				font-size: 30px;
			}
			ul li:last-of-type{
				font-size: 40px;
			}
			ul li:nth-of-type(4){
				font-size: 30px;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<p>这是ul子代p</p>
			<li>li标签的第1行内容</li>
			<li>li标签的第2行内容</li>
			<li>li标签的第3行内容</li>
			<li>li标签的第4行内容</li>
			<li>li标签的第5行内容</li>
			<li>li标签的第6行内容</li>
			<li>li标签的第7行内容</li>
			<li>li标签的第8行内容</li>
		</ul>
	</body>
</html>
所有 CSS 伪元素

在这里插入图片描述

属性选择器（根据属性或属性值来选取元素）
所有 CSS 属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a[name]{
				color: red;
			}
			a[class='baidu']{
				color: aqua;
			}
			a[class~=jd]{
				color: orange;
			}
			a[class|=jd]{
				background-color: darkgray;
			}
			a[href^=www]{
				color: red;
			}
			a[href$=cn]{
				color: cornflowerblue;
			}
			a[href*=jd]{
				color: salmon;
			}
		</style>
	</head>
	<body>
		<a name="hello" class="taobao" href="http://www.taobao.com">淘宝</a>
		<a class="jingdong jd" href="http://www.jd.com">京东</a>
		<a class="baidu jd" href="www.baidu.com">百度</a>
		<a class="jd qq baidu" href="http://www.tecent.cn">腾讯</a>
	</body>
</html>

CSS样式

CSS背景

CSS 背景属性用于定义元素的背景效果

background-color 属性指定元素的背景色

background-image 指定用作元素背景的图像
在这里插入图片描述
background-repeat 指定背景图片后，可以设置背景图片是否重复
在这里插入图片描述
background-attachment 指定背景图像是应该滚动还是固定的
在这里插入图片描述
background-position 设置背景图像的起始位置。
在这里插入图片描述
background-size 规定背景图像的尺寸。

background 在一条声明中设置所有背景属性的简写属性。

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inher

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
			background-color  			属性指定元素的背景色
			background-image			指定用作元素背景的图像
			background-repeat 		指定背景图片后，可以设置背景图片是否重复
			background-attachment	指定背景图像是应该滚动还是固定的
			background-position		设置背景图像的起始位置。
			background-size			规定背景图像的尺寸。
			background				在一条声明中设置所有背景属性的简写属性。
			*/
		   div.div1{
			   width: 200px;
			   height: 200px;
			   /* background-color: rgba(100, 100, 100,0.5); */
			   /* background-image: url(img/2.jpg); */
			   /* background-size: 100px 100px; */
			   /* background-repeat: no-repeat; */
			   /* background-attachment: scroll; */
			   /* background-position: center; */
			   background: red;
		   }
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
	</body>
</html>

CSS 字体属性

font 简写属性。在一条声明中设置所有字体属性。

font-family 规定文本的字体系列（字体族）。

font-size 规定文本的字体大小。

font-style 规定文本的字体样式。
在这里插入图片描述
font-variant 规定是否以小型大写字母的字体显示文本。
在这里插入图片描述
font-hweight 规定字体的粗细。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 字体 */
			div{
				color: red;
				font-size: 30px;
				font-weight: 900;
				font-family: "宋体";
				font-style: italic;
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
			<div>内容wenben</div>
	</body>
</html>

CSS 文本属性

direction 指定文本的方向 / 书写方向。
在这里插入图片描述
letter-spacing 设置字符间距。

line-height 设置行高。

text-align 指定文本的水平对齐方式。
在这里插入图片描述
text-decoration 指定添加到文本的装饰效果。
在这里插入图片描述
text-indent 指定文本块中首行的缩进。

text-shadow 指定添加到文本的阴影效果。
在这里插入图片描述
text-transform 控制文本的大小写。
在这里插入图片描述
text-overflow 指定应如何向用户示意未显示的溢出内容。
在这里插入图片描述
vertical-align 指定文本的垂直对齐方式。

white-space 指定如何处理元素内的空白。

word-spacing 设置单词间距。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*
			direction			指定文本的方向 / 书写方向。
			letter-spacing		设置字符间距。
			line-height		设置行高。
			text-align			指定文本的水平对齐方式。
			text-decoration	指定添加到文本的装饰效果。
			text-indent		指定文本块中首行的缩进。
			text-shadow		指定添加到文本的阴影效果。
			text-transform		控制文本的大小写。
			text-overflow		指定应如何向用户示意未显示的溢出内容。
			vertical-align		指定文本的垂直对齐方式。
			white-space		指定如何处理元素内的空白。
			word-spacing		设置单词间距。
			
			*/
		   div{
			   width: 200px;
			   height: 200px;
			   background: #b0ccff;
			   /* direction: rtl; */
			   /* letter-spacing: 5px; */
			   /* line-height: 60px; */
			   /* text-align: center; */
			   /* text-decoration: none; */
			   text-indent: 30px;
			   /* text-shadow: 5px 5px 5px rgba(10, 20, 30, 0.5); */
				text-transform: uppercase;
				/* 这是文本超出的省略号效果，三个一起用 */
				text-overflow: ellipsis;/*设置文本超出范围省略号效果*/
				overflow: hidden;  /*块内容溢出的处理*/
				white-space: nowrap; /*设置内容是否换行*/
		   }
		   p{
			   width: 200px;
			   height: 50px;
			   background: orange;
			   text-align: center;
			   /*line-height: 50px; /*单行文本上下居中*/
			   vertical-align: middle;
		   }
		   a{
			   text-decoration: none;
			   color: black;
		   }
		   a:hover{
			   color: blue;
			   text-decoration: underline;
		   }
		</style>
	</head>
	<body>
		<div>
			Abcd EFG文本内容文本内容文本内容文本内容文本内容文本内容
		</div>
		<p>
			文本内容
		</p>
		<a href="">链接到指定地址</a>
	</body>
</html>

CSS 列表属性

list-style 简写属性。在一条声明中设置列表的所有属性。

list-style-image 指定图像作为列表项标记。

list-style-position 规定列表项标记（项目符号）的位置。

list-style-type 规定列表项标记的类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				/* list-style-image:url(img/123.png); */
				/* list-style-position: outside; */
				/* list-style-type: none; */
				list-style: none;
			}
			li{
				background-color: aquamarine;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
	</body>
</html>

CSS 表格属性

border 简写属性。在一条声明中设置所有边框属性。

border-collapse 规定是否应折叠表格边框。

border-spacing 规定相邻单元格之间的边框的距离。

caption-side 规定表格标题的位置。

empty-cells 规定是否在表格中的空白单元格上显示边框和背景。

table-layout 设置用于表格的布局算法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>

			table,td{
				width: 400px;
				border: 1px solid #000;
				border-collapse : collapse;
				/* border-spacing: 5px; */
				/* caption-side: bottom; */
				empty-cells: hide;
				/* table-layout: fixed; */
			}
			tr{
				background-color: darkgray;
			}
			td{
				background-color: aquamarine;
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		
		<table>
			<caption>标题</caption>
			<tr>
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
			<tr>
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
		</table>
	</body>
</html>

CSS 布局 - display 属性

display属性的值

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为行内元素，元素前后没有换行符。

inline-block 行内块元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				display: inline-block;
			}
			span{
				width: 100px;
				height: 100px;
				background-color: red;
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			abc
		</div>
		<span>
			abc
		</span>
		<span>
			xyz
		</span>
	</body>
</html>

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。

inherit - 元素继承其父级的 float 值

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				width: 90%;
				height:50px;
				background-color: orange;
			}
			li{
				list-style: none;
				float: left;
				height: 50px;
				line-height: 50px;
				width: 147px;
				text-align: center;
				/* background-color: orangered; */
				color: #fff;
				font-weight: 900;
				font-size: 16px;
			}
			li:hover{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>主体导航</li>
			<li>9.9包邮</li>
			<li>好货让利榜</li>
			<li>大额优惠券</li>
			<li>母婴榜</li>
			<li>品牌尖货</li>
			<li>特惠宝贝</li>
			<li>潮流范</li>
			<li>有好货</li>
		</ul>
	</body>
</html>
丨陈墨瞳丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[CISCN2019 华北赛区 Day2 Web1]Hack World题解
qq_52843575的博客
04-07 3286
[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 627
[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 695
[CISCN2019 华北赛区 Day2 Web1]Hack World1题解
buuctf——[CISCN2019 华北赛区 Day2 Web1]Hack World
m_de_g的博客
04-22 691
【代码】buuctf——[CISCN2019 华北赛区 Day2 Web1]Hack World。
【BUUCTF】[CISCN2019 华北赛区 Day2 Web1]Hack World
aoao331198的博客
04-11 752
明确告诉了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..
[CISCN2019 总决赛 Day2 Web1]Easyweb
qq_51684648的博客
03-23 4714
[CISCN2019 总决赛 Day2 Web1]Easyweb 1、打开页面，试了试，xml，sql注入都没试出来。 查看robots.txt文件，发现 再查看源码，发现了image.php，试一下 image.php.bak泄露 <?php include "config.php"; $id=isset($_GET["id"])?$_GET["id"]:"1"; $path=isset($_GET["path"])?$_GET["path"]:""; $id=addslashes($id);
[CISCN2019 华北赛区 Day1 Web2]ikun
YkingH的博客
03-19 3554
[CISCN2019 华北赛区 Day1 Web2]ikun buu题目复现 页面提示，一定要买到Lv6，查找几页，找不到Lv6的存在，尝试通过脚本爆破Lv6 import requests url = 'http://57043135-ce0e-4b77-bcac-cd45e975d6f7.node4.buuoj.cn:81/shop?page=' for i in range(1,1000): url = 'http://57043135-ce0e-4b77-bcac-cd45e975d6f7.
[CTFTraining] CISCN 2019 华北赛区 Day1 Web1
ZXW_NUDT的博客
06-05 1837
[CTFTraining] CISCN 2019 华北赛区 Day1 Web1
CISCN2019_华北赛区_Day1_Web2]ikun_1通关手册
No_1_is_me的博客
11-14 2118
CISCN2019_华北赛区_Day1_Web2]ikun_1通关手册
CTFd之CISCN 华北赛区 Day1 Web2题目复现
weixin_43075257的博客
07-15 1480
知识点： 薅羊毛与逻辑漏洞 cookie伪造 python反序列化
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开发...
关于前端服务器字体的引用
qq_69304031的博客
09-02 416
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
vue3.5新增特性
最新发布
yunbabac的博客
09-05 274
vue3.5
js对象操作常用方法
m0_75276704的博客
09-02 546
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 552
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 525
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4185
深入理解JavaScript闭包：避免常见的内存泄漏问题
Day2Web服务器搭建指南：Apache配置与应用
在Day2的学习中，我们探讨了Web服务器的搭建与管理，特别是围绕Linux环境下的服务和论坛设置。首先，我们了解了Web服务器的基础概念，如网址、URL和URI地址，以及万维网（WWW）的含义。Web服务主要通过B/S（浏览器/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值