黑马程序员_HTML、JavaScrip、DOM

最新推荐文章于 2022-09-21 12:48:58 发布

a1029356870

最新推荐文章于 2022-09-21 12:48:58 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/a1029356870/article/details/43306395

版权

一、HTML

1.基础标签（6）

<html>

<head>

</head>

<body>

</body>

</html>

<img src=""（定位） width="" height=""/>图片

2.字处理标签（6）

<br/>换行

空格

< ＜

> ＞

& &

" ”

3.表单标签（5）

输入类：

选择类：

按钮类：

</form>

<option value="" selected="">下拉框内容</option>

</select>

<textarea name="" cols="" rows="">文本域内容</textarea>

4.表格（3）

</tr>

</table>

5.框架（3）

</frameset>

二、CSS
   其实是CSS将网页内容和显示样式进行分离，提高了显示功能。并且提供了更多的     属性的设置
CSS和HTML结合的方式
    style属性方式：利用标签中style属性来改变每个标签的显示样式。
        例：<p style="background-color:#FF0000; color:#FFFFFF">
        p标签段落内容。</p>
    该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
    style标签方式：（内嵌方式）
       在head标签中加入style标签，对多个标签进行统一修改。
      <head> <style type=”text/css”> p { color:#FF0000;} </style> </head>
    该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
    导入方式：前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，
    那么就用到这种方式。例：<style type="text/css"> @import url(css_3.css);
        div { color:#FF0000;} </style>
    注意：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
    链接方式：通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。
    例：<link rel="stylesheet" type="text/css" href="css_3.css" />
      注：可以通过多个link标签链接进来多个CSS文件。
  CSS选择器
      CSS选择器的类型
        html标签名选择器。使用的就是html的标签名
        class选择器。其实使用的标签中的class属性
        id选择器。其实使用的是标签的中的id属性。
    每一个标签都定义了class属性和id属性。用于对标签进行标识，
       方便对标签进行操作。在定义的中，多个标签的class属性值可以相同，
       而id值要唯一，因为JavaScript中经常用。
    class选择器：
       在标签中定义class属性并赋值.通过  标签名.class值  对该标签进行样          式设置。

id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。

一般情况下id都定义成唯一的。
    CSS扩展选择器
    关联选择器
       标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
    组合选择器
       对多个不同选择器进行相同样式设置的时候应用此选择器。
       注：多个不同选择器要用逗号分隔开。
    伪元素选择器
       其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
       格式：标签名：伪元素。类名   标签名。类名：伪元素。都可以。
       a:link  超链接未点击状态。
       a:visited 被访问后的状态。
       a:hover 光标移到超链接上的状态（未点击）。
       a:active 点击超链接时的状态。
       使用顺序 L – V – H – A

三、JavaScript
  JavaScript代码和HTML的结合
    JS代码存放在标签对  <script> </script>中。
    当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
    只要在script标签的src属性,引入一个js文件。（方便后期维护，扩展）
    javascript和html的结合方式
      想要将其他代码融入到Html中，都是以标签的形式。
      当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
      只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
     注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
       例：<script src=”test.js” type=”text/javascript”></script>
    JS弹出框
       (1) 警告框用法：alert(...);
       (2) 确认框用法：confirm(...);
       (3) 提示框  用法：prompt("","");   前者为提示信息，后者为默认值
JavaScript语法-变量
    JavaScript是一种弱类型语言。
    通过关键字var来定义

       注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，
           该变量的值就是undefined（未定义）。
       注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特    点。
       而且有些情况是必须写分号的，如：var x = 3 ; var y =5
       如果两条语句写在同一行，就需要分号隔开。
JavaScript语法-运算符
    Javascript中的运算符和Java大致相同。只是运算过程中需要注意几点：
    var x = 3120/1000; x = 3
    var x = 2.4+3.6 ; x=6
    var x = “12” + 1; x=13

特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
JavaScript语法-语句
    判断结构(if语句) 注：var x = 3;
      if(x==4)//可以进行比较运算。
      if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
      因为在Js中0或者null就是false，
      非0或者非null就是true（通常用1表示）。
      所以if(x=4)结果是true；
      可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
    选择结构(switch语句)
      与java不同的是：因为弱类型，也可以对字符串进行选择。
    循环结构(while语句，do…while语句，for语句)。
      注：不同的是，没有了具体数据类型的限制，使用时要注意。
     document的write方法。可以写字符串，也可以写出html标签。

JavaScript语法-函数
    A 一般函数
    格式：function  函数名(形式参数...) {
        执行语句；
        return 返回值；   }
    函数是多条执行语句的封装体，只有被调用才会被运行。
    注意：调用有参数的函数，但没有给其传值，函数一样可以运行，
    或者调用没有参数的函数，给其传值，该函数也一样运行。
     函数在调用时的其他写法：
    var show = demo();//show变量接收demo函数的返回值。
    var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
    //那么该函数也可以通过show()的方式运行。
    动态函数通过Js的内置对象Function实现。
    例：var demo = new Function(“x,y”;”alert(x+y);”);
    不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
    匿名函数
    格式：function(){...}
    例：var demo = function(){...} demo();
    通常在定义事件属性的行为时较为常用。
    例： function test() {
        alert(“load ok”);
    }
    window.onload = test;
    可以写成匿名函数的形式：
    window.onload = function()
    {
        alert(“load ok”);
    }
    匿名函数就是一种简写格式
JavaScript语法-数组
      格式：var arr = [元素1，元素2，元素3...];
    注意：其中的元素可以使任意类型，但是，推荐使用同一种类型。
        var arr = new Array();
        var arr = new Array(3);
JavaScript自定义对象
    Js是基于对象的，不是面向对象的。但是我们可以通过函数来模拟对象的使用。
    用js的函数模拟对象并使用, 用js的函数模拟对象的成员变量及方法
JavaScript用于操作对象的语句
    with语句。格式：with(对象){ }
       当调用一个对象中多个成员时,为了简化调用,避免"对象."这种格式的重复书写。
       var p = new Person(“zhangsan”,20);
       alert(p.name+”,”+p.age);
       可以写成：var p = new Person(“zhangsan”,20);
       with(p) {  alert(name+”,”+age);   }
       with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
    for...in语句  用于遍历对象属性。
       例：var p = new Person(“zhangsan”,20);
       for(x in p) {
        alert(x);//结果是两个对话框，一个是name，一个是age。
        alert(x+”:”+p[x]);
       //可以得到属性与属性的值。p[x]:p对象就是个数组，要通
             过指定的元素名获取元素的值。
       }

四、DOM获取节点的方式

    getElementById：通过该标签的id属性值来获取该标签节点对象.
    getElementsByName：通过标签的name属性值来获取对象.
    而且返回的不是一个节点对象.而是多个节点对象,用数组表示的.
    getElementsByName：通过标签名称获取节点对象.
    但是标签很容易重复.所以返回的是一个节点数组.
    document对象作为html文档的对象,可以获取页面中任意一个节点.
    节点本身是个对象,它具备三个属性:
        1:nodeName 节点名称
        2:nodeType 节点类型
        3:nodeValue 节点值
    设置获取节点的值
        1：value
        2：innerHTML,innerText
    节点间的层级关系
        1:parentNode:父节点是唯一的
        2:childNodes:子节点可以有多个
        3:兄弟节点
           上一个兄弟节点 previousSibling
           下一个兄弟节点 nextSibling