小程序学习知识点day2

1.使用style中，display属性可以转换块级和内联块。
2.id选择器（尽量少用，根据具体情况使用）
（1）id名称只能使用一次
（2）#id名称{属性名：属性值;…}
3.class选择器（类选择器）
.class名称{属性名：属性值;…}
4.表格table
border=“number"控制边框厚度
bgcolor=” "控制背景颜色
width="number"控制宽度
height="number"控制高度
align="center/left/right/…"控制居中，居左，居右等
cellpadding="number"控制单元格内容与单元格边框的距离
cellspacing="number"控制单元格间距,是设置单元格与单元格之间的距离
eg:

<table border="1" bgcolor="lightblue"  align="center" cellpadding="0" cellspacing="0" width="300px" height="300px">
			<thead>
				<!-- 表头 -->
				<tr>
					<th>序号</th>
					<th>商品名称</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody>
				<!-- 内容 -->
				<tr valign="middle">
					<td>1</td>
					<td>祭司</td>
					<td>300r</td>
				</tr>
				<tr>
					<td>2</td>
					<td>昆虫学者</td>
					<td>350r</td>
				</tr>
				<tr>	
					<td>3</td>
					<td>舞女</td>
					<td>200r</td>
				</tr>
			</tbody>
			
</table>

注意：cellspacing和cellpadding不能放在外联样式里，也就是说不能从table标签里面删掉。
5.行内样式>内部样式>外部样式（一般都写成外部样式）

• 加个important可以改变样式的优先级。
  6.伪类的效果是通过添加一个实际的类
  伪元素是通过添加一个实际的元素
  7.在表中元素前面加上一些图案如*只需这样写（用伪元素）：

table tr td::before {
	content: '*';
}

8.a:hover定义一定要放在a:link、a:visited的后面，正确的顺序：a:link、a:visited、a:hover、a:active
9.a:link设置链接未被点击过时的初始状态。
a:visited：选择器设置访问过的页面链接的样式。
a:hover设置鼠标移动到链接时链接的状态。
a:active设置当你点击链接时的样式。
10.get和post的区别

• post请求更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中，get请求的是静态资源，则会缓存，如果是数据，则不会缓存）
• post请求发送的数据更大（get请求有url长度限制，http协议本身不限制，请求长度限制是由浏览器和web服务器决定和设置）
• post请求能发送更多的数据类型（get请求只能发送ASCII字符）
• 传参方式不同（get请求参数通过url传递，post请求放在request body中传递）
• get请求产生一个TCP数据包；post请求产生两个TCP数据包（get请求，浏览器会把http
  header和data一并发送出去，服务器响应200返回数据；post请求，浏览器先发送header，服务器响应100
  continue，浏览器再发送data，服务器响应200 返回数据）
  注意：在发送 POST 的时候都没有带 Expect 头，server 也自然不会发 100 continue。
  11.表单
  form标签，里面的action属性是传参地址，method是传参方式。
  eg:

<form action="test.html" method="get">

• 输入框

<div>
			<label for="account">姓名</label>
			<input id="account" type="text" name="account">
</div>

• 单选框

<div>
				<label for="">性别</label>
				<input type="radio" name="gender" value="男">男
				<input type="radio" name="gender" value="女">女
				<!-- value是提交用的，后边的男女文字是展示用的 -->
</div>

• 多选框

<div>
				<label>爱好：</label>
				<input type="checkbox" name="hobby" value="篮球">篮球
				<input type="checkbox" name="hobby" value="足球">足球
				<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</div>

• datetime-local

<div>
				<label for="birthday">生日：</label>
				<input id ="birthday" type ="datetime-local" name="birthday">
</div>

• 选择下拉框

<div>
				<label>城市</label>
				<select name="city">
					<option>--请选择--</option>
					<option value="天津">天津</option>
					<option value="北京">北京</option>
				</select>
</div>

• 输入大段文字框（eg输自我介绍）
• cols:规定文本区内可见的宽度
• rows:规定文本区域内可见的行数

<div>
				 <label for="info">自我介绍</label>
				 <textarea name="info" id="info" cols="30" rows="4"></textarea>
</div>

• 提交

<div>
				<input type="submit" value="提交按钮">
				<input type="reset" value="重置按钮">
				<input type="button" value="普通按钮">
</div>

12.如何设置光标？

autofocus="autofocus"

如何改变光标位置？
在input标签的style属性中用padding-left改变光标的初始位置。

padding-left: 5px;

13.如何改变点击后边框的颜色？

<style>
			input:focus{
				outline: none;
				border: 2px solid blue;
			}
</style>

14.怎么清除浮动？

.clearfloat::after{
				display: block;
				clear: both;
				content: '';
				visibility: hidden;
				height: 0;
				overflow: hidden;
}

在有浮动的两个块的父块上加上class="clearfloat"即可。
15.自定义列表

<!-- dt是标题 dd是内容 -->
		<dl>
			<dt>个人中心</dt>
			<dd>我的资料</dd>
			<dd>我的地址</dd>
			<dt>首页</dt>
			<dd>热卖</dd>
		</dl>

16.有序列表

<p>西天取经谁没去？</p>
		<ol type="A">
			<li>唐僧</li>
			<li>小龙女</li>
			<li>孙悟空</li>
		</ol>

17.定位
position属性用来设置元素在页面中的位置，通过这个属性可以把任何属性放置在认为合适的地方。

• 相对定位是相对于正常的位置，不是以父级元素为标准，所以给它设定bottom,top等是没有什么效果的。
• 绝对定位，写absolute的时候一般都会在它想相对于谁定位的那个父级元素上加上relative，这两个一般都是成对存在，然后absolute的那个元素会相对于那个元素移动。如果没有父级元素，相对于浏览器窗口进行定位。
• 写了相对定位和绝对定位就需要用%50来居中了，不能用margin:0 auto这种来居中。
• 绝对定位absolute是脱离文档流的，不再进行占位，相对定位relative是不脱离文档流的。
• 固定定位fixed：将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器的滚动而移动，eg:返回顶部按钮用固定定位实现。
• 粘性定位sticky将元素相对于父元素始终不动，父元素移动的过程中子元素会一直粘在某一个地方。
  eg:

.father{
			width: 30%;
			height: 1800px;
			margin: 100px auto;
			padding: 100px;
			
			background-image: linear-gradient(to right bottom, yellowgreen, orange);
}
.father .son{
			position: sticky;
			top: 0px;
               width: 50%;
			height: 100px;
			margin: 0 auto;
			background-color: skyblue;
}

注意：必须要定义top, bottom, left, right中的一个，不然会只是相对滑动状态。
使用粘性定位元素，父元素不能定义overflow:hidden或者auto。
父元素的高度不能低于粘性定位的高度。
粘性定位的元素只在父元素内是有效的。
18.如何让图片和文字垂直居中？

.flex{
	display: flex;
}
.center{
	align-items: center;
}

在需要居中的div中加上class="flex center"即可。
19.绝对定位之后下边的东西跑到上边去了怎么办？
这时只需要给下边的东西设置内边距等于上边的东西的高度它就可以回到原来的位置上。
17.script标签既可以写在body里也可以写在head里。
19.dom操作
Javascript并不能直接操作页面元素（例如拖拽等功能），但可以调用dom完成。
核心是document.