HTML&CSS&Javascript学习总结

HTMl学习总结

从开始的零基础，我开始学习了HTML，一开始我以为的HTML和我学习到结束的有些不太一样，html是一种超文本语言，这是前端技术，旨在做出网页给前端显示用。在学习的过程中我遇到了大大小小的问题其中有一些我需要罗列出来。

例如 网页图片的路径问题和HTML脚本的问题这涉及到后面的学习内容，在前面我只是简单的了解到这个知识，其中我认为比较有趣的是HTML的插件元素，HTML中最重要的结束标签了以下是常用的标签

• 块级标签：

  • 　　占满一行,可以设置宽，高

  • 行级标签： 　　只占用自己的大小，不可以设置宽，高。

  • 行内块标签： 　　只占用自己的大小，但可以设置宽，高。

  • 换行标签：
    

  • 空格：$nbsp

  HTML 元素语法

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

  • 元素的内容**是开始标签与结束标签之间的内容

  • 某些 HTML 元素具有*空内容（empty content）

  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）

  大多数 HTML 元素可拥有属性

  • 一个元素可以设置它的属性 例如链接

  这是一个链接

  HTML css

  CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

  CSS 可以通过以下方式添加到HTML中:

  内联样式- 在HTML元素中使用"style"* 属性***

  内部样式表 -在HTML文档头部 区域使用* 元素** 来包含CSS*

  外部引用 - 使用外部 CSS* 文件***

  在之后的学习中我会深入的学习css，这里不做详细总结*

  ##HTML 图像- 图像标签（ ）和源属性（Src）*

  在 HTML 中，图像由 标签定义。

  是空标签，意思是说，它只包含属性，并且没有闭合标签。

  要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

  代码格式：
  
  注意src路径问题

  区块

  元素

  我认为最重要的是

  元素，

  是块级元素，它可用于组合其他 HTML 元素的容器。

  元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

  如果与 CSS 一同使用，

  元素可用于对大的内容块设置样式属性。

  元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。

  在写的网页使用

  元素来组合块级元素，这样就可以使用样式对它们进行格式化。

  例如我写的网页的一部分：

  
  
      
  
      
  
  
        
  
  
          
  版权所有 &制作时间:2020.澳门巴士网
  
        
  
        
  
  
              
  
  
                  
   
  
                  
   
  
                  
   
  
                  
   
  
                  
   
  
                  
   
  
              
  
        
  
          
   
  
          
  
        
  
      
  
      
  
  
  

  HTML的输入

  表单使用表单标签 来设置:

  文本域（Text Fields）

  文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

  如代码：

  用户名:
  密 码:
  确定 重置

  HTML脚本

  用 标签之间

  外部 JavaScript 的优势

  在外部文件中放置脚本有如下优势：

  分离了 HTML 和代码

  使 HTML 和 JavaScript 更易于阅读和维护

  已缓存的 JavaScript 文件可加速页面加载

  如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

  中的js函数（后面会具体总结这部分内容）将会在点击按钮时被调用

  JavaScript 程序

  计算机程序是由计算机“执行”的一系列“指令”。

  在编程语言中，这些编程指令被称为语句。

  JavaScript 程序就是一系列的编程语句。

  关键字：var + 变量名

  变量：

  • undefined - 如果变量是 Undefined 类型的

  • boolean - 如果变量是 Boolean 类型的

  • number - 如果变量是 Number 类型的

  • string - 如果变量是 String 类型的

  • object - 如果变量是一种引用类型或 Null 类型的

  常见的转义字符：

  image

  关系运算符：

  image

  ##js中数组

  定义数组

  var myArray=new Array()

  数组的赋值

  1.var mycars=new Array(3)mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"

  2.var mycars=new Array("Saab","Volvo","BMW")

  数组的用法

  *利用 for in 来输出数组

  
  var x
  
  var mycars = new Array()
  
  mycars[0] = "Saab"
  
  mycars[1] = "Volvo"
  
  mycars[2] = "BMW"
  
  for (x in mycars)
  
  {
  
  document.write(mycars[x] + "
  ")
  
  }
  

  *数组的合并

  设arr和arr2 是两个数组通过语句

  arr.concat(arr2))合并两个数组

  *用数组元素组成字符串，用join语句

  ##js中的对象

  对象的定义：使用字符来定义和创建 JavaScript 对象:

  var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

  访问对象的方法：

  methodName : function() { code lines }

  你可以使用以下语法访问对象方法：

  objectName.methodName()

  通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

  有多种方式可以创建，使用和修改 JavaScript 对象。

  同样也有多种方式用来创建，使用和修改属性和方法。

  js中的函数

  js中的函数语法

  
  {
  
      *// 执行代码*
  
  }
  

  其中函数可以带参数也可以不带参数，当函数带参数是，函数声明时要加变量名 例如function functionname(var1，var2)，其中如果函数是带有返回值的函数则需要用到return语句

  注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

  js中的函数：

  JavaScript 函数是被设计为执行特定任务的代码块。

  JavaScript 函数会在某代码调用它时被执行。

  例如代码：

  function myFunction(p1, p2) { return p1 * p2;// 该函数返回 p1 和 p2 的乘积}
  可见js的函数和编程语言的函数没什么太大的区别。**

  ##js中的作用域

  如果变量是在函数内部声明的，变量为局部作用域，既只能在函数内部使用（注意如果在函数内部定义变量时没有用关键字 var 则该变量为全局变量）

  如果是在函数外部声明的则，则为全局变量，可以在所有脚本和函数中使用。

  js事件

  HTML中的事件可以用js来触发。

  • HTML 事件的实例：

  • HTML 页面完成加载

  • HTML input 字段改变时

  • HTML 按钮被点击

  现在的时间是?

  这是跟按钮被点击事件，事件触发显示时间

  常用的时间

  image

  ##js中的语句

  1.条件语句

  **if (*condition*)** 
  
  {
  
  *    当条件为 true 时执行的代码*
  
  }
  

  2.switch语句

  switch(n){ case 1:
  
          执行代码块 1        break;
  
      case 2:
  
          执行代码块 2        break;
  
      default:
  
          与 case 1 和 case 2 不同时执行的代码}
  

  3.for循环

  例改写代码：

  document.write(cars[0] + "
  "); 
  
  document.write(cars[1] + "
  "); 
  
  document.write(cars[2] + "
  "); 
  
  document.write(cars[3] + "
  "); 
  
  document.write(cars[4] + "
  "); 
  
  document.write(cars[5] + "
  ");
  

  用for改写

  for (var i=0;i");}
  ...
  4.while循环
  ...
  while (*条件*)
  
  {
  
  *    需要执行的代码*
  
  }
  

  5.break 和 continue 语句

  break用于跳出循环和高级语言没区别

  continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

  js中的错误和调试

  当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

  描述这种情况的技术术语是：JavaScript 将抛出一个错误。

  finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

  如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：

  ##js中的表单验证

  表单中的信息，要用js来验证

  表单数据经常需要使用 JavaScript 来验证其正确性：

  *验证表单数据是否为空？

  *验证输入是否是一个正确的email地址？

  *验证日期是否输入正确？

  *验证表单输入内容是否为数字型？

  function validateForm(){ var x=document.forms["myForm"]["fname"].value;
  
    if (x==null || x=="")  {    alert("姓必须填写");
  
      return false;
  
    }}
  

  上述例子通过js函数来判断表单是否为空。如果为空则弹出警告信息。

  js中的闭包

  js中嵌套函数可以访问上一层的函数变量。

  例子

  var add = (function () { var counter = 0;
  
      return function () {return counter += 1;}})();
  
  add();add();add();
  

  变量 add 指定了函数自我调用的返回字值。

  自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

  add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

  这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

  计数器受匿名函数的作用域保护，只能通过 add 方法修改。

  结束语

  经过短期的学习，自己感觉十分充实，大脑中装满了“飘忽不定”的知识，这也难怪，短期的学习只能有大概的印象，需要在实践中训练锻炼，更好的掌握这些知识。