sql初学者指南_Web设计初学者指南：第1部分

最新推荐文章于 2022-11-10 19:38:38 发布

daique1908

最新推荐文章于 2022-11-10 19:38:38 发布

阅读量285

点赞数

文章标签： python java html web html5

sql初学者指南

在整个系列中，您将学习如何使用最新的Web设计技术（HTML5和CSS3）创建网站。本系列针对的是那些以前对网页设计知识绝对为零的人。

此系列中也可用：

现代网络浏览器

当我们要使用最新的标准（HTML5和CSS3）创建网页时，我们需要一个能够理解最新网络技术的现代化网络浏览器。

低于IE8的Microsoft Internet Explorer浏览器版本根本不会削减。如果您使用的是IE7或更低版本，请下载下面的一种网络浏览器。

如果您已经在使用其他网络浏览器，请检查其是否符合以下最低要求，以获得最佳性能。

“为什么需要特定的浏览器？” 你可能会问。嗯，由于HTML5相对较新，因此较旧的浏览器无法理解如何阅读代码并将其正确地转换为网页。

文本编辑器

HTML文件只是带有.html扩展名的文本文件，因此您不需要任何专业或昂贵的软件（例如Dreamweaver）来创建它们。实际上，您的计算机已预装了软件，您可以在– Windows上的“记事本”或Mac上的“ TextEdit”（以“纯文本模式”）中编写网页。

尽管计算机上预装的软件可以运行 ，但远非最佳。如果您使用Windows或Mac上的TextWrangler ，我建议下载Notepad ++ 。这两个程序都是完全免费的，并提供了许多对Web开发人员有用的功能，例如语法突出显示，选项卡式文件编辑和行号。

对于Mac用户，我强烈建议购买TextMate ， Coda或Espresso 。 Windows用户，请尝试使用E-TextEditor 。

HTML简介

互联网上的每个网站都是用超文本标记语言（HTML）编写的。随着Web变得更加主流以及网站发现自己需要新功能，HTML语言已经增长并扩展了多年。

HTML语言由万维网联盟（W3C）维护，最新规范当前为HTML 5，该语言已为该语言添加了许多新功能，并有助于为更具交互性和功能丰富的网页铺平道路。

一个简单HTML页面如下所示：

<!doctype html> 
	<html> 
	  <head> 
	    <title>Hello, World!</title> 
	  </head> 
	  <body> 
	    <p>Hello, and welcome to my website.</p> 
	  </body> 
	</html>

在网络浏览器中打开时，以上代码将创建以下网站：

HTML是一种非常简单的语言。您只需在内容中插入“标签”即可概述应如何在网络浏览器中显示每一位内容。

例如，您可以在页面中插入标签，从中开始新的文本段落，使文本成为文档中的标题，插入图像，指向网站上其他页面或Internet上其他页面的链接等。

HTML标签包装在<>尖括号内。查看前面的示例，您将看到每个“标签”都是一对。我们在顶部是<html>，在底部是</ html>。

<html>通知Web浏览器，标记对中的所有内容都是HTML代码。 </ html>标签告诉浏览器HTML内容已结束。最后一个标签中的“斜杠”将其表示为“关闭”标签。

注意： <！doctype html>行必须包含在任何HTML5的顶部，这样它才被视为“有效”代码。此行告诉Web浏览器页面其余部分的“文档类型”，换句话说，标记了文档HTML版本，以便浏览器可以正确呈现该文档。

紧随其后的<head>…</ head>部分是您放置有关网页的信息的信息，该信息不会显示在主页本身中，但会保留有关浏览器页面的元数据。

在<head>部分中，有文本“ Hello，World！”。包裹在<title>…</ title>标记内。

<title>字面包含当前网页的标题，网络浏览器使用该标题来命名窗口/标签：

在<head>部分之后，我们有<body>。这是放置网页实际内容的位置。在正文中，我们有一个<p>标记，其中带有一些欢迎文本。

<p>在页面上标记一个段落。例如：

<p>Once upon a time in a land far, far away there lived a princess who lived happily ever after.</p> 
 
	<p>The End.</p>

标记两段文字。如果要在浏览器中查看，我们将看到以下内容：

您可能想知道为什么我们需要这些<p>和</ p>标记来显示一个段落。好吧，如果我们没有，就这样编写网页：

Once upon a time in a land far, far away there lived a princess who lived happily ever after. 
 
	The End.

该页面在浏览器中将如下所示：

如您所见，浏览器将忽略我们在文件中进行的任何格式化。我们可以编写示例网页，如下所示，它将在浏览器中显示该网页：

<!doctype html><html><head><title>Hello, World!</title></head><body><p>Hello, and welcome to my website</p></body></html>

浏览器仅对HTML标记告诉它的操作感兴趣。它将忽略您包含在文档中的任何空格（多余的空格，制表符，换行等）。

创建一个简单的网页

现在您了解了HTML的基本知识，让我们制作我们的第一个网页！上图是此页面最终的外观。

在计算机上的某个位置创建一个新文件夹，并将其命名为“ html-from-scratch”。使用您喜欢的文本编辑器，创建一个新的空白文件，并将其另存为“ my-first-webpage.html”。

在文件中输入以下内容：

<!doctype html> 
	<html> 
	  <head> 
	    <title>HTML From Scratch</title> 
	  </head> 
	  <body> 
	    <!-- content goes here --> 
	  </body> 
	</html>

上面是基本HTML 5文件布局。我们已经在第一行声明了文档类型，打开了<html>和<head>标签，并将“ HTML From Scratch”设置为页面的标题。然后，我们关闭头部并打开身体。

在第7行，我们添加了评论。使用注释将多余的信息保留在您的代码中，这些信息不会显示在您的网页中。通过在<！-和->标记内包装文本来标记注释。

最后，我们关闭打开的body和html标签以完成文档。

标头

从源代码中删除<！-内容在这里->行，然后键入以下内容：

<header> 
	  <h1>HTML From Scratch</h1> 
	</header>

<header>标记是HTML5中引入的新元素，用于标记和构建网页的“ header”部分。标头是网页的顶部，通常是网站的名称。

在HTML5之前，我们使用<div id =“ header”>和</ div>（或类似的东西），但是在学习最新标准时，我不会详细介绍HTML的旧规范。

重要说明： <header>不应与<head>混淆。它们都是完全不同的标签。

在标题内，我们包含一个<h1>标记。 H1用于标记页面上的主要标题（在本例中为我们网站的名称）。 HTML包含从1-6的标题标签，其中<h1>是页面上直至<h6>的最大，最重要的标题。

<nav>是一个新HTML5元素，用于标记网站上的导航区域。通常，它用于保存网站的主导航菜单，但是由于我们现在仅创建一个网页，因此仅链接到Nettuts和Google。 <ul>创建一个项目符号列表，每个<li>项目（列表项目）是列表中的一个新项目符号。

保存文件，然后在网络浏览器中打开“ my-first-webpage.html”。您应该看到以下内容：

如您所见，<title>标签正常工作，<h1>标签在页面顶部显示一个大标题，并且我们的项目符号导航列表正确显示。

您可能会注意到，我们的导航列表目前存在一个问题：这些项目不是超级链接，因此它们不可单击。要解决此问题，请将三个列表项（<li>）更改为：

<li> 
	  <a href="my-first-webpage.html">Home</a> 
	</li> 
 
	<li> 
	  <a href="http://net.tutsplus.com">Nettuts</a> 
	</li> 
 
	<li> 
	  <a href="http://www.google.com">Google</a> 
	</li>

在每个<li>列表项中，我们已将文本设置为超链接。 <a>标记创建一个锚点-指向您网站上另一个页面或Internet上另一个位置的超链接。

为了使anchor标签实际链接到某处，我们为它提供了要链接到“ href”参数内部的地址。参数位于开始标记（<a href=""> ... </a>）内。

在我们的网页上，“主页”链接转到当前页面（“ my-first-webpage.html”），“ Nettuts”链接到Nettuts（http://net.tutsplus.com），而“ Google”链接转到您猜对了，Google。

主要内容

在</ header>标记之后，键入以下内容：

<section> 
	  <p>This is the main content for my website.<br /> 
	  Here is some stuff about me:</p> 
 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> 
	</section>

<section>标记也是HTML5中的新功能（我们曾经使用<div id =“ content”>之类的东西），并在网页上按字面意义创建了内容的“部分”。在这种情况下，我们使用<section>标记内容所在页面的主要部分。

在内部，我们有两个包含随机文本的段落。请注意，在第一段中，我们有一个<br />标签。这是换行符；换句话说，其后的文本将在同一行中换行显示。

<br />标签很特殊，因为它没有结束标签。取而代之的是，在标记的末尾包含右斜杠（'/'）。这是因为换行符不包含任何内容，它纯粹是出于美学目的而存在，否则我们将编写<br> </br>有点没有意义。

其他一些标签也是自动关闭的，例如<img />和<hr />，我们将在后面介绍。

图片

在“ html-from-scratch”文件夹中，创建一个名为“ images”的新文件夹。将下面的图像保存到该文件夹中（右键单击，将图像另存为）：

现在，回到网站的主要内容中，在</ section>标记之前，输入以下内容以在我们的页面上插入图片：

<img src="http://tutsplus.s3.amazonaws.com/tutspremium/web-development/076_beginnerWebDesign/part1/images/envato-stock.jpg" alt="Envato Stock Image" />

<img />标记与锚标记一样，是自动关闭的，并接受其大部分内容作为开始标记中的参数。

src =“ ...”代表“源”（图像的路径）。该图像可以存储在Internet上的其他位置，也可以存储在网页的本地位置。在这里，我们设置了标签以显示保存在图像目录中的图像。

alt =“ ...”包含“替代文本”，如果图像无法加载，将显示该文本。您通常在此处简要描述图像。

现在看一下页面。该图像应显示：

侧边栏

接下来，让我们标记网页的侧边栏。在结束</ section>标记后输入以下内容：

<aside> 
	  <hr /><h2>Sidebar</h2> 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> 
	  <ul> 
	    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	    <li>Aliquam tincidunt mauris eu risus.</li> 
	    <li>Vestibulum auctor dapibus neque.</li> 
	  </ul> 
	</aside>

<aside>是一个HTML5标记，用于标记网页的一部分，该部分位于主要内容的旁边，例如侧边栏，其中包含的信息内容比该页面的主要部分少。

在侧边栏内，我们有一个标题为“侧边栏”的第三级标题（H3），一个包含一些随机占位符文本的段落，然后是一个包含3个项目的无序列表。

看一下您的页面，您应该在我们放在<section>标签中的内容正下方看到以上内容。不用担心侧边栏实际上还不是侧边栏，这是HTML的设计方式。不久之后会更多。

页脚

<footer> 
	  <p> 
	    Copyright &copy; Your Name 2010.<br /> 
	    Part of a tutorial for <a href="http://net.tutsplus.com">Nettuts+</a>. 
	  </p> 
	</footer>