[译]HTML&CSS Lesson1: 构建第一张页面

可以的话，请想象一下互联网没有发明之前的日子。网站还不存在，纸质的书本是我们主要的信息来源，而在书本中查询我们想要的资料会耗费相当多的精力和时间。
而如今，你打开个浏览器用搜索引擎搜索，任何你能想到的信息都会呈现在你的指间。并且有可能某人在某地建立了一个跟你心中实际要搜索内容一致的网站。
在接下来的一系列课程中， 我将引导你使用HTML和CSS构建一个属于你的网站。但在开始构站之旅前，我们需要重点的了解两个语言之间的差异，它们的语法和一些常见的术语。

什么是HTML&CSS

HTML(HyperText Markup Language) 超文本标记语言，通过标记告诉浏览器如果去解析文本信息，比如解读为标题、 段落、图片等。
CSS(Cascading Style Sheets)层叠样式表，这是一种描述性语言，通过样式来修饰页面，比如设置文字的字体、大小、颜色等。
这两种语言是相对独立的，我们在编写它们时也应该保持这种原则。CSS不应嵌入HTML文本中，反之亦然。
一般来说， HTML代表内容，而CSS代表内容的外观。

HTML术语

在开始接触HTML时，你可能会遇到新的陌生的术语。别担心，随着接下来的学习你会对它们越来越熟悉。首先你需要了解三个常见的术语：元素，标签和属性。

元素(Elements)

元素是定义页面中对象的结构和内容的指示符。一些最常用的元素例如多级标题(<h1>...<h6>)、段落(<p>),还有<a>,<div>,<span>,<strong> 和<em>等等。
元素是使用小于号<和大于号>包裹元素名来标示。如下所示：

<a>

标签(Tags)

使用小于号<和大于号>包裹元素名形成标签，标签通常都是成对出现的，由开始标签和结束标签组成。
一个开始标签表示一个元素的开始,它由 <+元素名+ >组成，例如<div>。
一个结束标签表示元素的结束,它由小于号<+ /+元素名+ >组成 例如</div>。
在开始标签和结束标签中的内容为那个元素的内容。例如一个链接，拥有开始标签<a>和结束标签</a>，两个标签之间的内容为链接的内容，如下所示：

<a>...</a>

属性(Attributes)

属性用来为元素添加额外信息。最常用的属性例如id属性，用来标识元素；class属性将元素进行分类；src属性指向嵌入内容的来源。href属性提供对链接资源的引用。
属性定义在开始标签的标签名之后，属性通常包含一个属性名和一个属性值，格式是属性名=值。如下所示：

<a href="http://shayhowe.com/">Shay Howe</a>

clipboard.png

示例中，文字Shay Howe会展现在页面上，点击 Shay Howe 用户将访问 http://shayhowe.com/。
超链接元素a通过用开始标签<a>和结束标签</a>包裹文本内容来声明。 超链接属性为href="http://shayhowe.com/"。

现在你已经知道了什么是HTML元素(elements),标签(tags)和属性(attributes)。让我们一起来完成我们的第一张页面，如果在这里遇到了一些新的知识，别担心，我们会将它们一一破解。

设置文档结构

HTML文档使用.html为扩展名。要开始编写HTML，你只需要使用纯文本编辑器， 请不要使用 Microsoft Word 和 Pages，它们属于富文本编辑器。 当然你也可以使用目前很流行的编辑器 Dreamweaver、Sublime Text。 或者选择免费的编辑软件 Windows中的Notepad++ 和 Mac 中的 TextWrangler 。

所有的HTML文档都有一个必需的结构，由以下元素构成：<!DOCTYPE html>，<html>，head 和 <body>

文档类型声明(<!DOCTYPE html>)，告诉浏览器使用的HTML版本，写在HTML文档最开始。由于我们使用的是最新版本的HTML，所以我们的声明只需写<!DOCTYPE html>，非常简便。文档类型声明之后，<html>元素表示文档开始(根元素)。
<html>元素内，<head>为其第一个子元素，它包含了文档标题(显示在浏览器窗口标题栏上)，外部文件链接以及其他有用的元数据。<head>中的内容不会显示在网页上。
所有可视的内容都包含在<body>元素中。典型HTML的结构如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

clipboard.png

上述示例中，先声明了文档类型<!DOCTYPE html>，跟着是<html>元素。<html>元素中包含了<head>和<body>，<head>中声明了页面字符编码<meta charset="utf-8">和页面标题 <title>。<body>中包含了一个标题元素<h1>和一个段落元素<p>。<h1>和<p>嵌套在<body>内，它们页面中都是可视的。
当时我们进行元素嵌套的时候，注意子元素的缩进，可以使代码结构看起来更清晰，更易辨识。上述示例中，<head>和<body>都进行了缩进，他们内部嵌套的元素也都进行了缩进。

自闭合元素

在前面的例子中，可以看到<meta>没有结束标签。放轻松，这是故意的。不是所有的元素都由开始标签和闭合标签组成。一些元素只是简单的从单标签的属性中获取值或行为。<meta>
元素就是其中之一， charset属性设置了它需要处理的内容。以下是一些常见的自闭合元素：

  • <br>
  • <img>
  • <meta>
  • <input>
  • <hr>
  • <link>
  • <source>

再提一句， 在html文档中使用<!DOCTYPE html>，<html>，<head>，<body>，是普遍行为。我们可以保存这个结构，因为我们建新页面的时候会经常使用到它。

代码检验

不管我们书写代码时多么仔细，还是会有一些小错误。幸运的是，我们有验证工具帮助我们验证。W3C构建了 HTML和CSS验证工具帮助检查代码错误。 代码验证不仅可以帮助代码在所有浏览器中都能正确渲染，也助于教会我们书写代码的最佳实践。

实践

作为网页设计师和前端工程师， 我们奢侈的参加一系列大型讨论会来提升我们的能力。现在我们将自己组织一个样式讨论会，并为接下来的课程创建一个网站，开始！

  • 首先我们打开编辑器，创建一个名为index.html的文件，我在本地桌面创建了一个“styles-
    conference”文件夹，并将文件保存在其中。
  • 在index.html中添加一个文档结构，包含<!DOCTYPE html>，<html>，<head>和<body>元素
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>
  • 在<head>元素中添加<meta> 和<title>元素。<meta> 中包含了charset 属性和值， <title>中设置标题名为“Styles Conference”
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
</head>
  • 在<body>元素中添加<h1>和<p>元素,在<h1>中还是添加内容“Styles Conference”，<p>中输入一段话简单的介绍我们的讨论会。
<body>
 <h1>Styles Conference</h1>
 <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</body>

clipboard.png

接下来我们切换频道，从HTML转换到CSS上来。 再提一次，HTML设置页面的结构和内容， 而css定义页面的样式和外观。

CSS术语

除了HTML术语， CSS也有一些常用术语你需要熟悉。这些术语包括 选择器，属性，值。和HTML术语一样，你使用的越多，那么你会对他们越熟悉。

选择器(Selectors)

当元素被添加到页面中，就可以使用CSS控制其样式。一个选择器可以精确的为选中的元素添加样式(例如颜色color， 尺寸size，位置position)；选择器可以通过不同限定词组合起来选中唯一元素，这取决于我们的需求。例如，我们希望选中页面中的每个段落(<p>)或者我们想要选中页面中的某一个段落。
选择器通常使用属性值，例如id或class的值 或者使用元素名，例如<h1>和<p>
在CSS中，选择器后跟着大括号{} ，其中包含了应用于选中元素的样式。下面示例是选中所有的<p>元素：

p { ... }

属性(Properties)

一旦元素被选中，那么所写的属性就会被应用在这个元素上，属性名写在{}中，后面跟着一个冒号:，有很多可以设置的属性例如：background, color, font-size, height, 和width。 在下面的实例中，我们在选择器中定义了color和font-size属性：

p {
  color: ...;
  font-size: ...;
}

值(Values)

到目前为止，我们选中了一个元素，而且决定了设置它的什么样式。现在我们可以为属性设置一个值，值被定义在冒号:的右侧，以分号; 结束,现在我们将color 属性的值设置为orange，将font-size属性的值设为16px。

p {
  color: orange;
  font-size: 16px;
}

回顾一下，CSS中我们先定义选择器，然后在选择器后添加{}，在大括号中添加属性和值；属性描述由属性名:值;组成,记住以分号;结尾。
对属性和值缩进也是CSS的普遍做法，和HTML一样，缩进有利于保持我们的代码结构清晰。

clipboard.png

现在我们对CSS语法有了一些了解，不过在深入探讨之前，还需要知道一些知识 。比如选择器是如何工作的。

使用选择器

类型选择器

类型选择器(也叫作元素选择器)根据元素类型选择元素。比如我们想要选择所有的div元素，我们可以使用类型选择器div，以下示例展示了CSS选择器与其选中的HTML元素：

CSS

div {...}

HTML

<div>...</div>
<div>...</div>

Class选择器

类选择器根据元素的 class属性的值选择元素，它比类型选择器稍微具体一些，它会选择特定的元素而不是所有同种类型的元素，可以使我们在多个不同类型的元素添加同一样式。
在CSS中，Class选择器通过在class值前添加前缀.表示，以下示例展示了CSS与其选中的HTML元素：

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

ID选择器

ID选择器比Class选择器更精准，每个ID选择器只能选中一个元素。与Class选择器同理， ID选择器是通过id属性的值来选择元素。
无论是什么类型的元素，每个ID值在单页面中只能出现一次,保持其唯一性。推荐只在重要元素中使用。
在CSS中，ID选择器通过在id值前添加前缀#表示，以下示例展示了CSS与其选中的HTML元素：

其他选择器

选择器非常强大，我们列出的是最常用的选择器类型。还有许多高级选择器存在，如果你有兴趣可以去多了解一些高级选择器
好了，总之呢，我们在HTML页面中添加元素，通过选择器选中它们并添加样式。现在我们来学习怎么使CSS在HTML页面中生效，怎么连接它们。

引用CSS

为了让CSS在HTML页面中生效，我们需要将CSS文件引入HTML中， 最佳实践方式是将所有的CSS放在一个外部的样式表中，在HTML的<head> 元素中引用它。 外部CSS文件可以将相同的样式覆盖到整个网站并且可以快速的做出修改。

其他引用方式
引用CSS还有内联和内嵌两种方式 ，这里不深入介绍了，这两种方式并不推荐使用，它们会使页面变得繁琐和笨重，不易维护。

我们可以用文本编辑器创建一个扩展名为.css的文件，并将它保存在HTML所在的文件夹或子文件夹中。
在<head>元素中添加<link>元素来建立HTML与CSS之间的联系。由于我们引用的是CSS文件，所以<link>的rel属性的值设为stylesheet,href属性来指定CSS文件的路径。如下所示：

<head>
  <link rel="stylesheet" href="main.css">
</head>

为了让CSS在页面中正确渲染，href属性必须正确关联CSS文件地址。 在上述例子中，main.css所在目录与HTML所在目录一致。
如果CSS文件在子文件夹中，举个例子，若main.css文件在名为stylesheets的子文件夹下，那么href指向的路径就变为了stylesheets/main.css，用斜杠/表示移动到了子文件中。
我们的页面要开始成型了，虽然很慢。你可以发现很多元素本身就带有样式，尽管我们没有添加CSS；这是因为浏览器自身对这部分元素的样式进行了渲染。幸运的是，我们可以对这部分的样式复写和覆盖，这就是我们接下来学习的CSS重置。

CSS重置

每个浏览器都对不同的元素都设置了默认样式。chrome对标题(<h1>...<h6>)、段落(<p>)、列表(li)的呈现可能与IE是不同。为了却确保跨浏览器的兼容，CSS重置成了广泛的需求。
CSS重置为常用的HTML元素预设了样式，并兼容所有的浏览器。这些重置涉及移除margin、padding或其他样式，调小这些样式的值。因为样式渲染是从上至下的，所以我们把它添加到CSS文件的最上面。确保这些样式会第一时间被解读，那么不同浏览器之间的基本样式就保持了一致，在一条基准线上。
有一推重置方案可供我们使用，这些方案都有他们自己的强项。最流行的方案是 Eric Meyer’s reset, 它包含了HTML5元素的样式。
如果你觉还是不够全面，可以选择Nicolas Gallagher创建的Normalize.css，Normalize.css重点不在对样式的重置，而是对这些元素设置了通用的样式。它需要我们对CSS有更多的了解，知道什么样式是你想要的。

跨浏览器兼容及测试
前面有提到，不同的浏览器对元素的渲染不同，所以识别跨浏览器兼容性和测试非常重要。虽然网站不需要在每个浏览器中看起来一模一样，但要接近。哪些浏览器需要支持，支持到什么程度，考虑好这些可以帮助你创建出最符合你需求的网站。

练习

我们来看下上次练习中，我们是否可以添加一些CSS上去

  • 在“styles-conference”文件夹下面创建一个名为"assets"的文件夹。我们将会把资源都存在这个目录下，例如：样式文件、图片、视频等等。接下来我们再在"assets"文件夹下为样式文件创建一个名为“stylesheets”的文件夹。
  • 打开我们的文本编辑器，创建一个名为main.css的文件，并将它保存在“stylesheets”文件夹下。
  • 在浏览器中打开我们的index.html页面，可以看到<h1>和<p>元素都有默认的CSS样式，它们都有各自的字体大小和周边空间。如果我们使用 Eric Meyer’s reset ，会降低这些差别，让它们处在差不多的基准线上。接下来我们将Eric Meyer’s reset中的样式复制过来，粘贴在main.css文件的最上面。
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
  • 接下来，我们将main.css文件连接到index.html页面中。在文本编辑器中打开index.html页面，在<head>元素中的<titile>元素后添加一个<link>元素，
  • 由于我们使用<link>引用样式表， 我们要把rel属性的值设置为 stylesheet
  • 我们还要用href属性链接到main.css文件，main.css保存在“assets”文件夹中的“stylesheet”文件夹下，所以href属性的值为assets/stylesheet/main.css 
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

现在我们来检验一下HTML和CSS是否正常工作。 在浏览器中打开index.html对比一下是否跟之前有所不同

clipboard.png

演示源代码

这是练习的源代码。点击下载

总结

非常好！ 我们已经完成了初步的学习。回顾一下你目前学到的基础知识，接下来我们会花更多的时间来书写HTML和CSS，你将会对它们更加熟悉。

到目前为止，我们所学内容概括如下：

  • HTML和CSS之前的区别
  • 了解了什么是HTML元素、标签和属性
  • 创建了第一张网页
  • 了解了什么是CSS选择器、属性和值
  • 使用选择器
  • 引用CSS到HTML中
  • CSS重置

接下来我们将进一步的学习HTML并了解语义化。

文章来源

http://learn.shayhowe.com/htm...

posted @ 2020-01-20 18:30  10年码农  阅读(222)  评论(0)  编辑  收藏  举报