首页 > 代码库 > HTML学习笔记——常用元素及其属性（二）

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

2024-07-21 21:31:00   220人阅读

 

一、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,file19     选择型包括checkbox,radio20     点击型包括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属性后，菜单可多选，否则只能单选

 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>结束
  • 属性.
    • common -- 公共属性
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • label -- 选择项的短标签
    • value -- 选项的初始值，未设置时为option标签中的内容
    • selected -- 选项预先被选择
  • option，中文"选项"
（2）optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)
  • optgroup标签是成对出现的,以<optgroup>开始,以</optgroup>结束
  • 属性.
    • common -- 公共属性
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • label -- 选项组的标签
  • 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>结束
  • 属性.
    • 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的显示方式.
 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 标签 -- 引用标签

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

示例：

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 标签 -- 行引用标签

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

示例：

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)为其赋予不同的表现.

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

示例：

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

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

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

示例：

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:dreamdu@dreamdu.com">梦之都 webmaster</address>

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

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

示例：

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 标签 -- 引用块标签

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

示例：

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>

 

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


联系
我们