html HTML5备忘单来自：https：//www.youtube.com/watch？v = kDyJN7qQETA
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HTML5备忘单来自：https：//www.youtube.com/watch？v = kDyJN7qQETA相关的知识，希望对你有一定的参考价值。
<!DOCTYPE HTML>
<!-- Tells the browser to render the page using the HTML5 specification -->
<!--
1. HyperText Markup Language : Uses tags to tell the browser how to layout the web page
2. Uniform Resource Locator :
a. http:// is used if data is transfered using the HyperText Transfer Protocol (Common standard of communication between web servers)
b. The domain is the unique name for the server / servers hosting the data
c. The URL ends with the path to the data to be served
d. http://newthinktank.com/html5.html
3. You can validate your HTML here http://validator.w3.org/check
-->
<!-- Defines the documents primary language as English -->
<html lang="en">
<!-- Contains data that describes the document -->
<head>
<!-- Defines the documents encoding character set (Multi-lingual Universal Transformation Format) -->
<meta charset="UTF-8">
<!-- Redriects the browser to another page after 3 seconds
<meta http-equiv="refresh" content= "3; url='redirect.html'"/> -->
<!-- Description for your page. Shouldn't be longer then 200 characters -->
<meta name="description"
content="Learn everything you want to know about HTML5 in this video tutorial. Tags, content sections, embedding media, forms, canvas and more will be covered."/>
<!-- Keywords are used to define your content for search engines. Shouldn't be longer then 1,000 characters -->
<meta name="keywords"
content="html5 canvas,html5 tutorial,html5 tutorial, html5 doctype, html5 tags,html5 video,learn html5"/>
<!-- Defines how search engines should index your content.
index / noindex : indicates if search engines should index the page
follow / nofollow : indicates if hyperlinks should be followed and indexed
archive / noarchive : indicates whether the page should be archived
-->
<meta name="robots" content="index,follow"/>
<!-- Defines the location of an outside JavaScript file -->
<script src="randomcolorchange.js"> </script>
<!-- Must come before any other link tags -->
<!-- Defines a default location for all links on a page for browsers -->
<base href="http://localhost/html5/"/>
<!-- Defines the location of a style sheet -->
<!-- Style sheets have replaced HTML styling features from the past -->
<link rel="stylesheet" href="styles.css"/>
<!-- References a icon (16 x 16) to associate with your page. Save it in the root directory for IE -->
<link rel="icon" href="favicon.ico"/>
<!-- You must have a title for your page that should be about 16 characters long -->
<title>HTML5 Tutorial</title>
</head>
<!-- Contains data to show in the browser -->
<!-- onload can call a script or open a dialog box -->
<!-- onunload is not supported in browsers other then IE -->
<body onload="alert('Hello')" onunload="alert('Bye Bye')">
<div id="wrapper">
<!-- Can jump with in the page by referencing the name -->
<a name="pageTop">Top of page</a>
<!-- Links to the bottom by referencing the id -->
<a href="html5.html#pageBottom">Bottom of page</a>
<!-- Message that is displayed if the browser has JavaScript disabled -->
<noscript>Please Enable JavaScript</noscript>
<!-- Increases the size of the text it contains h1 - h6
They are used to define the importance of elements in sequence -->
<h1>Change with a Click</h1>
<!-- The <p> will add 2 line breaks after the </p> and <br> adds one -->
<p>
Two hunters are out in the woods when one of them collapses. He doesn’t seem to be breathing and his eyes are glazed. The other guy whips out his phone and calls the emergency services. He gasps, “My friend is dead! What can I do?”. The operator says “Calm down. I can help. First, let’s make sure he’s dead.” <br>There is a silence, then a shot is heard. Back on the phone, the guy says “OK, now what?”
</p>
<!-- Draws a line -->
<hr>
<!-- <blockquote> indents the surrounding text and cite defines where the quote came from -->
<blockquote cite="http://epicquotes.org/view.php?id=151">
Never, under any circumstances, take a sleeping pill and a laxative on the same night.
</blockquote>
<!-- <q> surrounds text with quotes -->
<q cite="http://www.brainyquote.com/quotes/quotes/h/hennyyoung128883.html">If at first you don’t succeed ... so much for skydiving.</q><br><br>
<!-- <pre> preserves white space, but tabs can get messed up -->
<pre>
_ _
(.< >.)
\(_)________( \
(___________)\\
( ) \
| |
| |
| |
_| |_
(_______)
</pre>
<!-- Use pre and code to surround code -->
<!-- var is used to emphasive important variables -->
<pre>
<code>
function init(){
var <var>h1tags</var> = document.getElementsByTagName("h1");
<var>h1tags[0]</var>.onclick = changeColor;
}
</code>
</pre>
<!-- Adding images : define width, height and alt -->
<img id="danceImg" src="http://www.gifbin.com/bin/102009/1255606809_acrobatic_dance_fail.gif" width="237" height="178" alt="Dance Fail"><br>
<!-- 4 ways to emphasize text without a line break -->
<b>Bold : Bold Font</b><br>
<strong>Strong : Bold Font</strong><br>
<em>Emphasis : Italic Font</em><br>
<i>Italic : Italic Font</i><br>
<!-- 3 ways to format text for special purposes -->
<small>Small : Short Comment</small><br>
<ins>Insert : Added to Document</ins><br>
<del>Delete : Strike</del><br>
<samp>Sample Programming Output</samp><br><br>
<!-- Advisory tags -->
<!-- dfn adds emphasis to a word without title and a popup with title -->
<!-- kbd is used to emphasis input expected from a user -->
This is an abbreviation <abbr title="abbreviation">abbrv.</abbr><br>
<dfn>Definition: </dfn>the formal statement of the meaning or significance of a word<br>
<dfn title="the formal statement of the meaning or significance of a word">Definition</dfn><br>
<kbd>Enter something here</kbd>
<!-- Character Entities : http://dev.w3.org/html5/html-author/charref -->
¢
£
¥
©
®
°
¼
½
¾
²<br>
<!-- Superscript / Subscript -->
4<sup>2</sup><br>
CO<sub>2</sub><br>
<!-- You can define the direction of text with rtl or ltr -->
<bdo dir="rtl">أين هو مطعم</bdo><br>
<!-- You can provide ruby annotation for pronunciation -->
<ruby>飯店<rt>hanten</rt></ruby><br>
<!-- HYPERLINKS -->
<!-- Contains the referenced link with an optional title -->
<!-- A hyperlink has 3 interactive states hover, active, visited -->
<a href="http://youtube.com/" title="YouTube">YouTube</a>
<!-- You can link to parts of the same web page -->
<a href="html5.html#pageTop">Top of Page</a>
<a id="pageBottom">Bottom of page</a><br>
<!-- You can open the mail software to send a message -->
<a href="mailto:derekbanas@verizon.net">Send an Email</a>
<!-- You can also dynamically call for a JavaScript function to execute -->
<a href="javascript:toggleImg()">Toggle Image</a><br>
<!-- You can define hot spot links in images with image maps.
Import your image into Gimp and Filters → Web → ImageMap -->
<img src="http://localhost/html5/imagemap.png" alt="imagemap example" width="600" height="125" usemap="#map" />
<map name="map">
<area shape="circle" coords="57,62,39" alt="Yahoo" title="Go to Yahoo" href="http://yahoo.com" />
<area shape="poly" coords="192,20,166,45,232,105,301,42,272,20,192,19,195,20" alt="Diamonds" title="Go to Diamonds" href="http://diamonds.com" />
<area shape="rect" coords="332,8,595,115" alt="Google" title="Go to Google" href="http://google.com" />
</map>
<!-- You can embed numerous external file formats using the object tag -->
<!-- Embed a PDF -->
<object data="SmallBusinessPresentation.pdf" type="application/pdf"
width="750" height="400">
</object>
<!-- Embed a HTML file -->
<object data="html52.html" type="text/html"
width="750" height="400">
</object>
<!-- Embed a WAV file -->
<object data="http://www.wavsource.com/snds_2014-11-23_3967152387108926/animals/bird.wav" type="audio/x-wav">
<!-- Used to pass parameters to an embedded object
attributes consist of a name and value -->
<param name="autoplay" value="true">
<param name="controller" value="true">
</object>
<!-- Other Formats
application/msword : MS Doc Files
application/x-java-applet : Java Applet
audio/mpeg : MP3s
image/png : PNGs
image/jpeg : JPEGs
image/gif : GIFS
image/svg+xml : SVG Vector images
text/plain : Text
video/mp4 : MP4s
video/x-msvideo : AVIs
video/x-msv-wmv : WMVs
video/quicktime : MOVs
-->
<!-- You can embed externale resources in an iframe -->
<iframe width="560" height="315" src="http://www.youtube.com/embed/Rub-JsjMhWY" allowfullscreen=""></iframe>
<!-- Interactive files like Flash files can be embedded with embed
You can define the file type, plugin and set other params -->
<embed src="http://www.itma.vt.edu/tech/flash.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="300" height="120" loop="false" quality="high">
<!-- You can embed MP3 and Wav (Not IE) files using audio
mp3 uses audio/mpeg -->
<audio controls autoplay loop preload>
<source src="comingtotake.wav" type="audio/wav">
Browser doesn't support the audio tag
</audio>
<!-- You can embed MP4s with video -->
<video controls autoplay loop preload>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<br><br><br><br><br><br>
</div>
</body>
</html>以上是关于html HTML5备忘单来自：https：//www.youtube.com/watch？v = kDyJN7qQETA的主要内容，如果未能解决你的问题，请参考以下文章
[转] HTML5终极备忘大全（图片版+文字版）----张鑫旭