Kilitou的博客

原创 BOM和DOM

一、BOM对象BOM是browser object model的缩写，简称浏览器对象模型。通过BOM我们可以学到与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames...

原创 JSMath和Date

一、Math对象Math 对象用于执行数学任务。Math对象的常用函数：Math.round(3.6) //四舍五入random() //返回0-1之间的随机数max(num1, num2) //返回较大的数min(num1, num2) //返回较小的数abs(num) //绝对值ceil(19.3) //向上取整“20”floo...

原创 JSES5-STRING

一、严格模式HTML_严格模式与混杂模式Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实点，他们创建了两种呈现模式：标准模式和混杂模式在标准模式中，又称严格模式，是指浏览器按照 W3C 标准解析代码在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老...

原创 JS数组

一丶数组概念及定义1.一个变量只能存储一个数据，如果我们有一组数据，比如1到100一百个数字，定义100个变量来存储就太痛苦了，这时候我们就需要数组来存储这样的数据。数组的定义：var arr1 = new Array(7); //定义了一个7个元素的数组，没有给元素赋值；var arr2 = new Array(7,9); //定义了一个2个元素的数组，两个元素的值分别是7和9var...

原创 JS函数

一、函数的概念函数的概念：函数就是把完成特定功能的一段代码抽象出来，使之成为程序中的一个独立实体，起个名字（函数名）。可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。注：编写好的函数代码只有通过调用才会执行，不调用的时候不会执行。函数的作用（好处）：1，使程序变得更简短而清晰2，有利于程序维护3，可以提高程序开发的效率 ,4，提高了代码的重用性(复用性)二、函数语法...

原创 JS循环语句

一、循环的概念循环就是重复执行一段代码，是一种最能发挥计算机优势的程序结构。循环结构的代码由循环体、循环变量、和循环条件组成。当循环变量满足循环条件时会重复执行循环体内的代码，直到循环变量不满足循环条件时就终止循环，接着执行循环结构后的代码。JS中有while、do while、for三种循环。while(表达式){循环体;}二、while语句语法:while(表达式){循环...

原创 JS逻辑分支

一、分支语句介绍1.逻辑分支（条件分支）程序设计的结构顺序结构：从上朝下执行的代码就是顺序选择（分支）结构：根据不同的情况，执行对应代码循环结构：重复做一件事情除顺序结构外，其余两种程序结构由流程控制语句实现。选择（分支）结构的程序由条件分支语句实现。二、if语句1.条件分支语句IF语法：if（表达式）{值为真执行这里代码（分支一）}else{值为假执行这里代码（分支二...

原创 JS基本语法

Script标签

原创 转义字符表

原创 css3背景切割，原点，渐变

一、css3背景切割语法：background-clip:border-box|padding-box|content-box;border-box 默认值，背景在border以及border以内的区域可见padding-box 背景在padding区域和content区域可见content-box 背景只在content区域可见注：background-clip就是用来设置背...

原创 css3动画

一、css3过渡动画语法： transition:过渡属性 过渡时间 过渡延迟时间 过渡方式;1.transition-property(过渡属性)取值：a) all 所有发生变化的css属性都添加过渡eg: transition:all 1s;b) ident 指定发生过渡的css属性列表eg: transition: transform 3s,background 2s...

原创 css3变形基础

一、css3变形语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);1.rotate(旋转)a) rotateX(180deg) 沿x轴旋转180度 等价于 rotate3d(1,0,0,180deg)b) rotateY(180deg) 沿y轴旋转180度 等价于 rotate3d(0,1,0,180deg)c)...

原创 css3移动端布局

一、移动端相关概念1.屏幕尺寸屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米常见移动端设备屏幕尺寸iphone4 3.5英寸iphone6,6s,7,8 4.7英寸iphone6,7,8plus 5.5英寸2.屏幕分辨率屏幕分辨率是指横纵方向上的像素点数，单位为px，1px=1个像素点常见移动端设备屏幕分辨率iphone6,6s,7...

原创 css3弹性布局

一、多列布局(分栏布局)1.设置栏数(最大栏数)语法：column-count:数值;2.设置每栏的宽度(每栏最小宽度)语法：column-width:数值+单位;3.设置栏间距语法：column-gap:数值+单位;4.设置栏分隔线语法：column-rule:宽度 solid|dashed|dotted 颜色;5.设置是否跨栏显示语法：column-span:all(是...

原创 C3选择器

一、基本选择器1.通用选择器(通配符)*{margin:0; padding:0;}2.标签选择器(元素选择符)a{text-decoration:none;}3.id选择器#box{color:red;}4.class选择器.footer{color:blue;}5.群组选择器h1,h2,h3,h4,h5,h6{font-weight:100;}二、层次选择器(关系选择器)...

原创 seo优化

一、seo优化● 站内优化1.页面主题优化通过title标签添加一个合理真实的网站标题2.页面头部优化通过meta标签设置关键词和描述 关键词 描述3.超链接优化a) 尽量避免使用flash做超链接，搜索引擎无法识别flash上的文字内容b) 给a标签添加title属性c) 尽量避免使用图片热点链接4.图片优化给img标签添加title和alt属性5.网站地图(网...

原创 h5新增标签和表单属性

一、h5新增结构性标签(有意义的div)1.header 定义网页的头部2.nav 定义网页的导航部分3.section 定义网页的某个区域4.footer 定义网页的底部5.article 定义网页的一篇文章6.aside 定义网页的侧边栏7.hgroup 将网页的标题进行组合8.figure 将网页的元素进行组合9.figcaption 给...

原创 表单，表格高级及css统筹

一、表单高级表单的组成：表单域，表单控件，提示信息表单域：<form method="get|post" action="index.php">...</form>表单控件：a) 文本框 b) 密码框 c) 提交按钮 d) 重置按钮 e) 单选按钮 f) 复选按钮 g) 普通按钮 h) 下拉列表 ai) 文本域 提示信息： 放置在表...

原创 DIV+CSS规范命名大全集合 - DIVCSS5

原创 居中，圆角及图片整合

一、元素在屏幕窗口水平垂直都居中1.定宽高(已知大小)的元素在屏幕窗口水平垂直都居中语法：元素{ width:数值+单位; height:数值+单位; position:fixed; top:50%; left:50%; margin-left:-width/2+单位; margin-top:-height/2+单位;}2.不定宽高(未知大小)的元素在屏幕窗...

原创 常见浏览器兼容性问题

一、常见浏览器兼容性问题概念：不同的浏览器对同一段代码解析不同造成浏览器显示效果不同，我们把这样的问题叫做浏览器兼容性问题1.双倍浮动的bug描述：块元素float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是2倍关系解决方案：给float的块元素添加display:inline;2.表单元素行高不一致解决方案：a) 给表单元素添加一致的ver...

原创 宽高自适应

一、宽高自适应1.宽度自适应语法：width:100%; (块元素默认宽度为100%，继承父元素的宽度)注：宽度自适应主要应用于通栏效果2.高度自适应语法：height:auto; 或不设置高度二、最小，最大高度，最小，最大宽度1.最小高度语法：min-height:数值+单位;注：在IE6中，不能识别min-height属性，兼容写法如下：a)min-height:200...

原创 css定位

一、常见的三种布局模型1.Flow(流动模型)html元素根据本身的特点显示在浏览器中，块元素自上而下排列，内联元素在一行逐个进行显示2.Float(浮动模型)通过float属性进行页面布局3.Layer(层模型)通过定位来进行页面布局语法：position:static(默认值，无特殊定位)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);二、...

原创 元素类型及其转换

一、html元素类型html元素分为两大类：块元素和内联元素(行内元素);注：也可以将html元素这样分类：块元素，内联元素，内联块元素1.块元素常见块元素：div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,fieldset,hr块元素特点：a) 块元素以块的形式显示为一个矩形区域，默认不设置宽度时，继承父元素的宽度...

原创 嵌套规则

1. 块级元素可以包含内联元素或某些块级元素，但内联元素却不能包含块级元素，它只能包含其它的内联元素：<div><h1></h1><p></p></div> —— 对<a href="#"><span></span></a> —— 对<span><div&...

原创 容器溢出

一、容器溢出语法: overflow:visible|hidden|scroll|auto|inherit;visible 默认值，溢出部分内容不会被裁剪，显示在容器框之外hidden 溢出内容会被裁剪，隐藏不可见scroll 当容器溢出时，以滚动条的形式查看溢出内容，没有溢出时，显示默认的滚动条auto 哪个方向有溢出，就添加滚动条inherit 从父元素那里...

原创 css盒模型

一、css盒模型的概念及组成css盒模型是css的基石，它规定了html元素之间的相互关系。每个html元素都有自己的盒模型。css盒模型是由content(主体内容)，padding(内边距，补白，填充),border(边框)，margin(外边距)四部分组成。1.content语法：width:数值+单位; height:数值+单位;注：a) content部分是由wi...

原创 CSS核心属性

一、文本类属性1.字体类型语法：font-family:字体1,字体2,字体3;eg: font-family:"微软雅黑","黑体";注：a) 多个字体之间用逗号分隔，浏览器会优先识别字体1，如果找不到，识别字体2，如果列出的所有字体都无法识别，显示浏览器默认字体b) 中文字体要加双引号，英文字体如果由多个单词组成也要加双引号c) 特殊字体一律用图片2.文本大小语法：fon...

原创 ps常用快捷键

ps常用快捷键1.打开首选项 ctrl+k2.显示或隐藏信息面板 F83.放大或缩小图像ctrl+加号 放大 （或alt+鼠标滑轮向前滑）ctrl+减号 缩小 （或alt+鼠标滑轮向后滑）4.移动图像空格键+鼠标左键5.填充前景色或背景色alt+delete 填充前景色ctrl+delete 填充背景色...

原创 CSS选择器

一、css选择器1.id选择器语法：<标记 id="id名"></标记> #id名{属性:属性值;}eg: <h1 id="qfEduTit">孙悟空</h1> #qfEduTit{color:red;}注：a) id名命名要语义化，不能使用中文，数字，或以数字开头，...

原创 CSS基础

一、css概念及特点css—层叠样式表（Cascading Style Sheets）,规定HTML内容在浏览器内的显示样式，如字体大小，颜色等特点：实现了结构与表现相分离二、css语法css由选择符和声明两大部分组成，声明又是由属性和属性值组成，即：选择符{属性:属性值;}eg: h1{color:red;}注： a） 声明要放在花括号里面，每条声明结束要加分号...

原创 HTML基础二

一、表格作用：显示数据语法：<table border="1" cellspacing="0" cellpadding="5"> <tr height="30"> <th align="center" width="100">A</th> ......

原创 HTML的基础

A.访问一个网站的流程1.输入网址发送请求（https：//wwww.baidu.com/)关键词：协议（https……ftp…）2.dns解析：将网址转换为ip地址3.百度分析请求，返回你所请求的数据（网页）B.一个网站从前端的角度会包含哪些内容？html（网页结构的搭建）css（网页的修饰和美化）JavaScript（网页的交互）。。。。。。C.如何创建网页新建一个文本文档改后...