If you read the Intro to HTML a while ago, you might want to jump back to that part for a quick 30-second refresher.、
我们在第一章介绍了HTML的一些基础知识，大家可以先回去复习一下。
So far we’ve covered the basics of how HTML works, and a couple of the main topics:
我们介绍了HTML的工作原理和一些基础的要点：
- Attributes are added inside the opening tag. Each element can have different attributes such as href=”” for links and src=”” for images. But the most common attribute is class=””
- 属性：加在开放标签里面。每一个元素可以有不同的属性，例如href=””代表链接， src=””代表图片。当时最常见的属性是class=””
- Classes and ID’s are used to target specific elements in CSS or Javascript. ID can only be used once per page, whereas classes can be used many times for the same type of element.
CSS类和ID: 它们用于在CSS和Javascript定位一些特殊的元素。在任何一个页面上，ID只有一个。当时类可以对同一类型的元素使用多次。
4.1 Semantic Elements：
语义元素：
A semantic element clearly describes its meaning to both the browser and the developer. They have a particular purpose. Here are the most common semantic elements you will use:
语义元素对浏览器和开发者清晰的表明他的意义。因此它们具有特定的目的。下面是我们常用的语义元素：
| HTML | Purpose |
| <p> </p> | Paragraphs, any normal text |
| <h1>, <h2>… through to <h6> | Headings |
| <a href=””> </a> | Links |
| <img src=”” alt=””> with no
closing tag |
Images |
| <ul> for unordered lists
and <ol> for ordered lists <li> for each list item inside |
Lists |
| <br> with no closing tag | Breaker AKA Newline |
| <!– comment –> | Comments |
| <style> </style> | Add a block of CSS into your HTML |
| <script> </script> | Add a block of Javascript into your HTML |
| <hr> with no closing tag | Divider line |
| <iframe></iframe> | Iframe (embed youtube videos or other) |
| <table>, <tr>, and <td> | Tables, Rows, and Cells |
| <input> with no closing tag | Various input fields like text fields, checkboxes, radio buttons |
| <textarea> </textarea> | Multi-line text input field |
| <b>, <strong>, <em> | bold, another way to write bold, and italic.
Normally it’s better to do this in CSS, but sometimes it’s just faster to wrap a certain part in <strong> tags to make it bold. |
| HTML | 语义 |
| <p> </p> | 段落, 常规文字 |
| <h1>, <h2>… 到<h6> | 标题 |
| <a href=””> </a> | 链接 |
| <img src=”” alt=””> 没有结束标签 | 图片 |
| <ul> 无序列表 <ol> 有序列表 <li> 列表里面的每一行 | 列表 |
| <br> 没有结束标签 | 另起一行 |
| <!– comment –> | 注释 |
| <style> </style> | 在 HTML里增加CSS块 |
| <script> </script> | 在HTML里增加Javascript |
| <hr> 没有结束标签 | 分割线 |
| <iframe></iframe> | Iframe (可以内嵌视频等) |
| <table>, <tr>, and <td> | 表格, 行, 列 |
| <input> 没有结束标签 | 输入框，例如文本字段，勾选框等 |
| <textarea> </textarea> | 多行文本输入框 |
| <b>, <strong>, <em> | 加粗, 把字体加粗，变斜体的另一种方式。
我们一般可以在 CSS里写, 当时有时候在 <strong> 里加粗文字根据快捷。 |
