帮助文档测试:
一: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>标签:嵌入插件等内容
提示:您无法在开始标签和结束标签之间写文本,来说明旧式的浏览器不支持该标签,就像 <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.width:框架作为一个普通元素的宽度,建议使用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>