帮助文档测试:
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 | 定义作为客户端图像映射的一幅图像。请参阅 和 标签,了解其工作原理。 |
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 | 定义 应当横跨的列数。 | 4 | 5 |
valign | top middle bottom baseline | 定义列中的单元格内容的垂直对齐方式。 | 4 | |
width | % pixels relative_length | 定义列的宽度。 | 4 |
十: 短语记录:
以下元素都是短语元素. 并不返回使用它们, 但是通过使用样式表, 可能取得更丰富的效果.
<em> | 呈现为被强调的文本。 |
---|---|
<strong> | 定义重要的文本。 |
<dfn> | 定义一个定义项目。 |
<code> | 定义计算机代码文本。 |
<samp> | 定义样本文本。 |
<kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var> | 定义变量。您可以将此标签与 及 标签配合使用。 |
<cite> | 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。 |
- <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>
- <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)>
- <!-- 简单初步验证 -->
- <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>
<div> <label for="nan1">男</label> <input type="checkbox" id="nan" /> <label for="nv">女</label> <input type="checkbox" id="nv" /> </div>
<!--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>
<!-- 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>
<p> This is a paragraph <span style="color:#00ff00;"> This is a paragraph </span> This is a paragraph </p>
<script type="text/javascript"> document.write("Hello World!") </script>
<progress> <span id="objprogress"> 85 </span> % </progress> <!-- 对象下载或者加载的进程 -->
<nav> <a href="index.htm">w3school 在线教程</a> <a href="html5_meter.htm">上一页</a> <a href="html5_nest.htm">下一页</a> </nav>
<!-- 插入图片时要在 < img > 标记中设置参数 usemap="# 图的名称" ismap, 以表示对图像地图 (图的名称) 的引用;--> <map name="图的名称"> ? <!-- 用 < map > 标记设定图像地图的作用区域, 并用 name 属性爲图像起一个名字 --> <area shape = 形状 coords = 区域座标列表 href="URL 资源地址">
<area shape = 形状 coords = 区域座标列表 href="URL 资源地址"> </map>
<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>
来源: http://www.bubuko.com/infodetail-3716891.html