Coursera课程《面向 Web 开发者的 HTML、CSS 与 Javascript》
Johns Hopkins University
Yaakov Chaikin
Week1 Introduction to HTML5
对于网页来说，HTML定义的是网页的骨架（structure），CSS定义的是网页的风格（style），JavaScript定义的是网页的动作（Behavior）。
使用http://validator.w3.org可以来验证你写的HTML是否符合标准。
HTML标签的解析
对于HTML来说，最核心的就是它的标签。
大部分标签都有其闭标签，比如说代表段落的<p>标签，它的闭标签就是</p>。但是也不全是。
比如说代表换行的<br>标签和水平规则的<hr>标签就只有开标签。
对于标签来说可以增加一些属性，它是一些名称与值的对。比如说
<p id="myId"></p>HTML的基本框架
首先，每个HTML页面都应该开始于文档类型的申明，它大小写都可以。
<!doctype html>然后就是<html>标签，这个标签的开标签与闭标签里包含了所有的HTML内容。
接下来是<head>标签。这个标签包含一些描述这个页面的主要内容的信息，比如说浏览器应该使用的字符编码是什么。相当于主要内容的元数据。它包含的<meta>标签就可以用来定义字符编码，而且这是一个单独标签，是没有闭标签的。包含的<title>标签用来定义页面的标题，而且是一个必须要有的标签，不然这个HTML文档是无效的。
<head>
<meta charset="utf-8">
<title>My first page!</title>
</head>然后是<body>标签，这个标签是所有给用户可以看到内容的来源。
一个简单的网页代码就如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first page!</title>
</head>
<body>
Let's study HTML!
</body>
</html>然后在网页里打开这个文件，可以看到是这样的。
需要注意的是，这些标签的开闭之间是不能交叉的，不然就会报错。
标题元素（以及一些其他的HTML5的语义标签）
使用<h1></h1><h2></h2>这些标签可以来设置页面中的标题。我自己感觉有点像是markdown语法中的#与##这个的意味。当然使用<div>+css也能做到这些显示效果，但是使用标题标签就会带有额外的意味（表征要显示的是标题）。
类似的有<header>，<section>，<article>，<aside>，<footer>等。
比如这样。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Elements</title>
</head>
<body>
<header>
header element - Some header information goes here. Usually consists of company logo, some tag line, etc. Sometimes, navigation is contained in the header as well.
<nav>nav (short for navigation) element - Usually contains links to different parts of the web site.</nav>
</header>
<h1>Main Heading of the Page (hard not to have it)</h1>
<section>
Section 1
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
<section>
Section 2
<article>Article 4</article>
<article>Article 5</article>
<article>Article 6</article>
<div>Regular DIV element</div>
</section>
<aside>
ASIDE - Some information that relates to the main topic, i.e., related posts.
</aside>
<footer>
JHU Copyright 2015
</footer>
</body>
</html>得到大概这样的网页。
列表(Lists)
如果想在网页中显示列表那么就要使用<ul>标签和<li>标签。比如这样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ordered Lists</title>
</head>
<body>
<h1>Ordered list</h1>
<div>
Oreo cookie eating procedure:
<ul>
<li>Open box</li>
<li>Take out cookie</li>
<li>Make a Double Oreo
<ul>
<li>Peel off the top part</li>
<li>Place another cookie in the middle</li>
<li>Put back the top part</li>
</ul>
</li>
<li>Enjoy!</li>
</ul>
</div>
</body>
</html>而如果想要显示的列表是有数字标识有序的话，就要使用<ol>标签与<li>标签组合。像下面这样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ordered Lists</title>
</head>
<body>
<h1>Ordered list</h1>
<div>
Oreo cookie eating procedure:
<ol>
<li>Open box</li>
<li>Take out cookie</li>
<li>Make a Double Oreo
<ol>
<li>Peel off the top part</li>
<li>Place another cookie in the middle</li>
<li>Put back the top part</li>
</ol>
</li>
<li>Enjoy!</li>
</ol>
</div>
</body>
</html>创建超链接
使用href属性就可以创建超链接。不管是内部超链接还是外链。而且这个<a>标签不仅是个inline标签还是个block标签，也就是说它既可以单独使用，也可以在里面使用<div>等标签。
而且再加上target属性的话，让它的值等于_blank可以使这个超链接在一个新的页面访问而不是当前页面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Links</title>
</head>
<body>
<h1 id="top">External Links</h1>
<section>
<p>
Let's link to a Facebook Fan page I created for this course!
<!-- link to Facebook page WITH TARGET-->
<a href="http://www.facebook.com/CourseraWebDev"
target="_blank" title="Like Our Page!">Course Facebook Page</a>
</p>
</section>
</body>
</html>页内位置跳转如下。是根据标签的id来跳转的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Links</title>
</head>
<body>
<h1 id="top">Links to Sections of The Same Page</h1>
<section>
<ul>
<!-- Link to every section in the page -->
<li><a href="#section1">#section1</a></li>
<li><a href="#section2">#section2</a></li>
<li><a href="#section3">#section3</a></li>
<li><a href="#section4">#section4</a></li>
<li><a href="#section5">#section5</a></li>
<li><a href="#section6">#section6</a></li>
</ul>
</section>
<section id="section1">
<h3>(#section1) Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis? Commodi ut minima maiores consequuntur voluptates unde deleniti error vero tempora, eligendi blanditiis, deserunt aliquam nobis porro dolores tenetur amet eius! Aspernatur, vitae. Suscipit, dolores quos doloribus. Velit repudiandae provident a, in ad id aspernatur dolor ratione eos placeat, ex temporibus ipsum eligendi sequi reprehenderit cupiditate perferendis eaque, explicabo blanditiis nemo dolorem aperiam minima deleniti. Tempore, rem, quam? Totam non reiciendis amet, at reprehenderit inventore, adipisci nesciunt itaque dolorum asperiores, ducimus corrupti quam impedit quaerat autem quod officia tempora. Itaque dicta deleniti fugit, laudantium rerum sint consectetur asperiores, quia veritatis dignissimos esse in nesciunt distinctio facere iure facilis voluptatibus placeat voluptate voluptatum expedita animi a veniam nulla ea. Enim aliquid, non. Necessitatibus nam fugiat autem quae qui quam consequatur repudiandae quidem ipsam impedit distinctio, sequi doloribus, quaerat quod ab maxime. Harum facilis sed commodi reprehenderit?</p>
</section>
<section id="section2">
<h3>(#section2) Section 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis voluptatibus facere repellat deserunt sint, beatae optio cupiditate cumque explicabo sapiente, tenetur, minima ipsa quasi obcaecati ipsam praesentium tempore. Quam doloribus praesentium, ea quos vitae officiis nesciunt asperiores quasi quas explicabo cupiditate recusandae sed dolorum quia. Error delectus consequatur, eos repudiandae cupiditate at quis! Doloremque voluptates itaque nam aut ullam voluptas eos consequatur provident doloribus numquam ex dolor, accusantium deleniti consectetur cum repudiandae dicta molestias sapiente reiciendis soluta officia dolorem suscipit nulla tenetur. Eligendi illo, tempore. Ipsam qui, nemo est provident accusamus molestias. Architecto mollitia sint culpa possimus corrupti, deserunt dolor voluptas error corporis. Dignissimos alias optio blanditiis id, fugiat enim maxime non? Accusamus ab cumque iure sapiente, sequi asperiores nostrum optio consequatur nam dolorem incidunt molestiae autem ut, commodi libero animi veniam magnam ad perspiciatis beatae nesciunt corrupti? Minima vitae impedit praesentium voluptatem laudantium nobis quas, iusto, non natus delectus, pariatur a inventore possimus nihil porro, illum quam aut qui unde numquam debitis. Laborum nemo repellendus rem soluta, molestias, ratione veritatis modi ab eius repellat, sunt animi. Ipsa quaerat natus sed sunt modi in error cum ea tempora ratione iste aut dicta, quam molestias laborum inventore deleniti veritatis veniam.</p>
</section>
<section id="section3">
<h3>(#section3) Section 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ut, vel quasi nesciunt nisi laboriosam repellendus quod accusantium adipisci veniam voluptatem iure rem voluptate, explicabo eaque ex aliquid ipsum distinctio maxime sed nihil quae. Consequatur, consectetur praesentium animi optio non expedita nobis dignissimos repellendus, asperiores ipsum id, unde placeat atque quos tempore ducimus. Quis praesentium dolorum corporis eius voluptatibus? Ipsam placeat dolorem, voluptate esse rerum, iusto cumque eius pariatur labore nobis est debitis ab explicabo eos cum? Ex dicta reprehenderit, veniam quisquam quo deserunt est minima eaque maxime quasi voluptatem quibusdam earum ducimus culpa nostrum fuga necessitatibus unde optio, harum fugit voluptas inventore ab possimus. Aperiam, soluta explicabo! Mollitia voluptatum beatae praesentium cumque veritatis voluptas sit, deleniti architecto laudantium culpa. Doloribus quidem sint doloremque sunt, labore a ipsa fuga beatae at maxime eos magni debitis mollitia unde earum aliquam saepe autem. Itaque laborum, id laboriosam quasi, ea cupiditate facilis quas sequi obcaecati unde, quae doloremque nihil consequuntur accusamus ducimus! Voluptate ullam quam voluptatum doloremque dolor dolorum debitis adipisci mollitia facere cupiditate sint officiis nostrum cum maxime provident neque itaque iure aspernatur, quia, ab corporis iste praesentium officia. Laborum placeat, cumque corporis repellendus sint alias ipsum vero ullam, reiciendis necessitatibus nihil molestiae ex soluta quo quisquam asperiores optio, commodi! Itaque, quas quod ea alias deserunt, voluptatem rerum, reiciendis illum cupiditate quidem vel aliquid quasi, dicta doloremque numquam. Fugiat aut veniam, explicabo expedita eligendi distinctio, sapiente maiores reiciendis impedit dolorem, pariatur. Fugit praesentium minima assumenda voluptas minus id, dolorum numquam vel. Nisi perspiciatis, corrupti possimus perferendis architecto. Vitae earum perferendis optio, ab iure velit beatae quia dolor commodi. Doloribus ipsam iure maxime, natus voluptas vero incidunt ducimus quod! Id ab quam nam fugiat aliquam quis quae ea iusto deserunt ratione repellendus ipsa ad exercitationem cumque eaque animi provident culpa, sunt nobis? Dicta a dolor facere molestiae distinctio excepturi amet perferendis assumenda veritatis eum nisi voluptates explicabo architecto, tempora, velit possimus accusantium consequatur provident nostrum praesentium natus aspernatur vero eligendi vitae corporis! Modi aut animi, voluptatibus sapiente, odio dolorum sunt consequatur assumenda ipsam in eos ut magnam molestias! Aut, magni natus at fuga quae iusto aliquid tempora, perferendis veritatis! Suscipit laborum omnis impedit alias, fugiat, aut atque dolore voluptates enim eius doloremque necessitatibus libero possimus voluptatibus, illum ducimus, ipsum! Obcaecati sint itaque harum, incidunt labore aliquam, quidem, quas cum aspernatur enim, mollitia! Dolore quas fuga porro id atque delectus placeat tenetur excepturi minima vero. Ratione eligendi vitae rerum, vel quibusdam voluptatem ullam nihil nisi omnis. Enim vel repellat consequatur explicabo quidem quo sint nostrum voluptatibus eveniet distinctio quisquam, ut harum corporis aspernatur esse, laborum dignissimos natus laboriosam ea iste, facilis illo ipsa tempora, voluptatem dicta. Aliquam voluptate facilis perspiciatis fuga, cupiditate distinctio molestias officia, dolorem mollitia consequuntur iste quisquam, aliquid, accusamus at ex natus sint a modi itaque corporis quod eum inventore. Molestias iusto modi cum distinctio maiores veritatis asperiores suscipit, laudantium hic amet, omnis perferendis totam quos sequi minus, voluptatum at. Odit fugiat dolor ad nesciunt quaerat sequi odio cum vel pariatur.</p>
</section>
<section id="section4">
<h2>(#section4) Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus culpa, voluptatibus obcaecati sunt reiciendis, a eveniet provident exercitationem atque, eos minima vero est explicabo rem suscipit nisi velit saepe. Dolore ipsam, animi nisi reiciendis quisquam eos itaque, dolorum laudantium velit porro magnam accusantium ab. Hic necessitatibus ratione, sit ex ipsum porro optio sed dignissimos, officiis fuga natus dolorum quasi officia facilis repellat quae adipisci nulla, impedit deleniti! Illum sapiente animi, alias molestias nulla laudantium accusamus facilis repellendus voluptate vero veritatis fuga architecto laborum, officiis facere odio magni minima amet et temporibus quas vitae, consequuntur sit? Suscipit saepe, recusandae corporis perferendis porro excepturi, incidunt doloremque temporibus esse voluptatum error quam voluptates laudantium, labore! Sit labore unde, quasi deleniti a soluta, ipsum quia quisquam voluptatibus beatae veritatis hic nobis quas, at placeat reiciendis deserunt tempore molestias neque quidem. Earum in obcaecati dolor aspernatur vitae veniam consequuntur eos rerum asperiores! Quam quia harum soluta quae iusto possimus fugit magni omnis error saepe odit nemo, quisquam accusantium rerum molestiae tempore distinctio quis blanditiis totam. Hic, itaque, error. Doloribus nostrum labore beatae ipsam consectetur maxime recusandae nemo esse numquam tenetur hic odio quibusdam quia laudantium enim non, delectus sit, adipisci neque sint iusto fugit. Excepturi modi perspiciatis nam distinctio incidunt dolore fuga quo enim mollitia, accusamus quasi doloremque, eius quas, fugit aspernatur tempora veritatis unde impedit possimus. Illo corporis consectetur nisi consequuntur, libero molestias. Sunt, quidem consectetur voluptatem. Soluta adipisci veritatis praesentium eaque vero consequatur tempore. Aliquid rerum neque repudiandae repellat id mollitia voluptate delectus dolor tempora eveniet. Velit repellendus rerum autem, asperiores perferendis alias, beatae totam id blanditiis aperiam dolorum enim doloribus quibusdam iste at laboriosam adipisci et unde? Nisi voluptate dolorem doloremque ducimus natus iste quisquam beatae accusantium minima dolores, repellendus reprehenderit labore rem et hic error earum, explicabo maxime debitis odio rerum amet repellat incidunt dicta in. Consequatur, maiores ea libero quae enim quasi vitae iusto at dicta magnam eveniet architecto laboriosam dolorem officiis veritatis sint harum voluptatum! Ab quam voluptatum ut necessitatibus libero architecto ratione non qui sed, omnis perferendis et magni natus laudantium iste obcaecati magnam. Nisi aspernatur repudiandae officia dolor pariatur in, blanditiis quos autem qui odio impedit dolorem numquam provident quidem voluptatem magni excepturi, neque cupiditate! Provident consectetur odio modi, quibusdam dolor porro cum, tempore similique velit quis quos, alias sint fuga, consequuntur molestiae? Deleniti illo rem excepturi quisquam, hic molestiae et eos enim officiis molestias, nostrum, nihil!</p>
</section>
<section id="section5">
<h2>(#section5) Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur libero, a voluptate, quasi rem id! Mollitia nostrum quo in dolorum magnam assumenda, architecto odio expedita atque unde, laudantium velit. Et ipsa veritatis voluptatem repellendus consequatur enim asperiores est accusamus cumque dolore sit quae ipsum quas eveniet omnis, fuga temporibus cum doloremque. Eum ab, error facere vero temporibus dignissimos earum cum. Distinctio fuga sit magni commodi illo doloremque, dolor quisquam dolorem saepe fugiat quas voluptates et omnis a iusto ratione quibusdam molestiae voluptate nulla qui id cumque vitae. Quibusdam provident officia obcaecati accusamus facilis quisquam harum nostrum blanditiis ullam? Quo velit rem, quam, quasi quibusdam placeat. Numquam, unde adipisci quas maiores nostrum accusamus id? Odio aut quisquam nulla. Veniam nostrum dolorum blanditiis officiis, aspernatur. Ex hic veritatis, magnam quis accusantium eveniet nemo harum nam facere dolor quam dolorem asperiores quas sequi minima quisquam culpa eos assumenda. Accusamus debitis nesciunt dolores similique incidunt adipisci eaque sapiente ipsa natus, explicabo eligendi commodi cumque porro quas sint sequi quaerat, non repellat quia quibusdam vitae cum quis aliquam, voluptates consequatur. Aperiam delectus tempore, quasi aspernatur ex libero nemo nihil hic exercitationem magni labore minus expedita porro et praesentium suscipit fugit nulla deleniti perferendis eum eligendi voluptas sequi voluptates. Error et unde quae, assumenda accusamus vitae ea quasi, facilis rem illo maiores maxime eaque, perferendis dolorem blanditiis hic iste. Asperiores voluptate, laudantium aliquid itaque! Dignissimos aspernatur quisquam nostrum tempora ducimus tempore dolor magni ad libero, omnis obcaecati, deleniti accusantium enim harum, inventore quod eum! Quasi facere vitae ipsam eveniet, praesentium vel fugiat id expedita a totam, facilis harum voluptatum ex inventore excepturi molestiae tempora non, quia ab commodi, dolore? Non ipsum in quo impedit repudiandae pariatur, itaque id quam, esse eligendi accusantium et, quidem sequi quia voluptas nostrum, excepturi facere recusandae nihil. Cum, nisi sint exercitationem?</p>
</section>
<div>
<h2><a name="section6">(#section6) Section 6</a></h2>
<p>
Back to top: <a href="#top">Back to Top</a>
</p>
</div>
</body>
</html>显示图片
使用<img>标签，图片的路径或链接则作为属性src的值。如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Displaying Images</title>
</head>
<body>
<h1>Don't be afraid to be <then a 100% success:</h1>
<p>
<img src="https://github.com/jhu-ep-coursera/fullstack-course4/raw/master/examples/Lecture10/picture-with-quote.jpg" width="400" height="235" alt="Picture with a quote"> "It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better. The credit belongs to the man who is actually in the arena, whose face is marred by dust and sweat and blood; who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions; who spends himself in a worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if he fails, at least fails while daring greatly, so that his place shall never be with those cold and timid souls who neither know victory nor defeat."
</p>
<p>
<img src="http://lorempixel.com/output/nature-q-c-640-480-1.jpg" width="640" height="480">
</p>
<p>Theodore Roosevelt 1910 © Copyright</p>
</body>
</html>
