内容来自HTML Dog.
demo1——页面标题
<!DOCTYPE html> <html> <head> <title>This is my first web page.</title> </head> <body> This is my first web page. </body> </html> <!--并不是所有的标签都有这样的关闭标签（<html></html>）一些不包围内容的标签会自动关闭。例如，换行符号如下所示：<br>- 换行符不包含任何内容，因此标签由于孤独的自我而快乐地坐着。我们稍后会看到这些例子。所有您需要记住的是，所有包含它们之间内容的标签应以打开标签→内容→关闭标签的格式关闭。严格来说，这不是一个要求，但这是我们在这些教程中使用的惯例，因为这是一个很好的做法，导致更清洁，更容易理解的代码。--> <!--标签还可以具有属性，这是额外的信息位。属性出现在开头标签内，它们的值位于引号内。他们看起来像<tag attribute="value">Margarine</tag>。我们稍后会遇到带有属性的标签。--> <!--再次，引号并不总是重要的，但它是HTML Dog用于一致性和清晰度的良好实践惯例。我们建议你做同样的事情。-->
demo2——段落与强调
<!DOCTYPE html> <html> <head> <title>This is my first web page.</title> </head> <body> <p>This is my first web page.</p> <p>How exciting.</p> <!--您可以使用em（强调）和strong（重要性）强调段落中的文本。--> <p>Yes, that really <em>is</em> exciting. <strong>Warning:</strong> level of excitement may cause head to explode.</p> </body> </html>
demo3——正文标题
<!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <p>To learn HTML</p> <!--请注意，h1标签只能使用一次，作为页面的主标题--> </body> </html>
demo4——列表
<!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> <h2>Why this is</h2> <ul> <li>To learn HTML</li> <li>To show off</li> <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li> </ul> <h2>Why this is</h2> <ol> <li>To learn HTML</li> <li>To show off</li> <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li> </ol> <!--The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.--> <!--列表一共有3种，无序列表是ul，有序列表是ol，除去这两者还有一种高级列表。列表项（list item）是li--> <!--列表中的列表，在list item里嵌套就可以了--> <ul> <li>To learn HTML</li> <li> To show off <ol> <li>To my boss</li> <li>To my friends</li> <li>To my cat</li> <li>To the little talking duck in my brain</li> </ol> </li> <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li> </ul> </body> </html>
demo5——超链接
<!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <p>To learn HTML</p> <h2>Where to find the tutorial</h2> <p><a href="http://www.htmldog.com">HTML Dog</a></p> </body> <!--The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.htmldog.com”, or it can be relative to the current page.--> <!--So if, for example, you had another file called “flyingmoss.html” in the same directory then the line of code would simply be <a href="flyingmoss.html">The miracle of moss in flight</a> or something like this.--> <!--A link does not have to link to another HTML file, it can link to any file anywhere on the web.--> <!--A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that ID.--> </html>
demo6——图片
<img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog">
