跳转到内容

GCSE 计算机/HTML

Add links
来自维基教科书，开放的书籍，开放的世界

网页现在是许多人生活和工作中不可或缺的一部分。越来越多的计算机功能现在转移到基于 web 的应用程序，熟悉这项技术非常重要。

如何学习 HTML

[编辑 | 编辑源代码]

学习 HTML 最简单的方法是制作一些网页。如果你有像 Dreamweaver 这样的程序，请确保你使用代码视图，不要像使用高级文字处理器一样将项目拖放到页面上。一个很好的网站，可以让你了解下面解释的标签，是 https://w3schools.org.cn/html/ ，并使用他们优秀的“试一试”功能。

网页结构

[编辑 | 编辑源代码]

你可能在中学使用过 所见即所得 编辑器（例如 Front Page 和 Dreamweaver）制作过一些网站。在 A-Level 计算机课程中，我们将研究这些编辑器生成的代码，以及如何用代码构建网页。在任何浏览器中打开本维基教科书页面，然后在 Firefox/Chrome 中按 CTRL+U 或在 Internet Explorer 中按 查看 -> 页面源代码，你应该可以看到网页代码。

HTML - 超文本标记语言，用于构建网页的语言


所有网页都具有以下基本结构

  • HTML - 指定这是一个网页
    • Head - 包含页面的标题，以及代码和 CSS 包含
    • Body - 显示主要页面内容

可以用以下标签在 HTML 代码中表示

<html>
  <head>
    <title> Title goes here</title>
  </head>

  <body>  The main body of the website goes here - likely to many lines </body>
</html>

标签

[编辑 | 编辑源代码]

标签解释

[编辑 | 编辑源代码]

网页是用标签构建的。这些标签定义了页面上的内容以及内容的结构。

简单标签示例

[编辑 | 编辑源代码]
<h1>A Book About Computing</h1>
<a href="http://www.google.co.uk">Google</a>

标签由以下部分组成

标签以左尖括号开头 <
然后是标签名称 - 一个单词、短语或单个字母 a
然后可能包含一些更多信息 href="http://www.bbc.co.uk"
然后是右尖括号 >
然后是应该显示在屏幕上的内容 链接到 BBC 网站
然后关闭标签，重复标签名称，如下所示 </a>
  • 所有标签都应该用小写字母编写。

自闭合标签

[编辑 | 编辑源代码]

有些标签略有不同，例如图片

<img src="somepic.png" />

对于这些标签，没有结束标签。稍后会详细介绍。

屏幕上不显示的标签

[编辑 | 编辑源代码]

有些标签应该在网页上的特定位置使用，并具有特殊的功能，这些功能可能不会导致该页面的内容或布局发生任何变化。有一些特殊标签保留用于帮助网页被搜索引擎发现和排名。这些标签位于网页的 <head>...</head> 部分。

  • <title>先访问我的网站</title> - 这会在浏览器顶部（而不是网页顶部）放置一个标题
  • <meta name="Description" content="使用最纯净的......"> - 使搜索引擎能够更好地对网页进行分类，他们可以知道该网站是关于什么的
  • <meta name="Keywords" content="优质......，批量......，坚固......，......公司"> - 你曾经可以添加关键字来告诉搜索引擎该网站是关于什么的。这种方法很容易被滥用，因为网站设计人员只是添加了他们能想到的所有词语，这种方法现在已经不常用，但你仍然需要了解它。

示例网页

[编辑 | 编辑源代码]
示例：绘制网站

为以下内容绘制一个 web 浏览器显示

<html>
  <head>
    <title>Kempoogle</title>
    <meta name="Description" content="The best site in the world">
  </head>
  <body>hello world!</body>
</html>
练习：网站基础

网站上最顶层的标签是什么

答案

<html> 和 </html>

编写代码，创建一个网页，其横幅标题为“Moogle - 购物网站”，元描述为“世界上最好的网站”。

答案 


<html>
  <head>
    <title>Moogle - shopping site</title>
    <meta name="Description" content="The best site in the world">
  </head>
  <body>...</body>
</html>

你如何使用网页的 <head> 部分来提高网页在搜索引擎中的排名？

答案

调整
<meta name=Description ...>
和
<meta name=Keywords ...>
标签

块级标签

[编辑 | 编辑源代码]

块级标签只是会在屏幕上显示内容，并在其之前开始新行的标签。内联标签（见下文）的功能类似，但 *不会* 开始新行。

最重要的块级标签，使用频率很高

[编辑 | 编辑源代码]

其他常用标签

[编辑 | 编辑源代码]
  • <ol></ol> - 有序列表
  • <ul></ul> - 无序列表
  • <li></li> - 列表项
  • <hr /> - 水平线

标题

[编辑 | 编辑源代码]

<h#></h#> - 标题标签使标签之间的任何文本成为标题，数字越高（h#），标题的重要性越低

<html>
  <head>
    <title>Examples of headings</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    Normal Text
  </body>
</html>

上面的代码产生以下内容

标题 1

标题 2

标题 3

对于所有以下示例，html、body 和 head 标签都被省略了。这并不意味着它们不存在，如果您编码，则必须包含它们。

练习：标题

画出以下代码会产生什么

  <h1>Years</h1>
  <h2>Year 12</h2>
  <h2>Year 13</h2>
  <h1>Staff</h1>

{{CPTAnswer|

年份

12 年级

13 年级

教职工 

  <h1>Introduction</h1>
  <h2>My Life</h2>
  <h2>My Cats</h2>
  <h2>My Dogs</h2>
  <h3>Barry</h3>
  <h3>Aubrey</h3>
  <h3>Rex</h3>
  <h1>Theories</h1>
  <h1>Conclusions</h1>

答案


介绍

我的生活

我的猫

我的狗

巴里

奥布里

雷克斯

理论

结论

编写代码以生成以下标题输出设备

显示器

扬声器

答案 


  <h1>Output Devices</h1>
  <h2>Monitors</h2>
  <h2>Speakers</h2>


队伍

守门员

后卫

中场

前锋

鲁尼

苏格拉底

体育场

老特拉福德

答案 


  <h1>Team</h1>
  <h2>Goalies</h2>
  <h2>Defenders</h2>
  <h2>Midfield</h2>
  <h2>Strikers</h2>
  <h3>Rooney</h3>
  <h3>Socrates</h3>
  <h1>Stadia</h1>
  <h2>Old Trafford</h2>

列表

[编辑 | 编辑源代码]

有两种类型的列表您需要了解，ordereld 列表 (<ol></ol>) 和unorderld 列表 (<ul></ul>)。每个列表都有单独的listitem (<li></li>) 来保存所有数据。

  • 无序列表 <ol></ol>
  • 为您提供一个由项目符号组成的列表
  <ul>
    <li>apples</li>
    <li>oranges</li>
    <li>pears</li>
  </ul>

上面的代码会为您提供

  • 苹果
  • 橘子
  • 梨
  <ol>
    <li>apples</li>
    <li>oranges</li>
    <li>pears</li>
  </ol>

上面的代码会为您提供

  1. 苹果
  2. 橘子
  3. 梨

如您在上面看到的那样，各个列表项包含在 <li></li> 括号内。

练习：HTML 列表

编写 HTML 代码来创建以下列表

  • 杰弗里
  • 邦格尔
  • 齐皮
  • 乔治

答案 


<ul>
  <li>Geoffrey</li>
  <li>Bungle</li>
  <li>Zippy</li>
  <li>George</li>
</ul>
  1. 维特根斯坦
  2. 奥古斯丁
  3. 海德格尔
  4. 马塞尔

答案 


<ol>
  <li>Wittgenstein</li>
  <li>Augustine</li>
  <li>Heidegger</li>
  <li>Marcel</li>
</ol>

以下代码会输出什么

<ul>
  <li>Kierkegaard</li>
  <li>Jaspers</li>
  <li>Frankl</li>
  <li>Rand</li>
</ul>

答案


  • 克尔凯郭尔
  • 雅斯贝尔斯
  • 弗兰克尔
  • 兰德

以下代码用于打印有序列表，有什么问题

<ul>
  <li>Kierkegaard<li>
  <li>Jaspers</li>
  <li>Frankl</ul>
  <li>Rand</li>
</ul>

答案


以下代码已通过注释进行修正

 
<ol> <!--this needs to be <ol> as it is an ordered list-->
  <li>Kierkegaard</li> <!--this needs a closing /-->
  <li>Jaspers</li>
  <li>Frankl</li> <!--this had the incorrect closing tag-->
  <li>Rand</li>
</ol> <!--this needs to be </ol> as it is an ordered list-->

将页面分解

[编辑 | 编辑源代码]

Div 元素用于将网页划分为多个部分 <div></div> - 这会在页面上占用空间，并且您放置的元素越多，页面看起来越大。段落 <p></p>，使您可以像编写论文一样构建您的文本

内联标签

[编辑 | 编辑源代码]

这些与块级标签几乎相同，但它们不会导致换行

最重要的内联标签

[编辑 | 编辑源代码]
  • <a></a> - 创建一个 链接 或一个 锚点，
  • <img /> - 添加一个图像
  • <span></span> - 将页面划分为多个部分，

您不应使用的旧式标签

[编辑 | 编辑源代码]

(因为您应该使用 CSS 代替)

  • <strong></strong> - 使文本加粗，
  • <em></em> - 使文本倾斜，
  • <br /> - 换行
    线，

例子

[编辑 | 编辑源代码]
[编辑 | 编辑源代码]
示例：简单超链接
<a href="http://news.bbc.co.uk>BBC News</a>

以上代码的输出如下
BBC 新闻

图像

[编辑 | 编辑源代码]
示例：图像
<img src="Googlelogo.png" />

以上代码的输出如下
要使其正常工作，必须在您的网页所在的同一个文件夹中有一个名为“Googlelogo.png”的图像。

同时使用多个标签的示例

[编辑 | 编辑源代码]
示例：HTML 示例
<h2>Ditty</h2>
<p>I tell you naught for your comfort, 
  <br /> 
  Yea, naught for your desire,<br /> Save that the sky grows <strong>darker</strong> yet 
  <br /> 
  And the sea rises <em>higher</em>
</p>
<hr />
<p>- G.K.Chesterton, <em>The Ballad of the White Horse</em>(1911)</p>

以上代码的输出如下

小调

我告诉你，不是为了你的安慰，
是的，不是为了你的愿望，
只是为了告诉你天空变得更暗了
而大海变得更高了

- G.K. 切斯特顿，《白马的民谣》（1911）

如您所见，HTML 代码的布局并不总是反映它在屏幕上的显示方式。请记住，您开始新行的时间只有当您遇到 <br /> 或 <p> 或其他块级元素时。

练习

[编辑 | 编辑源代码]
练习：内联标签

编写代码以产生以下输出

你好 怎么样 你？

答案 


<em>Hello</em> <strong>how</strong> are <strong><em>you</em></strong>?


我 很好
谢谢您

答案 


<strong>I'm</strong> <em>fine</em><br />
thank you

这是一个到bbc 网站的 链接。

答案 


This is a <a href="http://www.bbc.co.uk">link</a> to the <em>bbc website</em>.


快速的棕色狐狸

跳过懒惰的狗

答案 


<p>The <strong>Quick Brown Fox</strong></p>
<p>Jumped over the <em>Lazy Dog</em></p>
  • 粗体
  • 到 google 的链接
  • 斜体

答案


{抱歉，这是一个陷阱问题！}

<ul>
  <li><em>Bold</em></li>
  <li><strong>Link to google</strong></li>
  <li><a href="http://www.google.com">Itallic</a></li>
</ul>


编写代码以创建以下页面，将名为 cat.jpg 的图像链接到文本“这是一张猫的图片：”

答案 


<html>
  <head>
    <title>Cat picture</title>
  </head>
  <body>
    This is a picture of a <em>cat</em>:<br/>
    <img src="cat.jpg">
  </body>
</html>

编写代码以创建以下页面，将名为 dog.jpg 的图像链接到页面 http://college.ac.uk 这张狗的图片链接到我的学院网站

答案 


<html>
	<head>
		<title>Dog picture</title>
	</head>
	<body>
		This picture of a <strong>dog</strong> links to my college's website:<br/>
		<a href="http://college.ac.uk"><img src="dog.jpg"></a>
	</body>
</html>

以下代码会产生什么

The invention<br />
of <strong>weights<strong> and <strong>measures</strong><br />
Makes robbery easier<br /><hr />
<em>- Chuang Tzu</em>

摘自：Merton, Thomas. (1969). The Way of Chuang Tzu. New York: New Directions.

答案


   
地址  

发明
重量和度量
使抢劫更容易

- 庄子 


<p><em>Modern art has taken the wrong turn in abandoning the 
search for the <br /><strong>meaning of existence</strong></em>
<br /> in</p><p>order to affirm the value of the <strong>individual
</strong> for his own sake</p><p><em>- Andrei Tarkovsky</em></p>

摘自：Tarkovsky, Andrei (1989). Sculpting in Time. University of Texas Press

答案


请注意，代码行末的换行符没有任何作用，我们只用 <br /> 和 <p> 以及其他块级元素来放置换行符

现代艺术在放弃寻找
存在的意义
方面

走错了路，为了个人自身的利益而肯定个人价值

- 安德烈·塔可夫斯基

为以下网页编写完整的 html 页面代码

汽车天堂

欢迎来到the汽车网站

  • 汽车
  • 货车
  • 自行车

本周30%折扣

答案 


<html>
  <head>
    <title>Car heaven</title>
  </head>
  <body>
        <h1>Car heaven</h1>
        <p>Welcome to <em>the</em> car site</p>
        <ul>
                <li>Cars</li>
                <li>Vans</li>
                <li>Bikes</li>
        </ul>
        <p>This week <strong>30%</strong> discount</p>
  </body>
</html>


为以下网页编写完整的 html 页面代码，其中图像地址为：contempt.jpg，alt 文本为：contempt，网页地址为：http://bbc.co.uk

   教育
地址  

轻蔑

如果没有对教育怀有温和的轻蔑，
任何绅士的教育都不算完整

了解更多

点击这里了解更多

答案 


<html>
  <head>
    <title>Education</title>
  </head>
  <body>
        <h1>Contempt</h1>
        <p>without a gentle <strong>contempt</strong> for education,<br /> no gentleman's education is complete</p>
        <img src="contempt.jpg" alt="contempt">
        <h2>Learn More</h2>
        <p>Click <a href="http://bbc.co.uk">here</a> to go to learn more</p>
  </body>
</html>

-->

评论

[编辑 | 编辑源代码]

有时您想在网页的 HTML 代码中写一些东西来帮助您更好地理解代码。这称为注释，是任何计算语言中普遍存在的特性。注释不执行任何计算功能，也不会在完成的网页上显示，它们仅仅供网页设计师使用，以便他们能够更好地理解页面。对于 HTML，我们使用以下标签

  <head>
    <title>Love</title>
  </head>
  <body>
        <h1>What Love is</h1>
        <p>"Love means to love that which is unlovable; or it is no virtue at all."</p>
        <!Quote from G. K. Chesterton (1874-1936)>
  </body>
</html>

在上面的示例中，以 <! 开头的行是一个注释。此标签中的所有内容都不会显示在屏幕上，产生以下结果

什么是爱

“爱意味着爱那些不可爱的东西；否则它就不是美德。”

练习：注释

对于以下代码，请草拟它输出的内容

<html>
  <head>
    <title>Friendship</title>
  </head>
  <body>
        <h1>Hello</h1>
        <p>Can I be your friend?</p>
        <ol>
          <li>Yes</li>
          <li>No</li>
          <!--<li>Maybe</li>-->
        </ol>
        <!What a horrible question!>
  </body>
</html>

答案


   友谊
地址  

你好

我可以成为你的朋友吗？

  1. 是
  2. 否


扩展：自学 HTML

网络上充满了免费资源可以让你提升自己的技能，没有什么能阻止你成为一名顶尖的网页设计师。这里的这些问题适合让你通过这个课程，并带有一些额外的元素。如果你想真正精通各种网络技术，你应该尝试自学。一个很好的起点是 w3schools 网站，在那里你可以学习

如果你想了解构建动态网页的代码，包括 Facebook，请查看

扩展：HTML 5

我们一直在学习的都是网页设计的非常基础的东西。如果你喜欢你一直在做的事情，你最好看看 HTML5。HTML5 开始让网站完全互动，能够快速嵌入视频并与网页互动。在接下来的几年里，你会越来越多地看到应用程序迁移到这项新技术，所以赶上潮流，从 w3schools 开始学习。

检索自 “https://wikibooks.cn/w/index.php?title=GCSE_Computing/HTML&oldid=3822456"
华夏公益教科书