HTML学习心得（二）

HTML 表格

表格中常用标签、属性及意义

代码	意义
<tr>	横行
<td>	单元格数据
<th>	表头
<caption>	表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	页眉
<tbody>	主体
<tfoot>	页脚
colspan="y"	跨y行
rowspan="y"	跨y列
border="y"	表格边框厚度
cellpadding="y"	单元格边距，放于<table>下
cellspacing="y"	单元格间距，放于<table>下

HTML 列表

• HTML无序列表

   <ul>
   <li>Coffee</li>
   <li>Milk</li>
   </ul>
  

调整列表原点类型：`style="list-style-type:cirle,disc,square"

• HTML 有序列表
  <ol>
  <li>Coffee</li>
  <li>Milk</li>
  </ol>

调整列表编号类型：type="A,a,Ⅰ，i"

• HTML 自定义列表

    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>
  

HTML布局

• 用div布局
  详细内容见于http://www.runoob.com/html/html-layouts.html

• 由于使用stable布局不是主流，故不再列出。

HTML 表单和输入

常用标签<form> <input>,常用属性type

• 文本域

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    </form>
  

• 密码字段

    <form>
    Password: <input type="password" name="pwd">
    </form>
  

• 单选按钮（Radio Buttons）

    <form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>
  

• 复选框（Checkboxes）

    <form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
    </form>
  

• 提交按钮

    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
    </form>
  

• 下拉列表

    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>
  

HTML框架

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>

• 使用iframe来显示目标链接页面
  <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
  <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>