黑马程序员技术交流社区

标题: 【石家庄校区】web前端笔记 [打印本页]

作者: 哥.兜裡有煙 时间: 2017-11-19 11:35
标题: 【石家庄校区】web前端笔记
本帖最后由小石姐姐于 2017-11-21 10:08 编辑

* HTML的概述：

* HTML：Hyper Text Markup Language.

* HTML就是由一组标签所组成的.

* HTML的字体标签:

* <font>标签:

* 属性：color,size,face

* HTML的排版标签:

* h标签：标题标签.

* p标签：段落标签.

* b标签：加粗标签.

* i标签：斜体标签.

* u标签：下划线标签.

* br标签：换行.

* hr标签：水平线.

* HTML的图片标签:

* img标签:

* 属性:

* src属性:图片的路径.

* 相对路径: ./ 代表当前目录 ../上一级目录

* width,height,alt.

* HTML的超链接标签:

* a标签:

* 属性：

* href:链接的路径.

* target:链接打开的方式. _self,_blank,_parent

* HTML的列表标签:

　* 无序列表:<ul>

* 有序列表:<ol>

* HTML的表格标签：

* table标签:

* tr标签：表格的行.

* td标签：表格的列.

* HTML的表单标签：（*****）

* form标签：

* action属性：表单提交的路径

* method属性：表单的提交的方式.

* GET和POST：

* GET：地址栏上会显示提交的数据的信息,大小限制.

* POST：地址栏不会显示提交的数据的信息,没有大小限制.

* <input>

* type=”text”:文本框

* type=”password”:密码框.

* type=”radio”:单选按钮.

* type=”checkbox”:复选框.

* type=”file”:文件上传.

* type=”hidden”:隐藏字段.

* type=”submit”：提交按钮.

* type=”reset”:重置按钮.

* type=”button”:普通按钮.

* type=”image”:图片按钮.

* <select>:下拉列表.

* <textarea>:文本区

* HTML的框架标签:

* <frameset>

* <frame>

设置边框: border:”1px solid black”

div+css

快捷键 alt+shift+a 可以同时修改多行代码

1.常用标签:

<div> 块级元素

<span> 行内元素

<ul> 里标签

<a> 超链接

<i>

2.块级元素和行内元素

块级元素：独占一行，可以修改高度和宽度 div 块级元素转行内元素添加属性display:inline;

行内元素：不独占一样，不可以修改高度和宽度 span 行内元素转块级元素添加属display:block;

行内块级元素:不独占一行，并且可以修改高度和宽度 img display:inline-block;

3.table和div布局的区别

div更加灵活并且解析加载速度快

4.CSS引入方式

引入外部css文件：多个HTML文件中使用了相同的样式

页面内样式：同一个HTML文件中多个标签共用这个样式

行内样式：只有某个标签自己使用

5.选择器的优先级

ID选择>类选择器>标签选择器

5.1 复合选择器

子孙元素选择器 div a{}

子元素选择器 div > a{}

属性选择器标签名[属性名='属性值']{}

6.浮动

为什么要使用浮动？为了让某些标签(块级元素，div，li)横着显示

如何使用浮动? float:left

如何清除浮动? 两种

1.在浮动的元素后面添加<div style="clear:both"> 不建议使用

2.给浮动的元素的父元素添加一个样式 clearfix

/*清除浮动样式*/

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

</div>

7.CSS中的继承问题

在CSS中宽度是可以继承，高度不可以继承

注意：浮动以后的元素是不会继承宽度的

8.div居中

margin:0 auto;

9.百分比和PX的计算

calc(100% - 45px)

注意事项：减号的两边必须有空格

代码演示:

</div>

10.盒模型

外边距：盒子与盒子的距离 margin

内边距：padding

宽度计算方式 padding-left + padding-right + border-left + border-right + content;

11.定位

position

absolute :绝对定位

relative ：相对定位

只需要记住使用的时候:子绝父相

<body>

</div>

</body>

fixed : 制作广告的时候使用

<body>

</body>

12.伪类

:link :visited :hover :active 顺序不能乱，href属性中必须有值，记忆方法是驴哈

样式总结

背景

背景颜色 background-color:red;

背景图片 background-image:url(xx.png);

背景重复 background-repeat:no-repeat;

背景位置 background-position: center center;

背景缩写 background : red url(x.png) no-repeat center center;

背景大小 background-size:

边框

border : 1px solid black;

文本/字体

大小 font-size : 12px;

颜色 color : red;

去除超链接下划线 text-decoration : none;

文本上下居中 line-height:100px;height:100px;//height==line-height

文本左右居中 text-align:center;

无序列表:去除小圆点

外边距:margin

内边距:paddding

JavaScript

1.基本语法

定义变量 var 变量名 = 值;

变量名：局部变量(定义在方法内部的变量)我们以_开头。

给变量赋予默认的值

如果是基本类型 var num = undefined;

如果是引用类型 var person = null;

在控制台打印变量 console.log(变量名);

定义对象 var person = {

name:"张三",

age:14,

gender:'女'

}

定义方法(函数) function 方法名(){}

function 方法名(name,id){}

function (){} //匿名方法，当作为方法的实际参数的时候使用

方法的调用

方法名();

null和undefined报错问题

Cannot read property 'name' of undefined 原因是调用了undefined.name

Cannot read property 'name' of null 原因是调用了null.name

2.事件注意函数必须加()

onclick = "函数名()" ;

ondblclick = "函数名()"

onmouseenter = "函数名()"

onmouseleave = "函数名()"

onload = "函数名()" 在HTML文本加载完毕后请求图片资源，图片请求回来后执行onload事件

3.定时器

var timer = setInterval("JS代码",毫秒值)

var timer = setInterval(function(){},毫秒值);//常用

clearInterval(timer);

4.CSS显示和隐藏元素的两种方式

display:block;none; 隐藏后不占位

visibility:visible;hidden; 隐藏后占位

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2