HTML Tutorial (01) PS:不是崇洋媚外!

首先说明,我没挂(自作多情)

按了那个大大的红色按钮后,又不知道该写些啥了。
那就先从开发HTML要什么东西开始吧。
开发HTML不需要什么特殊的软件。如果你比较懒(像我),你可以直接用系统自带的记事本。如果有需要,你可以看一下下面介绍的软件。

推荐的IDE

1.Atom(非常推荐)

在这里插入图片描述
为什么推荐呢?首先就是因为它是免费的。学生党专用。
其他的HTML开发工具几乎都是要钱的(当然,有些IDE也是免费的,只不过我不知道,或者没有Atom好用)。
还有就是它还支持其他语言。您如果想开发其他语言的程序,您也可以使用它。

BUT!!它就没有缺点吗?
当然有。
由于它可以用于开发很多种语言,所以你想在HTML的<style>里面插上一点CSS时,它会疯狂的报错(除非你没装Linter)

2.Microsoft FrontPage(后来更名为SharePoint Designer)

在这里插入图片描述
懒。自己看:https://www.cnblogs.com/zhalin/archive/2008/02/05/1064750.html

3.Adobe Dreamweaver(推荐CC 2018版本)

它除了价格贵,占用资源高(对于ThinkPad X61来说)以外,貌似没有什么缺点了。

然后呢?说了半天,连一个HTML代码都没提到。下面就来讲讲怎么创建一个HTML文件。

创建一个HTML文件

懒人版

在一个空闲的文件夹里,右击->新建->文本文档
然后你就得到了一个TXT文件。打开文本文件,填好HTML代码,改后缀名为.html。

FrontPage

显然,有个IDE可以让Code简单的多。
在这里插入图片描述
然后你就会发现FrontPage帮忙添上了一些重要的代码。
帮懒人奉上:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
</head>

<body>
<!--透剧:在这里添加主要代码-->
</body>

</html>

完事了?没有。按Ctrl+S保存这个文件。记得起一个好听的名字。

Dreamweaver

虽然推荐CC 2018,但是我是用的是CS 5
上图:
在这里插入图片描述
完事了?没有。按Ctrl+S保存这个文件。记得起一个好听的名字。

Atom

懒。自己看:https://jingyan.baidu.com/article/925f8cb8a0cd14c0dce05663.html

编写你的第一个Website

这里以FrontPage为例(Dw和Fp都差不多)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Html File</title>
</head>

<body>
<p>Hello,<big>World.</big><br>
<p><i><small>This&nbsp;</small></i><strong><big>is&nbsp;</big></strong>my&nbsp;<light><big>demo.</big></light></p>
</body>

</html>

在这里插入图片描述
本来准备留到下一章讲的,但现在讲讲元素吧。
不知道你们有没有看过一些网站的图标(如MCBBS)。那里面有一栏叫做“编程开发”。大概长这样:
</>
这就是元素的结尾。
简单来说,元素=

<元素名>
</元素名>

当然有例外。比如IMG:

<img>

不知道这样结束是不是太突然。下章再见。

剧透:<html>是HTML的开头。浏览器读到它时就会知道这是一个HTML文件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值