所有教程由网友发布,仅供参考,请谨慎采纳。科创不对教程的科学性、准确性、可靠性负责。
基础web开发教程
novakon2016/03/18软件综合 IP:广东
一个最简单的web开发教程
出品:科创网络发展局
本教程旨在让接触过一点点编程的业余爱好者,快速掌握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年1个月前 - 2016/03/18 03:57:48]

来自:计算机科学 / 软件综合严肃内容:教程/课程
8
已屏蔽 原因:{{ notice.reason }}已屏蔽
{{notice.noticeContent}}
~~空空如也
novakon 作者
8年1个月前 IP:广东
812809
在浏览器(IE最新版,或者chrome)中右键,点选“检查”。这让我们可以看到html元素是怎么被浏览器转换成页面布局的。

QQ截图20160318001940.jpg


可以在这里尝试做出一些修改。


QQ截图20160318002000.jpg
引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
novakon作者
8年1个月前 IP:广东
812811
第二课:CSS
上课之前,先把第一课的代码改一下:

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字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
novakon作者
8年1个月前 IP:广东
812812
课程总结:HTML是用类似于XML的语法,表示超文本内容的一种语言。HTML语法的特点是充满了标记(<biaoji>),用标记来表示元素。
HTML元素可以有许多属性,其中style属性决定元素被呈现到屏幕上时的外观。
可以用CSS间接地给元素指定style。
引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
novakon作者
8年1个月前 IP:广东
812813
第三课:JS
我们已经制作好了一个静态网页,意思就是说它可以被浏览,但它的内容无法改变。如果要在浏览器里直接改变网页的内容,可以用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字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
novakon作者
8年1个月前 IP:广东
812816
至此为止,您已经学会了Web开发三大法宝:HTML,CSS和JS,可以开始创建您的第一个Web应用程序了。但其实还差最重要的一项技能:

第四课:遇到问题怎么办

第一招:上 XXXXXXXXXXXXXXXXXXXXXXXXXX/ 看看。

如果上面的内容提供不了帮助(比如找了半天没找到需要的内容),就用第二招:

例如,我需要利用JS,实现在点击

元素的时候,让

元素变为蓝色。
但这无法通过修改

元素的内部HTML实现。我们只能修改

元素的属性,加入style='color:blue;'。可是,在JS里面要怎么写才能修改一个元素的某个属性呢?
首先,我们把我们的问题转化为英语:How can I change the attributes of an element using JavaScript?
然后提取其中的重点关键词:change attributes element JS
然后把重点关键词输入到google里面去。

QQ截图20160318005738.jpg

从搜索结果来看,答案是用setAttribute()方法。我们参考搜索结果中提供的代码,将第三课的代码改成这样:

QQ截图20160318010137.jpg

用浏览器打开,点击

元素,发现马上变成了蓝色。
右键菜单点“检查”,查看网页HTML代码,发现

元素的style属性已经被改变了:

QQ截图20160318010431.jpg

引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
novakon作者
8年1个月前 IP:广东
812817
第五课(选修):
建立一个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.
引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
acmilan
8年1个月前 IP:四川
812836
支持楼主
引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论
77159
8年1个月前 IP:日本
812838
这个必须支持一个
引用
评论
加载评论中,请稍候...
200字以内,仅用于支线交流,主线讨论请采用回复功能。
折叠评论

想参与大家的讨论?现在就 登录 或者 注册

所属专业
上级专业
同级专业
novakon
学者 机友 笔友
文章
1256
回复
8385
学术分
16
2008/03/29注册,2年3个月前活动

已走,勿送

主体类型:个人
所属领域:无
认证方式:手机号
IP归属地:未同步
文件下载
加载中...
{{errorInfo}}
{{downloadWarning}}
你在 {{downloadTime}} 下载过当前文件。
文件名称:{{resource.defaultFile.name}}
下载次数:{{resource.hits}}
上传用户:{{uploader.username}}
所需积分:{{costScores}},{{holdScores}}下载当前附件免费{{description}}
积分不足,去充值
文件已丢失

当前账号的附件下载数量限制如下:
时段 个数
{{f.startingTime}}点 - {{f.endTime}}点 {{f.fileCount}}
视频暂不能访问,请登录试试
仅供内部学术交流或培训使用,请先保存到本地。本内容不代表科创观点,未经原作者同意,请勿转载。
音频暂不能访问,请登录试试
支持的图片格式:jpg, jpeg, png
插入公式
评论控制
加载中...
文号:{{pid}}
投诉或举报
加载中...
{{tip}}
请选择违规类型:
{{reason.type}}

空空如也

加载中...
详情
详情
推送到专栏从专栏移除
设为匿名取消匿名
查看作者
回复
只看作者
加入收藏取消收藏
收藏
取消收藏
折叠回复
置顶取消置顶
评学术分
鼓励
设为精选取消精选
管理提醒
编辑
通过审核
评论控制
退修或删除
历史版本
违规记录
投诉或举报
加入黑名单移除黑名单
查看IP
{{format('YYYY/MM/DD HH:mm:ss', toc)}}