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

 

posted on 2018-10-06 10:42  Tivoli  阅读(216)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 Tivoli
Powered by .NET 8.0 on Kubernetes