1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
| - 注释
<html>根元素
<head>页面头部分，可以包含如下子元素
> <script>:包含Javascript脚本
> <noscript>:声明不支持Javascript脚本
> <style>
> <link>用于链接图标，css样式文件等外部资源
> <title>
> <base>指定页面中所有连接的基准路径
> <meta>定义页面元数据
> <title>页面标题
<body>页面主体部分
- <h1>到<h6>定义标题一到六
- <p>定义段落
- <br>插入一个换行
- <hr>定义水平线
- <div>定义文档中的节 ，导致换行
- <span>与<div>相似，区别是只表示一段一般性文本，不会换行
- <b>定义粗体文本
- <i>定义斜体文本
- <em>定义强调文本
- <strong>定义粗体文本，且代表重要文本
- <small>定义小号字体文本,常用于免责声明、注意事项、法路规定、版权相关
- <sup>定义上标文本
- <sub>定义下标文本
- <bdo>定义文本显示方向，dir="ltr"，dir="rtl"
- <a>元素添加超链接和锚点：
超链接：
> href:指定超链接所链接的另一个资源
> hreflang:指定超链接所链接的文档所使用的语言
> target:_self,_blank,_top,_parent,分别代表自身，新窗口，顶层框架，
父框架来装在新资源
> download：不是直接打开目标链接，用于让用户下载目标链接所指向的资源
> type:指定被链接文档的MIME类型
> media：指定目标URL所引用的媒体类型，默认值为all，指定href后此属性有效
锚点：
> <a name="test">test</a>
> <a href="anchor.html#test">定位到anchor文件中的锚点
> <a href="#test">定位到同一文档中的test锚点
- <ul>定义无序列表，只能包含<li.../>子元素
- <li>定义列表项，可以包含于<div>完全类似的内容
- <ol>定义有序列表：
> start：指定列表的其实数字，默认是第一个，如1、和A
> type：指定使用哪种类型的编号，1代表使用数字，A和a分别代表使用大写或小写字母，
I或i代 表大写或小写罗马数字
- <dl>定义术语列表，只能包含<dt>和<dd>两种子元素
- <dt>定义标题
- <dd>定义解释
- <img>添加图片，可以使用usemap属性添加图片映射
> src:该属性指定文件所在位置，可以是相对路径，也可以是绝对路径
> alt:指定一段文本，作为图片还没有加载出来时的提示信息
> height:指定图片高度，可以是百分比，也可以是像素值（px）
> width:指定图片宽度，可以是百分比，也可以是像素值（px）
- <map>定义图片映射，主要可以包含一个或多个<area>子元素，每个area子元素定义一个区域，
不同区域可以 连接到不同的URL
- <area>定义图片映射的内部区域：
> shape：指定内部区域是那种区域，默认是“rect”,矩形区域；circle，圆形；ploy，多边形
> coords:指定多个坐标值，用于确定区域位置
> href
> alt
> trget
- <table>定义表格，只能包含0个或者1个(<caption>,<thead>,<tfoot>),多个<tr>,<tbody
> cellpadding:指定单元格内容和单元格边框之间的距离，属性值可以是像素（px）,
也可以是百分比
> cellspacing:指定单元格之间的距离，属性值可以是像素（px）,也可以是百分比
> width:指定表格宽度，属性值可以是像素（px）,也可以是百分
- <caption>用于定义表格标题
- <tr>定义表格行，只能指定<td><th>两种子元素
- <td>定义单元格，与<div>类似，可以再包含一个<table>元素
> colspan:指定单元格夸多少列
> rowspan:指定单元格夸多少行
> height:指定单元格高度，属性值可以是像素（px）,也可以是百分
> width：指定单元格宽度，属性值可以是像素（px）,也可以是百分
- <th>定义表格的表头元素，显示加粗字体
- <thead>定义表格头
- <tfoot>定义表格脚
- <tbody>定义表格主体，只能包含多个<tr>
使用方法：
> <thead>,<tfoot>,<tbody>
- <iframe>
> src:指定一个URL，指定iframe将装在哪个页面
> name:设置iframe的名字
> longdesc:指定一个页面的URL，包含了关于该iframe的长描述
> scrolling:设置滚动条，该属性支持yes,no,auto
> height:设置iframe高度
> width：设置iframe宽度
> frameborder:设置iframe边框
> marginheight：设置iframe顶部和底部的页边距
> marginwidth：设置iframe左侧和右侧的页边距
- id属性用于为HTML元素指定唯一标识,使用JS编程时可通过该属性
来获取元素<document.getElementById(id)>
- style属性用于为HTML元素指定CSS样式
- class属性用于匹配CSS样式的class选择器
- dir属性对齐方式 dir="ltr":左对齐 dir="rtl"右对齐
- title属性显示元素指定额外信息，当用户把鼠标移动到该元素上面时，
浏览器将会显示title属性所制定的信息
> 例：<div title="测试专用">测试</div>
- contentEditable属性可以指定开发者直接编辑HTML元素的内容，属性值true，false
> contentEditable属性具有可继承的特点：如果一个元素的父元素时“可编辑的”，
那么它默认也是可编辑的，除非指定contentEditable=“false”
> 当用户编辑完成后，用户编辑的内容就会直接显示在该页面中，一旦刷新，
编辑的内容就会消失，开发者可以通过元素的innerHTML属性来获取编辑后的内容
- iscontentEditable属性指定当该元素处于可编辑状态时，返回true，否则返回false
- designMode属性相当于是一个全局属性，如果把整个页面的designMode属性设置为on,
则该页面上所有支持contentEditable的元素都变成可编辑状态，designMode属性默认为off
- hidden属性支持true和false两个属性值，一旦把某个元素的hidden设为true，
就意味着浏览器不在显示该组件，夜不会保留该组件所占的空间
> 例：<div id="target" hidden="true style="heiget:80px">测试专用</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!getfet.hidden;">显示/隐藏</button>
- <section>该元素用于对页面内容进行分块
- <link>用于链接图标，css样式文件等外部资源
> href
> hreflang
> media:所链接的资源仅适用哪些设备
> rel:设置文档与所链接资源的关系
> size：指定图标的大小，仅当rel为icon是该属性才有效
> type
举例应用：
> 引入CSS样式单：<link href="outer.css" rel="stylesheet" type="type/css" />
> 设置图标：<link href="java.ico" rel="shortcut icon" type="image/x-icon" />
- <base>空元素，指定页面中所有连接的基准路径
> href:指定所链接的基准路径
> target
举例应用:<head><base href="http://www.baidu.com"></head>
<body><a href="index.php">base</a></body>
- draggable属性：（1）如果希望把某个元素可拖动，只需要把该元素的**draggable**属性
设置为true即可，只是简单的拖动，并没有携带数据，因此看不到拖动的效果。
（2）为了让拖动能携带数据，应该为被拖动的元素的**ondragstart**事件指定监听器,
在该监听器中让拖动操作可携带数据。（3）为了让document可以接收放，应该为document
的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为
（默认不接受放）。（4）不同浏览器对拖放操作的默认动作是不同的，如果希望取消
拖放操作的默认动作，可以对document的ondrop事件绑定监听器。示例如下：
> <div id="source" style="width:80px;height:80px;
border:1px;solid black;
background-color:#bbb;"
draggable="true">可拖动的div</div>
<script type="text/javascript">
var source=document.getElementById("source");
source.ondragstart=function(evt)
{
evt.dataTransfer.setData("text","可拖动的div");
}
document.ondragover=function(evt)
{
return false;
}
document.ondrop=function(evt)
{
source.style.position="absolute";
source.style.left=evt.pageX+"px";
source.style.top=evt.pageY+"px";
return false;
}
</script>
- <form>用于生成表单，该元素不会生成可视化部分,默认使用**get**方式
> action：指定当提交表单时，表单被提交到哪个地址，可以是相对路径，也可以是绝对路径，
必填
> method：指定提交表单时发送何种类型的请求，属性值get和post，通常建议发送post请求，
必填
> name:指定表单唯一名称，建议与id保持一致
> target
> enctype:指定对表单内容进行编码所使用的字符集
- <input>空元素，有value属性
> 单行文本框：type="text"
> 密码框：type="password"
> 隐藏框：type="hidden"
> 单选框：type="radio"
> 复选框：type="checkbox"
> 图像域：type="image"时，<input>可以指定width和height属性
> 文件上传域：type="file"
> 提交：type="submit"
> 重设：type="resrt"
> 无动作：type="button
> checked:支持Boolean值，设置单选框、复选框初始状态是否处于选中状态
> disabled:支持Boolean值，表示该元素被禁用
> maxlength：是一个数字，表示文本框中所允许输入的最大字数
> readonly：支持Boolean值，指定该文本框的内容不容许用户修改
> size：属性值是一个数字，指定该元素的宽度，type=hidden时该属性没有意义
> src:指定图像域所显示图像的URL
> width：指定图像域所显示图像的宽度
> height：指定图像域所显示图像的高度
- <label>用于在表单元素中定义标签，让标签和表单控件关联起来有两种方式：
> 隐式使用for属性：指定<label>元素的for属性值为所关联表单控件的id属性值，例:
<label for="id">单行文本框：</label>
<input id="id" name="id" type="text" />
> 显示关联：将普通文本，表单控件一起放在<label>元素内，例：
<label>密码：<input type="password" /></label>
- <button>定义一个按钮，可以包含文本和图片
> disabled
> name
> type:属性值：submit reset button
> value:指定按钮的初始值
- <select>创建列表框和下拉菜单，该元素必须和<option>组合使用，每个<option>元素
代表一个列表项或菜单项，<select>只能包含<option>或者<optgroup>
> disabled:禁止使用该列表项和下拉菜单，属性值只能是disabled或者省略
> multiple：支持Boolean值，一旦设置多选，<select>自动生成列表框
> size：指定列表框内同时显示多少个列表项，一旦设置该属性，
<select>自动生成列表框
- <option>定义列表框选项或菜单项
> disabled:禁止使用，属性值只能是disabled或者省略
> selected：列表项初始状态是否处于被选中状态，属性值只能是selected
> value：选项对应的请求参数
- <optgroup>定义列表项或菜单项组，只能包含<option>元素
> label：指定选项组的标签，必填，例:
<optgroup label="其他图书"></outgroup
> disabled
-<textarea>生成多行文本域
> cols:指定文本域的宽度，必填
> rows指定文本域的高度，必填
> disabled
> readonly：只读，属性值只能是readonly
> maxlength：设置最多可输入的字符数
> wrap：指定多换文本域是否添加换行符，soft和hard两个属性值，设为hard时，
必须指定cols属性，字符超过cols时，自动换行，提交时在换行出自动添加换行符
<form action="#" method="get">
下面是简单下拉菜单：<br />
<select id="skills" name="skills" multiple>
<option value="java">java语言</option>
<option value="c">C语言</option>
<option value="ruby">ruby语言</option>
</select><br/><br/><br/>
下面是允许多选的列表框：<br/>
<select id="books" name="books"
multiple="multiple" size="4">
<option value="java">疯狂Java讲义</option>
<option value="android">疯狂安卓讲义</option>
<option value="ee">ee实战</option>
</select><br />
下面是允许多选的列表框：<br/>
<select id="leegang" name="leegang"
multiple size="6">
<optgroup label="疯狂JAVA图书">
<option value="java">疯狂Java讲义</option>
<option value="android">疯狂安卓讲义</option>
<option value="ee">ee实战</option>
</optgroup>
<optgroup label="其他图书">
<option value="struts">struts 指南</option>
<option value="ror">ror开发</option>
</optgroup>
</select><br/>
<button type="submit"><p>提交</p></button><br/>
<br/><br/><br/>
简单多行文本域：<br/>
<textarea name="txt1" cols="20" row="2"></textarea><br/>
zhiduode:<br/>
<textarea name="txt2" cols="28" row="4" readonly>fejifjeofjdkl
djlsdkfjeoifdlka</textarea><br/>
<button type="submit"><p>提交</p></button><br/>
</form>
- <fieldset>用于对表单内表单元素进行分组，一组的有特殊边界效果
> name
> form属性值必须是一个有效的<form>元素的id，用于指定<fieldset>元素属于哪个表单
> disabled
- <legend>放在<fieldset>元素内，为<fieldset>元素设置标题，例：
<fieldset name="name7">
<legend>简答题</legend>
<ol style="1" start="1">
<b><li><span><i>你的梦想是什么？：</i></span></li></b<br/>
<textarea name="txt1" cols="20" row="2"></textarea><br/>
<b><li><span><i>以《我最敬佩的人》写一篇作文：</i></span></li></b<br/>
<textarea name="txt2" cols="20" row="2"></textarea><br/>
</ol>
</fieldset>
-form属性：通过为表单控件指定form属性，可以让表单控件在<form>元素之外，从而提高灵活性
form的属性值为<form>元素的id值
- formaction属性：指定用于提交的不同的URL，例：
<input type="submit" value="注册" formaction="logon.html"/>
<input type="submit" value="开始游戏" formaction="playgame.html"/>
这两个不同按钮会将网页提交到不同的URL
- forxxx属性，自行百度
- autofocus属性：自动获得焦点，打开控件时只能有一个控件或得焦点，
所以整个页面上只能有一个表单元元素设置次属性，例：
<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />
- placeholder属性：产生提示信息，例：
<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />
- list属性：文本框与下拉菜单结合的组件，该组件既允许用户输入，也允许用户通过下拉菜单
选择，list属性值应该是一个<datalist>元素的id，list属性必须和<datalist>元素一起使用
例：<form method="post" action="buy">
请输入图书：<input name="name1" type="text" list="books1"/><p>
<input type="submit" value="购买" />
</form>
<datalist id="books1">
<option value="java">疯狂Java讲义</option>
<option value="android">疯狂安卓讲义</option>
<option value="ee">ee实战</option>
</datalist>
</form>
- autocomplete属性设置表单是否支持自动完成功能，会根据你的输入记录自动进行提示，
属性值on或者off
- label的control属性：用于在Javascript脚本中访问该<label>元素所关联的表单元素，例：
<form action="pro.action" method="post" autocomplete="on">
<label id="nameLB">姓名：
<input type="text" name="name2"/></label><p>
<input type="submit" value="提交"/>
<input type="button" value="重设"
onclick="document.getElementById('nameLB').control.value='crazy';"/>
</form>
- labels：自行百度
- 文本框的selectionDirection属性
> 正向选取文字时，selectionDirection属性返回forward
> 反向选取文字时，selectionDirection属性返回backward
> 没有选取时，返回上一次的值
> 从未选取时，返回forward
例：<form action="pro.action" method="post" autocomplete="on">
<label id="nameLb">姓名：
<input type="text" name="name3"/></label><p>
<input type="submit"/>
<input type="button" value="获取"
onclick="alert(document.getElementById('nameLb').control.selectionDirection);"/>
</form>
- 复选框的indeterminate属性：true和false两个属性值，在JS中判断一个复选框的checked属性之前，
需要先判断indeterminate属性是否为false，只有indeterminate属性为false是判断checked状态才有效
例：<form action="pro.action" method="post" autocomplete="on">
<label id="colorLb">红色：
<input type="checkbox" name="color"/></label><p>
<input type="button" value="设置"
onclick="document.getElementById('colorLb').control.indeterminate=true;"/>
<input type="button" value="获取"
onclick="alert(document.getElementById('colorLb').control.indeterminate);"/>
</form>
- 功能丰富的input元素
例：<form action="do" method="post">
请选择你喜欢的颜色：<br/><input name="color" type="color"/><p>
请输入您的出生日期：<br/><input name="date " type="date"/><p>
出生日期精确到秒：<br/><input name="time" type="time"/><p>
请确认出生日期：<br/><input name="datetime-local" type="datetime-local"/><p>
请选择这是几月：<br/><input name="month" type="month"/><p>
请选择这是第几周：<br/><input name="week" type="week"/><p>
请输入你的email：<br/><input name="email" type="email" multiple /><p>
请输入您的电话：<br/><input name="tel" type="tel"/><p>
请输入您的URL：<br/><input name="url" type="url"/><p>
请输入您的幸运数字：<br/><input name="number" type="number" min="0" max="100" step="5" /><p>
这是一个拖动条：<br/><input name="range" type="range" min="0" max="100" step="5" /><p>
这是一个搜索框：<br/><input name="search" type="search"/><p>
<label>用户名:<input id="name" name="name" type="text" autofocus /></label><br /><br />
<label for="username">密码:</label>
<input id="username" name="username" type="text" /><br />
<input value="提交" type="submit" formaction="苑飞.html" />
</form>
- <output>显示输出
- <meter>计数仪表
- <progress>进度条
- 校验属性，自行百度
- <audio>音频
- <video>视频
|