html+css+js基础学习

谁借莪１个温暖的怀抱￠ 2022-09-25 04:16 169阅读 0赞

首先我们先从最基本的前端知识入手html+css+JavaScript  
  
很多人喜欢一上来，就从书本开始啃，例如JavaScript书随便一本那么厚，  
等你啃完了，你的学习热情就没了，而且容易学了后面忘了前面  
  
所以我们现在要做的就是从最基础的知识开始，  
先了解我们用他们能干什么？  
再了解如何使用他们？  
至于使用的他们好与坏，与开发经验和熟练程度有关。  
  
下面就开始基础教程吧，自己看，自己学，自己理解！谁都帮不了你。  
[http://www.w3school.com.cn/html/index.asp][http_www.w3school.com.cn_html_index.asp]  
[http://www.w3school.com.cn/css/index.asp][http_www.w3school.com.cn_css_index.asp]  
[http://www.w3school.com.cn/js/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][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>部分中。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。  
JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

**外联js**

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

<!DOCTYPE html>
    <html>
       <body>
            <script src="myScript.js"></script>
       </body>
    </html>

JavaScript：对事件作出反应  
HTML 事件的例子：  
首先当点击鼠标按钮时，会触发 onmousedown 事件，  
当释放鼠标按钮时，会触发 onmouseup 事件，  
最后，当完成鼠标点击时，会触发 onclick 事件。  
当网页已加载时------------------onload 和 onunload 事件  
当图像已加载时  
当鼠标移动到元素上时------------onmouseover 和 onmouseout 事件  
当输入字段被改变时--------------onchange 事件  
当提交 HTML 表单时-------------onsubmit事件  
当用户触发按键时  
onfocus当输入字段获得焦点时，改变其背景色。  
  
实例  
<button type="button" οnclick="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 属性的变种。  
实例

x=document.getElementById("demo") //找到元素
    x.style.color="#ff0000"; //改变样式

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

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

![20160812112506558][]

对有过界面开发经验的人来说，盒子模型概念早就大脑中了，例如做Android界面开发  
是不是发现是一样的，所以说，很多技术都相似的，相通的。  
  
至于如何写好css样式，对初学者来说，你急不来，那是在实际开发中，多写多练，熟练  
了就会了。

[http_www.w3school.com.cn_html_index.asp]: http://www.w3school.com.cn/html/index.asp
[http_www.w3school.com.cn_css_index.asp]: http://www.w3school.com.cn/css/index.asp
[http_www.w3school.com.cn_js_index.asp]: http://www.w3school.com.cn/js/index.asp
[http_www.w3school.com.cn_htmldom_index.asp]: http://www.w3school.com.cn/htmldom/index.asp
[20160812112506558]: /images/20220718/972aa9cd50d540008340c75552412ad7.png