HTML

• HTML４基础

1. HTML标签及标签的属性
   1. p 段落标签 块级
   2. 块级元素 格式纵向排列的元素: div  、p 段落、
   3. 内敛元素 无格式横向排列的元素:  span ， 小标签元素、img
   4. pre 标签， 保持html 文档中的样式
   5. 小标签。 b 加粗、i 斜体、u 下划线、big 字体变大，s  中间删除线、sup 上脚标几次方的写法、sub  下脚标化学方程式， small 内容变小
   6. .属性：
      1. id 的属性应该唯一，这个由文档作者决定。有多个同名id, js 在拿时候会自动去掉重复的。
      2. class 属性， 用于给元素按类别分组。 3.title 属性，通常显示为加载元素时的工具提示
   7. UI 事件（User Interface）: 基本是相应鼠标等用户操作，来关联脚本代码1.onmouseover 鼠标移动到之上时候 2.onmouseout 当数比移除的时候。 3.onclick 鼠标点击的时候
   8. document.getElementById("idname") 通过id 得到一个元素或一个节点一个标签
   9. 9.table 标签
   10. 10.ol (order list) li： 有序列表
   11. 11.ul(unorder list) li: 无序列表
   12. 12.ol 列表默认的项目符号是数字， 可以通过 列表的type 属性设置 项目序号， start 设置起始序号值。 type="a", type="A", type="1", start ="4", type = "i", 小写罗马字母，type="I",大些罗马字母.
   13. ul 无需列表的属性。 默认项目符号是 圆点 disc 不用特再意声明。square 是以方块为项目符号。
   14. 定义列表 dl (define line)  dd(definre detail) : 块级， dd 表明前面dl的定义， 解释。
   15. 实体字符 &lt 左尖括号， &gt 右尖括号      &lt;/p&gt; 这是一个P标签 <p>
   16.  a 标签， href 属性 值为 地址，taaget 属性=_self  默认/ _blank, self 默认指在本页面打开还是另起一个空白页面打开。
   17. a 标签， href ="页面.html # 位置"： 锚点链接。
   18.  accesskey=“b” 属性设置快捷键,  alt+b
   19. 语义标签： em 强调外观 等于 i，strong 着重强调，外观等于b, code 表示内容为代码，address 表示 内容为地址。
   20.  和实体字符。&nsbp 空格， &current: 图标。
   21. 21.a 标签的 title 属性， 当数鼠标移动到超链接时候上面时候会有提示。
   22. 22.当 a 标签只有 id 属性 而没有href 属性 他是一个目标锚点 <a id ="#top"></a>
   23. 23.href 属性是以 # 开头后面跟着一个锚点名字 或者id 的值，他会导航到本页面相应的锚点。
2. 盒模型. 内联和块级。
3. 相对路径和绝对路径
4. 图像和对象
   1. .img , 向文档中添加图像元素。
   2. img src 属性指定图片路径，可以是相对路径，也可以是绝对路径。
   3. img alt 属性，指定图片没法显示时候的备选显示文本。
   4. img align 属性， 用于对齐，可以选取的值 left/right /top /bottom/middle
   5. img  boeder属性，图像边框，值是像素
   6. img height 属性，设置图片高度
   7. img width 属性， 设置图片宽度
   8. hspace vspase指定图片周边的留白范围
   9. object 定义网页中除了图片之外的多媒体，<object></object>像元素中添加MP3、 Flash 电影等内容。
   10. object 可以在网页中嵌入多种多媒体，例如Flash
   11. 图像格式内容。GIF 格式、JPEG 格式
5. HTML 表格 table
   1. table 的 头， 表头，<thead>   表身<tbody> ，可以有多个tbody, 一个 tbody 可以有多个 tr td， 集合划分。  脚<tfoot>
   2. 列分组。colgroup 是 将列划分为纵向的几个模块。 <colgroup span=8>. 包括8 个横向单元格为一组。
   3. <tr><td>单元格里可以放任何东西，所有内容只能放在单元格里面</td></tr>
   4. align 对齐： left, right .center.
   5. th (head)单元格，纵向第一栏，横向第一栏。带表头的表格。
   6. <table 属性> ，id /class/ cellpading=像素, 单元格的和其他内容的填充边距，cellspacing=像素， 单元格的间距。bgcolor="颜色"， 表的背景颜色。
   7. <td >的属性，bgcolor， 该单元格的背景颜色。rowspan=2/3/ 合并2个3个行纵向合并。
   8. <td> 属性，colspan =2、3、4. 纵向合并，合并行。
   9. <td> valign, 单元格对齐方式， top buttom, 顶端对齐， 底部对齐。

6. HTML表单 《form》

   1. <form  action="提交路径" method="get/ post">
   2. <form> <input  type="??"></form>  type="submmit", 提交按钮。 textarea-- 可以写入的文本框范围
   3. type= password  暗文密码。
   4. type = img 图片。
   5. type= reset
   6. form 表单 select option
7. 框架  <iframe>  </iframe>标签, 内敛元素， 横向排列
   1. width heigth 属性，
   2.  <iframe src="http://www.qq.com">
            </iframe>   src 引入 连接网址或者和html 文件。 框内心啊是qq  主页里面信息
   3. frame 帧
8. 嵌套的框架 《frameset》 <frame> <frame> </frameset>   frameset 里面的 frame 是块级的

9. DOM

10. CSS HTML选择器

CSS

1. 《style type="text/css"》</style>
2. 类选择器  classs .className. css 的选择器大多是批量的选择器。也就是集合化操作
3. 标签选择器  h3 p h1 h2 div
4. 继承性：  应用于一个元素的样式会被他的自带元素继承，自元如果制定自己的规则，那么则会覆盖掉元父类元素的同名特性的样式
5. font-family 样式：  设置文学自样式，font-size 设置文字大小， font-weight , 字体粗细
6. 上下文选择器： p .Classname : p元素里面类名为classsname 的元素。
7. color 字体颜色。 text-align : centr 字体对齐方式
8. 控制大小写： text-transform:none 默认不变。 ：capitalize 首字母大写， ：uppercase 全部大写， lowercase:全部小写。
9. texet-decoration: 文字修饰， underline 下划线。 none， 没有装饰。line-thouth: 删除线， overline上划线。
10. text-indent: 首字缩进： 1.6em em倍数。
11. 字间距： letter-spacing.
12. word-sapcing词间距
13. pre 预呈现格式，你写的是什么格式就是什么格式
14. 换行处理： white-spacing:=nowrap ;  默认情况下，文本流动到边界然后换行，nowrap则会流出边界。不受边框限制。
15. 文字方向： direction: ltr/ rtl 从左到右， 从右到左。
16. ： 冒号后面的伪类选择器， ：hover ， 并非真正存在的选择器
18. vertical-align 垂直对齐方式
19. 扩展：选择器: a[alt][title] 选中 有alt 和title属性额的a标签
20. 扩展：连字符选择器： *[lang|="en"]  以en为 开头的
21. 扩展：[title] 选中所有有title 属性的标签
22. 基本选择器：标签 body, p, a, h123,.classname,
23. 上下文选择器： div span， 在div 下面的 span 标签， .classname span, 在classname 下面的span.
24. 直接子代选择器： div>span， div 下第一层的span.
25. 属性选择器： div[id], 有id  属性的div。 div[id="idname"]
26. 前缀选择器： div[id ^="idname"];
27. 后缀选择器：div[id $ ="idname"]
28. 包含选择器： div[id * ="idname"]
29. 相邻兄弟选择器; div+div+div: 第三个开始后面的都选中。
30. 盒模型：
    1. 盒模型介绍和边框：每一个元素其实都是一个盒子，每一个元素由一个合资围起来，分为内边距，边框，外边距。
    2. 边框，内边距，，外边距都可以分别控制四个方，也可以四个方向一起控制。
    3. 边框：border-style: solid, dashed, double,outset， inset, groove, ridge.
    4. 内边距： padding, padding-top/bottom/left/right
    5. 外边距：margin： margin-top/left/right/bottom
    6. 盒模型高度和宽度结合起来可以改变面积
    7. line-height ，控制文字内容高度; 盒模型内容高度也会改变盒模型的面积
    8. max-width , min-width, 最大最小宽度， 浏览器宽度变化时候，到此处不再改变。
    9. max-height/ min-height. 最大和最小高度
    10. 文本溢出的处理：overflow: hidden,隐藏， scroll 会出现滚动条
31. a 超链接的三种状态 伪类选择器：　
    1. 　1.a:visited 访问过的，点击过的
    2. 　a:link:hover, 未点击过得 ahover 时候会出现的效果。
    3. a：visited:hover
    4. a:link : 选中没有点过的正常的a 标签元素
    5. a:active : 选中访问过的点击过得a
    6. 
       　
32. 背景颜色background-color 和字体颜色color
33. 背景图片：background-img: background-repeat:repeat-x/y: 背景不重复， 默认， no-repeate.
34. 背景图片位置： background-position. 50% 20%, 横向50%; position:center
35. backgrround-attachment, fixed， 固定， 不随滚动而滚动
36. 内联和块级元素。
37. 块级元素： 上下排列。
38. 内联元素， 横向排列，到达边界会折行。用CSS 可以改变 块级元素和内联元素的默认
39. visibility: hidden 和 visible.
40. rgb(123,123,123): 三元色 红绿蓝   赋值。
41. 块级元素和 内联元素的转换，display: inline , display:block, 
42. 设置元素不可见： visibility: hidden, 或者 display: none.
43. 定位：
    1. 　position 定位： 相对relative:相对于自己原本的位置,在普通流中， 绝对定位：absolute:
    2. 　position 将元素从普通流中摘除， 绝对定位， 固定该位置。用离他最近的祖先元素定位，父类--》爷爷》body 参照计算
    3. 　position:fixed ,将元次哦那个普通文件流中摘除， 且不能滚动
    4. 　z-index  改变堆叠上下文的堆叠顺序.  z-index: 122. 数值越大的， 堆叠在最上面。
44. float: right / left 飘，浮动， 在父元素的范围内部 飘动。
45. 字体 大小的单位：
46. font-variant:small-caps; 小型字体大写。variant//多样的， 各式的。
47. font-variant:normal; 正常
48. ul 项目符号：
    1. 　 list-style: disc, 实心原点， circle : 空心圆。square, 方块。 decimal; 数字 lower-alpha, 小写英文， upper-alpha: 大写。 lower-roman: upper-roman, 罗马字符
    2. list-style-position: 项目符号 和文本的对齐方式。 inside. outside.
    3. 自定义项目符号图片： list-stype-img: 图片地址
49. 鼠标的样式： cursor: pointer 手指。
50. 流式布局
    1. 　随着浏览器的宽度改变， 内容流动到边界然后折行
    2. 居中技术： margin-left:auto// margin-right: auto.
51. 看咯贫困，破门

HTML５

1. 语义标签和隐式排
2. autofocus : <input autofocus="autofcus'> 自动对焦
3. document.designMode = "on" 将 html 文档设为 可编写
4. 表单  get post， 传值。
5. 显示大纲和《article》<section></section></article>
6. section 内容可以单独存储到数据库中或者输出到world 文档中
7. 隐式大纲  h1 h2 h3
8. nav 页面导航的连接组件。
9. time 元素
10. footer: 上层父级元素的区块脚注
11. address 用来在文档中呈现联系信息
12. HSLA(H,S,L,A) ： 颜色 ；H 色调，s 饱和度 L亮度， A 透明度
13. 服务器端字体

JavaScript

1. Number 对象
   1. typeof() 可以有那些值。underfined// 未声明的或者声明了但是没有赋值的
   2. number 数字， 不管是整数还是小数
   3. object : null 形的数，
   4. string :
   5. true: 正确与否 null == undefined
2. 不要测试 浮点数， 不准确。 0.1+0.2 =0.300000001
3. is.Finite() 函数, 判断是不是在最大数和最小数字之间。InFinity 是无穷大。
4. a= Number.MAX_VALUE ; 得到最大值。
   1. 转换成 数字： Number("Hello world") -- NaN
   2. NUmber("") ==>0
   3. Number（“000031”）==》31
   4. Number(true) ==> 1
5. parseInt(“”) ; 123blue --> 123 , 22.5px-->22.5.
   1. 22.34.5 得到22.34
      
   2. 0908.5得到908.5
   3. 3.125e7 得到3125000000
6. 非数字 NaN , 判断是不是非数字：IsNaN, 检查是否是非数字值。
   1. true 可以转换为1， IsNaN （true）结果是false
7. Number（）函数转换为数字。
   1. Number("Hello world") =NaN
   2. Number("")=0;
   3. Number("00001") =1
   4. Number（“true”）=1
8. 解析成浮点数： float
   1. parseFloat("1234blue")=1234 int
   2. parseFloat("22.5px") =22.5
   3. parseFloat("0908.5") =908.5
   4. parsrFloat("3.125e7")=31250000
9. String 类型
   1. 　string(10) = "10"
   2. string(true)="true"
   3. string(null)="null"
   4. var va; string(va) = undefined
10. Switch caase 结构
    1. var num = 25;  /  num ="Hello Word "  / num = true 都可以
               switch (num) {
                   case num < 0:
                       alert("Less than 0.");
                       break;
                   case num >= 0 && num <= 10:    // case 可以是具体值，可以是区间，可以是字符
                       alert("Between 0 and 10.");
                       break;
                   case num > 10 && num <= 20:
                       alert("Between 10 and 20.");
                       break;
                   default:
                       alert("More than 20.");
               }
11. 逻辑运算 与或非
    1. 或运算 ||
    2. 并运算 &&
    3. 取反 ！
12. 未定义 undefined : var声明， 但没有赋值。
13. JS 计算.
    1. JS 是在Web 上开发准备的，字符串在上应用最多， JS 不擅长做计算
    2. 不同于C 风格的语言， js中, 字符串是 值类型
    3. 加法 + ： 字符串拼接
    4. 用括号定加法的优先级
    5. Boolearn() , 判断有没有值。字符串做逻辑判断
    6. 三元运算： （计算表达式）？（表达式成立执行）：（表达式不成立执行）
    7. 除法。Inifinaty 无穷大的数。 NaN， 非数字, false本质上是0;
    8. === 全等， 不但值得要相等， 类型也要行等
    9. ==
    10. for（） 循环， for(var nmae in window)//   for(var n in numbers) numbers 为数组长度
    11. JS 中函数重载： Function
        1. Js 中， 参数是没有要求的。一个函数加入定义了几个参数，那么叼用的时候可以传， 也可以不传。所以我们不能依赖参数可数来区别两个同名函数
        2. JS 中的函数重载模拟
           1.  function doAdd() {
                          //arguments 对象：参数数组。
                          if(arguments.length == 1)
                          {
                              
                              alert(arguments[0] + 10);
                          }
                          else if (arguments.length == 2)
                          {
                              alert(arguments[0] + arguments[1]);
                          }
                      }
                      
                      //调用一个函数，通过传参的个数而得到了两种结果。
                      doAdd(10);        //20
                      doAdd(30, 20); 　　
        3. JS 中的参数数组; arguments[0], arguments.length
    12. 模运算， 取余数。 %
    13. 乘法运算的特殊情况：
        1. true =1 -->*5 =0
        2. false = 0
        3. 5*NaN = NaN
        4. Infinitty * 2 = Infinity
        5. Infdinity*0 =NaN
        6. "5"* 5 = 25;
    14. <  > = != 关系运算
    15. 减法： true =0; "2" = 2, 5-"2"=3,NaN-1 =NaN;
    16. typeof（） 能得到的值： number, string, NaN, object, undefined， Booleran
    17. 变量和作用域, var 生命变量， 有var 声明则是作用在该区域， 没有则认为是全局的变量。没有var 修饰的变量的可见范围是此处之后的全部代码。使用var 则是用于当前的函数里面。
    18. 动态属性， new object(); var student = {}; 空对象字面字面量， 给空对象字面量赋值。
    19. 函数的参数引用类型 function(object) ｛参数化objevt 的 函数内容｝：
    20. 函数的参数值类型：传递值类型参数
    21. 引用类型
        1. var str = new string("sss"), string object
        2. string 和stgring 对应的方法; slice(3)　,subString(), indexOf("a"), 返回索引脚标， lastndexOf()
        3. instanceof 返回 true or false.
        4. Object 对象：
        5. Data 对象。 var date1 = new Date(2007, 0, 1);  //January 1, 2007
                   var date2 = new Date(2007, 1, 1);          //February 1, 2007
                   alert(date1.toLocaleDateString());
        6. 数字对象 ， math.Max(). math.min（），math.ceil（），天花板函数，向上取整。码头和。math.floor（）, 向下取整。math.random（），随机数。math.round(), 四舍五入。
        7. 全局对象。var, window.
        8. 全局对象编码： encpodeURL（）
        9. 数组
           1. 　　
        10. 数组 迭代方法：
            1. array.map（function(){}）, 对数组中的每一项运行函数返回调结果组成的数组
            2. 数组。 Arrary.every(function(){}) 数组每个元素都满足条件时，结返回true
            3. Array.some(function（）｛｝)， 数组有一项满条件则返回true
            4. Arrary.filter(function()｛｝), 返回满足条件的数组元素组成的数组。
            5. Array.forEach(function()｛｝)， 对每一个数组元素应用函数
            6. doocument.getElementById（）
            7. document.createElement（“div”）
            8. fatherDiv.appendChild(pic);
        11. 离
        12. 开
        13. 哦
    22. 昆明
    23. 开门
14. bhjn j
16. DOM 模型。

JQuery

1. JQuery对象与DOM 对象转换
2. 选择器
3. 事件
4. 选择器 属性
5. 筛选
6. CSS

Json数据格式 CSS　

1. CSS 2.0
2. CSS 3.0

Json数据格式 XML 数据 Ajax

 

转载于:https://www.cnblogs.com/ghzTopsoft/p/9745403.html