【網頁開發學習】Coursera課程《面向 Web 開發者的 HTML、CSS 與 Javascript》Week1課堂筆記
阿新 • • 發佈：2018-12-24
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>