帮助文档测试：
一：a标签：
target属性：
1.._blank <a href="document.html" target="_blank">my document</a> • 浏览器会另开一个新窗口显示document.html文档 • 2._parent <a href="document.html" target="_parent">my document</a> • 指向父frameset文档 • 3._self <a href="document.html" target="_self">my document</a> • 把文档调入当前页框 • 4._top <a href="document.html" target="_top">my document</a> • 去掉所有页框并用document.html取代frameset文档
rel属性：没啥用
<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。 用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。 <a href="part_12.html" rel="next" rev="prev">
| chapter | 文档的章。 |
|---|---|
| section | 文档的节。 |
| prev | 集合中的前一个文档。 |
| stylesheet | 文档的外部样式表。 |
| start | 集合中的第一个文档。 |
| next | 集合中的下一个文档。 |
二：img属性：
| alt | text | 定义有关图形的短的描述。 |
|---|---|---|
| src | URL | 要显示的图像的 URL。 |
| align | top bottom middle left right | 规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。 |
| border | pixels | 定义图像周围的边框。不支持。请使用 CSS 代替。 |
| height | pixels % | 定义图像的高度。 |
| ismap | URL | 把图像定义为服务器端的图像映射。 |
| longdesc | URL | 一个 URL，指向了描述该图像的文档。不支持。 |
| usemap | URL | 定义作为客户端图像映射的一幅图像。请参阅 <map> 和 <area> 标签，了解其工作原理。 |
| width | pixels % | 设置图像的宽度。 |
附加：base：(可以设置两个参数，一个是href，一个是target)
<!--在head头中附加base约束，<base> 标签，规定页面中所有链接的基准 url--> <head> <base href="http://www.w3school.com.cn/i/" /> </head> <body><img src="pic.gif" /></body>
三：area属性：（用到再说吧）
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" /> </map>
三点五TextArea属性
定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。
<textarea rows="3" cols="30"> 这里是文本域中的文本 ... ... ... ... </textarea>
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | true false | 在页面加载时，使这个 textarea 获得焦点。 |
| cols | number | 规定文本区内可见的列数。 |
| disabled | true false | 当此文本区首次加载时禁用此文本区。 |
| form | true false | 定义该 textarea 所属的一个或多个表单。 |
| inputmode | inputmode | 定义该 textarea 所期望的输入类型。 |
| name | name_of_textarea | 为此文本区规定的一个名称。 |
| readonly | true false | 指示用户无法修改文本区内的内容。 |
| required | true false | 定义为了提交该表单，该 textarea 的值是否是必需的。 |
| rows | number | 规定文本区内可见的行数。 |
四：aside
<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
五：audio和video（播放音频或者视频）
<audio src="../audio/生番（刘悦spam） - I Can Find Love (Live).mp3" autoplay controls onplay="this.currentTime=5">开始按钮</audio> <video src="..hanxiao.xizao"></video>
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | true | false | 如果是 true，则音频在就绪后马上播放。 |
| controls | true | false | 如果是 true，则向用户显示控件，比如播放按钮。 |
| end | numeric value | 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。 |
| loopend | numeric value | 定义在音频流中循环播放停止的位置，默认是 end 属性的值。 |
| loopstart | numeric value | 定义在音频流中循环播放的开始位置。默认是 start 属性的值。 |
| playcount | numeric value | 定义音频片断播放多少次。默认是 1。 |
| src | url | 所播放音频的 url。 |
| start | numeric value | 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。 |
重点注意：为了解决浏览器匹配问题：使用source来进行浏览器匹配，将同意生源的两种适配都填入到audio
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
六：bdo从右往左输出文本（dir）
<bdo dir="rtl">Here is some text</bdo>
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| dir | ltr rtl | 必需。定义文本方向。 | 4 | 5 |
七：blockquote使用引用
<blockquote>帝国主义都是纸老虎 ... </blockquote>
八：canvas（画图工具）在js当中重点学习
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 设置 canvas 的高度。 |
| width | pixels | 设置 canvas 的宽度。 |
<script type="text/javascript"> function drawCanvas() { var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); } </script> ... <canvas id="myCanvas"> your browser does not support the canvas tag </canvas>
九：表格：table（th，tr，td）
th：头行，tr：行，td：单元格的内容
<col style="color:blue" /> <col span="2" style="color:yellow" /> <colgroup span="3" style="color:blue"></colgroup> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table>
col和colgroup的一些用法：
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| align | right left center justify char | 定义列中的单元格内容的水平对齐方式。 | 4 | |
| char | character | 定义一个字符，按照该字符对齐文本。 与 align="char" 使用。 | 4 | |
| charoff | pixels % | 规定第一个对齐字符的偏移量。 | 4 | |
| span | number | 定义 <col> 应当横跨的列数。 | 4 | 5 |
| valign | top middle bottom baseline | 定义列中的单元格内容的垂直对齐方式。 | 4 | |
| width | % pixels relative_length | 定义列的宽度。 | 4 |
十：短语记录：
以下元素都是短语元素。并不返回使用它们，但是通过使用样式表，可能取得更丰富的效果。
| <em> | 呈现为被强调的文本。 |
|---|---|
| <strong> | 定义重要的文本。 |
| <dfn> | 定义一个定义项目。 |
| <code> | 定义计算机代码文本。 |
| <samp> | 定义样本文本。 |
| <kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
| <var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
| <cite> | 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。 |
十一：<embed>标签：嵌入插件等内容
标签必须有 src 属性。
提示：您无法在开始标签和结束标签之间写文本，来说明旧式的浏览器不支持该标签，就像 <audio> 和 <video>。
<embed src="horse.wav" />
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 设置嵌入内容的高度。 |
| src | url | 嵌入内容的 URL。 |
| type | type | 定义嵌入内容的类型。 |
| width | pixels | 设置嵌入内容的宽度。 |
扩展：<event-source>：由服务器发送事件的来源
十二：表单内容：form
1.基础语法：
<form action="demo1.html" method="POST"> <p>姓名：<input type="text" name="name" ></p> <p>密码：<input type="password" name="password"></p> <p> <input type= "button" value="想提交嘛"> <input type="reset" value="信不信让你重新填写"> </p> <p> <input type="radio"(单选按钮框) name="无所谓" value="男"(值) checked/>男<br/> <input type="checkbox" name="checkbox">吃 <input type="checkbox" name="checkbox" checked>喝 <input type="checkbox" name="checkbox">玩 </p> <!--单选列表（这个感觉会经常用）--> <select name="like" id="like_range" > <option value="2">十分的一般喜欢</option> <option value="1" selected>十分喜欢</option><!--注意这里是selected--> <option value="3">不喜欢才怪呢</option> </select> <!--文本域（有很多文字需要提交或者书写的时候这样子搞）--> <div id="area"> <TextArea rows="20" cols="30"> 填入信息： </TextArea> </div> <!--更加高级的一些操作--> <div> <p>邮箱:<input type="email"（邮箱） name="email"/></p> <p>请输入你的网址:<input type="url"（网址） name="userUrl"/></p> <p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p> </div>
| 属性 | 值 | 描述 |
|---|---|---|
| accept | list_of_mime_types | 一个逗号分隔的 MIME 类型列表，指示文件传输的 MIME 类型。注释：仅可与 type="file" 配合使用。 |
| align | left right top texttop middle absmiddle baseline bottom absbottom | 定义图像之后的文本对齐方式。 不支持，请使用 CSS 代替。 |
| alt | text | 定义图像的替代文本。 注释：仅可与 type="image" 配合使用。 |
| autocomplete | ||
| autofocus | true false | 当页面加载时，使输入字段获得焦点。 注释：type="hidden" 时，无法使用。 |
| checked | true false | 指示此 input 元素首次加载时应当被选中。 注释：请与 type="checkbox" 及 type="radio" 配合使用。 |
| disabled | true false | 当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。 注释：不能与 type="hidden" 一同使用。 |
| form | true false | 定义输入字段属于一个或多个表单。 |
| inputmode | inputmode | 定义预期的输入类型。 |
| list | id of a datalist | 引用 datalist 元素。如果定义，则一个下拉列表可用于向输入字段插入值。 |
| max | number | 输入字段的最大值。 |
| maxlength | number | 定义文本域中所允许的字符最大数目。 |
| min | number | 输入字段的最小值。 |
| name | field_name | 为 input 元素定义唯一的名称。 |
| pattern | ||
| readonly | readonly | 指示是否可修改该字段的值。 |
| replace | text | 定义当表单提交时如何处理该输入字段。 |
| required | true false | 定义输入字段的值是否是必需的。 当使用下列类型时无法使用：hidden, image, button, submit, reset |
| size | number_of_char | 定义 input 元素的大小。不再支持。 |
| src | URL | 定义要显示的图像的 URL。 仅用于 type="image" 时。 |
| step | ||
| template | template | 定义一个或多个模板。 |
| type | button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week | 指示 input 元素的类型。 默认值是 "text" 注释：该属性不是必需的。但是我们认为应该使用它。 |
| value | value | 对于按钮、重置按钮和确认按钮：定义按钮上的文本。 对于图像按钮：定义传递向某个脚本的此域的符号结果。 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏域、密码域以及文本域：定义元素的默认值。 注释：不能与 type="file" 一同使用。 注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。 |
2.一些高级用法：
<input type="hidden"(隐藏域) value="666" name="userid"><!--隐藏域-语法--> <input name="name" type="text" value="张三" readonly(只读文本框)><!--只读和禁用-语法--> <input type="submit " disabled （禁用） value="保存" > <!--表单元素的标注 1.增强鼠标的可用性 2.自动将焦点转移到与该标注相关的表单元素上--> <label for="id"(表单元素的id)>标注的文本</label> <input type="radio" name="gender" id="male"/(表单元素id)>
3.表单的一些初级验证：
表单初级验证的方 ：1.placeholder、2.required、3.pattern
<!--简单初步验证--> <div> <!--placeholder验证： 1.input类型的文本框提供一种提示（hint） 2.可以描述文本框期待用户输入何种内容 3.提示语默认显示，当文本框中输入内容时提示语消失 4.适合于input标签：text、search、url、email和password等类型 5.解释：也就是在框内有灰暗的字，一旦输入九没有了 --> <input type="search" name="search1" placeholder="X"/> <!--required:必须要填写--> <input type="text" required value="必须填写"/> <!--pattern:正则表达式匹配--> <input type="text" required pattern="^1[358]d{9}"/> </div>
十三：一个划分神器：hr（是个单标签，和br一样）
十四：Label元素
label标签的for属性的效果就是，鼠标点击“女”实现radio选中的效果，主要 归功于for=nv 而且必须要求input文本框的id也等于nv，男这个radio作对比，没有这个效果
<div> <label for="nan1">男</label> <input type="checkbox" id="nan" /> <label for="nv">女</label> <input type="checkbox" id="nv" /> </div>
注意：也就是点击范围变成Label+id指向的值了
十五：重点：：：：iframe网页嵌套
<!--iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src：内框架的地址，可以使页面地址，也可以是图片的地址。 7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用 8.sandbox: 对iframe进行一些列限制，IE10+支持--> <iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>
具体操作请看：https://www.cnblogs.com/hq233/p/9849939.html
十六：menu菜单（简单列表）
<!-- li:列表每行元素 ol:有序列表：ol必须包含li，否则无效果 ul:无序列表，ul必须包含li，否则无效果 --> <menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />blue</li> <ol> <li><input type="checkbox" id="cck">1</li> <li><input type="checkbox" id="cck">2</li> </ol> <ol> <li><input type="checkbox" id="cck">3</li> </ol> </menu>
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| autosubmit | true false | 如果为 true，那么当表单控件改变时会自动提交。 | 5 | |
| compact | compact_rendering | 不支持。请使用 CSS 代替。 | 4 | |
| label | menulabel | 为菜单定义一个可见的标注。 | 5 | |
| type | context toolbar list | 定义显示那种类型的菜单。默认值是 "list"。 | 5 |
十七：link：连接外部文件
<link rel="stylesheet" type="text/css" href="c3.css" />
十八：sub、sup上标和下标
这段文本包含 <sub>下标</sub>
这段文本包含 <sup>上标</sup>
十九：span标签
<p>This is a paragraph <span style="color:#00ff00;">This is a paragraph</span> This is a paragraph</p>
这个是对文字进行一些修改，之后使用css的过程中也会经常使用
二十：section+article（就跟写文档一样）
section目的是区分块， 用来定义文档中特定的区块
十一：script使用：（之后等到复习javascript就ok）
<script type="text/javascript"> document.write("Hello World!") </script>
注意：
如果 async 属性为 true，则脚本会相对于文档的其余部分异步执行，这样脚本会可以在页面继续解析的过程中来执行。
如果 async 属性为 false，而 defer 属性为 true，则脚本会在页面完成解析时得到执行。
如果 async 和 defer 属性均为 false，那么脚本会立即执行，页面会在脚本执行完毕继续解析。
十二：progress显示进度条：可以是js脚本也可以是加载界面的进度条
<progress><span id="objprogress">85</span>%</progress> <!--对象下载或者加载的进程-->
二十三：nav：用于上一页和下一页切换（那伟）
<nav> <a href="index.htm">w3school 在线教程</a> <a href="html5_meter.htm">上一页</a> <a href="html5_nest.htm">下一页</a> </nav>
注意：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。
二十四：Map（懒得看了，直接cv了）
图像的影像地图超链接，<map>标签浅谈
在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：<img><map><area>下面分别介绍这些标签的用法：
影像地图（Image Map）标签的使用格式：
<!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称" ismap，以表示对图像地图（图的名称）的引用；--> <map name="图的名称"> <!--用<map>标记设定图像地图的作用区域，并用name属性爲图像起一个名字--> <area shape=形状 coords=区域座标列表 href="URL资源地址"> ......可根据需要定义多少个热点区域 <area shape=形状 coords=区域座标列表 href="URL资源地址"> </map>
【1】 **shape -- 定义
热点形状**
shape=rect： 矩形
shape=circle：圆形
shape=poly： 多边形
【2】coords -- 定义区域点的坐标
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
下面是一个例子
<map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
在制作本文介绍的效果时应注意的几点：
1、在<img>标记不要忘记设置usemap、ismap参数，且usemap的参数值必须与<map>标记中的name参数值相同，也就是说，“图像地图名称”要一致；
2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在<map>与</map>之间；
3、在<area>