在浏览器（IE最新版，或者chrome）中右键，点选“检查”。这让我们可以看到html元素是怎么被浏览器转换成页面布局的。
![QQ截图20160318001940.jpg]()
可以在这里尝试做出一些修改。
![QQ截图20160318002000.jpg]()
可以在这里尝试做出一些修改。
79290
%7B%22isLastPage%22%3Atrue%2C%22notes%22%3A%5B%5D%2C%22pid%22%3A%22t79290%22%2C%22tid%22%3A%2279290%22%2C%22mainForumsId%22%3A%5B%22134%22%5D%2C%22categoriesId%22%3A%5B%220%22%5D%2C%22tcId%22%3A%5B12%5D%7D
%7B%22isEditMode%22%3Afalse%7D
所有教程由网友发布，仅供参考，请谨慎采纳。科创不对教程的科学性、准确性、可靠性负责。
基础web开发教程
一个最简单的web开发教程
出品：科创网络发展局
本教程旨在让接触过一点点编程的业余爱好者，快速掌握HTML/CSS/JS等web技术的基础概念，了解这几种技术的目的和意义。
第一课：HTML
用记事本将以下内容保存成XXXXXXXXml，然后用网页浏览器打开它。
<html>
<head><title>I am a Web Developer!</title></head>
<body>
</body>
</html>
出品：科创网络发展局
本教程旨在让接触过一点点编程的业余爱好者，快速掌握HTML/CSS/JS等web技术的基础概念，了解这几种技术的目的和意义。
第一课：HTML
用记事本将以下内容保存成XXXXXXXXml，然后用网页浏览器打开它。
<html>
<head><title>I am a Web Developer!</title></head>
<body>
This is an h1 Header.
This is my first paragraph.
</body>
</html>
[修改于 8年9个月前 - 2016/03/18 03:57:48]
第二课：CSS
上课之前，先把第一课的代码改一下：
于是标题变成了红色。如果我们要写两个不同的标题，都染成红色，就要这样写：
这样很繁琐。有没有什么办法能够一次性指定所有标题都是红色？
答案：把style属性独立出来，让CSS负责。
请用以下代码替换第一课的代码。
<html>
<head><title>I am a Web Developer!</title></head>
<body>
<style>
h1 {color:red;} //在<style>标签内部，这样的语法就叫做CSS。
</style>
</body>
</html>
如此一来，就可以在一处方便地更改整个文档中的众多元素的style了。
上课之前，先把第一课的代码改一下：
This is an h1 Header.
于是标题变成了红色。如果我们要写两个不同的标题，都染成红色，就要这样写：
This is an h1 Header.
This is another h1 Header.
这样很繁琐。有没有什么办法能够一次性指定所有标题都是红色？
答案：把style属性独立出来，让CSS负责。
请用以下代码替换第一课的代码。
<html>
<head><title>I am a Web Developer!</title></head>
<body>
<style>
h1 {color:red;} //在<style>标签内部，这样的语法就叫做CSS。
</style>
This is an h1 Header.
This is another h1 Header.
This is my first paragraph.
</body>
</html>
如此一来，就可以在一处方便地更改整个文档中的众多元素的style了。
引用
加载评论中，请稍候...
200字以内，仅用于支线交流，主线讨论请采用回复功能。
课程总结：HTML是用类似于XML的语法，表示超文本内容的一种语言。HTML语法的特点是充满了标记（<biaoji>），用标记来表示元素。
HTML元素可以有许多属性，其中style属性决定元素被呈现到屏幕上时的外观。
可以用CSS间接地给元素指定style。
HTML元素可以有许多属性，其中style属性决定元素被呈现到屏幕上时的外观。
可以用CSS间接地给元素指定style。
引用
加载评论中，请稍候...
200字以内，仅用于支线交流，主线讨论请采用回复功能。
第三课：JS
我们已经制作好了一个静态网页，意思就是说它可以被浏览，但它的内容无法改变。如果要在浏览器里直接改变网页的内容，可以用JavaScript语言编写程序实现。
JavaScript是HTML的好伙伴。
请用下列代码替代第二课的代码：
<html>
<head><title>I am a Web Developer!</title></head>
<body>
<style>
h1 {color:red;} //sasdfa
</style>
<script>
function update(){ //定义一个叫做update的函数。
var i = 'This is a string.';
XXXXXXXXXXXtElementById('abc').innerHTML = i; //改变id为abc的元素其内部的HTML内容。
}
</script>
</body>
</html>
然后用浏览器打开，并尝试用鼠标左键点击
我们已经制作好了一个静态网页，意思就是说它可以被浏览，但它的内容无法改变。如果要在浏览器里直接改变网页的内容，可以用JavaScript语言编写程序实现。
JavaScript是HTML的好伙伴。
请用下列代码替代第二课的代码：
<html>
<head><title>I am a Web Developer!</title></head>
<body>
<style>
h1 {color:red;} //sasdfa
</style>
This is an h1 Header.
This is another h1 Header.
//当鼠标单击事件发生时，尝试运行'update()'这段JS代码。
This is my first paragraph.
<script>
function update(){ //定义一个叫做update的函数。
var i = 'This is a string.';
XXXXXXXXXXXtElementById('abc').innerHTML = i; //改变id为abc的元素其内部的HTML内容。
}
</script>
</body>
</html>
然后用浏览器打开，并尝试用鼠标左键点击
元素。
引用
加载评论中，请稍候...
200字以内，仅用于支线交流，主线讨论请采用回复功能。
至此为止，您已经学会了Web开发三大法宝：HTML，CSS和JS，可以开始创建您的第一个Web应用程序了。但其实还差最重要的一项技能：
第四课：遇到问题怎么办
第一招：上 XXXXXXXXXXXXXXXXXXXXXXXXXX/ 看看。
如果上面的内容提供不了帮助（比如找了半天没找到需要的内容），就用第二招：
例如，我需要利用JS，实现在点击
第四课：遇到问题怎么办
第一招：上 XXXXXXXXXXXXXXXXXXXXXXXXXX/ 看看。
如果上面的内容提供不了帮助（比如找了半天没找到需要的内容），就用第二招：
例如，我需要利用JS，实现在点击
元素的时候，让
元素变为蓝色。
但这无法通过修改
元素的内部HTML实现。我们只能修改
元素的属性，加入style='color:blue;'。可是，在JS里面要怎么写才能修改一个元素的某个属性呢？
首先，我们把我们的问题转化为英语：How can I change the attributes of an element using JavaScript?
然后提取其中的重点关键词：change attributes element JS
然后把重点关键词输入到google里面去。
从搜索结果来看，答案是用setAttribute()方法。我们参考搜索结果中提供的代码，将第三课的代码改成这样：
用浏览器打开，点击
元素，发现马上变成了蓝色。
右键菜单点“检查”，查看网页HTML代码，发现
元素的style属性已经被改变了：
引用
加载评论中，请稍候...
200字以内，仅用于支线交流，主线讨论请采用回复功能。
第五课（选修）：
建立一个http web服务器，这个服务器被浏览器通过http协议访问的时候，能够向浏览器返回html文档。其实这样一个服务器，也就是所谓的网站。
要建立一个http服务器，请在google搜索 write an http server [语言]，其中[语言]可以为PHP, Python, Node.js, Ruby, C++, VB等。
例如：
![QQ截图20160318012618.jpg]()
如果仅仅是将静态HTML文件提供给客户端，则不需要自己开发http服务器；可以直接使用Apache HTTP Server.
建立一个http web服务器，这个服务器被浏览器通过http协议访问的时候，能够向浏览器返回html文档。其实这样一个服务器，也就是所谓的网站。
要建立一个http服务器，请在google搜索 write an http server [语言]，其中[语言]可以为PHP, Python, Node.js, Ruby, C++, VB等。
例如：
如果仅仅是将静态HTML文件提供给客户端，则不需要自己开发http服务器；可以直接使用Apache HTTP Server.
引用
加载评论中，请稍候...
200字以内，仅用于支线交流，主线讨论请采用回复功能。