html+css+js基础学习

来源:互联网 发布:网络拓扑结构及配置 编辑:程序博客网 时间:2024/03/29 21:27
首先我们先从最基本的前端知识入手html+css+JavaScript

很多人喜欢一上来,就从书本开始啃,例如JavaScript书随便一本那么厚,
等你啃完了,你的学习热情就没了,而且容易学了后面忘了前面

所以我们现在要做的就是从最基础的知识开始,
先了解我们用他们能干什么?
再了解如何使用他们?
至于使用的他们好与坏,与开发经验和熟练程度有关。

下面就开始基础教程吧,自己看,自己学,自己理解!谁都帮不了你。
http://www.w3school.com.cn/html/index.asp
http://www.w3school.com.cn/css/index.asp
http://www.w3school.com.cn/js/index.asp

当我看完了html+css+JavaScript各自的手册后,只是了解个大概,
想马上就牛逼,想马上就能很好地使用,你也别想了
仅仅是了解个大概!
想很好地使用他们,还是得练习,自己试着开始慢慢写代码,不清楚就查手册

要怎样才能深入地学习呢?
那我们就挑选最重要的东西先学,基本的语法知识可以在写代码的过程中来不断强化。


HTML DOM的了解
访问和操作 HTML 文档的标准。DOM 是 Document Object Model(文档对象模型)的缩写。
http://www.w3school.com.cn/htmldom/index.asp
不学习这个,你怎会知道html的结构和如何操作html中的元素呢



javaScript基本数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
var x // undefined表示变量不含有值
var person=null //将变量的值设置为 null 来清空变量。
var x=true //布尔
var x = 6; // 数字
或者var x1=34.00; // 数字
var y=123e5; // 数字
var x = "Bill"; // 字符串
var cars=["Audi","BMW","Volvo"];//数组
var person={firstname:"Bill", lastname:"Gates", id:5566}; //对象

现在你最起码得学会如何操作这些数据类型吧,以后写代码不就是如何操作、使用这些数据结构嘛

我认为,你以前有编程经验的,在学习一门新语言时,明白了如何使用和操作基本的数据类型,
就可以认为你基本上学会了这门语言了,只是你现在使用起来还不太熟悉,不能写出复杂的要求的代码
但基本看懂别人写的代码不会有问题




内部的JavaScript
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> </body>(一般在该标签的最底部)和 <head> </head>部分中。
[html] view plain copy
  1. <script>  
  2.       alert("My First JavaScript");  
  3. </script>  
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。
JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。




外联js


也可以把脚本保存到外部文件中。
实例

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <body>  
  4.         <script src="myScript.js"></script>  
  5.    </body>  
  6. </html>  




JavaScript:对事件作出反应
HTML 事件的例子:
首先当点击鼠标按钮时,会触发 onmousedown 事件,
当释放鼠标按钮时,会触发 onmouseup 事件,
最后,当完成鼠标点击时,会触发 onclick 事件。
当网页已加载时------------------onload 和 onunload 事件
当图像已加载时
当鼠标移动到元素上时------------onmouseover 和 onmouseout 事件
当输入字段被改变时--------------onchange 事件
当提交 HTML 表单时-------------onsubmit事件
当用户触发按键时
onfocus当输入字段获得焦点时,改变其背景色。

实例
<button type="button" onclick="alert('Welcome!')">点击这里</button>

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
JavaScript:改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
实例
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容


JavaScript:改变 HTML 样式
改变 HTML 元素的样式,属于改变 HTML 属性的变种。
实例
[html] view plain copy
  1. x=document.getElementById("demo") //找到元素  
  2. x.style.color="#ff0000"; //改变样式  




以上这些知识点,在基础教程中都提到过的,我这里只是把重要的提出来了
详细清楚的学习,请移步基础教程!!
你也可以挑选出你认为重要的知识点来加强学习,
因为每个人的知识结构是不一样的。




学习css样式表时,我认为最重要的就是盒子模型



对有过界面开发经验的人来说,盒子模型概念早就大脑中了,例如做Android界面开发
是不是发现是一样的,所以说,很多技术都相似的,相通的。

至于如何写好css样式,对初学者来说,你急不来,那是在实际开发中,多写多练,熟练
了就会了。
原创粉丝点击