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有助于可訪問性和搜索引擎優(yōu)化。它也會影響您如何編寫CSS羞秤，因為它們是緊密聯系在一起的。前端web開發(fā)是指在瀏覽器中運行的語言左敌。當這三種語言一起工作時瘾蛋，它們各自負責不同的事情。

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是用來添加交互性的取董，比如點擊一個圖片畫廊棍苹，或者用一個按鈕點擊或者一個頁面滾動來動態(tài)改變內容。那么茵汰，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.
每個新版本都添加或刪除了特性栏豺，并且語法規(guī)則也發(fā)生了變化。這些標準由萬維網聯盟維護画侣。你可以在w3.org網站上找到HTML和CSS的所有文檔冰悠、指南和建議。下面是關于最新的HTML5特性和更改的其他一些特定資源配乱。Mozilla開發(fā)者網絡有一些關于視頻和音頻內容的信息溉卓。
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站點上的文檔更詳細地介紹了規(guī)范和特性。在HTML5中也添加了Canvas元素忿檩。在將其與JavaScript相結合時尉尾，它還允許使用代碼繪制圖形的更多方式，這也是Mozilla開發(fā)人員網絡上的文檔燥透。它有一些基本的例子沙咏，以及一些其他資源的鏈接。
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.
它們通常成對出現并包裝內容以賦予它意義衷快。在元素的開頭添加了開始標記，結束標記坎拐，加上一個正斜杠烦磁，標志著結束养匈。這條規(guī)則有一些例外。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標簽創(chuàng)建一個水平規(guī)則诈闺，它看起來就像一條線，并且經常被用來分隔文本塊铃芦，不需要任何其他信息雅镊。另一方面，圖像需要兩個屬性刃滓。一個源屬性來鏈接和載入圖像文件仁烹，以及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時創(chuàng)建的樹狀結構。
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.
使用空白和縮進來直觀地顯示哪些元素是嵌套的实胸。這只是一個簡短的例子他嫡，但是縮進將使代碼更容易閱讀，因為您的頁面變得越來越長童芹。