singleseeker · April 18, 2017 10:17
diff --git a/learn-html-code-10-mins b/learn-html-code-10-mins

 17 Simple HTML Code Examples You Can Learn in 10 Minutes
 ### 10分钟学会17个简单的HTML代码示例

 Even though modern websites are generally built with user-friendly interfaces, it’s still good to know some basic HTML.

 即使现代网站一般都有一个友好的界面，但这仍需我们了解基本的HTML代码。

 If you know the following 17 tags (and the extra few that go with them), you’ll be able to create a basic webpage from scratch or tweak the code created by an app like WordPress. 

 如果你知道下面17个标签（还有与他们配合的一些少数标签），你就可以从头开始创建一个web页面，或调整一些由像wordpress这种程序生成的html片断。


 I’ve provided examples for most of the tags, but if you want to see them in action, download the linked HTML file at the end of the article.

 我对大多数标签提供了示例，但如果你现在就想查看，下载在文章最后有HTML的链接。

 You can play with it in a text editor and load it up in a browser to see what your changes do.

 你可以在文本编辑器里编辑，然后在你的浏览器里打开查看你做了哪些改变。

 #### <!DOCTYPE html>

 You’ll need this tag at the beginning of every HTML document you create. 

 每个你建立的HTML文件头部都会需要这个标签。

 It ensures that a browser knows that it’s reading HTML, and that it expects HTML5, the latest version. 

 它确保你的浏览顺知道正在处理一个HTML文件，会把文件按最新版的HTML5规范来处理。

 Even though this isn’t actually an HTML tag, it’s still a good one to know.

 尽管其实它不是一个HTML标签，但是也确实是值得我们了解的一个。

 (img)

 Image Credit: Yurich via Shutterstock

 #### <html>

 This is another tag that tells a browser that it’s reading HTML. 

 这是告诉浏览器正在处理HTML文件的另一个标签。

 Why do we need both? Who knows? But it’s a good idea to put it in anyway.

 为什么我们需要两个？鬼知道！反正就是要把它也放进来。

 And at the end of your document, add a </html> tag.

 在你文件的最后，加上 `</html>` 标签。

 #### <head>

 For basic pages, the <head> tag will contain your title, and that’s about it.

 对于一般的页面，<head> 标签会包含你的 title，这就是它的作用。

 But there are a few other things that you can include, which we’ll go over in a moment.

 但是其实还有一些其它标签你也可以包含进来，后面我们再来讲一下。

 #### <title>

 As you might expect, this defines the title of your page. 

 就像你想的那样，这个用来定义你页面的标题。

 All you need to do is put your title in the tag and close it, like this (I’ve included the header tags, as well):

 你要做的就是把你的标题放进标签里，然后闭合。就像下面这样（我同时把head标签加进了示例）：

 '' <head>
 '' <title>My Website</title>
 '' </head>

 That’s the name that will be displayed as the tab title when it’s opened in a browser.

 当打开浏览器，标签卡上显示的名字就是这个。

 (img)

 #### <meta>

 Like the title tag, metadata is put in the header area of your page (this metadata, unlike metadata from your mobile devices, isn’t sensitive).

 和 title 标签一样，metadata 标签会被放在你文件的 head 区域里（这个metadata 与来源于你移动端的 metadata 不同，大不写不敏感）。

 Metadata is primarily used by search engines, and is — as you might expect — information about the information on your page. 

 Metadata 主要被搜索引擎使用，或者你也可以加上一些你想要描述的关于你页面的信息。

 There are a number of different meta fields, but these are some of the most commonly used: 

 有各种不同的 meta 字段，下面介绍几个常用的：

 	•	description — 页面的基本描述。
 	•	keywords — 适用于你网页的关键字。
 	•	author — 页面的作者。
 	•	viewport — 用来确定页面在所有设备上显示友好的标签。
 	
 Here’s an example that might apply to this page:

 下面是一个适用于本页面的示例：

 '' <meta name="description" content="A basic HTML tutorial">
 '' <meta name="keywords" content="HTML,code,tags">
 '' <meta name="author" content="Dann Albright">
 '' <meta name="viewport" content="width=device-width, initial-scale=1.0">

 The “viewport” tag should always have “width=device-width, initial-scale=1.0” as the content to make sure your page displays well on mobile and desktop devices.

 "viewport" 标签应总包含 “width=device-width, initial-scale=1.0” 以确保你的页面在桌面与移动端显示友好。

 #### <body>

 The body of your webpage — basically everything other than the title is set inside the body tag. It’s as simple as it sounds:

 你网页的身体 - 基本上除了 title 都会设置在 body 内，就像它的字面意那样好理解：

 '' <body>
 '' Everything you want displayed on your page.
 '' </body>

 #### <h1> 
 The <h1> tag defines level-one headers on your page. 

 <h1>标签定义你页面文件的第一级标题。

 <h2> defines level-two headers, <h3> level-three, and so on, down to <h6>. 

 <h2>标签定义你页面文件的第二级标题，h3定义和三级，一直到 <h6>。

 As an example, the names of the tags in this article are level-two headers.

 举个例子，这片文章的标题是用第三级标题。

 '' <h1>Big and Important Header</h1>
 '' <h2>Slightly Less Big Header</h2>
 '' <h3>Sub-Header</h3>

 结果:

 '' Big and Important Header
 '' Slightly Less Big Header
 '' Sub-Header

 As you can see, they get smaller at each level.

 如你所见，级别递减，它们字体越来越小。

 #### <p>

 The paragraph tag starts a new paragraph. This usually inserts two line breaks.

 段落标签可以新建一个段落。通常会插入两个折行。

 Look, for example, at the break between the previous line and this one. That’s what a <p> tag will do.

 看下面的例子，第一行与第二行之间的折行，这就是<p>标签做的事情。

 '' <p>Your first paragraph.</p>
 '' <p>Your second paragraph.</p>

 结果:

 '' Your first paragraph.
 '' 
 '' Your second paragraph.

 You can also use CSS styles in your paragraph tags, like this:

 你也可以在你的段落标签中使用CSS，像下面这样：

 '' <p style="font-size: 120%;">20% larger text</p>

 结果:

 '' 20% larger text 

 #### <br> 
 The line break tag inserts a single line break:

 折行标签插入一个新的折行。

 '' <p>The first line.<br>
 '' The second line (close to the first one).</p>

 结果:

 '' The first line.
 '' The second line (close to the first one).


 Note: You may sometimes see this tag written as <br /> or <br/>. It does the same thing (the slash makes the tag readable in XHTML).

 注意：你可能有时看到这个标签被写成 <br /> 或 <br/>，效果是一样的（反斜线让标签在XHTML下更可读）。

 #### <strong>

 This tag defines important text. 

 这个标签用来显示重要的文本。

 In general, that means it will be bold. However, it’s possible to use CSS to make <strong> text display differently.

 通常，这意味着字体会被加粗。但是，也有可能 CSS 让 <strong> 标签有不同的显示。

 However, you can safely use <strong> to bold text.

 尽管如此，你可以在、安心的使用 <strong> 标签加粗字体。

 '' <strong>Very important things you want to say.</strong>

 结果:

 '' Very important things you want to say.

 If you’re familiar with the <b> tag for bolding text, you can still use it. 

 如果你熟悉 <b> 标签让字体加粗，你也可以继续使用它。

 There’s no guarantee it will continue to work in future versions of HTML, but for now, it works.

 在未来的HTML版本中是否可用还不确定，但截止目前，它确实也是可用的。

 #### <em>

 Like <b> and <strong>, <em> and <i> are related. The <em> tag identifies emphasized text, which generally means it will get italicized.

 像 <b>标签 和 <strong>标签 一样，<em>标签 和 <i>标签一样有关联。<em> 标签用来强调文字，一般意味着会用斜体显示。

 Again, there’s the possibility that CSS will make emphasized text display differently.

 同样，这个标签也可能被CSS修尽管让它有不同的显示。

 '' <em>An emphasized line.</em>

 结果:

 '' An emphasized line.

 The <i> tag still works, but again, it’s possible that it will be deprecated in future versions of HTML.

 <i> 标签也是可以用的，但是再说一次，在将来的HTML版本中不排除弃用它的可能。

 #### <a>

 The <a>, or anchor, tag lets you create links. A simple link looks like this:

 <a> 标签，或锚，可以用来创建链接。下面是一个简单的链接：

 '' <a href="http://www.makeuseof.com/>Go to MakeUseOf</a>

 结果:

 '' Go to MakeUseOf

 The “href” attribute identifies the destination of the link. In many cases, this will be another website. It could also be a file, like an image or a PDF.

 "href" 属性指定链接的目标地址。在大多数情况下，它会是别的网站。当然当也可以是一个文件，比如图像或是pdf。

 Other useful attributes include “target” and “title.” The target attribute is almost exclusively used to open a link in a new tab or window, like this:

 别的常见的属性，包含像  “target” 和 “title”。 target 属性仅在希望在新窗口打开时使用，像这样：

 '' <a href="http://www.makeuseof.com/" target="blank">Go to MakeUseOf in a new tab</a>

 结果:

 '' Go to MakeUseOf in a new tab

 The “title” attribute creates a tooltip. Hover over the link below to see what I mean:

 title 属性会创建一个提示。鼠标滑过下面的字，你就会知道我在说什么：

 '' <a href="http://www.makeuseof.com/" title="This is a COOLtip">Hover over this one</a>

 结果:

 '' Hover over this one

 #### <img>

 If you want to embed an image in your page, you’ll need to use the image tag. 

 如果你想在页面中嵌入一个图片，你就会用到这个 image 标签。

 The simplest way to use it is to simply add the source of the image in the “src” attribute, like this:

 最简单的用法是像下面这样只在 src 属性中加一下来源地址：

 '' <img src="http://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png">


 结果:

 That includes the image. However, there are a number of other attributes you’ll like want to use, like “height,” “width,” and “alt.” Here’s how that might look:

 这是显示图片。 但是，您可能会想要使用其他一些属性，例如 “height”, “width” 和 “alt”。
 以下是可能的样子：

 '' <img src="http://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png"  width="320" alt="the name of your image">

 结果:

 As you might expect, the “height” and “width” attributes set the height and width of the image. 

 你已能按自己的想法设置图片的宽与高。

 In general, it’s a good idea to only set one of them so the image scales correctly.

 一般来说，最好只设置其中一个，使图像正确地缩放。

 If you use both, you could end up with a stretched or squished image.

 如果您同时使用两者，则可能会出现一个拉伸或挤压的图像。

 The “alt” tag tells the browser what text to display if the image can’t be displayed, and is a good idea to include in any image. 

 “alt”标签告诉浏览器如果图像无法显示，显示什么文本，所有图像中包含它是一个很好的习惯。

 If someone has an especially slow connection or an old browser, they can still get an idea of what you have on your page.

 这样如果某人连接速度慢或浏览器特别老，他们仍然可以了解您在页面上的内容。

 #### <ol>

 The ordered list tag lets you create an ordered list.

 有序列表让你创建一个有序列表。

 In general, that means you’ll get a numbered list.

 也就是说，你会得到一个数字排序的列表。

 Each item in the list needs a list item tag (<li>), so your list will look like this:

 列表中的每个元素需要一个元素标签（<li>）,所以你的列表看起来会是下面这样：

 '' <ol>
 '' <li>First thing</li>
 '' <li>Second thing</li>
 '' <li>Third thing</li>
 '' </ol> 
 结果:

 	'' 1.	First thing
 	'' 2.	Second thing
 	'' 3.	Third thing

 In HTML5, you can use <ol reversed> to reverse the order of the numbers. And you can set the starting value with the start attribute. The “type” attribute lets you tell the browser which type of symbol to use for the list items. It can be set to “1,” “A,” “a,” “I,” or “i,” setting the list to display with the indicated symbol.

 在HTML5中，你可以用 <ol reversed> 倒序列表。你也可以用 start 属性设置开始的置。type 属性让浏览器为列表设置指定的符号显示，它可以被设置成 “1”， “A”， “a”， “I”  或 “i”。

 #### <ul>

 The unordered list is much simpler than its ordered counterpart. 
 	
 无序列表比有序列表简单

 It’s simply a bulleted list.

 下面是一个符号列表

 '' <ul>
 '' <li>First item</li>
 '' <li>Second item</li>
 '' <li>Third item</li>
 '' </ul>

 结果:

 	'' •	First item
 	'' •	Second item
 	'' •	Third item
 	
 Unordered lists also have “type” attributes, and you can set it to “disc,” “circle,” or “square.”

 无序列表有一个 type 属性，你可以把它设置成  “disc” ，“circle” 或 “square”。

 #### <table>

 While using tables for formatting is frowned upon, there are plenty of times when you’ll want to use rows and columns to segment information on your page.

 使用表格进行排版确实让人不爽，但是当你想把页面上的一些信息按照行与列显示的时候你都会用到表格。

 There are a number of tags you’ll need to use to get a table to work. 

 让一个表格显示出来，你要用到好几个标签。

 Take a look at this example and you’ll see what I mean:

 看一下例子，就知道我在说什么：

 '' <table>
 '' <tbody>
 '' <tr>
 '' <th>First column</th>
 '' <th>Second column</th>
 '' </tr>
 '' <tr>
 '' <td>Row 1, column 1</td>
 '' <td>Row 1, column 2</td>
 '' </tr>
 '' <td>Row 2, column 1</td>
 '' <td>Row 2, column 2</td>
 '' </tbody>
 '' </table>

 结果： 

 '' First column 
 '' Second column 
 '' Row 1, column 1 
 '' Row 1, column 2 

 Each <th> tag surrounds a header (you might sometimes see these encased in a <thead> tag, as well). <tbody> sets off the body of the table. The <tr> tag sets off a new table row, and each <td> tag identifies a cell in that row.

 每个<th>标签包着一个标题（您可能有时也会看到这些标签封装在<thead>标签中）。 <tbody>里放表格的身体。 <tr> 标签设置一个新的表行，每个<td>标记标识该行中的一个单元格。

 #### <blockquote>

 When you’re quoting another website or person and you want to set the quote apart from the rest of your document, the blockquote tag will do it for you. 

 当你引用别的网站或是某人的话时，你想把引用部分与你文件的其它部分区分开来，这个 blockquote 标签就是你所需要的。

 All you need to do is enclose the quote in opening and closing blockquote tags:

 你要做的就是在引用的开头与结尾写上 blockquote 标签。

 '' <blockquote>I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.</blockquote>

 结果:

 '' I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. 

 The exact formatting that’s used may depend on the browser you’re using or the CSS of your site. But the tag remains the same.

 具体的格式依据你浏览器或你网站上的CSS不同而不同，但是标签的用法是一致的。

 Go Forth and HTML
 继续探索HTML

 With these 17 HTML tags (and a few more attendant ones) you should be able to create a simple webpage.

 用这17个HTML标签（还要有一些附加的）你应可以创建一个简单的web页面。

 To see how to put them all together, you can download the sample HTML page that I’ve created.

 想看如何把它们放在一起，你可以下载我创建的HTML页面示例。  You can open it in your browser to see how it all comes together, or in a text editor to see exactly how the code works. 

 你可以在你的浏览器里打开，看看签组合在一起是个什么样子，或者用文本编辑打开，查看一下代码到底怎么工作。

 Do you use HTML on a regular basis? Which other tags do you find that you commonly use? Share your tips in the comments below!

 你会定期的用到HTML么？还有哪些你通常会用到的标签？在评论处留下你的见解。

	17 Simple HTML Code Examples You Can Learn in 10 Minutes
	### 10分钟学会17个简单的HTML代码示例

	Even though modern websites are generally built with user-friendly interfaces, it’s still good to know some basic HTML.

	即使现代网站一般都有一个友好的界面，但这仍需我们了解基本的HTML代码。

	If you know the following 17 tags (and the extra few that go with them), you’ll be able to create a basic webpage from scratch or tweak the code created by an app like WordPress.

	如果你知道下面17个标签（还有与他们配合的一些少数标签），你就可以从头开始创建一个web页面，或调整一些由像wordpress这种程序生成的html片断。


	I’ve provided examples for most of the tags, but if you want to see them in action, download the linked HTML file at the end of the article.

	我对大多数标签提供了示例，但如果你现在就想查看，下载在文章最后有HTML的链接。

	You can play with it in a text editor and load it up in a browser to see what your changes do.

	你可以在文本编辑器里编辑，然后在你的浏览器里打开查看你做了哪些改变。

	#### <!DOCTYPE html>

	You’ll need this tag at the beginning of every HTML document you create.

	每个你建立的HTML文件头部都会需要这个标签。

	It ensures that a browser knows that it’s reading HTML, and that it expects HTML5, the latest version.

	它确保你的浏览顺知道正在处理一个HTML文件，会把文件按最新版的HTML5规范来处理。

	Even though this isn’t actually an HTML tag, it’s still a good one to know.

	尽管其实它不是一个HTML标签，但是也确实是值得我们了解的一个。

	(img)

	Image Credit: Yurich via Shutterstock

	#### <html>

	This is another tag that tells a browser that it’s reading HTML.

	这是告诉浏览器正在处理HTML文件的另一个标签。

	Why do we need both? Who knows? But it’s a good idea to put it in anyway.

	为什么我们需要两个？鬼知道！反正就是要把它也放进来。

	And at the end of your document, add a </html> tag.

	在你文件的最后，加上 `</html>` 标签。

	#### <head>

	For basic pages, the <head> tag will contain your title, and that’s about it.

	对于一般的页面，<head> 标签会包含你的 title，这就是它的作用。

	But there are a few other things that you can include, which we’ll go over in a moment.

	但是其实还有一些其它标签你也可以包含进来，后面我们再来讲一下。

	#### <title>

	As you might expect, this defines the title of your page.

	就像你想的那样，这个用来定义你页面的标题。

	All you need to do is put your title in the tag and close it, like this (I’ve included the header tags, as well):

	你要做的就是把你的标题放进标签里，然后闭合。就像下面这样（我同时把head标签加进了示例）：

	'' <head>
	'' <title>My Website</title>
	'' </head>

	That’s the name that will be displayed as the tab title when it’s opened in a browser.

	当打开浏览器，标签卡上显示的名字就是这个。

	(img)

	#### <meta>

	Like the title tag, metadata is put in the header area of your page (this metadata, unlike metadata from your mobile devices, isn’t sensitive).

	和 title 标签一样，metadata 标签会被放在你文件的 head 区域里（这个metadata 与来源于你移动端的 metadata 不同，大不写不敏感）。

	Metadata is primarily used by search engines, and is — as you might expect — information about the information on your page.

	Metadata 主要被搜索引擎使用，或者你也可以加上一些你想要描述的关于你页面的信息。

	There are a number of different meta fields, but these are some of the most commonly used:

	有各种不同的 meta 字段，下面介绍几个常用的：

	• description — 页面的基本描述。
	• keywords — 适用于你网页的关键字。
	• author — 页面的作者。
	• viewport — 用来确定页面在所有设备上显示友好的标签。

	Here’s an example that might apply to this page:

	下面是一个适用于本页面的示例：

	'' <meta name="description" content="A basic HTML tutorial">
	'' <meta name="keywords" content="HTML,code,tags">
	'' <meta name="author" content="Dann Albright">
	'' <meta name="viewport" content="width=device-width, initial-scale=1.0">

	The “viewport” tag should always have “width=device-width, initial-scale=1.0” as the content to make sure your page displays well on mobile and desktop devices.

	"viewport" 标签应总包含 “width=device-width, initial-scale=1.0” 以确保你的页面在桌面与移动端显示友好。

	#### <body>

	The body of your webpage — basically everything other than the title is set inside the body tag. It’s as simple as it sounds:

	你网页的身体 - 基本上除了 title 都会设置在 body 内，就像它的字面意那样好理解：

	'' <body>
	'' Everything you want displayed on your page.
	'' </body>

	#### <h1>
	The <h1> tag defines level-one headers on your page.

	<h1>标签定义你页面文件的第一级标题。

	<h2> defines level-two headers, <h3> level-three, and so on, down to <h6>.

	<h2>标签定义你页面文件的第二级标题，h3定义和三级，一直到 <h6>。

	As an example, the names of the tags in this article are level-two headers.

	举个例子，这片文章的标题是用第三级标题。

	'' <h1>Big and Important Header</h1>
	'' <h2>Slightly Less Big Header</h2>
	'' <h3>Sub-Header</h3>

	结果:

	'' Big and Important Header
	'' Slightly Less Big Header
	'' Sub-Header

	As you can see, they get smaller at each level.

	如你所见，级别递减，它们字体越来越小。

	#### <p>

	The paragraph tag starts a new paragraph. This usually inserts two line breaks.

	段落标签可以新建一个段落。通常会插入两个折行。

	Look, for example, at the break between the previous line and this one. That’s what a <p> tag will do.

	看下面的例子，第一行与第二行之间的折行，这就是<p>标签做的事情。

	'' <p>Your first paragraph.</p>
	'' <p>Your second paragraph.</p>

	结果:

	'' Your first paragraph.
	''
	'' Your second paragraph.

	You can also use CSS styles in your paragraph tags, like this:

	你也可以在你的段落标签中使用CSS，像下面这样：

	'' <p style="font-size: 120%;">20% larger text</p>

	结果:

	'' 20% larger text

	#### <br>
	The line break tag inserts a single line break:

	折行标签插入一个新的折行。

	'' <p>The first line.<br>
	'' The second line (close to the first one).</p>

	结果:

	'' The first line.
	'' The second line (close to the first one).


	Note: You may sometimes see this tag written as <br /> or <br/>. It does the same thing (the slash makes the tag readable in XHTML).

	注意：你可能有时看到这个标签被写成 <br /> 或 <br/>，效果是一样的（反斜线让标签在XHTML下更可读）。

	#### <strong>

	This tag defines important text.

	这个标签用来显示重要的文本。

	In general, that means it will be bold. However, it’s possible to use CSS to make <strong> text display differently.

	通常，这意味着字体会被加粗。但是，也有可能 CSS 让 <strong> 标签有不同的显示。

	However, you can safely use <strong> to bold text.

	尽管如此，你可以在、安心的使用 <strong> 标签加粗字体。

	'' <strong>Very important things you want to say.</strong>

	结果:

	'' Very important things you want to say.

	If you’re familiar with the <b> tag for bolding text, you can still use it.

	如果你熟悉 <b> 标签让字体加粗，你也可以继续使用它。

	There’s no guarantee it will continue to work in future versions of HTML, but for now, it works.

	在未来的HTML版本中是否可用还不确定，但截止目前，它确实也是可用的。

	#### <em>

	Like <b> and <strong>, <em> and <i> are related. The <em> tag identifies emphasized text, which generally means it will get italicized.

	像 <b>标签和 <strong>标签一样，<em>标签和 <i>标签一样有关联。<em> 标签用来强调文字，一般意味着会用斜体显示。

	Again, there’s the possibility that CSS will make emphasized text display differently.

	同样，这个标签也可能被CSS修尽管让它有不同的显示。

	'' <em>An emphasized line.</em>

	结果:

	'' An emphasized line.

	The <i> tag still works, but again, it’s possible that it will be deprecated in future versions of HTML.

	<i> 标签也是可以用的，但是再说一次，在将来的HTML版本中不排除弃用它的可能。

	#### <a>

	The <a>, or anchor, tag lets you create links. A simple link looks like this:

	<a> 标签，或锚，可以用来创建链接。下面是一个简单的链接：

	'' <a href="http://www.makeuseof.com/>Go to MakeUseOf</a>

	结果:

	'' Go to MakeUseOf

	The “href” attribute identifies the destination of the link. In many cases, this will be another website. It could also be a file, like an image or a PDF.

	"href" 属性指定链接的目标地址。在大多数情况下，它会是别的网站。当然当也可以是一个文件，比如图像或是pdf。

	Other useful attributes include “target” and “title.” The target attribute is almost exclusively used to open a link in a new tab or window, like this:

	别的常见的属性，包含像 “target” 和 “title”。 target 属性仅在希望在新窗口打开时使用，像这样：

	'' <a href="http://www.makeuseof.com/" target="blank">Go to MakeUseOf in a new tab</a>

	结果:

	'' Go to MakeUseOf in a new tab

	The “title” attribute creates a tooltip. Hover over the link below to see what I mean:

	title 属性会创建一个提示。鼠标滑过下面的字，你就会知道我在说什么：

	'' <a href="http://www.makeuseof.com/" title="This is a COOLtip">Hover over this one</a>

	结果:

	'' Hover over this one

	#### <img>

	If you want to embed an image in your page, you’ll need to use the image tag.

	如果你想在页面中嵌入一个图片，你就会用到这个 image 标签。

	The simplest way to use it is to simply add the source of the image in the “src” attribute, like this:

	最简单的用法是像下面这样只在 src 属性中加一下来源地址：

	'' <img src="http://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png">


	结果:

	That includes the image. However, there are a number of other attributes you’ll like want to use, like “height,” “width,” and “alt.” Here’s how that might look:

	这是显示图片。但是，您可能会想要使用其他一些属性，例如 “height”, “width” 和 “alt”。
	以下是可能的样子：

	'' <img src="http://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png" width="320" alt="the name of your image">

	结果:

	As you might expect, the “height” and “width” attributes set the height and width of the image.

	你已能按自己的想法设置图片的宽与高。

	In general, it’s a good idea to only set one of them so the image scales correctly.

	一般来说，最好只设置其中一个，使图像正确地缩放。

	If you use both, you could end up with a stretched or squished image.

	如果您同时使用两者，则可能会出现一个拉伸或挤压的图像。

	The “alt” tag tells the browser what text to display if the image can’t be displayed, and is a good idea to include in any image.

	“alt”标签告诉浏览器如果图像无法显示，显示什么文本，所有图像中包含它是一个很好的习惯。

	If someone has an especially slow connection or an old browser, they can still get an idea of what you have on your page.

	这样如果某人连接速度慢或浏览器特别老，他们仍然可以了解您在页面上的内容。

	#### <ol>

	The ordered list tag lets you create an ordered list.

	有序列表让你创建一个有序列表。

	In general, that means you’ll get a numbered list.

	也就是说，你会得到一个数字排序的列表。

	Each item in the list needs a list item tag (<li>), so your list will look like this:

	列表中的每个元素需要一个元素标签（<li>）,所以你的列表看起来会是下面这样：

	'' <ol>
	'' <li>First thing</li>
	'' <li>Second thing</li>
	'' <li>Third thing</li>
	'' </ol>
	结果:

	'' 1. First thing
	'' 2. Second thing
	'' 3. Third thing

	In HTML5, you can use <ol reversed> to reverse the order of the numbers. And you can set the starting value with the start attribute. The “type” attribute lets you tell the browser which type of symbol to use for the list items. It can be set to “1,” “A,” “a,” “I,” or “i,” setting the list to display with the indicated symbol.

	在HTML5中，你可以用 <ol reversed> 倒序列表。你也可以用 start 属性设置开始的置。type 属性让浏览器为列表设置指定的符号显示，它可以被设置成 “1”， “A”， “a”， “I” 或 “i”。

	#### <ul>

	The unordered list is much simpler than its ordered counterpart.

	无序列表比有序列表简单

	It’s simply a bulleted list.

	下面是一个符号列表

	'' <ul>
	'' <li>First item</li>
	'' <li>Second item</li>
	'' <li>Third item</li>
	'' </ul>

	结果:

	'' • First item
	'' • Second item
	'' • Third item

	Unordered lists also have “type” attributes, and you can set it to “disc,” “circle,” or “square.”

	无序列表有一个 type 属性，你可以把它设置成 “disc” ，“circle” 或 “square”。

	#### <table>

	While using tables for formatting is frowned upon, there are plenty of times when you’ll want to use rows and columns to segment information on your page.

	使用表格进行排版确实让人不爽，但是当你想把页面上的一些信息按照行与列显示的时候你都会用到表格。

	There are a number of tags you’ll need to use to get a table to work.

	让一个表格显示出来，你要用到好几个标签。

	Take a look at this example and you’ll see what I mean:

	看一下例子，就知道我在说什么：

	'' <table>
	'' <tbody>
	'' <tr>
	'' <th>First column</th>
	'' <th>Second column</th>
	'' </tr>
	'' <tr>
	'' <td>Row 1, column 1</td>
	'' <td>Row 1, column 2</td>
	'' </tr>
	'' <td>Row 2, column 1</td>
	'' <td>Row 2, column 2</td>
	'' </tbody>
	'' </table>

	结果：

	'' First column
	'' Second column
	'' Row 1, column 1
	'' Row 1, column 2

	Each <th> tag surrounds a header (you might sometimes see these encased in a <thead> tag, as well). <tbody> sets off the body of the table. The <tr> tag sets off a new table row, and each <td> tag identifies a cell in that row.

	每个<th>标签包着一个标题（您可能有时也会看到这些标签封装在<thead>标签中）。 <tbody>里放表格的身体。 <tr> 标签设置一个新的表行，每个<td>标记标识该行中的一个单元格。

	#### <blockquote>

	When you’re quoting another website or person and you want to set the quote apart from the rest of your document, the blockquote tag will do it for you.

	当你引用别的网站或是某人的话时，你想把引用部分与你文件的其它部分区分开来，这个 blockquote 标签就是你所需要的。

	All you need to do is enclose the quote in opening and closing blockquote tags:

	你要做的就是在引用的开头与结尾写上 blockquote 标签。

	'' <blockquote>I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.</blockquote>

	结果:

	'' I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.

	The exact formatting that’s used may depend on the browser you’re using or the CSS of your site. But the tag remains the same.

	具体的格式依据你浏览器或你网站上的CSS不同而不同，但是标签的用法是一致的。

	Go Forth and HTML
	继续探索HTML

	With these 17 HTML tags (and a few more attendant ones) you should be able to create a simple webpage.

	用这17个HTML标签（还要有一些附加的）你应可以创建一个简单的web页面。

	To see how to put them all together, you can download the sample HTML page that I’ve created.

	想看如何把它们放在一起，你可以下载我创建的HTML页面示例。  You can open it in your browser to see how it all comes together, or in a text editor to see exactly how the code works.

	你可以在你的浏览器里打开，看看签组合在一起是个什么样子，或者用文本编辑打开，查看一下代码到底怎么工作。

	Do you use HTML on a regular basis? Which other tags do you find that you commonly use? Share your tips in the comments below!

	你会定期的用到HTML么？还有哪些你通常会用到的标签？在评论处留下你的见解。