当前位置: 百科首页 > 网络常识

怎么编写HTML页面

2021-6-11 11:06:00|来源:网络|1217 ℃|移动端

HTML(超文本标记语言)是建立网页的基础语言。这是一种十分简单、灵活的编码语言,几乎所有网页都由某种形式的代码构成(例如ColdFusion、XML、XSLT)。HTML很容易学,但要掌握所有功能,则需要很长的时间。想让网页更多姿多彩,变得更有趣?学会制作基本HTML页面后,不妨学习基本的CSS。

方法简单介绍1建立文档

1打开简单的文本编辑器。

NotePad是不错的选择,而且可以免费下载。大部分文本编辑软件都能编写HTML,不过,复杂的软件有自动格式功能,比较难组织HTML页面。不建议使用TextEdit,它经常将文件保存成无法被浏览器识别为HTML的格式。
你也可以用在线HTML编辑器。不建议初学者使用专业的HTML编辑程序。

2将文件保存为网页。

在上方菜单中,选择 文件(File),点击 另存为(Save As)。将文件格式改成“网页”(Web Page)、“.html”或“.htm”。存在容易找到的位置。上面三个选择是一样的,没有差别。

3用网页浏览器打开文件。

双击文件,它应该会自动在浏览器打开,但现在还只是个空白网页。你也可以先打开浏览器,例如Firefox或Internet Explorer,再从文件(File)标签中,点击打开文件(Open File),然后选择文件。这个网页并不在网上,只能在你的电脑上看到。

4更新网页,查看已保存的更改。

<strong>Hello</strong>

输入空白的文件。更新浏览器上的空白网页,你应该可以看到网页上方有个加粗的“Hello”字眼。在本教程中,你随时可以测试新的HTML。只要保存.html文件,然后更新浏览器窗口,就能看到浏览器怎么诠释HTML。浏览器出现“<strong>”和“</strong>”字眼,代表你的文件并未被正确诠释为HTML。换个不同的文本编辑程序或浏览器。

5了解标签。

HTML的指示写在标签之间,告诉浏览器要怎么诠释及呈现网页。标签被尖括号<>括起来,网页上看不到。你在上面的例子中已经用到它们了:<strong>是“首标签”,或“起始标签”。写在这个标签后的内容被定义为“重点强调的文本”(通常在网页上以粗体显示)。
</strong>是“尾标签”,或“结束标签”。尾标签有多一条斜杠“/”,表示重点强调的文本就此结束。大部分标签都需要尾标签,才能起作用,所以别忘了它。

6构建文档。

删除HTML文档里的所有东西。一字不变地输入以下文本,重新开始(忽略小圆点)。这个HTML代码告诉浏览器你使用哪一版HTML,网页所有内容都在<html>和</html>标签之间。<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
</html>

7添加head和body标签。

HTML文档分为2个部分。“Head”部分是特别信息,例如网页标题。“Body”部分则包括网页内容。将这两个标签放进文档,别忘了尾标签。粗体字为新添加的文本。<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>

<head>

</head>

<body>

</body>

</html>

8取个标题。

对初学者来说,head部分的标签大多不重要。不过,标题标签方便使用,而且决定了浏览器窗口,或选项卡上显示的名称。在head标签的首标签和尾标签之间,写下你喜欢的标题:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>

<title>我的第一个HTML网页。</title>

</head>
<body>
</body>
</html>

方法简单介绍2格式化文本

1在body部分添加文本。

在这一部分,我们只输入body标签内的内容。文档里仍然保留其它文本,不过在本指南中,为了节省空间,我们不会每次都重复一遍。在<body>和</body>标签之间随便写一些东西,它们会成为网页上的首个内容。举个例子:<body>

我正在按wikiHow指南编写HTML网页。

</body>

2添加页眉。

用页眉标签组织网页内容。浏览器会以比较大的字号,显示页眉标签内的文本。搜索引擎和其它工具也会透过页眉标签,确认你的网页内容及编排。页眉标签共有6个,<h1> </h1>最大,<h6> </h6>最小。在你的页面上试一试:<body>

<h1>欢迎来到我的网页</h1>

我正在按wikiHow指南编写HTML网页。

<h3>我今天的目标:</h3>

<h5>已完成的目标:</h5>

学会用页眉。

<h5>未完成的目标:</h5>

学会更多文本格式化标签

</body>

3学会更多文本格式化标签。

你已经看过<strong>标签了,但其实还有很多方法简单介绍可以格式化文本。尝试不同的标签,或在相同的文本使用多种标签。别忘了在文本后面添加尾标签!<strong>重点强调的文本,在浏览器上以粗体显示。</strong>
<em>强调文本,在浏览器上以斜体显示。</em>
<small>比普通文本小一点。如果用在标题,则会自动缩放。</small>
<del>文本不再适用,以删除线显示。</del>
<ins>文档其余部分之外的插入文本,以下划线显示。</ins>

4排列网页上的文本。

你可能注意到单靠按回车键,并不能分行显示文本。别担心,以下标签能帮助你分段和换行,或是以其它方式排列文本:<p>“paragraph段落”的缩写,标签里的文本为一个段落,并与之前和之后的文本分离。</p>
<br>换行。由于它并未改变任何内容,所以”不需要”尾标签。写诗词或地址时可以用到,但不能用来分段。
<pre>如果你需要非常精确地呈现文本,那么这个标签里面的文本,将呈现为等宽字体,并像普通打字那样空格和换行,不需要使用相关标签。</pre>
<blockquote>引用自某个资料来源的文本。</blockquote>你可以在后面添加<cite></cite>标签,描述资料来源。

5添加注解文本。

comment标签不会出现在网页上,你可以利用它们,在HTML文档写只给自己看的注释,而不会影响网页内容。<!—在这里写下你的注释。—>不要添加尾标签。有的标签可以单独存在,不需要尾标签,被称为“空标签”。

6将所有标签整合在一起。

想记住这些标签,最好的方法简单介绍是在自己的网页上使用它们。下面的例子使用了你目前学到的所有标签。试着预测浏览器会怎么呈现它们,然后复制粘贴到文档,找出答案。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>我的第一个HTML网页。</title>
</head>
<body>
<h1>欢迎来到我的网页。</h1>
希望你喜欢本网站!<p><strong>这是为你而做的。</strong>
<h2>部分1:我是怎么HTML的</h2>
<!—给自己的提示:记住“h1”页眉比“h2”大—>
我已经学了HTML 差不多<del>1</del> <ins>2</ins>个小时,算得上是半个专家了吧。
</body>
</html>

方法简单介绍3添加链接和图片

1了解特性(attributes)。

你可以在每个标签里,写上详细信息。这些信息被称为“特性”,是标签里的额外描述信息,格式为

特性名字=”特定值”

。任何HTML标签都可以有个标题特性:

<p title=”Introduction”>在这里写一段介绍。</p>

给这个段落取个标题叫“Introduction”,当你把鼠标滑到网页上的这一段文字时,标题就会出现。

2连接到另一个网页。

用<a> </a>标签创建超链接,连接另一个网页。用href特性插入你要连接的网页地址。下面的例子连接到你现在阅读的网页:<a href=”http://www.wikihow.cc/Write-an-HTML-Page”>网站访客可以点击这里的文本,随着链接进入wikihow网页。</a>

3给标签添加id特性。

任何HTML都能用的另一个特性是“id”元素。在任何一个标签里,写下id=”example”,或输入没有空格的名称。现在,它还没有明显的作用,但我们会在下一步用到它。举个例子,在文档里输入

<p id=”example”>本段落将作为示例,展示id特性的作用。</p>

4连接到有特定id的元素。

现在,我们可以用超链接标签<a> </a>,连接到同一网页的另一个目的地。我们用#符号代替网址,然后输入要连接的id值。比如说,

<a href=”#example”>

这个文本将被连接到id为 “example”的段落。

</a>


所有HTML值都不分大小写。 不管是”#EXAMPLE”,还是”#example”,都会连接到同一个目的地。
如果网页太短,一次就能显示全部内容,那么点击浏览器里的链接时,可能看不到它的作用。调整窗口大小,直到滚动条出现,然后再试一次。

5添加图片。

<img>标签是个空标签,也就是说不需要尾标签。用特性添加显示图片所需的全部信息。以下例子将显示wikiHow的标志,每个特性后面都有详细的描述。

<img src=”http://pad2.whstatic.cc/skins/owl/images/wikihow_logo.png” alt=”wikiHow logo”>

src=” “

特性说明图片的所在位置(一般而言,显示他人网站上的图片是无礼的行为,而且如果有关网站下线了,图片也会跟着消失)。

特性有很多用途,最重要的还是以像素为单位,设置图片的宽度和高度。你也可以分开使用width=” “(宽度),和height=” “(高度)特性。但是,如果你之后用CSS,图片大小会变得很奇怪。)

alt=” “

特性是图片的简要描述,如果图片加载失败,用户就会看到这行替代文字。它被视为必要的信息,因为盲人正是靠屏幕阅读器,读出这些信息,来了解图片内容。

方法简单介绍4了解更多并把网页放上网

1验证HTML。

验证HTML,检查代码是否有错误。浏览器不能正确显示网页?进行验证可以帮你找出有问题的错误。它也能识别出能正确显示,但因为HTML规范更新而不建议使用的代码,使你更了解HTML。虽然过时的HTML也能用,但用不同浏览器显示时,网页可能不一致或有问题。尝试 W3C的免费在线验证服务,或是在网上搜索其它的HTML 5验证器。

2了解更多标签和特性。

HTML标签和特性还有很多,如果你有兴趣,可以在许多地方学习:W3schools(中英文)和HTML Dog(英文)有更多教程,和更完整的标签列表。
寻找你喜欢的网页,用浏览器的“查看页面源代码”(View Page Source)功能,自己看一看它们的HTML代码。把它复制粘贴到你的文档,自己修改及测试,看看它们的作用。
阅读其它相关的网络文章。

3把网页放上网。

只要选择一个网站托管服务,想上传多少HTML页面到个人网域都可以。你首先需要使用FTP上传软件。许多网站主机均有提供这项服务。连接自己网站上的网页或图片时,不需要使用完整的网址。举个例子,如果你的域名是www.superskilledhtmlcoder.cc,输入

<a href=”/journal/monday.html”>文本</a>

,就能连接到”www.superskilledhtmlcoder.cc/journal/monday.html”。

4用CSS添加样式。

HTML页面看起来有点简单?不妨学一些基本的CSS,添加颜色、不同的字体,及更好地控制元素排列。将CSS的“stylesheet”连接到HTML页面,这样就能快速做出大改变,在一个特定标签内,就能自动调整所有文本样式。你可以用Notepad创建简单的CSS样式表,HTML Dog和W3schools也有提供更详细的教程。

5添加JavaScript。

JavaScript是给HTML页面添加更多功能的编程语言。用<script> </script>标签插入JavaScript命令,可以添加互动按钮、计算数学题等。想了解更多,不妨参阅w3c的示例。

注意事项
本教程用的doctype是“loose HTML 4.0.1过渡模式”,这个简单格式适合初学者使用。如果你希望浏览器把它诠释为HTML 5严格模式,那就换成<!DOCTYPE html>。这是目前推荐的规范,但比较少人使用。
警告
HTML意在用通用格式保存内容。它不能控制网页的呈现方式,像是背景颜色和元素的确切排列方式。虽然HTML也有相关标签,可以控制网页样式,但还是强烈建议你用CSS,创建可控性更好、更一致的网页。
你需要准备
简单的文本编辑器,例如NotePad或TextEdit
网页浏览器,例如Internet Explorer或Mozilla Firefox
(选择性)HTML编辑器,例如Adobe Dreamweaver、Aptana Studio或Microsoft Expression Web

相关推荐

盘点《黑神话:悟空》中关于红孩儿的故事情节

买几个橘子是什么梗?

罗永浩·钮钴禄是什么梗?

抖音上很火的16和26是什么梗?

什么是“零糖社交”,为什么年轻人喜欢“零糖社交”

版权申明

本文"怎么编写HTML页面":https://www.jtmc.com.cn/1206.html内容来自网络,请自行判断内容的正确性。若本站收录的信息无意侵犯了贵司版权,请联系我们admin@jtmc.com.cn,我们会及时处理和回复。

本文共计5480个字,预计阅读时长37分钟

本栏目推荐

ai工具箱

中国生僻字大全

栏目标签

朋友 手术 治疗 颜色 游戏 生僻字成语 成语大全 网络梗 皮肤 养鱼知识 衣服 男人 中国生僻字大全 男生 微信 成语典故 食物 宝宝 民俗方言 中华语言 丰胸 女人 女生 分手 谈恋爱 生僻字 女性 中华方言习俗 中国汉字大全 中国民间方言