一、HTML表单 -- form标签 -- 与浏览者交互
1、form 标签 -- 代表HTML表单
- form标签是成对出现的,以
<form>开始,以</form>结束 - 属性.
- common -- 公共属性
- action -- 浏览者输入的数据被传送到的地方，比如一个PHP页面(dreamdu.php)
action语法： url(网址)/页面?表达式1&表达式2&表达式3&... 表达式语法： 参数名称=参数值 示例： http://www.dreamdu.com/dreamdu.php?action=submit&id=5&flag=1 说明： dreamdu.php是一个php页面 ?后面是需要传递的参数 action=submit和id=5都是参数表达式 每个参数表达式使用&(位与)符号连接 当action的取值为#时，代表本页面action解析
- enctype -- 将数据发送到服务器时浏览器使用的编码类型
enctype 属性取值: application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式. multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分. text/plain -- 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符.enctype解析
- method -- HTML表单数据传送的方法
method 属性取值: get -- get信息传送方式,这种方式传递的数据量比较少,但是可以把传递的信息显示在网址上,详情见action属性 post -- post信息传送方式,此方式传送的信息比较多,而且不会把传递的信息显示在网址上method属性
- name -- 元素名称
- form，中文"表单"
1 <form id="dreamduform" method="post" action="dreamdu.php"> 2 用户名: <input type="text" id="username" name="username" /> 3 密码: <input type="password" id="pass" name="pass" /> 4 </form>
2、input 标签 -- 代表HTML表单的单行输入域
- input标签是单独出现的,
<input /> - 属性.
- common -- 公共属性
- accesskey -- 表单的快捷键访问方式
accesskey 属性 -- 代表链接的快捷键访问方式 定义了accesskey的链接可以使用快捷键(ALT+字母)访问. 主菜单与导航菜单使用accesskey,通常是不错的选择. 取值: 字母 示例： <a href="http://www.dreamdu.com/xhtml/" accesskey="h">(按住Alt键)点击键盘上的h按钮，再按回车(IE)就可以直接链接到HTML教程.</a>accesskey属性解析
- alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)
- checked -- 如果是选择型的输入域，代表已经被选择 --- (使选择型的输入域(框)被选中) ---
checked="checked" - disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用 --- (表示已经失效的输入域(框)) ---
disabled="disabled" - maxlength -- 输入域最多可以输入文字的长度
- name -- 元素名称
- readonly -- 输入域可以选择，但是无法修改 --- (表示只读(只能看到,不能修改)的输入域(框)) ---
readonly="readonly" - size -- 输入域的长度
- src -- 当使用图片来表示按钮时,代表图片的位置(URI)
- tabindex -- 输入域的"tab"键遍历顺序
tabindex 属性 -- 代表使用"Tab"键的遍历顺序 可以使用Tab键遍历页面中的所有链接与表单元素,当遍历到某个链接时, 按Enter即可.遍历时会按照tabindex的大小决定顺序 遍历到某个链接的时候,会有虚线框包围链接,这时按回车键即可进入链接的页面. 取值: 数字，范围为[1~32767] 示例： <a href="http://www.dreamdu.com/xhtml/" tabindex="1">1</a> <a href="http://www.dreamdu.com/css/" tabindex="3">3</a> <a href="http://www.dreamdu.com/xhtml/tag_a/ " tabindex="2">2</a> <!--连续按 "Tab",可以改变焦点的位置.遍历的顺序是1-2-3.-->tabindex属性解析
- type -- 输入域的显示方式(分为输入型,选择型,点击型) ---
type="text"...
1 type属性 -- 代表HTML表单,单行输入域(框)的表现方式 2 3 type 属性取值: 4 text -- 文字输入域(输入型) 5 password -- 也是文字输入域,但是输入的文字以密码符号‘*‘显示(输入型) 6 file -- 可以输入一个文件路径(输入型) 7 checkbox -- 复选框.可以选择零个或多个(选择型) 8 radio -- 单选框.只可以选择一个而且必须选择一个(选择型) 9 hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器 10 button -- 按钮(点击型) 11 image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型) 12 submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型) 13 reset -- 重置按钮,可以把表单中的信息清空(点击型) 14 type，中文"类型" 15 16 说明： 17 18 输入型包括text,password,file 19 选择型包括checkbox,radio 20 点击型包括button,image,submit,reset
type属性解析
- value -- 输入域的值
- input，中文"输入"
3、textarea 标签 -- 代表HTML表单多行输入域
- textarea标签是成对出现的,以
<textarea>开始,以</textarea>结束 - 专有属性.
- textarea，中文"文本区"
<form id="dreamduform" action="dreamdu.php" method="post">
联系我
<textarea cols="50" rows="10" id="contactus" name="contactus">可爱的蚊子</textarea>
</form>
4、select 标签 -- 单选或多选菜单
- select标签是成对出现的,以
<select>开始,以</select>结束 - 此标签中的每对
option标签代表一个选择项 - 属性.
- select，中文"选择"
- select标签创建了一个菜单。菜单里的选项通过option标签指定。一个select元素内部，必须包含一个option元素；当设置multiple属性后，菜单可多选，否则只能单选
1 <form id="dreamduform" action="dreamdu.php" method="post"> 2 你对HTML的感觉: 3 <select size="1" id="select" name="select"> 4 <option>很好</option> 5 </select> 6 7 你的爱好: 8 <select size="10" multiple="multiple" id="multipleselect" name="multipleselect[]"> 9 <option>运动</option>10 <option>看书</option>11 <option>音乐</option> 12 </select> 13 </form>
附录：
（1）option 标签 -- select菜单中的一个选项
- option标签是成对出现的,以
<option>开始,以</option>结束 - 属性.
- option，中文"选项"
（2）optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)
- optgroup标签是成对出现的,以
<optgroup>开始,以</optgroup>结束 - 属性.
- opt，是option的缩写，中文"选项"。group，中文"分组"
1 <form action="dreamdu.php" method="post" id="dreamduform"> 2 你正在学习的语言为 3 <select id="WebDesign" name="WebDesign"> 4 <optgroup label="client"> //分组显示标签 5 <option value="HTML">HTML</option> 6 <option value="CSS">CSS</option> 7 <option value="javascript">javascript</option> 8 </optgroup> 9 <optgroup label="server"> 10 <option value="PHP">PHP</option> 11 <option value="ASP">ASP</option> 12 <option value="JSP">JSP</option> 13 </optgroup> 14 <optgroup label="database"> 15 <option value="Access">Access</option> 16 <option value="MySQL">MySQL</option> 17 <option value="SQLServer">SQLServer</option> 18 </optgroup> 19 </select> 20 </form>
5、label 标签 -- 表单元素的标签说明
- label标签是成对出现的,以
<label>开始,以</label>结束 - 属性.
- label，中文"标签"
6、fieldset 标签 -- 对表单进行分组
- fieldset标签是成对出现的,以
<fieldset>开始,以</fieldset>结束 - 一个表单可以有多个
<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明 - 属性:
- Common -- 一般属性
7、legend 标签 -- 对表单的每组内容进行说明
- legend标签是成对出现的,以
<legend>开始,以</legend>结束 - 此标签在
<fieldset>标签内 - 属性:
1 <form action="dreamdu.php" method="post" id="dreamduform"> 2 <fieldset> 3 <legend>用户名与密码:</legend> 4 <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" /> 5 <label for="username">用户名:</label> 6 <input type="text" id="username" name="username" value="dreamdu" /> 7 <label for="pass">密码:</label> 8 <input type="password" id="pass" name="pass" /> 9 </fieldset> 10 </form>
二、HTML文字元素 -- 更有意义的文字显示
1、abbr 标签 -- 简称标签
- abbr标签是成对出现的,以
<abbr>开始,以</abbr>结束 - 属性:
- Common -- 一般属性
- abbr是abbreviation的缩写
- 通常简称标签abbr包括缩写标签acronym
- 简称和缩写是对一个惯用词组的缩写表示,一般使用词组中每个单词的首字母.比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一种提取首字母的缩写.有时候缩写经常会在最后加一个
..
示例：
1 <abbr title="Limited">Ltd.</abbr>
2、acronym 标签 -- 取首字母的缩写标签
- acronym标签是成对出现的,以
<acronym>开始,以</acronym>结束 - 属性:
- Common -- 一般属性
示例：
1 <acronym title="Cascading Style Sheets">CSS</acronym>
3、cite 标签 -- 引用标签
示例：
1 <cite cite="http://www.cnblogs.com/xymqx/">馬努的学习之路</cite>
4、code 标签 -- 代码标签
- code标签是成对出现的,以
<code>开始,以</code>结束 - 属性:
- Common -- 一般属性
注：PHP中的变量名,前面要加上 ‘$‘ 符号 例如: <code>$i = 1;</code>.
5、dfn 标签 -- 定义标签
- dfn标签是成对出现的,以
<dfn>开始,以</dfn>结束 - 属性:
- Common -- 一般属性
- dfn是defining instance的缩写
示例：
1 <dfn>梦之都</dfn>是一个单词,更是一种向往!
6、em 标签 -- 强调标签
- em标签是成对出现的,以
<em>开始,以</em>结束 - 属性:
- Common -- 一般属性
- em是emphasis的缩写
示例：
1 强调一下,<em>不要</em>和我开玩笑!
7、kbd 标签 -- 使用者输入的文字标签
- kbd标签是成对出现的,以
<kbd>开始,以</kbd>结束 - 属性:
- Common -- 一般属性
示例：
1 To exit, type <kbd>QUIT</kbd>.
8、l 标签 -- 语句标签
- l标签是成对出现的,以
<l>开始,以</l>结束 - 属性:
- Common -- 一般属性
- l是line of text的缩写
示例：
1 <l>一行实实在在的文字!</l>
9、q 标签 -- 行引用标签
示例：
1 <cite>古人</cite>云:<q>良言一句三冬暖,恶语伤人六月寒.</q>
10、samp 标签 -- 程序或脚本输出的内容标签
- samp标签是成对出现的,以
<samp>开始,以</samp>结束 - 属性:
- Common -- 一般属性
- samp是sample output from programs,scripts,etc的意思
示例：
1 程序的输出是<samp>x+y</samp>
11、span 标签 -- 内联行标签
- span标签是成对出现的,以
<span>开始,以</span>结束 - 属性:
- Common -- 一般属性
span表示了内联行,并无实际的意义,主要通过CSS样式(style)为其赋予不同的表现.
示例：
1 <span>一个内联行</span>
12、strong 标签 -- 重点强调标签
- strong标签是成对出现的,以
<strong>开始,以</strong>结束 - 属性:
- Common -- 一般属性
示例：
1 <strong>重点强调标签</strong>
13、sub 标签 -- 下标标签
- sub标签是成对出现的,以
<sub>开始,以</sub>结束 - 属性:
- Common -- 一般属性
- sub是subscript的缩写
14、sup 标签 -- 上标标签
- sup标签是成对出现的,以
<sup>开始,以</sup>结束 - 属性:
- Common -- 一般属性
- sup是superscript的缩写
15、var 标签 -- 程序中的变量标签
- var标签是成对出现的,以
<var>开始,以</var>结束 - 属性:
- Common -- 一般属性
- var是variable的缩写
示例：
1 变量<var>$i</var>,代表循环次数.
三、HTML字块元素 -- 字块:表示一块字,比如一个段落,一个标题等.
1、div 标签 -- 块标签
div表示一个块,并无实际的意义,可以通过CSS样式(style)为其赋予不同的表现.
示例：
1 <div>一个块</div>
2、h标签包括,h1,h2,h3,h4,h5,h6 标签 -- 文章的标题标签
- h标签是成对出现的,以
<h>开始,以</h>结束 - 属性:
- Common -- 一般属性
示例：
1 <body> 2 <h>文章的主标题</h> 3 <p>介绍</p> 4 <section> 5 <p>....</p> 6 <h>文章的二级标题</h> 7 <p>....</p> 8 <h>另一个二级标题</h> 9 <p>....</p> 10 </section> 11 <section> 12 <p>....</p> 13 <h>下一个二级标题</h> 14 <p>....</p> 15 <section> 16 <h>三级标题</h> 17 <p>....</p> 18 </section> 19 </section> 20 </body>
或： （下面六个标题标签，是从大到小顺序的，h1最大，h6最小；h1标签在一个页面中建议只使用一次）
1 <h1>标题1</h1> 2 <h2>标题2</h2> 3 <h3>标题3</h3> 4 <h4>标题4</h4> 5 <h5>标题5</h5> 6 <h6>标题6</h6>
3、p 标签 -- 段落标签,里面可以加入文字,列表,表格等
- p标签是成对出现的,以
<p>开始,以</p>结束 - 属性:
- Common -- 一般属性
- p是paragraph的缩写
示例：
1 <p>语言 2 <ul> 3 <li>C</li> 4 <li>C++</li> 5 <li>PHP</li> 6 </ul> 7 </p>
4、address 标签 -- 地址标签
- address标签是成对出现的,以
<address>开始,以</address>结束 - 属性:
- Common -- 一般属性
示例:
1 <address href="mailto:[email protected]">梦之都 webmaster</address>
5、blockcode 标签 -- 程序的代码块标签
示例：
1 <blockcode class="PHP" cite="http://www.dreamdu.com/xhtml/tag_blockcode/">
2 function dreamdu()
3 {
4 $dreamdu = "www.dreamdu.com";
5 echo $dreamdu;
6 }
7 </blockcode>
6、blockquote 标签 -- 引用块标签
示例：
1 <blockquote cite="http://www.dreamdu.com/xhtml/"> 2 <p>标准网页设计要区分内容与表现,学习标准网页设计.</p> 3 </blockquote>
7、pre 标签 -- 按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来
- pre标签是成对出现的,以
<pre>开始,以</pre>结束 - 属性:
- Common -- 一般属性
8、section 标签 -- 一般联合h标签一起使用,表示一部分
- section标签是成对出现的,以
<section>开始,以</section>结束 - 属性:
- Common -- 一般属性
9、separator 标签 -- 文档分隔符标签
- separator标签是单独出现的,
<separator /> - 属性:
- Common -- 一般属性
示例：
1 <p>www.dreamdu.com</p> 2 <separator /> 3 <p>梦之都</p> 4 5 <nl> 6 <label>网址</label> 7 <li href="http://www.dreamdu.com/">dreamdu.com</li> 8 <li><separator /></li> 9 <li href="prev">Previous</li> 10 <li href="#">Up</li> 11 <li href="next">Next</li> 12 </nl>
时间： 2024-10-06 00:12:29