如果可以，想象一下互联网发明之前的日子。网站还不存在，纸质书籍是我们主要的信息来源，在书籍中查找我们想要的信息会花费大量的精力和时间。而现在，你打开浏览器，用搜索引擎搜索，你能想到的任何信息都会呈现在你的指尖。并且有可能某个人在某个地方建立了一个与您实际搜索的内容相匹配的网站。在接下来的系列课程中，我将指导您使用HTML和CSS构建您自己的网站。但是在开始建站之旅之前，我们需要着重了解两种语言的区别、语法和一些常用术语。WhatisHTML&CSSHTML(HyperTextMarkupLanguage)超文本标记语言，通过标签告诉浏览器如何解析文本信息，比如将其解释为标题、段落、图片等。CSS（CascadingStyleSheets）是一种修饰页面的描述性语言通过样式，例如设置文本的字体、大小和颜色。这两种语言是相对独立的，我们在编写它们的时候应该保持这个原则。CSS不应嵌入HTML文本中，反之亦然。一般来说，HTML代表内容，而CSS代表内容的外观。HTML术语当开始使用HTML时，您可能会遇到新的和不熟悉的术语。别担心，随着你继续学习，你会越来越熟悉它们。首先你需要了解三个常用术语：元素、标签和属性。元素元素是定义页面中对象的结构和内容的指示器。一些最常用的元素是多级标题(

...

)、段落(

)和、

、、和等等等等。通过用小于号<和大于号>包裹元素名称来标识元素。如下图：标签（Tags）用小于号<和大于号>包裹元素名，构成标签。标签通常成对出现，由开始标签和结束标签组成。开始标签表示元素的开始，由<+元素名称+>组成，如

。结束标签表示元素的结束，由小于号<+/+元素名+>组成，如

。开始和结束标记中的内容是该元素的内容。例如，一个链接有一个开始标签和一个结束标签，两个标签之间的内容就是链接的内容，如下图：...属性向元素添加附加信息。最常用的属性，如id属性，用于标识元素；class属性对元素进行分类；src属性指向嵌入内容的来源。href属性提供对链接资源的引用。属性在开始标记的标记名称之后定义。属性通常包含一个属性名和一个属性值，格式为属性名=值。如下图：以ShayHowe为例，页面会显示文字ShayHowe，点击ShayHowe的用户会访问http://shayhowe.com/。超链接元素a是通过用开始和结束标记包裹其文本内容来声明的。超链接属性是href="http://shayhowe.com/"。现在你已经知道什么是HTML元素（elements）、标签（tags）和属性（attributes）了。让我们一起完成我们的第一页，如果你在这里遇到了一些新知识，不用担心，我们会一一破解。设置文档结构HTML文档使用.html作为扩展名。要开始编写HTML，您只需要一个纯文本编辑器，而不是MicrosoftWord和Pages，它们都是富文本编辑器。当然，你也可以使用目前流行的编辑器Dreamweaver和SublimeText。或者选择适用于Windows的免费编辑软件Notepad++和适用于Mac的TextWrangler。所有HTML文档都有一个由以下元素组成的必需结构：、、head和文档类型声明()告诉浏览器使用哪个版本的HTML，书面形式在HTML文档的开头。由于我们使用的是最新版本的HTML，我们的声明只需要写即可，非常简单。在文档类型声明之后，元素表示文档的开始（根元素）。在元素内，是它的第一个子元素，它包含文档标题（显示在浏览器窗口的标题栏上）、外部文件链接和其他有用的元数据。中的内容不会显示在页面上。所有视觉内容都包含在元素中。典型的HTML结构如下：

HelloWorld

这是一个网页。

在上面的例子中，首先声明了文档类型，然后通过元素。元素包含和，声明了页面字符编码和页面标题在Add<元素中的h1>和

元素，在

中添加内容“StylesConference”，在

中输入一段话，简单介绍我们的研讨会。

样式会议

每年最聪明的网页设计师和前端开发人员都会齐聚芝加哥，讨论最新技术。今年八月加入我们吧！

接下来我们切换频道，从HTML到CSS。同样，HTML设置页面的结构和内容，而CSS定义页面的样式和外观。CSS术语除了HTML术语外，CSS还有一些您需要熟悉的常用术语。这些术语包括选择器、属性、值。与HTML术语一样，您使用它们的次数越多，您就会越熟悉它们。选择器当元素被添加到页面时，它们可以使用CSS设置样式。选择器可以精确地为被选元素添加样式（如颜色、大小、位置）；选择器可以组合起来，通过不同的限定符选择独特的元素，这取决于我们的需要。例如，我们要选择页面中的每一个段落（

）或者我们要选择页面中的某个段落。选择器通常使用属性值，例如id或class值，或者使用元素名称，例如

和

。在CSS中，选择器后跟花括号{}，其中包含要应用于所选元素的样式。下面的例子是选择所有的

元素：p{...}属性（Properties）一旦选择了元素，写入的属性就会应用到这个元素上。属性名用{}写，后面加一个冒号：，可以设置的属性有很多，比如：背景，颜色，字体大小，高度，宽度。在下面的示例中，我们在选择器中定义颜色和字体大小属性：p{color:...;font-size:...;}Values(值)至此，我们已经选择了一个元素，并决定了要给它设置什么样式。现在我们可以为该属性设置一个值。该值在冒号右侧定义：并以分号;结尾。现在我们将color属性的值设置为orange，将font-size属性的值设置为16px。p{颜色：橙色；font-size:16px;}回想一下，在CSS中，我们先定义选择器，然后在选择器后面加上{}，在花括号中添加属性和值；属性描述包括属性名称：值；作文，记得以分号结尾；缩进属性和值也是CSS中的常见做法，和HTML一样，缩进有助于保持我们的代码结构清晰。现在我们对CSS语法有了一些了解，在我们深入研究之前还有一些事情需要了解。比如选择器的工作原理。使用选择器类型选择器类型选择器（也称为元素选择器）根据元素的类型选择元素。例如，如果我们想选择所有的div元素，我们可以使用类型选择器div。以下示例显示了CSS选择器及其选择的HTML元素：CSSdiv{...}HTML

...

...

类选择器类选择器根据元素的类属性的值。它比类型选择器稍微具体一些。它会选择一个特定的元素，而不是所有相同类型的元素，这可以用来为不同类型的多个元素应用相同的样式。在CSS中，类选择器是通过在类值前添加前缀来表示的。以下示例显示了CSS及其选定的HTML元素：CSS.awesome{...}HTML...

...

ID选择器ID选择器比Class选择器更精确，每个ID选择器只能选择一个元素。与类选择器类似，ID选择器通过id属性的值来选择元素。无论是什么类型的元素，每个ID值在一个页面中只能出现一次，保持其唯一性。仅推荐用于重要元素。在CSS中，ID选择器通过在id值之前添加前缀#来表示。以下示例展示了CSS及其选中的HTML元素：其他选择器选择器非常强大，我们列出了最常用的选择器类型。还有许多高级选择器。如果你有兴趣，你可以进一步了解一些高级选择器。简而言之，我们向HTML页面添加元素，通过选择器选择它们并添加样式。现在让我们学习如何使CSS在HTML页面中工作以及如何将它们连接起来。引入CSS为了让CSS在HTML页面中生效，我们需要将CSS文件导入到HTML中。最佳做法是将所有CSS放在外部样式表中，并在HTML的元素中引用它。外部CSS文件可以将相同的样式应用于整个网站并快速进行更改。其他引用方式CSS的引用方式有inline和inline两种，这里不做深入介绍。不推荐这两种方式，会让页面变得繁琐繁琐，难以维护。我们可以使用文本编辑器创建一个扩展名为.css的文件，并将其保存在与HTML相同的文件夹或子文件夹中。在元素内添加一个元素，以建立HTML和CSS之间的链接。因为我们引用的是CSS文件，所以的rel属性的值设置为stylesheet，href属性指定了CSS文件的路径。如下图：为了让CSS在页面中正确呈现，href属性必须正确关联CSS文件地址。在上面的例子中，main.css所在的目录与HTML所在的目录相同。如果css文件在子文件夹下，比如main.css文件在名为stylesheets的子文件夹下，那么href指向的路径就变成了stylesheets/main.css，斜线/表示移动到了文件中的子文件夹。我们的页面开始成形，尽管速度很慢。你会发现很多元素本身就有样式，虽然我们没有添加CSS；这是因为浏览器本身呈现了这些元素的样式。幸运的是，我们可以重写覆盖这部分的样式，也就是我们接下来要学习的CSS重置。CSSReset每个浏览器都会为不同的元素设置默认样式。Chrome对标题(

...

)、段落(

)和列表(li)的呈现可能与IE不同。为了确保跨浏览器兼容性，广泛需要CSS重置。CSSReset为常用的HTML元素预设样式，兼容所有浏览器。这些重置涉及删除边距、填充或其他样式，并降低这些样式的值。因为样式是从上到下呈现的，所以我们将它添加到CSS文件的顶部。确保这些样式会在第一时间被解释，这样不同浏览器之间的基本样式会保持一致，在一个基线上。我们可以使用许多重置选项，每个选项都有自己的优势。最流行的解决方案是EricMeyer的重置，其中包括样式化HTML5元素。如果觉得不够全面，可以选择NicolasGallagher创建的Normalize.css。Normalize.css的重点不是重新设置样式，而是为这些元素设置一个通用的样式。这就需要我们对CSS比较了解，知道自己想要什么样式。跨浏览器兼容性和测试前面提到，不同的浏览器渲染元素的方式不同，所以识别跨浏览器的兼容性和测试非常重要。虽然一个网站不需要在每个浏览器中看起来都完全一样，但它确实很接近。考虑需要支持哪些浏览器以及支持的程度，可以帮助您创建最能满足您需求的网站。练习让我们看看是否可以在之前的练习中添加一些CSS，并在“styles-conference”文件夹下创建一个名为“assets”的文件夹。我们会在这个目录下存放资源，比如样式文件、图片、视频等。接下来我们在“assets”文件夹下为样式文件创建一个名为“stylesheets”的文件夹。打开我们的文本编辑器，创建一个名为main.css的文件，并将其保存在“stylesheets”文件夹中。在浏览器中打开我们的index.html页面，我们可以看到

和

元素具有默认的CSS样式，并且它们有自己的字体大小和周围空间。如果我们使用EricMeyer的重置，这些差异将会减少，从而使它们处于相同的基线上。接下来我们从EricMeyer的重置中复制样式并将它们粘贴到main.css文件的顶部。/*http://meyerweb.com/eric/tools/css/reset/v2.0|20110126许可证：无（公共领域）*/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;填充：0；边界：0；字体大小：100%；字体：继承；vertical-align:baseline;}/*为旧版浏览器重置HTML5显示角色*/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:'';内容：无；}表{边框折叠：折叠；border-spacing:0;}接下来，我们将main.css文件连接到索引。在html页面中，用文本编辑器打开index.html页面，在元素中的现在让我们检查HTML和CSS是否正常工作。在浏览器中打开index.html，对比一下和之前有没有不同。演示源代码这是练习的源代码。点击下载总结的很好！我们已经完成了初步研究。复习到目前为止所学的基础知识，我们将花更多时间编写HTML和CSS，您将对它们更加熟悉。下面是我们到目前为止所学内容的总结：HTML和CSS的区别了解了HTML元素、标签和属性是什么创建了你的第一个网页了解了CSS选择器、属性和值是HTML中的CSS重置接下来，我们将进一步研究HTML并理解语义。文章来源http://learn.shayhowe.com/htm...