HTML学习笔记——常用元素及其属性（二）

一、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，中文"表单"

 <form id="dreamduform" method="post" action="dreamdu.php">
     用户名: <input type="text" id="username" name="username" />
     密码: <input type="password" id="pass" name="pass" />
 </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" ...

      type属性 -- 代表HTML表单,单行输入域(框)的表现方式
    
         type 属性取值:
             text -- 文字输入域(输入型)
             password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
             file -- 可以输入一个文件路径(输入型)
             checkbox -- 复选框.可以选择零个或多个(选择型)
             radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
             hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
             button -- 按钮(点击型)
             image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)
             submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)
             reset -- 重置按钮,可以把表单中的信息清空(点击型)
         type，中文"类型"
    
     说明：
    
         输入型包括text,password,file
         选择型包括checkbox,radio
         点击型包括button,image,submit,reset

    type属性解析

  • value -- 输入域的值
• input，中文"输入"

---

3、textarea 标签 -- 代表HTML表单多行输入域

• textarea标签是成对出现的,以<textarea>开始,以</textarea>结束
• 专有属性.
  • common -- 公共属性
  • accesskey -- 表单的快捷键访问方式
  • cols -- 多行输入域的列数
  • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
  • name -- 元素名称
  • readonly -- 输入域可以选择，但是无法修改
  • rows -- 多行输入域的行数
  • tabindex -- 输入域的"tab"键遍历顺序
• 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标签代表一个选择项
• 属性.
  • common -- 公共属性
  • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
  • multiple -- 设置后菜单可多选，否则只能单选
  • name -- 元素名称
  • size -- 菜单的可见行数
  • tabindex -- 输入域的"tab"键遍历顺序
• select，中文"选择"

• select标签创建了一个菜单。菜单里的选项通过option标签指定。一个select元素内部，必须包含一个option元素；当设置multiple属性后，菜单可多选，否则只能单选

 <form id="dreamduform" action="dreamdu.php" method="post">
     你对HTML的感觉:
     <select size="1" id="select" name="select">
         <option>很好</option>
     </select>

     你的爱好:
     <select size="10" multiple="multiple" id="multipleselect" name="multipleselect[]">
         <option>运动</option>
　　　　　 <option>看书</option>
　　　　　 <option>音乐</option>
     </select>
 </form>

---

附录：

（1）option 标签 -- select菜单中的一个选项

• option标签是成对出现的,以<option>开始,以</option>结束
• 属性.
  • common -- 公共属性
  • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
  • label -- 选择项的短标签
  • value -- 选项的初始值，未设置时为option标签中的内容
  • selected -- 选项预先被选择
• option，中文"选项"

（2）optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)

• optgroup标签是成对出现的,以<optgroup>开始,以</optgroup>结束
• 属性.
  • common -- 公共属性
  • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
  • label -- 选项组的标签
• opt，是option的缩写，中文"选项"。group，中文"分组"

 <form action="dreamdu.php" method="post" id="dreamduform">
     你正在学习的语言为
     <select id="WebDesign" name="WebDesign">
         <optgroup label="client">   　　　　　　　　　　　　　　//分组显示标签
             <option value="HTML">HTML</option>
             <option value="CSS">CSS</option>
             <option value="javascript">javascript</option>
         </optgroup>
         <optgroup label="server">
             <option value="PHP">PHP</option>
             <option value="ASP">ASP</option>
             <option value="JSP">JSP</option>
         </optgroup>
         <optgroup label="database">
             <option value="Access">Access</option>
             <option value="MySQL">MySQL</option>
             <option value="SQLServer">SQLServer</option>
         </optgroup>
     </select>
 </form>

---

5、label 标签 -- 表单元素的标签说明

• label标签是成对出现的,以<label>开始,以</label>结束
• 属性.
  • common -- 公共属性
  • accesskey -- 表单的快捷键访问方式
  • for -- 关联另外一个表单元素，被关联的元素id属性的值必须等于for元素定义的属性值 -- (标签可以被某些可视化浏览器渲染成可以点击的,点击后光标会显示在关联的表单元素内)
• label，中文"标签"

---

6、fieldset 标签 -- 对表单进行分组

• fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
• 一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
• 属性:
  • Common -- 一般属性

---

7、legend 标签 -- 对表单的每组内容进行说明

• legend标签是成对出现的,以<legend>开始,以</legend>结束
• 此标签在<fieldset>标签内
• 属性:
  • Common -- 一般属性
  • accesskey -- 表单的快捷键访问方式

• legend的内容一般显示在左上角
• 通过CSS可以改变fieldset边框显示方式,也可以改变legend的显示方式.

 <form action="dreamdu.php" method="post" id="dreamduform">
     <fieldset>
         <legend>用户名与密码:</legend>
         <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
         <label for="username">用户名:</label>
         <input type="text" id="username" name="username" value="dreamdu" />
         <label for="pass">密码:</label>
         <input type="password" id="pass" name="pass" />
     </fieldset>
 </form>

---

---

二、HTML文字元素 -- 更有意义的文字显示

---

1、abbr 标签 -- 简称标签

• abbr标签是成对出现的,以<abbr>开始,以</abbr>结束
• 属性:
  • Common -- 一般属性
• abbr是abbreviation的缩写
• 通常简称标签abbr包括缩写标签acronym
• 简称和缩写是对一个惯用词组的缩写表示,一般使用词组中每个单词的首字母.比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一种提取首字母的缩写.有时候缩写经常会在最后加一个..

示例：

 <abbr title="Limited">Ltd.</abbr>

---

2、acronym 标签 -- 取首字母的缩写标签

• acronym标签是成对出现的,以<acronym>开始,以</acronym>结束
• 属性:
  • Common -- 一般属性

示例：

 <acronym title="Cascading Style Sheets">CSS</acronym>

---

3、cite 标签 -- 引用标签

• cite标签是成对出现的,以<cite>开始,以</cite>结束
• 属性:
  • Common -- 一般属性
  • cite -- 引用内容的URI
• cite是citation的缩写

示例：

 <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的缩写

示例：

 <dfn>梦之都</dfn>是一个单词,更是一种向往!

---

6、em 标签 -- 强调标签

• em标签是成对出现的,以<em>开始,以</em>结束
• 属性:
  • Common -- 一般属性
• em是emphasis的缩写

示例：

 强调一下,<em>不要</em>和我开玩笑!

---

7、kbd 标签 -- 使用者输入的文字标签

• kbd标签是成对出现的,以<kbd>开始,以</kbd>结束
• 属性:
  • Common -- 一般属性

示例：

 To exit, type <kbd>QUIT</kbd>.

---

8、l 标签 -- 语句标签

• l标签是成对出现的,以<l>开始,以</l>结束
• 属性:
  • Common -- 一般属性
• l是line of text的缩写

示例：

 <l>一行实实在在的文字!</l>

---

9、q 标签 -- 行引用标签

• q标签是成对出现的,以<q>开始,以</q>结束
• 属性:
  • Common -- 一般属性
  • cite -- 引用内容的URI
• q是quoted text的缩写

示例：

 <cite>古人</cite>云:<q>良言一句三冬暖,恶语伤人六月寒.</q>

---

10、samp 标签 -- 程序或脚本输出的内容标签

• samp标签是成对出现的,以<samp>开始,以</samp>结束
• 属性:
  • Common -- 一般属性
• samp是sample output from programs,scripts,etc的意思

示例：

 程序的输出是<samp>x+y</samp>

---

11、span 标签 -- 内联行标签

• span标签是成对出现的,以<span>开始,以</span>结束
• 属性:
  • Common -- 一般属性

span表示了内联行,并无实际的意义,主要通过CSS样式(style)为其赋予不同的表现.

具体用法可以查看id与class选择符.

示例：

 <span>一个内联行</span>

---

12、strong 标签 -- 重点强调标签

• strong标签是成对出现的,以<strong>开始,以</strong>结束
• 属性:
  • Common -- 一般属性

示例：

 <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的缩写

示例：

 变量<var>$i</var>,代表循环次数.

---

---

三、HTML字块元素 -- 字块:表示一块字,比如一个段落,一个标题等.

---

1、div 标签 -- 块标签

• div标签是成对出现的,以<div>开始,以</div>结束
• 就像span标签一样,和CSS联合起来才能显示出它的威力
• 属性:
  • Common -- 一般属性

div表示一个块,并无实际的意义,可以通过CSS样式(style)为其赋予不同的表现.

具体用法可以查看id与class选择符.

示例：

 <div>一个块</div>

---

2、h标签包括,h1,h2,h3,h4,h5,h6 标签 -- 文章的标题标签

• h标签是成对出现的,以<h>开始,以</h>结束
• 属性:
  • Common -- 一般属性

示例：

 <body>
     <h>文章的主标题</h>
     <p>介绍</p>
     <section>
         <p>....</p>
         <h>文章的二级标题</h>
         <p>....</p>
         <h>另一个二级标题</h>
         <p>....</p>
     </section>
     <section>
         <p>....</p>
         <h>下一个二级标题</h>
         <p>....</p>
         <section>
             <h>三级标题</h>
             <p>....</p>
         </section>
     </section>
 </body>

或： （下面六个标题标签，是从大到小顺序的，h1最大，h6最小；h1标签在一个页面中建议只使用一次）

 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>

---

3、p 标签 -- 段落标签,里面可以加入文字,列表,表格等

• p标签是成对出现的,以<p>开始,以</p>结束
• 属性:
  • Common -- 一般属性
• p是paragraph的缩写

示例：

 <p>语言
     <ul>
         <li>C</li>
         <li>C++</li>
         <li>PHP</li>
     </ul>
 </p>

---

4、address 标签 -- 地址标签

• address标签是成对出现的,以<address>开始,以</address>结束
• 属性:
  • Common -- 一般属性

示例:

 <address href="mailto:dreamdu@dreamdu.com">梦之都 webmaster</address>

---

5、blockcode 标签 -- 程序的代码块标签

• blockcode标签是成对出现的,以<blockcode>开始,以</blockcode>结束
• 属性:
  • common -- 公共属性
  • cite -- 被引用代码的URI

示例：

 <blockcode class="PHP" cite="http://www.dreamdu.com/xhtml/tag_blockcode/">
 function dreamdu()
 {
     $dreamdu = "www.dreamdu.com";
     echo $dreamdu;
 }
 </blockcode>

---

6、blockquote 标签 -- 引用块标签

• blockquote标签是成对出现的,以<blockquote>开始,以</blockquote>结束
• 属性:
  • Common -- 一般属性
  • cite -- 被引用内容的URI

示例：

 <blockquote cite="http://www.dreamdu.com/xhtml/">
     <p>标准网页设计要区分内容与表现,学习标准网页设计.</p>
 </blockquote>

---

7、pre 标签 -- 按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来

• pre标签是成对出现的,以<pre>开始,以</pre>结束
• 属性:
  • Common -- 一般属性

---

8、section 标签 -- 一般联合h标签一起使用,表示一部分

• section标签是成对出现的,以<section>开始,以</section>结束
• 属性:
  • Common -- 一般属性

---

9、separator 标签 -- 文档分隔符标签

• separator标签是单独出现的,<separator />
• 属性:
  • Common -- 一般属性

示例：

 <p>www.dreamdu.com</p>
 <separator />
 <p>梦之都</p>

 <nl>
     <label>网址</label>
     <li href="http://www.dreamdu.com/">dreamdu.com</li>
     <li><separator /></li>
     <li href="prev">Previous</li>
     <li href="#">Up</li>
     <li href="next">Next</li>
 </nl>