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

2022-12-07 16:59:48

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

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

示例：

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

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

示例：

 <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左右自适应伸缩插件