2020-12-15

最新推荐文章于 2024-03-22 18:08:45 发布

菜鸡要学ctf

最新推荐文章于 2024-03-22 18:08:45 发布

阅读量868

点赞数 1

分类专栏：笔记文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_52402813/article/details/111189757

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端小白一个星期入门HTML+CSS（1-3day）

第一天

<!DOCTYPE html>//这是声明告诉浏览器用html5标准解析网页
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>//head表示网页的头部，这里的信息都是对网页的整体说明
	<body>
		张晓晴是猪嘛？ 对她是。
	</body>//body表示网页的身体，网页的主要内容都写在这里
</html>

本人使用HBuilder x软件
hbuilderx内置的服务器可以帮我们自动的刷新页面（需要下载安装）
Ctrl + s保存（保存后上角出现星号）

<h1>  </h1>
<h2>  </h2>
<h3>  </h3>
6级标题越来越小
//标题越来越小在body内
<i>2020</i>//中间变成斜体字（或em）
<p>文字独占一行（段落标签）</p>有断行//原代码中换行无效
<b>字体变粗</b>（同strong）
<br>//单标签可强制换行（回车效果）
<hr >//单标签一条横线无结束
在原代码中敲的空格再多都看做一个
&nbsp;//不换行空格
&gt;//右尖括号
&lt;//左尖括号
&copy;//备案中图标
分号不能漏
<title>标签最上面带叉号的</title>
<img src="图片的地址" >
<ul>表示带点的标签//(若il变为ol前面不是点是数字为有序列表）
<ul>用法详解
<ul type="disc">实心圆
<ul type="circle">空心圆
<ul type="square">实心方块
<ol>用法详解
<ul type="1">数字排序
<ul type="a">字母排序
<ul type="A">字母排序
<ul type="i">小写罗马字母排序
<ul type="I">大写罗马字母排序
	<li>一个个小标签</li>//(il为无序列表）
	<li>一个个小标签</li>
</ul>
<div></div>容器元素
<span></span>行内元素
<a href="点文字的链接">超链接的文字</a>
<a href="点图片的链接" alt="图片替换文本" title="图片标题鼠标放上去会有的小提示">
<img src="图片" width(宽)="100px" height="100px">
关于图片
<img title="提示" alt="失败" src="imgs/a.png">
<img src="图片" title="鼠标划上去时的提示"  alt="图片加载失败后的文字">
图片失效时候辣条会显示出来
<img src="" width="100%">//图片和页面同大小
不常用标签
<del>文字增加下滑线</del>
<sup>2</sup>文字变成上标
<u>文字加下划线</u>
<center>把文字居中</center>
<table border="线宽" cellpadding="单元格与内容之间的联系" 
cellspacing="每个单元格间距" bordercolor="线的颜色">

ctrl + d 复制上一行内容
当右键无法让图片另存为时
打开浏览器的控制面板
1.菜单-更多工具-开发者工具
2.Ctrl+Shift+i
3.Fn + F12
图片截图软件PhotoShop
绝对地址和相对地址
绝对地址在任何情况下都能找到的地址
相对地址知道当前所在才能定位目标
完整地址叫绝对路径
不完整地址为相对路径
图片链接添加…/…/上一级目录…/…/xxxxx.jpg
ctrl + 上下键可以移动一行代码

		表格编写（body内\）
		border="线宽" 
		cellpadding="单元格与内容之间的联系" 
		cellspacing="每个单元格间距" 
		bordercolor="线的颜色
		//align表示对其方式
		left/right/center
		//valig垂直对齐
		top/bottom/middle
  		 border表示边框宽度
		colspan="所要合并单元格的列数"
		rowspan="所要合并单元格的行数"
		<td width="200px">//调整表格中单元的宽度
		<td colspan="4">文字</td>//colspan=""
				//一个单元格占据4列的位置
		<td rowspan="2">//上下合并同上
		<td width="200px" height="200px" align="center">
		<table>//<table border="1px" cellspacing="0">可设定宽度见上方
			<col width="100px">//<col>是column列的缩写宽度
			一次搞一列
			<col width="100px">//第二列
			<col width="100px">//第三列
			//col为单标签表示一列
			<tr align="center">
				<td colspan="4">文字</td>//colspan=""
				//一个单元格占据4列的位置
			</tr>
			<tr>//表示一行
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>
			</tr>
			<tr height="40px">//在tr内设置一行中表格的高度
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>
			</tr>
			<tr align="center">//给tr增加文字格式
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>
				<td>文字</td>			
			</tr>
		</table>

在这里插入图片描述

第二天

快速输入

tr*4>td*3按下tap键表示4行三列

记住tr是行td是列
表格知识补充

1.<td>...</th>
改为<th>....</th>
th=加粗并水平的td
2.colgroup标签
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="200px">
同等于
<colgroup span="4" width="100px">
<colgroup span="1" width="200px">
3.<!--  -->为注释页面上看不见
4.标签嵌套
超链接不能嵌套超链接
p标签不能嵌套p标签
标签标签h1...h6也不能互相嵌套
5.table放入form表单里才有刷新效果

表单
用表单提交数据
在这里插入图片描述

原码

		<form action="">
		<table width="600px" border="1px" cellspacing="0" >
		1.边框一像素 2.单元格的间距为零 3.宽600px
			<tbody>
				<tr height="40px">
				每一行高40
					<td rowspan="4" align="center" style="color:red">总体信息</td>
					1.第一列合并2.居中 3.变红
					<td colspan="2"></td>
					第一行两个合并
				</tr>
				<tr height="40px">
					<td align="right">用户名：</td>
					位置居右
					<td>
						<input type="text" name="loginname">
						1.输入框用于输入名字 2.name属性使用使数据提交成功
					</td>
				</tr>
				<tr height="40px">
					<td align="right">密码：</td>
					位置居右
					<td>
						<input type="password" name="pwd">
						1.输入框用于输入密码 2.name属性使用使数据提交成功
					</td>
				</tr>
				<tr height="40px">					
					<td colspan="2" align="center">
					1.最后一行两个合并2.两个按钮居中
						<input type="submit" value="提交"  style="background-color: darkseagreen;">
						1.提交按钮加文字 2.颜色变绿
						<input type="reset" value="重置" style="width: 80px;height: 30px; ">
						1.提交按钮加重置 2.按钮变大
					</td>
				</tr>
			</tbody>
		</table>
		</form>

知识点小总结
1.form必须有action属性填表单数据提交的地址
2.所有需要提交的数据，input必须有name属性
3.input按钮的文字，使用value属性表示
4.input必须放在form标签内才能提交

<input type="x">

x=text文本输入框
x=password密码输入框
x=button普通按钮
x=submit提交按钮
x=reset重置按钮
x=file文件选择框
x=radio单选框
x=checkbox复选框
type类型
get请求和post请求的区别
1.get请求通常表示获取数据
2.post请求通常表示提交数据
3.get请求发送的数据用户不可见
（检验post方式是否提交成功F12Network）
4.get请求不能提交大量数据，但post可以，因此不要混用
表单和服务器通讯方式
1.从服务器获取数据
2.向服务器提交数据

<form method="x">
x=get
x=post
</form>

提交数据post
获取数据get
CSS
html和css关系
用来修饰网页样式的语法
叫做层叠样式表css
(Cascading Style Sheet)
拾色器提取颜色
样式表学习

div span

span
一个容器的标签，不具备任何特殊功能，仅当容器使用。
用于包裹一段文本，便于给文本增加样式。

<p style="text-align: center;background-color: blue;">
			哈哈哈
</p>
1.文字居中显示 2.文字一行的背景颜色
<p style="text-align: center;background-color: blue;">
	<span style="background-color: gray; color: white; font-size:24px;">哈哈哈</span>
</p>
1.文字居中显示 2.文字一行的背景颜色 
3.容器背景灰色 4.字体白色 5.（font表字体）size字体的大小
<b>..</b>
加粗

div
特点：一个空的div，默认宽度为100%，高度为0，添加内容才会有高度
一个通用容器标签,不具备任何特殊功能,仅当容器来使用.
可以包裹任何内容,也可以容器直接互相包裹.
div包裹全部
text-align:center让容器内部元素水平居中
margin表示边距,auto表示自动

对整个容器设置样式（如下）

<div style="color: 颜色;">
	<p></p>
	<p></p>	
</div>

使整个容器居中

<div style="margin: auto; width: 500px;">
</div>

小总结
1.text-align: center; 让内部元素水平居中 p
2.margin: aut 让元素本身水平居中 div
3.background-color: gray 设置背景颜色 span
4.font-size:24px 设置背景大小 span
5.color: white 文字的颜色 span

制作一个简单的页面
基本布局加细节
了解常用英语
1.banner 条幅
2.navigation 导航
3.bottom 底部
字体的默认大小为16px 行高为21px
容器大小改变也得变行高
body标签在默认的情况下会使在两侧有一定空隙（解决如下）

<body style="margin: 0;">

使图片宽度100%占满屏

<img src="姐图片地址" style="width: 100%;">

简化之内部样式行内样式
标签内部的叫行内样式，style内部的叫内部样式

<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首页</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">关于</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">姐姐</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首门口</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">得的</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">大量</a>
<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">额的</a>

上下相同

<style>
	a{text-decoration: none; color: black; margin: 0 15px }
</style>
	<a href="#">...</a>
	<a href="#">...</a>
	<a href="#">...</a>

下面引入两段表达相同的代码一段为简写一段为原码
先看下效果图
在这里插入图片描述

<!DOCTYPE html>
<html style="background-color: azure;">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body style="margin: 0;">
			<div id="哈哈">
				<img  src="姐姐/哈哈.png" style="width: 100%;">
			</div>
			<div id="navigation" style="height: 80px; line-height: 80px; text-align: center; background-color: white;">
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首页</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">关于</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">姐姐</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">首门口</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">得的</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">大量</a>
				<a href="#" style="text-decoration: none; color: black; margin: 0 15px ;">额的</a>
			</div>
			<div id="bottom" style="height: 40px;line-height: 40px; text-align: center;font-size: 14px; color: blueviolet;">
				版权所有哈哈哈哈
			</div>
	</body>
</html>

简写对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<title></title>
		<style>
			html {background-color: azure;}
			body {margin: 0;}
			#navigation{navigation" style="height: 80px; line-height: 80px; text-align: center; background-color: white;}
			#bottom{height: 40px;line-height: 40px; text-align: center;font-size: 14px; color: blueviolet;}
			.nav{text-decoration: none; color: black; margin: 0 15px ;}
			#哈哈 img {width: 100%;}
		</style>
	</head>
	<body>
			<div id="哈哈">
				<img src="姐姐/哈哈.png">
			</div>
			<div id="navigation">
				<a href="#" class="nav">首页</a>
				<a href="#" class="nav">关于</a>
				<a href="#" class="nav">姐姐</a>
				<a href="#" class="nav">首门口</a>
				<a href="#" class="nav">得的</a>
				<a href="#" class="nav">大量</a>
				<a href="#" class="nav">额的</a>
			</div>
			<div id="bottom">
				版权所有哈哈哈哈
			</div>
	</body>
</html>

对比可以更好的理解代码的简写技巧
CSS选择器
上面代码style中涉及
1.ID选择器（#+id名） id表明身份在页面元素中不允许重复，因此选择器只能选择单个元素
2.类别选择器（.+clss名）选择具有该类别的多个元素
3.标签选择器（div）根据标签名称选择对应的所有标签
4.通用选择器（列*{color：green}）针对页面上所有标签都生效
边框的设置
border: solid 1px aqua;
设置边框
border-right: solid 1px aqua;
设置右边框
层叠样式表
在实际网页开发中，作用于同一个元素上多个样式产生冲突的情况不可避免的发生
当多个样式发生重叠时，优先级别高的样式会生效，因此得名层叠样式表

第三天

CSS优先级判断
在这里插入图片描述当样式发生冲突时，谁的权重值高，谁就生效
style中的代码上下级类别名必用空格隔开，同级类别名禁用空格
权重
通用0 标签1 类10 ID100 行内1000
选择器选择的范围越小越精确优先级越高
CSS文本属性
1.color颜色
2.font-family字体类型
3.font-size文字大小
4.font-weight：bold文字加粗
5.font-style：italic文字倾斜
6.text-align: center水平对齐方式
7.text-indent：60px首行缩进
8.line-height：100px；行高
9.height：文字高backgroudn-color：
背景颜色 line-height：100px；行高
当文字高等于行高时默认文字居中
10.text-decoration： underline文本修饰
常见图片格式的区别
gif
1.支持动画 2.只有全透明和不透明两种模式 3.只有256种颜色
jpg
1.采用有损压缩算法 2.体积较小 3.不支持透明 4.不支持动画
png
1.采用无损压缩算法 2.体积相对较小 3支持背景透明 4.不支持动画
svg
保存形状按放大后按形状上色保存颜色图像相对简单的图片
背景图的使用
元素宽高的百分比，是相对于父元素而言
若父元素的高度为0，则子元素高度即使设置100%，大小也是0
html元素大小是相对于浏览器大小eryan
background-image: url(imgs/dong.gif)
背景图加平铺
background-repeat: no-repeat;
不平铺
background-position: right bottom;
背景图的位置（right水平 bottom垂直）
（style标签内）
元素的浮动
浮动元素会脱离网页文档，与其他元素发生重叠
但是，不会与文字内容发生重叠
列：文字环绕效果，三个容器横向排列
左右浮动
float: left;
float: right;
文字环绕实现和横向排版布局的实现
在这里插入图片描述

	</head>
	<style type="text/css">
		.green{
			width: 100px; height: 100px;
			background-color: green;
			float: left;
		}
		.red{
			width: 200px; height: 150px;
			background-color: red;
		}
		.a{
			width: 200px;
			background-color: green;
		}
		.b{
			width: 700px;
			background-color: red;
		}
		.c{
			width: 300px;
			background-color: blue;
		}
		
		.a,.b,.c{
			float: left; height: 200px;
		}
	</style>
	<body>
		<p>文字环绕效果</p>
		<div class="green"></div>
		<div class="red">
			文字环文字环绕绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
		</div>
		<p>横向排版布局</p>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</body>
</html>

父元素边框自动调整方法
1.设置高度
2.overflow:auto;自动调整超出高度的。
3.clear清楚浮动。clear:left不受到左浮动影响/right/both不受到左右浮动影响。谁不希望受到影响谁增加clear样式
浮动元素知识补充
1.浮动元素在排列的过程中只参考前一个元素的位置即可
在这里插入图片描述
2.右浮动的顺序问题（右浮动重排）
3.浮动元素的重叠问题
1）浮动元素不会覆盖文字内容。
2）浮动元素不会覆盖图片内容
（因为图片本身也是文本，可以将图片看做是一个特殊的文字）
3）浮动元素不会覆盖表单元素
（输入框，单选按钮，复选框，按钮，下拉选择框等）
边框设置
各个方向边距
*{margin: 0;}将所有元素边距都设置为零
margin设置边框的元素
margin-top: 10px;
top顶部。。。right右。。。bottom底部。。。left左
overflow: auto;容器大小以其他元素撑开为准
margin: auto;让父元素自动设置边框，左右边框相等，即可达剧中效果，水平方向有效
如图
在这里插入图片描述代码

		<style type="text/css">
			* {
				margin: 0;/*将所有元素边距都设置为零*/
			}
			.item{
				width: 210px;
				height: 136px;
				float: left;
				margin:20px;
			}
			#box{
				width: 750px;
				overflow: auto;/*按其他元素撑开的为准*/
				margin: auto;/*让父元素自动设置边框，左右边框相等，即可达剧中效果，水平方向有效*/
			}
		</style>
	</head>
	<body>
		<div id="box">		
			<div class="item" style="background: url(js/QQ截图20201219170346.png);"></div>
			<div class="item" style="background: url(js/QQ截图20201219170402.png);"></div>
			<div class="item" style="background: url(js/QQ截图20201219170433.png);"></div>
		</div>
	</body>
</html>

浮动元素的排列方式
浮动元素在排列时，只参考前一个元素的位置
填充
1.指向一个元素内部，增加空间，也可以称为内边距。
2.和外边距不同的是，填充会改变元素的大小。随着填充的增加元素会被撑大。
盒子模型
内容填充边框边距
一个小项目初学者敲一遍好处大大的
在这里插入图片描述

	<style type="text/css">
			*{
				margin: 0; padding: 0;/*将所有元素的默认边距和填充设为0*/
			}
			#header{
				height: 50px;
				background: #E83828;
			}
			#header .head{
				width: 1005px;height: 50px;
				background: #D1D3D6;
				margin: auto;/*居中显示*/
			}
			#banner{
				height: 500px;
				background: slateblue;
			}
			#category{
				width: 1005px; height: 200px;
				margin: auto; background: #FF359A ;
			}
			#category .item{
				width: 125px; height: 165px;/*设置大小*/
				padding-left: 25px;/*左填充*/
				padding-right: 25px;/*右填充*/
				padding-bottom: 25px;/*下填充*/
				padding-top: 10px;/*上填充*/
				border-right: 1px dashed black;/*右边框 1像素 虚线 黑色*/
				float: left;/*左浮动*/
			}
			#category .item.first {
				padding-left: 0;/*取消左填充*/
			}
			#category .item.last{
				padding-right: 0;/*取消右填充*/
				border: 0;/*取消边框*/
			}
			#case{
				height: 490px;
				background: #eeeeee;
			}
			#case .title-text{
				width: 1005px;
				margin: auto;/*水平居中*/
				padding-top: 20px;/*上填充*/
				padding-bottom: 10px;/*下填充*/
				font-size: 45px;/*字体大小*/
			}
			#case .item-wrapper{
				width: 1000px;
				margin: auto;/*水平居中*/
				overflow: auto;/*自动设置高度，防止因子元素浮动而高度坍塌*/
			}
			#case .item-wrapper .item {
				width: 320px;
				height: 330px;
				background: #9ACD32;
				float: left;/*左浮动*/
			}
			#case .item-wrapper .item.mg{
				margin-left: 20px;
				margin-right: 20px;/*左右边距*/
			}
			#case p {
				width: 1005px;
				margin-left: auto;/*水平居中*/
				margin-right: auto;/*水平居中*/
				margin-top: 15px;/*上边距*/
				height: 40px; line-height: 40px;/*行高使高度居中*/
				text-align: center;/*文字水平居中*/
				font-size: 30px;/*字体大小*/
				color: dimgray;/*字体颜色*/
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="head"></div>
		</div>
		<div id="banner"></div>
		<div id="category">
			<div class="item first"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item last"></div>
		</div>
		<div id="case">	
			<div class="title-text">
				Case
			</div>
			<div class="item-wrapper">
				<div class="item"></div>
				<div class="item mg"></div>
				<div class="item"></div>
			</div>
			<p>查看更多+</p>
		</div>
		
	</body>
</html>

CSS属性
1.background背景
background-color背景颜色
background-image背景图片
background-repeat背景图的平铺方式
合并可以把三个属性写成一个如下（不一定三个同时）
background：gray（背景色） url（背景图片） no-repeat(平铺方式)
2.border边框
border-width边框宽度
border-style边框样式
border-color边框颜色
border：1px（边框宽度） solid（边框样式） black（边框颜色）
3.font字体
font-style：italic；斜体
font-weight：bold；加粗
font-family：arial，sans-serif；字体种类
font-size：20px；字号大小
line-height：35px；行高（使我们的字体垂直居中）
font：italic（斜体字） bold（加粗）字号大小20px/30px行高（默认字体）arial，sans-serif（备用字体），“微软雅黑”
列：font：20px “微软雅黑”；
4.margin外边距
margin-top顶部
margin-right右部
margin-bottom下部
margin-left左部
合并
margin：10px 15px 10px 15px；上右下左
margin：10px 15px 10px；上左右下
margin：10px 15px；上下左右
margin：15px；上下左右
5.padding填充和4外边距一样
padding-top顶部
padding-right右部
padding-bottom下部
padding-left左部
6.颜色
color：red；直接写颜色
color：rgb（184红.131绿.11蓝）
转换成16进制可简写
color：#B8 86 0B
谢谢老铁们观看