<!DOCTYPE html>
<html lang="en">
<head> <!--通常放置网页的相关信息例如<title>、<meta>这些信息通常不会直接显示在网页上-->
<meta charset="UTF-8"> <!--meta标记用来描述网页，有利于搜索引擎快速找到网站并正确分类-->
<!--meta标记的http-equiv属性:--><!--<meta http-equiv="refresh" content="10" url="">-->
<!--<meta http-equiv="set-cookie" content="">-->
<!--当conten设置的时间到期时，cookie将被删除。content值必须使用GMT时间格式-->
<!--<meta http-equiv="windows-target" content="_top">-->
<!--强制将网页显示在最高层，放置别人在在框架里显示你的网页-->
<!--meta标记的name属性:-->
<meta name="keywords" content="animal,dog,动物，狗，宠物">
<meta name="description" content="网站简要说明">
<meta name="author" content="Eileen">
<meta name="creation-date" content="GMT时间">
<title>HTML5 知识点总结</title> <!--用来说明此网页的标题，此标题会显示在浏览器标题栏中-->
</head>
<body> <!--这里方式网页的内容，这些内容将直接显示在网页上-->
<header>显示网站名称、主题或者主要信息</header>
<nav>网站的连接菜单</nav>
<article>用于定义主内容区</article>
<section>用于章节或段落</section>
<aside>用于侧边栏</aside>
<footer>位于页脚，用来放置版权声明、作者等信息</footer>
<p>段落是通过标签定义的。</p>
<br/> <!--换行-->
<pre>按照原始代码的排列方式进行显示</pre>
<blockquote>用来表示引用文字，会将标记内的文字换行并缩进</blockquote>
<hr/> <!--添加分割线-->
<h1><h2><h3><h4><h5><h6>设置段落标题的大小级数</h6></h5></h4></h3></h2></h1>
<b>这是粗体字("bold")</b><br/>
<u>这是加了下划线的字</u><br/>
<i>这是斜体字("italic")</i><br/>
So<sub>4</sub><sup>2+</sup> <!--设置上标和下标-->
<ul>
<li>凤蝶科</li>
<li>大红纹凤蝶</li>
</ul>
<ol type="A" start="" reversed> <!--<ol>标记的属性：type,start,reversed-->
<li>荷氏黄蝶</li>
<li>台湾黄蝶</li>
</ol>
<!--©<>„&半角空格-->
<h3>© < > " & </h3>
<u>Beautiful World</u><br/>
<u>Beautiful World</u>
<div align="left">李商隐 锦瑟</div>
<span>白居易 白云泉</span> <!--</div>标记之后会换行，而</span>属于行内标记-->
<img src="imges/photo.jpg" alt="这是图片" height="" width=""/>
<audio src="" autoplay></audio> <!--在<audio>标记中添加autoplay可以将音乐设置为背景音乐-->
<video src="" controls="controls"></video> <!--加入controls属性表示显示播放面板-->
<!--<video>标记支持3种影音格式：OGG、MP4、WEBM，各种浏览器对<video>标记能够支持的影音格式并不相同-->
<embed src="movie.swf" width="" height=""> <!--添加Flash动画-->
<iframe name="f1" src="" width="300" height="400" seamless></iframe> <!--使用iframe嵌入优酷视频-->
<!--
<table></table>标记的功能是声明表格的起始和结束。
<tr></tr>标记的功能是产生一行。
<td></td>标记的功能是在一列中产生一行。
<caption></caption>标记的功能是为表格加入标题。
<th></th>标记与<td>的功能相同，唯一不同的是单元格文字会以粗体字显示。<!
<td nowrap=""></td>强制单元格文字不换行。
colspan和rowspan属性是<td>标记才有的属性
-->
<table border="1" width="200">
<caption>合并左右列</caption>
<tr>
<td colspan="2">合并左右单元格</td>
</tr>
<tr>
<td>左列</td>
<td>右列</td>
</tr>
</table>
<table border="1">
<caption>合并上下行</caption>
<tr>
<td rowspan="2">合并上下单元格</td>
<td>上</td>
</tr>
<tr>
<td>下</td>
</tr>
</table>
<form method="post" action=""> <!--表单开始-->
账号：<input type="text" name="user_name"/><br/> <!--文字域-->
账号：<input type="text" name="password"/><br/> <!--文字域-->
<input type="submit" value="提交"/> <!--提交按钮-->
<input type="reset" value="取消"/> <!--取消按钮-->
</form> <!--表单结束-->
<form method="post" action="" ></form>
<!--<form></form>标记就像一个容器，其中会放置各种表单组件-->
<!-- method="post get"
action:用来指出发送的目的地
enctype="application/x-www-form-urlencoded multipart/form-data text/plain"
target="_blank _self _parent _top 框架名称"
autocomplete="off on"
-->
<input type="text" name="username" value="guest" size="10" maxlength="10" autofocus/><br/>
<textarea name="memo" clos="20" rows="4" wrap="virtual">多行文本框</textarea><br/>
<input type="password" name="T1" size="20"/><br/>
<input type="date" name="selectdate"/><br/> <!--HTML5新功能，目前IE不支持-->
<input type="number" name="setnumber" value="5" min="3" max="20"/><br/> <!--HTML5新功能，目前IE不支持-->
<input type="color" name="selectcolor" value="#ff00ff"/><br/> <!--HTML5新功能，目前IE不支持-->
<input type="range" name="selectrange" value="5" min="3" max="20"/><br/> <!--HTML5新功能，目前IE不支持-->
<input type="search" name="searchword"><br/> <!--HTML5新功能，目前IE不支持-->
<select size="1" name="sport">
<option>游泳</option>
<option>跑步</option>
</select>
<input list="browsers"/> <!--input组件-->
<datalist id="browsers"> <!--必须知道id名称-->
<option>Iternet Explorer</option>
<option>Firefox</option>
</datalist>
<form method="post" action="">
<input type="radio" name="gender" value="男" checked />男生
<input type="radio" name="gender" value="女" checked />女生
</form>
<form method="post" action="">
<input type="checkbox" name="interest" value="运动" checked />运动
<input type="checkbox" name="interest" value="看电影" />看电影
<input type="checkbox" name="interest" value="上网" checked/>看电影
</form>
<form method="post" action="">
请输入账号密码<br/>
账号：<input type="text" name="username" size="20" /><br/>
账号：<input type="password" name="password" size="20" /><br/>
<input type="submit" value="提交">
<input type="reset" value="重填">
<input type="button" value="回上页" onclick="javascript:history.back();">
</form>
<fieldset>
<legend>分组标题</legend>
分组内容
</fieldset>
<a href="index.htm" target="_top"></a>
<a href="abc@mail.com">写信给版主</a> <!--如果收件人不止一个，可以用分号(;)分区-->
<a href="abc@mail.com?subject=我的意见">写信给版主</a> <!--为了让浏览在更加省事，可以事先设置好主题-->
<a href="abc@mail.com?cc=abcd@mail.com">写信给版主</a> <!--邮件抄送："?cc=抄送的邮件账号"-->
<a href="abc@mail.com?bcc=abcd@mail.com">写信给版主</a> <!--密件抄送："?bcc=密件抄送的邮件账号"-->
<a href="abc@mail.com?body=我要参加...">写信给版主</a> <!--邮件正文文字："?body=文字内容"-->
<a href="abc.zip">下载</a>
</body>
</html>
