3.HTML标签(二)

3.HTML标签(二)

html列表

有序列表

<ol>
    <li>ordered</li>
    <li>ordered</li>
    <li>ordered</li>
</ol>

定义一个有编号的内容列表,每条项目上会按1、2、3编号.

无序列表

<ul>
    <li>unordered</li>
    <li>unordered</li>
    <li>unordered</li>
</ul>

定义一个无编号的内容列表,每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同.

定义列表

<dl>
    <dt>html</dt>
    <dd>页面结构</dd>   
    <dt>css</dt>
    <dd>页面表现</dd>
    <dt>javascript</dt>
    <dd>页面行为</dd>
</dl>

定义列表通常用于术语的定义。

<dl>列表的整体。
<dt>术语的标题。
<dd>术语的解释。

html表格

table标签

<table>
    <thead>
        <tr>
            <th>col</th>
            <th>col</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
        </tr>
    </tbody>
</table>

table常用标签

<table></table>标签：声明一个表格
<tr></tr>标签：定义表格中的一行
<td></td>和<th></th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性

• border 定义表格的边框
• cellpadding 定义单元格内内容与边框的距离
• cellspacing 定义单元格与单元格之间的距离
• align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
• valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
• colspan 设置单元格水平合并
• rowspan 设置单元格垂直合并

传统布局

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

• 定义表格宽高，将border、cellpadding、cellspacing全部设置为0
• 单元格里面嵌套表格
• 单元格中的元素和嵌套的表格用align和valign设置对齐方式
• 通过属性或者css样式设置单元格中元素的样式

html表单

<form action="/login/" method="POST">
    <label for="username">UserName:</label>
    <input type="text" name="username" id="username"/><br/>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password"/><br/>
    <input type="submit" value="login" /><br/>
</form>

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，用

标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入.

 

定义一个表单区域.
<form action="/login/" method="POST"></form>
action表单的数据提交地址
method表单的提交方式 post/get 默认取值get

标签定义表单控件的文字标注
<label for="username">UserName:</label>
for关联控件，单击文字关联控件得到焦点

定义单行文本输入框
<input type="text" name="username" id="username" />

定义密码输入框
<input type="password" name="password" id="password" />

定义单选框
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女

定义多选框
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳

定义上传照片或文件等资源
<label>照片：</label>
<input type="file" name="pic" />

定义多行文本输入
<label>个人描述：</label>
<textarea name="about"></textarea>
name:表单提交项的键
cols:文本域默认有多少列
rows:文本域默认有多少行

定义下拉列表选择
<select name="language"  >
    <optgroup label="河北省">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </optgroup>
    <optgroup label="河南省">
        <option value="4">1</option>
        <option value="5">2</option>
        <option value="6">3</option>
    </optgroup>
 </select>
multiple：multiple多选
<optgroup>为每一项加上分组

定义提交按钮
<input type="submit" value="提交" />
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。
<input type="image" src="xxx.gif" />
定义重置按钮
<input type="reset" value="重置" />

文本框被线圈起来
<fieldset>
    <legend>login</legend>
    <input type="text">
</fieldset>

disabled属性 禁用控件对所有input都好使.

html内嵌框架

html内嵌框架

<iframe src="http://www.baidu.com" frameborder="0" scrolling="no"></iframe>

<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架）
src属性来定义另一个html文件的引用地址
frameborder属性定义边框
scrolling属性定义是否有滚动条

内嵌框架与a标签配合使用

<a href="http://www.baidu.com" target="myframe">百度</a>
<a href="http://www.qq.com" target="myframe">QQ</a>
<a href="http://www.163.com" target="myframe">163</a>
<iframe src="http://www.baidu.com" frameborder="0" scrolling="no" name="myframe"></iframe>

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中.