HTML5視訊及實戰
阿新 • • 發佈：2018-11-14
最近在看HeadFirstHTML與CSS，雖然是小白書，但是我對於前端並沒有系統的學習過，都是用到了再看，所以掌握的不是很好。
因此想補充自己前端的知識。
關於這本書的學習筆記我只寫這一篇(接下來繼續看HTML5及JS的相關知識)
程式碼素材地址:https://github.com/youaresherlock/headfirstHtmlAndCSS
HTML5 DOM 為 <audio> 和 <video> 元素提供了方法、屬性和事件。
這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。
我們下面通過在網頁中加入視訊:
blog.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Starbuzz Coffee - Blog</title> <link rel="stylesheet" type="text/css" href="starbuzz.css"> </head> <body> <header class="top"> <img id="headerLogo" src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image"> <img id="headerSlogan" src="images/headerSlogan.gif" alt="Providing all the caffeine you need to power your life."> </header> <nav> <ul> <li><a href="index.html">HOME</a></li> <li class="selected"><a href="blog.html">BLOG</a></li> <li><a href="">INVENTIONS</a></li> <li><a href="">RECIPES</a></li> <li><a href="">LOCATIONS</a></li> </ul> </nav> <div id="tableContainer"> <div id="tableRow"> <section id="drinks"> <h1>BEVERAGES</h1> <p>House Blend, $1.49</p> <p>Mocha Cafe Latte, $2.35</p> <p>Cappuccino, $1.89</p> <p>Chai Tea, $1.85</p> <h1>ELIXIRS</h1> <p> We proudly serve elixirs brewed by our friends at the Head First Lounge. </p> <p>Green Tea Cooler, $2.99</p> <p>Raspberry Ice Concentration, $2.99</p> <p>Blueberry Bliss Elixir, $2.99</p> <p>Cranberry Antioxidant Blast, $2.99</p> <p>Chai Chiller, $2.99</p> <p>Black Brain Brew, $2.99</p> </section> <section id="blog"> <article> <header> <h1>Starbuzz launches... Tweet Sip</h1> <time datetime="2012-05-03">5/3/2012</time> </header> <p> As promised, today I'm proud to announce that Starbuzz Coffee is launching the Tweet Sip cup, a special Starbuzz Coffee cup that tweets each time you take a sip! Check out my video of our new invention. </p> <!-- 在HTML中顯示視訊的最簡單的方法是使用優酷等視訊網站 <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> --> <!-- poster屬性提供一個可選的海報影象，視訊未播放時就會顯示這個影象 --> <video controls autoplay width="512" height="288" poster="images/poster.png" id="video"> <!-- src: 規定媒體檔案的url type: 規定媒體檔案的MIME型別 codecs說明了視訊編解碼、音訊編解碼格式 --> <source src="video/tweetsip.mp4" type='video/mp4; codecs="avc1.4201E, mp4a.40.2"'> <source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="video/tweetsip.ovg" type='video/ogg; codecs="theora, vorbis"'> <p>Sorry, your browser doesn't support the video element</p> </video> </article> <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%"; color=#954b4b SIZE=2> <article> <header> <h1>Starbuzz meets social media</h1> <time datatime="2012-03-12">3/12/2012</time> </header> <p> Here at Starbuzz we're embracing the social media craze. In fact, we're going further than any of our competitors and we're very close to announcing a revolutionary new product that links your coffee drinking directly to your social network. Forget "checking in"; we're going way beyond that, and with this new product every sip of smooth, aromatic, hot Starbuzz blend is going to to be shared with your social network. </p> <p> Sound like science fiction? It's not; I'm already testing our final prototype social network cup as I write this, which links you, the drinker, right to your favorite social networks. We've made a huge investment to make this happen and we've created a reusable coffee cup complete with RFID, NFC, Bluetooth, and Wifi (not to mention a few more things the tech folks know about, because hey, I'm just the coffee guy). </p> <p> So, keep your eyes out for this amazing new cup. And I'll be releasing a video teaser soon to tell you all about this new invention, straight from Starbuzz Coffee. </p> </article> <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#954b4b SIZE=2> <article> <header> <h1>Starbuzz uses computer science</h1> <time datetime="2012-03-10">3/10/2012</time> </header> <p> Have you ever noticed how efficient a Starbuzz Coffee house is? The lines alway move fast, and despite the astronomical number of different drinks any customer can order, we have your drink up, hot (or cold if that's the way you want it) and ready in seconds. How do we do it? </p> <p> To pull this off, we take advantage of the latest and greatest in computer science. In fact, we train our staff to be one big distributed computer. The cashiers create the orders for the distributed computer, complete with your name and the drinks special instructions. Then our specialized drink makers grab the next cup and go about working on your order until it's finished. </p> <p> With this design, we are able to horizontally scale our operation any time we want. All we need to do is add more cashiers and drink makers (not to mention a fair amount of support staff you never see) as the customer flow grows. </p> </article> <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#954b4b SIZE=2> <article> <header> <h1>Most unique patron of the month</h1> <time datetime="2012-02-18">2/18/2012</time> </header> <p> Our most unique patron of the month award goes to a customer in Poulsbo, Washington, whose daily morning order is a "six-splenda, no-foam, 130-degree non-fat-soy latte, with the splenda stirred in before the milk is added." Do we have unique customers or what? </p> </article> </section> <aside> <p class="beanheading"> <img src="images/bag.gif" alt="Bean Machine bag"> <br> ORDER ONLINE with the <a href="form.html">BEAN MACHINE</a> <br> <span class="slogan"> FAST <br> FRESH <br> TO YOUR DOOR <br> </span> </p> <p> Why wait? You can order all our fine coffees right from the Internet with our new, automated Bean Machine. How does it work? Just click on the Bean Machine link, enter your order, and behind the scenes, your coffee is roasted, ground (if you want), packaged, and shipped to your door. </p> </aside> </div> <!-- tableRow --> </div> <!-- tableContainer --> <footer> © 2012, Starbuzz Coffee <br> All trademarks and registered trademarks appearing on this site are the property of their respective owners. </footer> </body> </html>
starbuzz.css
body { background-color: #b5a789; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; } /* height messes up the headers in the blog in the articles it's only appropriate for the top header. add a class (new with blog) Affects the 3 #header rules for the main header below In HTML: add class="top" to main header in index.html and blog.html */ header.top { background-color: #675c47; margin: 10px 10px 0px 10px; height: 108px; } header.top img#headerSlogan { float: right; } div#tableContainer { display: table; border-spacing: 10px; } div#tableRow { display: table-row; } section#drinks { display: table-cell; background-color: #efe5d0; width: 20%; padding: 15px; vertical-align: top; } /* added section#blog for blog 通過使用兩個id選擇器(用逗號分離), 可以對這兩個<section>元素使用相同的規則 雖然("main" <section> 和 "blog" <section>)在不同的頁面上，也可以這樣選擇， 因為這兩個頁面都連結到相同的CSS檔案*/ section#main, section#blog { display:table-cell; background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; vertical-align: top; } aside { display: table-cell; background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; vertical-align: top; } footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 0px 10px 10px 10px; font-size: 90%; } h1 { font-size: 120%; color: #954b4b; } h2 { font-size: 110%; } .slogan { color: #954b4b; } .beanheading { text-align: center; line-height: 1.8em; } a:link { color: #b76666; text-decoration: none; border-bottom: thin dotted #b76666; } a:visited { color: #675c47; text-decoration: none; border-bottom: thin dotted #675c47; } /* ul { background-color: #efe5d0; 增加背景顏色，內邊距和外邊距 下外邊距為0，因為表格顯示中上方已經有10畫素的邊框距離border-spacing margin: 10px 10px 0px 10px; padding:5px 0px 5px 0px; list-style-type: none; 刪除列表前小標誌 } ul li{ display: inline; 列表項的前後不會再有換行，像常規的內聯元素一樣在頁面上流入一行 padding: 5px 10px 5px 10px; } ul li a:link, ul li a:visited { color: #954b4b; border-bottom: none; font-weight: bold; 粗體，預設值為normal } ul li.selected { background-color: #c8b99c; } */ /*為了讓CSS更特定， 我們使用nav元素來指定樣式*/ nav { background-color: #efe5d0; margin: 10px 10px 0px 10px; } nav ul { list-style-type: none; padding: 5px 0px 5px 0px; } nav ul li { display: inline; padding: 5px 10px 5px 10px; } nav ul li a:link, nav ul li a:visited { color: #954b4b; border-bottom: none; font-weight: bold; } nav ul li.selected { background-color: #c8b99c; }
下面分享幾個前端學習的網址: