html标签图文详解（二）

本文主要内容

• 列表标签：<ul>、<ol>、<dl>
• 表格标签：<table>
• 框架标签及内嵌框架:<iframe>
• 表单标签:<from>
• 多媒体标签
• 滚动字幕标签：<marquee>

一、列表标签

1、无序列表<ul>,无序列表中的每一项<li>

• ul : unordered list,“无序列表”的意思。
• li : list item,"列表项“的意思。
  例：
  
• li 不能单独存在，必须包裹在ul里面。
• ul不是增加小圆点，而是增加无序列表的”语义“的。

属性：

• type="属性值“。可选：disc(实心原点，默认)、square(实心方点)、circle(空心圆)。
  例：
  
  注意：<ul>里面有type属性，<li>里面也有<type>属性。
  例：
  列表之间也是可以嵌套的。
  例；

 <ul>
        <li><b>北京市</b>
            <ul>
                <li>海定区</li>
                <li>朝阳区</li>
            </ul>
        </li>
        <li><b>成都市</b>
            <ul>
                <li>高新区</li>
                <li>武侯区</li>
            </ul>
        </li>
    </ul>

ul标签的设计运用场景：

• 导航条
• li里面防止的东西很多的时候
  注意：ul里面只能是li，li是容量级标签，li里面什么都可以放。

2、有序列表<ol>,里面的每一项是<li>。

• ol：ordered list。
  例：
  
  属性：
• type="属性值”。有：1（阿拉伯数字，默认）、a、A、i、I。结合start属性表示从几开始。
  例：

 <ol>
        <li>好的 </li>
        <li>好的</li>
        <li>好的 </li>
    </ol>

    <ol type="A">
        <li>好的 </li>
        <li>好的</li>
        <li>好的 </li>
    </ol>

    <ol type="i" start="3">
        <li>好的 </li>
        <li>好的</li>
        <li>好的 </li>
    </ol>

    <ol type="a">
        <li>好的 </li>
        <li>好的</li>
        <li>好的 </li>
    </ol>

    <ol type="I">
        <li>好的 </li>
        <li>好的</li>
        <li>好的 </li>
    </ol>

注意：有序ol和无序ul一样，可以内部嵌套。ol和ul只是语义不一样，怎么使用是一样的。

3、定义列表<dl>

• dl ：definition list ,没有属性。dl 的子元素里面只能是dt和dd。
• <dt>:definition title列表的标题，这个标题是必须的。
• <dd>:definition description 列表的列表项，若不需要它，可以不加。
  注意：dt和dd只能是在dl里面，dl里面只能有dt和dd。
  例：

 <dl>
        <dt>时间会治愈一切</dt>
        <dd>渐渐的只记得他的好</dd>
        <dd>也清楚的明白，没有谁离不开谁</dd>
        <dd>愿你积极、努力</dd>

        <dt>谢谢你让我明白</dt>
        <dd>即使我两都没有（双向奔赴）</dd>
        <dd>也在这三年里互相成就了对方</dd>
    </dl>

注意：dt和dd都是容量级标签，想放什么都可以。用什么标签不是根据样子来决定，而是语义（语义的本质上是结构）。

二、表格标签

• 表格标签是用<table>来表示。一个表格<table>是由每行<tr>组成，每行由每个单元格<td>组成。记住表格是由行组成，行是由列组成。

例：

<table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    
        <tr>
            <td>好</td>
            <td>坏</td>
            <td>中</td>
            </tr>
        </table>

上面的表格没有边框，这就要由表格的属性来决定。

<table>属性:

• border:边框。单位为像素px。
• style="border - collapse:collapse;":单元格的线和表格的边框线合并（表格的两边框合并为一条）。
• width：宽度。单位为像素px。
• height：高度。单位为像素px。
• bordercolor：表格的边框颜色。
• align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，若需设置内容的对齐方式，要对单元格标签<td>进行设置。
• cellpadding：单元格内容到边的距离，单位为像素px。默认情况下，文字是紧挨左边那条线的，即默认情况下的值为0。不是单元格内容到四条边的距离，默认是与左边那条线的距离。如果设置属性dir="rt1",那就指内容与右边那条线的距离。
• cellspacing:单元格和单元格之间的距离（外边距），单位为像素px。默认情况下为0。
• bgcolor="red":表格的背景颜色。
• background="路径src/...:背景的图片。背景图片的优先级大于背景颜色。
• bordercoloright:表格的上、左边框，以及单元格的右、下边框的颜色。
• bordercolordark:表格的右、下边框，以及单元格的左、上边框的颜色。这两个属性为了是设置3D的效果。
• dir:公有属性，单元格内容的排列方式。ltr:从左到右（left to right，默认）；rtl：从右到左（right to left）。dir是公有属性，把该属性放在任意标签中。

单元格带边框的效果：

行：<tr>

一个表格是一行一行组成的。
属性：

• dir:公有属性，设置这一单元格内容的排列方式。可以取：ltr:(left to right)从左到右，默认。rtl:(right to left)从右到左。
• bgcolor:这一行单元格的背景颜色。注：没有background属性，无法设置这一行的背景图片，若要设置，可用css实现。
• height：这一行的高度。
• align="center":这一行内容水平居中显示。取值：left、center、right。
• valign="center:这一行内容垂直居中。取值：top、middle、bottom。

单元格：<td>

属性：

• align：内容的横向对齐方式。属性值可以填：left、right、center。若想每个单元格的内容都居中，属性太麻烦，用css来解决。
• valign：内容的纵向对齐方式。属性值可取：top、middle、bottom。
• width：绝对值或者相对值（%）。
• height：单元格的高度。
• bgcolor:单元格的背景色。
• background：设置单元格的背景图片。

单元格的合并

• colspan：横向合并。如colspan="2"表示单元格在水平方向上要占据两个单元格的位置。
• rowspan：纵向合并。如rowspan=”2“表示单元格在垂直方向上要占据两个单元格的位置。

例：横向合并

<table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    
        <tr>
            <td>好</td>
            
            <td colspan="2">中</td>  
            <td>坏</td>
            </tr>
 </table>

例：纵向合并

<table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">中</td>
             <td>4</td>
        </tr>
    
        <tr>
            <td>好</td>
            <td>坏</td>

            <td>坏</td>
            </tr>
  </table>

表格的标题：<capttion>

• 使用时和<tr>标签并列，属性：align，表示标题相对于表格的位置，属性取值可以是：left、right、center、top、bottom。
  例：

 <table border="1">
        <caption align="center">标题</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="2">中</td>
             <td>4</td>
        </tr>
    
        <tr>
            <td>好</td>
            <td>坏</td>

            <td>坏</td>
            </tr>
   </table>

表格的<thead>标签、<tbody>标签、<tfoot>标签

• 三个标签无区别
• 若使用这三个标签，顺序可以随意放置，但浏览器显示时还是按照thead、tbody、tfoot的顺序来显示内容。若不写这三个标签，浏览器显示则是按照代码从上到下的顺序显示的。
• 表格非常大、内容非常多的时候，用thead、tbody、tfoot标签，数据可以边获取边显示。若不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

例：

  <table border="1">
        <tfoot>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>4</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>好</td>
                <td>坏</td>
                <td>坏</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <td>22</td>
                <td>坏3</td>
                <td>坏5</td>
            </tr>
        </thead>
    </table>

框架标签

• 框架标签不能放在<body>标签里面，<body>标签代表的只是一个页面，框架标签代表的是多个页面。于是frameset和<body>只能二选一。
• 框架的集合用<frameset>表示，然后在<frameset>里面放入一个个框架<frame>。
  补充：frameset和frame已经从Web标准中删除，建议使用iframe代替。

框架的集合：<frameset>

一个框架的集合可以包含多个框架或框架的集合。
属性：

• rows:水平分割，讲框架分为上下部分。写法有两种：

1、绝对值写法：rows=”200,*"，其中代表剩余。包含两个框架：上面框架占200px，下面框架为剩余部分。
2、相对值写法：rows=“30%,*"，其中代表剩余。包含了两个框架：上面框架占30%，下面框架占70%。
注：若将框架分很多行，在属性值里用逗号隔开。

• cols：垂直分割，将框架分为左右部分。写法有两种:
  与水平分割的写法一样。

例：

<frameset rows="20%,*">
    <frame scr="top.html"></frame>
    <frameset cols="50%,*">
        <frame scr="left.html"></frame>
        <frame scr="right.html"></frame>
    </frameset>

</frameset>

框架：<frame>

一个框架显示一个页面。
属性：

• scrolling=”no“：是否需要滚动条。默认值为ture。

• noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。用此属性值，框架大小固定。
  例：<frame scr="top.html" noresize></frame>

• bordercolor="red":给框架的边框定义颜色。这个属性值也适用于集合<frameset>中同样适用。

• frameborder="0"或者frameborder="1":隐藏或显示边框（框架线）。

• name：给边框起一个名字。

内嵌框架：<iframe>

有<iframe>是<body>的子标记。

属性：

• scr="one.html:内嵌的那个页面。
• width=”800“：宽度
• height=”200“：高度
• scrolling="no":是否需要滚动条。默认值true
• name：窗口名称。

例：

<body>
    好的
    <iframe src="one.html"></iframe>
    嘿嘿
</body>

内框架举例：

<body>
<a href="文字页面.html" target="myframe">默认显示文字页面</a></br>
   <a href="图片页面.html" terget="myframe">点击进入图片页面</a></br>
   <a href="表格页面.html" terget="myframe">点击进入表格页面</a></br>

   <iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe>
   <br>
   完成
 </body>

表单标签：<from>

用于与服务器的交互。表单是用于收集用户信息的，让用户填写、选择的。

属性：

• name：表单名称。用于JS来操作或控制表单时使用。
• id：表单名称。用于JS来操作或控制表单时使用。
• action：表单数据的处理程序，一般是PHP，如action=”login.php"
• method:表单数据的提交方式，一般取get（默认）和post。

输入标签（文本框）：<input>

用于接受用户输入。

<input type="text"/>

属性：

• type="属性值"，有：
  1、text（默认），文本属性。
  2、password：密码类型。
  3、radio：单选按钮。（像老式的收音机，按下去一个按钮，其他就抬起来了。）
  4、checkbox：多选按钮。
  5、checked：将单选按钮和多选按钮默认处于选中状态。当<input>标签设置为type="radio"或type="checkbox"时，可以用这个属性。属性值也是checked，可以省略。
  6、hidden:隐藏框，在表单中包含不希望用户看见的信息。
  7、button:普通按钮，结合js代码进行使用。
  8、submit:提交按钮，传送当前表单的数据给服务器或其他程序处理。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
  9、reset：重置按钮，清空内容，设置为最初默认值。
  10、image:图片按钮，可显示图片。
  11、file：文件选择框。

• value="内容“：文本框中的默认内容（已经填好的）

• size="50":文本框可显示50个字符。size属性值的单位不是像素。

• readonly:文本框只读，不能编辑。光标可以点进去，文字不能编辑。

• disabled:文本框只读，不能编辑，光标点不进去。
  例1：

<form>
        姓名：<input type="text"><br />
        昵称：<input value="小可爱" readonly=""><br />
        账号：<input type="password" size="50"><br />
        密码：<input type="password" value="psd" size="50"><br>
        性别：<input type="radio" name="gender" id="radio1" value="female" checked="">女
            <inout type="radio" name="gender" id="radio2" value="male">男<br>
        爱好：<input type="checkbox" name="love" value="exercise">运动
                <input type="checkbox" name="love" value="eat">吃
                <input type="checkbox" name="love" value="play">玩
    </form>

注:多个单选框的input标签中，name属性值可以相同，id属性值必须唯一。
例2：

<form>
        <input type="button" value="普通按钮"><br />
        <input type="submit" value="提交按钮"><br />
        <input type="reset" value="重置按钮"><br />
        <input type="image" value="图片按钮1"><br />
        <input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
        <input type="file" value="文件选择框">
    </form>

下拉列表标签：<select>

• <select>标签里面的每一项用<option>表示。select就是”选择“，option就是”选项“。select标签和ul、ol、dl一样，都是组标签。

<select>属性：

• multiple:可以对下拉列表中的选项进行多选。属性值为multiple，也可以没有属性值。写成multiple=""，也可以写成multiple="multiple".

• size="3":如果属性值大于1，则列表为滚动视图。默认属性值为1，即为下拉视图。

<option>属性

• selected="":预选中。没有属性值。

例：

 <form>
        <select>
            <option>一年级</option>
            <option selected="">二年级</option>
            <option>三年级</option>
        </select>
            <br/>
            <br/>

            <select size="3">
                <option>小学生</option>
                <option>初中生</option>
                <option>高中生</option>
                <option>大学生</option>
            </select>
        <br/>
        <br/>
    </form>

多行文本输入框：<textarea>标签

属性：

• rows="4":指定文本区域的行数。
• cols="20”：指定文本区域的列数。
• readonly:只读。
  例：

<form>
        <textarea name="txt" rows="5" cols="25">坚持提升自己才是硬道理</textarea>
    </form>
    <form>
        <textarea name="txt" rows="5" cols="25">
            坚持提升自己才是硬道理</textarea>
    </form>
    <form>
        <textarea name="txt" rows="5" cols="25">
            
            坚持提升自己才是硬道理</textarea>
    </form>

注：红色部分进行了换行，在浏览器中显示出空白。

表单的语义化

• 如注册一个网站信息，有一部分必填，有一部分选填，这个时候可利用表单语义化。
  例：

 <from>
        <fieldset>
            <legend>账号信息</legend>
            账号:<input value=""><br>
            密码:<input type="password" value="" size="20"><br>
        </fieldset>

        <fieldset>
            <legend>其他信息</legend>
            性别:<input type="radio" name="gender" value="female" checked="">女
            <input type="radio" name="gender" value="male">男
            <br>
            特长:<input type="checkbox" name="hobby" value="swimming">游泳
            <input type="checkbox" name="hobby" value="running">跑步
            <input type="checkbox" name="hobby" value="reading">阅读
        </fieldset>
    </from>

<label>标签

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

以上代码需点击单选框（小圆圈）算选中，点击“男、女”这两个文字是无法选中的；就有了label标签了。通过label把input的汉字包裹起来作为整体。
有：

<input type="radio" name="sex" id="nan"/><label for="nan">男</label>
<input type="radio" name="sex" id="nv"/><label for="nv">女</label>

以上让label标签的for属性值和input标签的id属性值相同，那么label和input就有绑定关系了。

多媒体标签

• 多媒体包含：音频、视频、Flash。Flash格式的视频兼容性非常好，Flash格式的文件很小。

<bgsound>标签:播放背景音乐

属性：

• src="音乐文件的路径“
• loop="-1":属性值代表播放次数，-1代表循环播放。

例：

<body>
    <bgsound src="怒放的生命.MP3"></bgsound>
</body>

<embed>标签:播放多媒体文件（音频、视频等）

属性：

• src="多媒体文件的路径”
• loop="-1":属性值代表播放次数，-1代表循环播放。
• autostart="false":打开网页时，禁止自动播放。默认值true。
• volume=“100”：设置默认音量值大小。
• width:指Flash文件的宽度
• height：指Flash文件的高度
• quality:指Flash的播放质量，质量有高有低。
• pluginspage:若指定的Flash不存在，则从pluginspage指定的地方下载。
• type:指定Flash的文件格式类型。
• wmode：指Flash的背景是可以透明的，取值：transparent是透明的。

<object>标签:播放多媒体文件（音频、视频等）

属性：

• classid:指定Flash 插件的ID号，一般存在于注册表中。

• codebase:如果Flash插件不存在，则从codebase指定的地址下载。

• <param>:设置具体的详细参数。
  总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将<object>标签和<embed>标签标记一起使用，但使用的顺序是：<object>中嵌套<embed>标记。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
  <param name="movie" value="images/banner.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

<marquee>:滚动字幕标签

属性：

• direction="right":移动的目标方向。left（从右向左移动，默认值）、right（从左先向右移动）、up(从下往上移动)、down（从上往下移动）
• behavior="slide":行为方式。slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）。alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···
• scrollamount="30":移动的速度
• loop=“3”：循环多少圈。负值表示无限循环。
• scrolldelay="1000":移动一次休息多少时间。单位毫秒。
  例：

<body>
    <marquee behavior="alternate" direction="right" width="200" height="200" bgcolor="red" scrollamount="20" scrolldelay="500">好</marquee>
</body>