web——day02

最新推荐文章于 2024-11-16 14:48:02 发布

sinat_40482939

最新推荐文章于 2024-11-16 14:48:02 发布

阅读量293

点赞数

文章标签：定位 css html js javascript

本文链接：https://blog.csdn.net/sinat_40482939/article/details/108079980

版权

复习

1.html:浏览器解析执行
2.结构

  <html>
	<head></head>
        <body></body>
  </html>

3.常用标签

  <br> <p> <h1-6>
  <img src="">
  <a href="http://.....">   <a id="">    <a href="#idname">
  <ul>   <ol>   <li>
  <table>

4.form
action=“处理程序”
method=“get/post”

  <input type="text",password,radio,checkbox,button,submit,reset
                 file,hidden(name  和  value)
                 email

   <textarea>
   <select>
   <option value="1001" > 北京市

css

1.选择器
元素选择器：选择器的名称是html标签名
类选择器：

   .className{}    class=""

id选择器：

  #idName{}       id=""

后代选择器（子孙选择器）

div p{}

子选择器

div > p{}

分组选择器

 div,#p1,.p3{}
   
   div + p{}
   div ~ p{}

2.使用的时候3中形式：
style：内嵌式

  <p style="">

   <style></style>

外部的css文件*.css
<link

3.盒子模型
内容+内边距+边框+外边距

4.块级元素：<div><p>
行内元素：

<a><span><input><img>

5.和文本相关

   font-family:
   font-size:
   color:
   text-align:
   line-height:
   text-decoration:
   list-style:

6.内边距和外边距

   margin:10px,10px,10px,10px;
   margin:10px,10px,10px;
   margin:10px,10px;
   margin:10px;
   margin-left:
   martgin-top:
   padding:10px,10px,10px,10px;
   padding:10px,10px,10px;
   padding:10px,10px;
   padding:10px;
   padding-left:
   padding-top:

7.背景

   background-color:
   background-image:url();

8.边框

   border:1px solid blue;

9.浮动
文档流：
脱离文档流：

  float:right;/left

文字会正常显示

定位

1.绝对定位：
相对于父容器的，如果没有是body
可以作为定位的父容器的条件：必须有position属性,并且值为absolute，
relative，fixed其中一个
如果两个容器绝对定位的属性相同，那么后一个会覆盖前一个，包括文字
绝对定位的组件会随着窗口的滚动移动。

2.z-index属性

3.相对对位：
保留组件文档流的位置

4.fixed（视口定位）
不随着窗口的滚动而移动

高度塌陷

两个容器中，内部容器的margin-top失效，
解决方案：
1.在外层容器中使用border
2.overflow:
3.margin-top改用padding-top

javascript

1.数据类型

字符串（String）：""
str = “hello”;
var x = “abc”;
数值number：
var a = 2;
b = 3.4;
布尔型boolean
var b1 = true;
b2 = false

if(3){}//非0即为true  正确的

undefined:
var x ;
null;
var obj = null;

typeof(变量名)：返回数据类型

2.弱类型定义变量 var

var str;
变量的数据类型由值决定

3.运算符：
同java == ===

4.语句：

  if(3){
	语句体；
	}
   for(var i=0;){
	
	}

5.函数：
分类：自定义函数和系统函数

  function 函数名（参数列表）{}

	//无参无返回值
	function fun1(){
		alert("fun1");		
	}
	//fun1();//调用函数
	//有参无返回值
	function fun2(x, y){
		alert(x+y);
	}
	fun2(2,3);
	function fun3(){
		return "hello";
	}
	alert(fun3());
	function fun4(x,y){
		return x+y;
	}
	alert(fun4(3,4));

内置对象