前端学习（一）_html中 fond family-CSDN博客

本文链接：https://blog.csdn.net/lmyyyyuer/article/details/103549339

本文主要介绍了前端开发的基础知识，包括HTML的get和post请求、CSS的选择器权重、文本属性、布局及盒模型，以及JavaScript的基础、函数、数组、字符串操作等。通过对这些基础知识的学习，可以帮助初学者快速掌握前端开发的基本技能。

摘要由CSDN通过智能技术生成

HTML

1.get和post请求的区别：

get 获取数据
post 提交数据
get 数据写在地址栏上，用户可见
post 用户不可见
get 不能提交大量数据，post可以。所以二者不要混用。

2.text-align:center 让内部元素水平居中

margin:auto 让元素本身水平居中

3.布局选择器

空div默认宽度100%，高度为0
CSS选择器：范围从大到小：
ID选择器：只能选择单个元素； #
CLASS选择器：选择该类别的多个元素； .
DIV选择器：选择对应所有标签；
通用选择器：所有标签都生效。 *

4.样式表的层叠

行内样式优先级>内部样式

CSS

5.选择器的权重

通用选择器 * 权重 0
标签选择器 div 权重 1
类别选择器 . 权重 10
ID选择器 # 权重 100
行内样式权重 1000

6.CSS文本属性

color:red; 文字颜色
fond-family:" "; 字体类型
fond-size:26px; 文字大小
fond-weight:bold; 文字加粗
fond-style:italic; 文字倾斜
text-indent:60px; 首行缩进
text-align:center; 水平对齐方式
line-height:100px; 行高
height:100px;back;ground-color:gray;line-height:100px; 垂直居中
text-decoration:underline; 文本修饰

7.常见图片格式的区别

gif：支持动画；只有全透明和不透明两种模式；只有256种颜色。
jpg:采用有损压缩算法；体积较小；不支持透明；不支持动画。
png:采用无损压缩算法；体积也相对较小；支持背景透明；不支持动画。
svg：不适用于图片存储。

8.背景图的使用

加margin:0无滚动条；
背景图默认平铺；
background-repeat:no-repeat;不重复
background-position:center center;位置居中

9.元素浮动的特点

浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠。-文字环绕效果
float:left;
父元素不浮动。使其整体不影响下面元素。
overflow:auto;超出父元素的边界的元素做出自动调整。
clear:left;该元素不受左浮动影响。
聊天界面的练习。
浮动元素在排列时，只参考前一个元素即可。
浮动元素的重叠问题：不会覆盖图片内容、文字内容、表单元素（输入框、单选、复选框、按钮、下拉框等）。

10.盒模型

margin:0; 边距为零。
margin:auto; 水平方向的边距自动，即左右相等，居中。
填充就是指向一个元素的内部，增加空间，也称为内边距。和外边距不同的是，填充会改变元素大小。随着填充的增加，元素会被撑大。 padding-left

11.定位实现下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉菜单</title>
		<style type="text/css">
			*{margin: 0;
			padding: 0;}
			ul{
				list-style: none;
			}
			#menu{
				width: 100px;
				height: 30px;
				margin: 20px auto;
				border: 1px black solid ;
				position: relative;
			}
			#menu ul{
				width: 100px;
				border: 1px black solid;
				position: absolute;
				left: -1px;
				top: 30px;
				background: white;
				display: none;
			}
			#menu:hover ul{
				display: block;
			}
			#menu ul li:hover{
				background: gray;
			}
			p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			卖家中心
			<ul>
				<li>1111</li>
				<li>2222</li>
				<li>3333</li>
				<li>4444</li>
			</ul>
		</div>
		<p>测试段落测试段落测试段落测试段落</p>
	</body>
</html>

JS

12.CSS属性简写

background: red url(xxx.png) no-repeat;背景色背景图片平铺方式（都可以省略，必须按顺序）
border: 1px soild #D3f402; 边框宽度边框样式边框颜色（只可省略颜色，默认为黑色。必须按顺序）
font:italic bold 20px/35px arial,sans-serif,“微软雅黑”; 斜体字加粗字号大小 /行高默认字体，备用字体，备用字体（可以省略，但必须按顺序）
margin:10px 15px 10px 15px ;上右下左（不可省略）
margin:10px 15px 10px ；上左右下
margin:10px 15px；上下左右
margin:10px