Before we jump into CSS, let's start with a quick review of HTML. HTML is used to define the structure of a webpage and the meaning of the content to the browser. Using semantic HTML helps with accessibility and search engine optimization. It also effects how you write the CSS, since they are closely related together. Front end web development refers to the languages that run in the browser. While these three languages work together, they're each responsible for something different.
在进入CSS之前，让我们先快速回顾一下HTML。HTML用于定义网页的结构和浏览器内容的含义。使用语义HTML有助于可访问性和搜索引擎优化。它也会影响您如何编写CSS，因为它们是紧密联系在一起的。前端web开发是指在浏览器中运行的语言。当这三种语言一起工作时，它们各自负责不同的事情。

HTML is the starting point, because it's used to add content and structure the page. CSS is for presentational effects and styles, such as colors and fonts. And JavaScript is used for adding interactivity, such as clicking through an image gallery, or dynamically changing content with a button click or a page scroll. So, what is HTML5, and how is it different from HTML or XHTML? These refer to different versions, with HTML5 being the latest.
HTML是起始点，因为它用于添加内容和构造页面。CSS是用于显示效果和样式，例如颜色和字体。JavaScript是用来添加交互性的，比如点击一个图片画廊，或者用一个按钮点击或者一个页面滚动来动态改变内容。那么，HTML5是什么，它与HTML或XHTML有什么不同呢?这些是不同的版本，HTML5是最新的版本。
With each new version, features are added or removed, and syntax rules also change. These standards are maintained by the World Wide Web Consortium. You can find all the documentation, guidelines, and recommendations for HTML and CSS on their website at w3.org. And here are some other specific resources about the latest HTML5 features and changes. The Mozilla developer network has some information about the video and audio content.
每个新版本都添加或删除了特性，并且语法规则也发生了变化。这些标准由万维网联盟维护。你可以在w3.org网站上找到HTML和CSS的所有文档、指南和建议。下面是关于最新的HTML5特性和更改的其他一些特定资源。Mozilla开发者网络有一些关于视频和音频内容的信息。
In HTML5, more support from media elements were integrated, making Flash a thing of the past. This documentation on the Mozilla site goes into greater detail about the specifications and features. The Canvas element was also added in HTML5. In combining this with JavaScript, it also allowed for more ways to draw graphics using code, which is also documented on the Mozilla developer network. It has some basic examples, as well as links to some further resources.
在HTML5中，更多来自媒体元素的支持被整合，让Flash成为过去。Mozilla站点上的文档更详细地介绍了规范和特性。在HTML5中也添加了Canvas元素。在将其与JavaScript相结合时，它还允许使用代码绘制图形的更多方式，这也是Mozilla开发人员网络上的文档。它有一些基本的例子，以及一些其他资源的链接。
There has also been the addition of new semantic HTML5 elements for defining your content, and HTML5 Doctor is a great resource to learn about the changes. Let's do a review of some HTML terminology and syntax. Getting a grasp on the terms makes it easier to ask clearer questions and find answers. Elements are the components that define page objects, such as paragraphs and links. Tags are used to define these elements, using angled brackets wrapped around the tag name.
此外，还添加了新的语义HTML5元素来定义内容，而HTML5博士是了解这些变化的重要资源。让我们来回顾一下一些HTML术语和语法。掌握这些术语会让你更容易问清楚问题，并找到答案。元素是定义页面对象的组件，例如段落和链接。标记用于定义这些元素，使用带有标记名称的尖括号。
They usually come in pairs and wrap the content to give meaning to it. The opening tag is added at the beginning of the element, and the closing tag, with the addition of a forward slash, marks the end. There are some exceptions to this rule. Void elements don't have closing tags and don't wrap any content, because they are the content. But, there aren't many void elements, and here's the full list. Visit the W3C for more information about each tag.
它们通常成对出现并包装内容以赋予它意义。在元素的开头添加了开始标记，结束标记，加上一个正斜杠，标志着结束。这条规则有一些例外。Void元素没有结束标记，也没有包装任何内容，因为它们是内容。但是，这里没有很多空元素，这里是完整列表。访问W3C获得关于每个标签的更多信息。
Some void elements can be used on their own, and others require additional information. For example, the HR tag creates a horizontal rule, which looks just like a line, and is often used to separate blocks of text and does not require any other information. Images, on the other hand, requires two attributes. A source attribute to link to and load the image file, and the alt attribute, to provide a short description about the image for screen readers.
一些void元素可以单独使用，而其他元素则需要额外的信息。例如，HR标签创建一个水平规则，它看起来就像一条线，并且经常被用来分隔文本块，不需要任何其他信息。另一方面，图像需要两个属性。一个源属性来链接和载入图像文件，以及alt属性，为屏幕阅读器提供一个关于图像的简短描述。
You may have also seen void elements written with a forward slash at the end of the tag. This is one of those HTML5 syntax changes. It was required in the previous version, XHTML, but is no longer needed. HTML5 is actually backwards compatible, so if you leave it in, that works as well. There are many different attributes used to provide additional information. They always follow the format of attribute name equals the value contained in single or double quotes.
您可能还看到了在标记的末尾用斜杠编写的void元素。这是HTML5语法中的一个变化。它在以前的版本XHTML中是必需的，但现在不再需要了。HTML5实际上是向后兼容的，所以如果你把它放进去，它也可以。有许多不同的属性用于提供额外的信息。它们总是遵循属性名的格式，等于单引号或双引号中包含的值。
The values vary depending on the attribute. Another common one is the HREF attribute, used to add the address for the link reference. You can also have more than one attribute per tag. It doesn't matter what order you put them in, just be sure to separate them with a space. We'll be looking at a few more attributes, specifically for CSS, in the upcoming lessons. The document object model represents the tree-like structure that is created when writing HTML.
值根据属性不同而不同。另一个常见的是HREF属性，用于添加链接引用的地址。每个标签也可以有多个属性。不管你把它们放在什么顺序，一定要把它们和空间分开。在接下来的课程中，我们将会看到更多的属性，特别是CSS。文档对象模型表示在编写HTML时创建的树状结构。
Each element is an object, which makes up the document, hence the name, document object model. Elements are often nested, meaning the tags are written inside of other tags. This creates relationships resembling a family tree. Branches of ancestors, descendants, parents, children, and sibling nodes. Understanding this model is necessary for writing CSS. And here's a little pro tip.
每个元素都是一个对象，它构成了文档，因此命名为document object model。元素通常是嵌套的，这意味着标签是在其他标签的内部写的。这就产生了一种类似于族谱的关系。祖先、后代、父母、孩子和兄弟姐妹的分支。理解这个模型是编写CSS的必要条件。这里有个小建议。
Use white space and indentation to visually show which elements are nested. This is just a short example, but indentation will make the code easier to read as your pages get longer and longer.
使用空白和缩进来直观地显示哪些元素是嵌套的。这只是一个简短的例子，但是缩进将使代码更容易阅读，因为您的页面变得越来越长。