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标签说明
  • 属性:

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

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

示例:

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

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

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

示例:

 <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>结束
  • 属性:

注:PHP中的变量名,前面要加上 '$' 符号 例如: <code>$i = 1;</code>.


5、dfn 标签 -- 定义标签

  • dfn标签是成对出现的,以<dfn>开始,以</dfn>结束
  • 属性:
  • dfn是defining instance的缩写

示例:

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

6、em 标签 -- 强调标签

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

示例:

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

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

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

示例:

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

8、l 标签 -- 语句标签

  • l标签是成对出现的,以<l>开始,以</l>结束
  • 属性:
  • 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>结束
  • 属性:
  • samp是sample output from programs,scripts,etc的意思

示例:

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

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

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

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

具体用法可以查看idclass选择符.

示例:

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

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

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

示例:

 <strong>重点强调标签</strong>

13、sub 标签 -- 下标标签

  • sub标签是成对出现的,以<sub>开始,以</sub>结束
  • 属性:
  • sub是subscript的缩写

14、sup 标签 -- 上标标签

  • sup标签是成对出现的,以<sup>开始,以</sup>结束
  • 属性:
  • sup是superscript的缩写

15、var 标签 -- 程序中的变量标签

  • var标签是成对出现的,以<var>开始,以</var>结束
  • 属性:
  • var是variable的缩写

示例:

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


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


1、div 标签 -- 块标签

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

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

具体用法可以查看idclass选择符.

示例:

 <div>一个块</div>

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

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

示例:

 <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>结束
  • 属性:
  • p是paragraph的缩写

示例:

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

4、address 标签 -- 地址标签

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

示例:

 <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>结束
  • 属性:

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

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

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

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

示例:

 <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>
上一篇:关于解决keil4和mdk共存后51不能使用go to definition Of 'XXXXXX'问题


下一篇:jquery左右自适应伸缩插件