html编写网页实例
网站是开源软件项目的绝佳资源。 网站为用户提供了一个了解您的项目的理想机会。 项目网站可以共享其他信息，屏幕快照，示例代码，视频以及开发人员和用户会发现有用的其他资源。
如果您有兴趣创建自己的网站，那么本文适合您。
其他选择
您当然不需要为您的开源软件项目构建网站。 这些天来，您可以将开源软件项目托管在GitHub或GitLab等地方，并获得项目的标准“ Readme.md”样式说明。 对于许多项目而言，这种方法非常有效，对于那些希望更加专注于为项目编写代码而不是维护网站的开发人员而言，这是一个完美的解决方案。
但是，如果您想创建一个网站，则可以利用工具和网站建设者来为您完成工作。 例如，开源的TYPO3 Web内容管理系统就是一个出色的网站构建器。 或者，您可以使用许多其他开源内容管理系统和网站构建器来创建和管理项目网站，而无需学习任何HTML代码。
网页结构
HTML是一种简单的超文本标记语言，人类易于编写，计算机也易于阅读。 HTML的核心是标签，一个标记，用于向Web浏览器告知该页面或页面内部的内容。 HTML标记开始与小于符号（<）和与大于号端（>）。 例如，启动HTML页面的标签是：
< html >
大多数标签都要求您分别标记事物的开始和结束。 结束标记在标记内包含斜杠（ / ）。 例如，结束HTML页面的标签为：
< / html >
这样，我们可以看到网页的顶层轮廓。 HTML代码是：
< html >
< / html >
在HTML页面的开始和结束标记内，您将包括其他代码块。 所有页面都需要一个正文块来定义网页的文本正文。 大多数页面还以特殊的head块开头，该head块定义了Web浏览器的某些参数，例如在哪里找到样式表。 稍后我们将探讨样式表。
< html >
< head >
< / head >
< body >
< / body >
< / html >
空格（包括“换行”以及空格和制表符）对于Web浏览器并不重要，但是大多数Web开发人员都会缩进其他HTML块中HTML块，以使代码对人类更具可读性。 这就是为什么我在示例代码中缩进了头部和身体块的原因。
一个简单的网页概述
大多数网页遵循总体轮廓。 通常这是顶部的页眉和导航栏，中间是主要内容，底部是页脚。 HTML版本5标准定义了用于执行此操作的标记。 让我们添加到代码示例中以包含以下标记：
< html >
< head >
< / head >
< body >
< header >
< / header >
< nav >
< / nav >
<main>
< / main>
< footer >
< / footer >
< / body >
< / html >
您的网页内容位于这些块的每个内部。 例如，您应该在标题中包含您的开源项目的名称。 还可以考虑在页眉，页脚中的联系信息以及任何社交媒体链接中添加有用的导航链接。 您可以使用HTML标签定义每个元素。
首先，您可以在页面中使用以下常见标签：
- <h1>标题级别1（通常是标题中的标题） </ h1>
- <h2>标题级别2（通常是主体中的主题标题） </ h2>
- <p>正文段落。 这是最常用HTML标记。 </ p>
- <i>斜体文本</ i>
- <b>粗体</ b>
- <a href=" https://example/ ">链接到另一个页面或另一个网站</a>
- <img src =“ image.png” alt =“您要显示的图像” />
用于显示图像的img标签与到目前为止我们探索的其他标签不同。 这是“自动关闭”标签的示例，该标签可独立执行某项操作。 在最新版本HTML中，您不需要结尾斜杠。
对于图像，请确保在alt参数中包括替代性描述性文本。 视障人士的浏览器设置为不显示图像，将使用替代文本。 如果无法加载图像，您还将看到替代文本。
使用这些新标记，我们可以扩展HTML代码示例以创建一个简单而功能强大的网页。 让我们在标题中添加徽标和页面标题，并在主体中添加一些简单文本。 我们还将在导航栏中包含指向其他页面的链接，并在页脚中包含指向Twitter和联系人电子邮件地址的链接。
< html >
< head >
< / head >
< body >
< header >
< h1 >< img src = "logo.png" alt = "FreeDOS logo" / > The FreeDOS Project
< / h1 >
< / header >
< nav >
< a href = "http://wiki.freedos/" > Wiki
< / a >
< a href = "/download/" > Download
< / a >
< / nav >
<main>
< h2 > Welcome to FreeDOS
< / h2 >
< p >< b > FreeDOS is open source software!
< / b > It doesn’t cost anything to download and use FreeDOS. You can also share FreeDOS for others to enjoy! And you can view and edit our source code, because all FreeDOS programs are distributed under the GNU General Public License or a similar open source software license.
< / p >
< p >< a href = "http://wiki.freedos/" > Read the wiki
< / a >< / p >
< p >< a href = "/download/" > Download FreeDOS 1.2
< / a >< / p >
< / main>
< footer >
< p >< a href = "https://twitter/freedos_project" > Follow us on Twitter
< / a >< / p >
< p > Contact me at
< i > jhall@freedos
< / i >< / p >
< / footer >
< / body >
< / html >
向您的网页添加样式
如果在浏览器中查看此简单网页，您会发现它只是纯文本。 您可以使用样式表在网站上添加一些内容。 样式表通常是一个单独的文件，它告诉Web浏览器如何显示网页的某些部分。 您可以在此处设置网页字体，背景颜色或其他样式。
样式表的格式与HTML完全不同。 在样式表中，输入要修改的标签或“元素”的名称，然后在花括号中列出不同的样式。 例如，这个简单的样式表为块内的所有内容（即整个页面）定义了文本颜色和背景颜色。
body {
color: black;
background-color: white;
}
如果您只是在学习如何创建网页，建议您从以下简单的样式表说明开始：
- background-color： 颜色 ；
- 颜色： 颜色 ;
- font-weight：粗体;
- 文字样式：斜体；
- 文字装饰：下划线；
- 高度： 大小 ； 宽度： size ; （有助于设置图像的大小）
- 文本对齐：居中；
您可以使用<style>块将样式表包含在头部 ，从而将样式表嵌入HTML页面。 让我们添加一个非常简单的样式表，将默认颜色设置为白色的黑色，将标题设置为蓝色背景上的居中白色文本，将页脚设置为灰色背景上的斜体黑色文本。 我们还将徽标设置为50像素高。
< html >
< head >
< style >
body {
color: black;
background-color: white;
}
header {
color: white;
background-color: blue;
text-align: center;
}
img {
height: 50px;
}
footer {
color: black;
background-color: gray;
text-style: italic;
}
< / style >
< / head >
< body >
< header >
< h1 >< img src = "logo.png" alt = "FreeDOS logo" / > The FreeDOS Project
< / h1 >
< / header >
<main>
< h2 > Welcome to FreeDOS
< / h2 >
< p >< b > FreeDOS is open source software!
< / b > It doesn’t cost anything to download and use FreeDOS. You can also share FreeDOS for others to enjoy! And you can view and edit our source code, because all FreeDOS programs are distributed under the GNU General Public License or a similar open source software license.
< / p >
< p >< a href = "http://wiki.freedos/" > Read the wiki
< / a >< / p >
< p >< a href = "/download/" > Download FreeDOS 1.2
< / a >< / p >
< / main>
< footer >
< p >< a href = "https://twitter/freedos_project" > Follow us on Twitter
< / a >< / p >
< p > Contact me at
< i > jhall@freedos
< / i >< / p >
< / footer >
< / body >
< / html >
样式表可让您完全更改网站的外观，而无需更改HTML代码。 这是更高级的样式表，它添加了新的颜色，字体，间距，边框，阴影和悬停效果，以使同一HTML焕然一新。
body {
color: black;
background-color: white;
font-family: 'Open Sans', Calibri, sans-serif;
margin: 0;
}
header {
color: white;
background-color: steelblue;
}
header > h1 {
font-size: small;
margin: 0;
text-align: center;
}
header img {
border: 0;
height: 50px;
vertical-align: middle;
}
nav {
background-color: darkorange;
box-shadow: 0 0 4px dimgray;
padding: .5em 0;
text-align: center;
}
nav > a {
color: white;
background-color: transparent;
padding: .5em 1em;
}
nav > a:hover {
background-color: orange;
}
main {
border-left: 1px dotted lightgray;
border-right: 1px dotted lightgray;
margin: 0 10%;
padding: 2em 1em;
}
main a {
color: royalblue;
}
main a:hover {
color: dodgerblue;
}
main h2 {
border-bottom: 1px solid dimgray;
font-size: 1.2em;
margin: 2em 0;
text-align: center;
text-transform: uppercase;
}
footer {
color: dimgray;
background-color: lightgray;
border-top: 2px solid dimgray;
font-size: small;
padding: 1em 0;
text-align: center;
}
footer a {
color: black;
}
footer a:hover {
color: dimgray;
}
学到更多
这只是编写自己HTML网页的介绍。 还有很多东西要学习。 通过试验和一些实践，您可以构建自己的网页，这些网页看起来干净现代，但易于维护。
掌握了基础知识之后，您可以使用以下其他资源来学习有关创建网页的更多信息，包括HTML和样式表：
W3学校
构建网页的绝佳资源。 它还包括教程和代码示例，以帮助您快速入门和运行。 当我尝试新事物时，我经常使用W3Schools作为参考。
MozillaHTML指南
使用HTML的绝佳指南。 Mozilla还提供了初学者的教程，因此您可以学习如何创建自己的网页。
MozillaCSS指南
Mozilla人士提供的另一个很好的参考。 包括可帮助您自学样式表的教程。
PHP
有兴趣将您的网站提升到一个新水平吗？ 一旦能够制作自己HTML页面，请尝试添加PHP代码以使您的网页更具动态性。 该网站包含许多示例和教程。
翻译自: https://opensource/article/20/4/build-websites
html编写网页实例
更多推荐
html编写网页实例_编写自己HTML网页的简介
发布评论