读《HTML5与CSS3权威指南（上册）》笔记
第二章
1.内容类型：“text/html”。DOCTYPE声明：<!DOCTYPE html>。指定字符编码：<meta charset="utf-8">
2.不允许写结束标记的元素有：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
可以省略结束标记的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,body,tfoot,tr,td,th
可以省略全部标记的元素有：html,head,body,colgroup,tbody
3.具有boolean值得属性，当只写属性而不指定属性值时，表示属性值为true；如果要想将属性值设为false，可以不使用该属性。另外，要想将属性值设为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。
<!-- 只写属性不写属性值代表属性为true --> <input type="checkbox" checked> <!-- 不写属性代表属性为false --> <input type="checkbox"> <!-- 属性值=属性名，代表属性为true --> <input type="checkbox" check="checked"> <!-- 属性值=空字符串，代表属性为true --> <input type="checkbox" check="">
4.HTML5中，指定属性值时，可以省略引号。
5.新增元素：<section>...</section> <article>...</article> <aside>...</aside> <header>...</header> <hgroup>...</hgroup>
<footer>...</footer> <nav>...</nav> <figure>...</figure>
<video src="movie.ogg" controls="controls">video元素定义视频</video> <audio src="some.wav">audio元素定义音频</audio> <!-- embed元素用来插入各种多媒体，格式可以是Midi，Wav,AIFF,AU,MP3等 --> <embed src="horse.wav"> <mark>高亮显示文字</mark> <progress>表示运行中的进程</progress> <meter>表度量</meter> <time>表示时间</time> <ruby>ruby注释</ruby> <wbr>软换行，浏览器窗口宽度不够时，主动换行 <canvas id="maCanvas" width="200" height="200">表示图形</canvas> <command onclick=cut() label="cut">表示命令按钮</command> <details>表示详细信息</details> <datalist>表示可选数据列表，与input配合使用，可以制作出输入值的下拉列表</datalist> <datagrid>表示可选数据列表，以树形列表的形式来显示</datagrid> <keygen>表示生成密钥 <output>表示不同类型的输出</output> <source>定义媒介资源 <menu>表示菜单列表</menu>
6.新增input类型：email,url,number,range,Date Pickers
7.新增全局属性：contentEditable属性，designMode属性，hidden属性，spellcheck属性，tabindex属性。
第三章
1.putdate属性：是一个可选的，boolean值的属性，它可以用到article元素中的time元素上，意思是time元素代表了文章或整个网页的发布时间。
第四章
1.新增属性：表单内元素的form属性；表单元素的formaction属性；表单内元素的formmethod属性；表单内元素的formenctype属性；表单内元素的formtarget属性；表单内元素的autofocu属性；表单内元素的required属性；表单内元素的labels属性；标签的control属性；文本框的placeholder属性；文本框的list属性；文本框的autocomplete属性；文本框的SelectionDirection属性；复选框的indeterminate属性；image提交按钮的height属性与width属性；textarea元素的maxlength属性与wrap属性。
<!-- 表单内元素的form属性； --> <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> <hr> <!-- 表单元素的formaction属性； --> <form id="testform" action="serve.jsp"> <input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1 <input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2 <input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s3 </form> <hr> <!-- 表单内元素的formmethod属性；指定不同的提交方法--> <form id="testform" action="serve.jsp"> 姓名：<input type="text" name="name"/><br/> <input type="submit" value="post方式提交" formmethod="post"> <input type="submit" value="get方式提交" formmethod="get"> </form> <hr> <!-- 表单内元素的formenctype属性；指定在表单发送到服务器之前应该如何对表单内的数据进行编码 --> <form action="serve.jsp" method="post"> <input type="text" name="name" value="test"/><br/> 文件：<input type="file" name="files"> <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data"> <input type="submit" value="提交"> </form> <hr> <!-- 表单内元素的formtarget属性；指定在何处打开表单提交后所需要加载的页面 --> <form id="testform" action="serve.jsp"> <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1 <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">提交到s1 </form> <hr> <!-- 表单内元素的autofocus属性；自动获得光标焦点 --> <input type="text" autofocus> <hr> <!-- 表单内元素的required属性；验证提交内容是否为空 --> <hr> <!-- 表单内元素的labels属性； --> <hr> <!-- 标签的control属性； --> <hr> <!-- 文本框的placeholder属性； --> <input type="text" placeholder="input me"> <hr> <!-- 文本框的list属性； --> text：<input type="text" name="greeting" list="greetings"> <datalist id="greetings" style="display:none;"> <option value="good morning">good morning</option> <option value="hello">hello</option> <option value="good afternoon">good afternoon</option> </datalist> <hr> <!-- 文本框的autocomplete属性； --> <input type="text" name="greeting" autocomplete="on" list="greetings"> <hr> <!-- 文本框的pattern属性 --> <form> 请输入指定格式的内容：<input pattern="[0-9][a-z]{3}"> <input type="submit"> </form> <hr> <!-- 文本框的SelectionDirection属性； --> <form> <input type="test" name="text"> <input type="button" value="点击我" onclick="AlertSelectionDirection()"> </form> <script type="text/javascript"> function AlertSelectionDirection(){ var controls=document.form[0]['text']; var Directon=control.selectionDirection; alert(Direction); } </script> <hr> <!-- 复选框的indeterminate属性； --> <hr> <!-- image提交按钮的height属性与width属性； --> <form action="test.aspx" method="post"> 姓名:<input type="text" name="name"> <input type="img" src="edit.gif" alt="编辑"width=23 height=23/> </form> <hr> <!-- textarea元素的maxlength属性与wrap属性。 --> <form action="test.php"method="post"> <textarea name="name" maxlength=100 row=5 wrap="hard" cols=5></textarea> <input type="submit" value="提交"> </form>
