余正源的博客

1.font标签： <!-- 通过font标签可以来设置字体相关的效果 可以在标签中来添加属性，从而设置浏览器如何显示内容 属性需要写在开始标签中或自结束标签中 属性实际上就是一个名值对结构 属性名="属性值" 属性名='属性值' 属性名和标签名之间要使用空格分开，一个标签中可以设置多个属性，多个属性之间使用空格分开 color 用来设置字体颜色

这个标签比较重要，单独拿出来1.列表标签：      列表 <!-- 列表类似于购物清单 HTML中一共有三种列表 1.无序列表 - 使用ul标签来创建一个无序列表 - 使用li向无序列表中添加列表项 - 无序列表默认使用 圆点 来作为项目符号 2.有序列表 - 有序列表和无序列表类似，不

1.相对路径 图片标签 <!-- 相对路径： - 相对路径指外部文件相对于当前资源所在的目录的位置 - 使用../返回一级目录,返回几级使用几个../ --> <!-- --> demo下载地址：

1.超链接： 超链接 <!-- 跳转到当前页面的指定位置 #id属性值 --> 去底部 <!-- 超链接 - 通过超链接可以从一个页面跳转到其他页面 - 使用 a 标签来创建一个超链接 - 属性： href ：指定一个目标地址，点击超链接以后，将会跳转到该地址 可以指

- 图片的格式 - JPEG（jpg）- 支持的颜色多，可以压缩，不支持透明- 一般显示颜色丰富的图片时可以使用JPEG，例如：照片- GIF（gif）- 支持的颜色少，支持简单的透明，支持动态图- 一般显示单一颜色的图片（网站的logo），动态图，简单的透明- PNG（png）- 支持的颜色多，支持复杂的透明- 可以用来显示颜色丰富，透明度复杂的图片

1.css样式的声明 CSS样式表 /* CSS的注释,注释中的内容，不会影响样式，但是会在源码中显示 基本语法： 选择器 声明块 - 选择器： - 通过CSS选择器可以选中页面中的指定元素 例子： p 表示选中页面中的所有p元素 h1 表示选中页面中的所有的h

1.块元素和内联元素    <!-- 块元素（block） - 在页面中块元素会独占一行，不会与其他元素出现在一行 - 无论内容多少，块元素总会独占一行 - 学习过的块元素 p h1~h6 ul ol dl li div.... - div是一个块元素，没有语义，在页面中使用div对页面进行布局

1.常用选择器： /* 为所有的p元素，设置一个字体大小为30px 元素选择器 - 作用：可以选中页面中的所有的指定的元素 - 语法：标签名 {} - 例子：p{} h1{} div{} a{} */ /*p { font-size: 30px; } h

1.后代和子代元素选择器 /* 为div中的span设置一个字体颜色为红色 - 后代元素选择器 - 作用：可以选中指定祖先元素的指定后代 - 语法： 祖先元素 后代元素 {} - 例子： div span{} p span{}

1.样式的继承 /*body{ font-size: 12px; }*/ p{ font-size: 40px; background-color: yellow; } <!-- 就像后代可以去继承祖先的财产一样，在HTML中后的元素也可以继承到祖先元素上的样式

1.选择器的优先级： div{ width: 100px; height: 100px; background-color: red; } /* 当使用不同的选择器选择同一个元素，并且设置相同的样式时，此时会发生样式的冲突 此时到底应用哪个样式由选择器的优先级来决

1.单位 .box1{ /* * * 长度单位 * * px(像素) * - 我们的屏幕实际上是由一个一个的小点点构成的，一个小点点就是一个像素 * - 不同的显示器中单个像素的大小是不同的，越清晰的显示器单位像素就越小 * - 像素是开发中用的最多的

1.内联元素的盒子模型 .box1 { width: 100px; height: 100px; background-color: yellowgreen; } .s1 { /*设置背景颜色*/ background-color: yellow; /*设置宽和高*/ /*width:

1.外边距的重叠问题 .box1{ width: 100px; height: 100px; background-color: red; /*为上边的元素设置一个下外边距*/ margin-bottom: 100px; } .box2{ width: 100px; heig

1.display（重要属性） .s1{ /* display * - 这个样式可以用来设置元素的显示方式 * - 可以设置一个元素到底是块元素还是内联元素 * - 可选值： * - block,元素将会作为块元素显示 * - inline,元素将会作为

1.文档流： .box1{ margin-top: 500px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; } span{ backgro

1.高度塌陷问题解决： .box1{ /*设置一个边框*/ border: 10px red solid; /* 父元素的高度，默认被子元素撑开，目前来讲box2多高，box1就多高。 此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，就是

1.导航条: 导航条 /*清除默认样式*/ *{ margin: 0; padding: 0; } /*设置ul*/ ul{ /*去掉项目符号*/ list-style: none; /*设置背景颜色*/ background-color: #6495ED; /*设置宽度

1.相对定位： .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; /*margin-

1.表格①： <!-- 在日常生活中经常使用表格来表示一些格式化的数据： 比如：课程表、账单、人名单 同样在网页中也可以来创建表格，来表示格式化的数据 我们使用table标签来创建表格 --> A1 A2 A3 A4

1.表单: <!-- 在网页中，我们通过表单来向服务器提交信息 在网页中使用form标签来创建一个表单 - form中还必须有一个action属性 action需要的是一个服务器的地址，这样当提交表单时，我们所填写的信息将会提交到action对应的地址 --> <!-- 使用form创建完表单以后，还需

1.html文本的内部基本结构： <!-- 文档声明，标识当前网页的版本的 该声明标识网页是遵循html5语法规范的 编写网页时，一定要编写的文档声明， 在某些浏览器中，如果不写文档声明，会导致浏览器进入到怪异模式 --><!-- html网页中根标签，一个页面中有且只有一个根标签 网页中的所有内容都应该写在根标签的内部 --> <!-- 网页的头部，head标签

1.测试常用的三种输出方式： /* * 控制浏览器弹出一个提示框 */ alert("Hello JavaScript"); /* * 控制浏览器在页面中输出一个内容 * document.write()向body中写一个内容 */ document.write("看我出来不？？

1.js编写的位置 alert("hello"); --> <!-- 还可以将JS代码编写到外部的js文件中，然后通过script标签来引入外部的文件 将JS代码编写到外部文件中，可以在不同的页面中引入相同的JS代码， 方便后期的维护，并且写在外部文件中可以使用浏览器的缓存，加快访问速度提高用户体验

1.注释： /* * 多行注释 * - 注释中的内容不会被浏览器解释执行,但是可以在源码中查看 * - 多行注释不能嵌套 * * */ //单行注释，但是注释只对它后边的内容起作用 /* 基本语法 1.在JS中严格区分大小写 2.JS中的每

1.标示符： /* 标识符 - 在JS中我们所有可以自主命名的内容都可以认为是一个标识符 比如：变量名 、 函数名 、 属性名 - 标识符的规范 1.标识符中可以含有字母、数字 、 _、$，但是不能以数字开头 2.标识符不能是ES标准中的关键字和保留字

1.数值： /* Number * - 在JS中所有的数字都是Number类型 * - 包括整数和浮点数 * */ var num = 123; var num2 = 10.5; var str = "123"; /* typeof - 通过typeof

1.转换成String类型： /* JS中一共有5种基本数据类型 String Number Boolean Null Undefined - 所谓的类型转换就是值将其他的数据类型转换为String Number 或 Boolean - 强制类型转换 -

注：有编程基础的，自学时可以略过此节1.基本运算符： /* 运算符（操作符） - 通过运算符可以对一个或多个值进行运算，并返回结果 - 我们之前使用的typeof就是一个运算符，他可以用来检查一个变量的数据类型 - 比如：+ - * / % 都是运算符 - 算数运算符： +

有代码编写基础的，自学时请略过1.赋值运算符： /* 赋值运算符可以将一个值赋值给一个变量 = - =可以将符合右侧的值，赋值给符号左侧的变量 += - a += x 等价于 a = a + x -= - a -= x 等价于 a = a - x

1.逻辑与，逻辑或： /* ! 逻辑非 - 非可以对一个布尔值进行取反操作 - true变成false，false变true - 如果为一个值取两次反和没取一样 - 如果对一个非布尔值进行取反操作，它会将其转换为布尔值然后再运算 - 利用这个特点，我们可以为任意的数据类型去两次反，来将其转换为布尔

有代码编写基础的，自学时请略过1.if语句： /* 流程控制语句 - JS中程序的执行顺序是按照自上到下一行一行执行的 - 我们可以通过流程控制语句，来改变程序执行的顺序， 或者让某一段程序反复执行多次 - 流程控制语句的分类： 1.条件判断语句 2.条件分支语法

有编程基础的，自学时可以略过1.while和do...while： /* * 向页面中输出1-10 10个数 */ //创建一个变量 /*var n = 0; document.write(++n + "");*/ /* * 循环语句 * - 通过循环语句，我们可以使一些语句反复

1.对象概述： /* * JS中一共有6种数据类型 * 基本数据类型 * String Number Boolean Null Undefined * 引用数据类型 * Object（对象） * * 基本数据类型保存的都是一个一个单一的值，值与值之间没有任何的联系，不能表示一些复杂的数据

1.函数简介及创建： /* * 函数（function） * - 函数也是一个对象，具有Object的所有的功能 * - 不同是的函数对象可以保存一些可执行的代码，并且在需要的时候可以调用这些代码 */ //创建一个函数对象 //创建函数对象时，可以在构造函数中传递一个字符串作为参数 //这个字符

1.函数与方法的区别： /* * 方法（method） */ //创建一个对象 var obj = {name:"孙悟空",age:18}; //对象的属性也可以是对象 obj.brother = {name:"猪八戒",age:28}; //console.log(obj.brother.na

1.this详解： //创建一个变量name var name = "全局中的name"; /* * 每次调用函数时，浏览器都会将一个对象作为隐藏的参数传递进函数 * 这个对象就是函数执行的 上下文对象，我们可以通过this来引用该对象 * 根据函数的调用的形式不同，this的值也不同： * 1.以函

1为什么要有原型： //创建一个人类的构造函数 function Person(name , age){ //通过this，向新对象中添加属性 this.name = name; this.age = age; //向新的对象中添加一个sayName()方法 this.sayName = fun;

1.定时器的应用一： *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; /*开启绝对定位*/ position: absolute; left

1.轮播图的布局： /*去除默认样式*/ *{ margin: 0; padding: 0; } /*设置div*/ #outer{ width: 520px; height: 333px; /*设置居中*/ margin: 50px auto; /* * 设