HTML基础二

一、表格

作用：显示数据

语法：

<table border="1" cellspacing="0" cellpadding="5">
   <tr height="30">
      <th align="center" width="100">A</th>
          ...
   </tr>
   <tr>
   <td>b</td>
          ...
   </tr>
          ...
</table>

注：表格相关html标签

a) table 定义表格

b) tr 定义表格的行

c) td 定义表格的列(表格单元格)

d) th 定义表头单元格

e) caption 定义表格的标题

f) thead 定义表格的表头

g) tbody 定义表格的主体

h) tfoot 定义表格的底部(页脚)

注：表格相关html属性

a) border 设置表格的边框

b) cellspacing 设置单元格间距

c) cellpadding 设置内容与单元格之间的空隙

d) width 设置单元格的宽度

e) height 设置单元格的高度

f) align=“left|center|right” 设置单元格内容的水平对齐方式

g) valign=“top|middle|bottom” 设置单元格内容的垂直对齐方式

h) colspan=“数值” 合并列 （给td加）

i) rowspan=“数值” 合并行（给td加）

二、表单

作用：用来搜集用户信息

语法：<form method="get|post" action="服务器端文件">...</form>

注：所有的表单元素都要放在form标签之间

注：
a) method用来设置发送数据的方式，常用的有get和post
b) action用来设置数据发送到的位置

1.文本框

语法：<input type="text" placeholder="默认提示信息"/>

注：placeholder用来设置默认提示信息文本内容（h5新增的表单属性，低版本IE浏览器不支持）

扩展： <input type="text" maxlength="15" size="50"/>

maxlength设置最大字符数，size设置长度

2.密码框

语法：<input type="password" placeholder="请输入密码"/>

3.提交按钮

语法：<input type="submit" value="登录"/>

注：
a) 通过设置value可以改变提交按钮上的文字内容
b) 提交按钮必须放置在form中，并且要和提交的内容放置在一个form中

4.重置按钮

语法：<input type="reset"/>

注：重置按钮必须和重置的内容放置在一个form中

5.单选按钮

语法：<input type="radio" name="a" checked/>

注：
a) 一组中的单选按钮添加一致的name属性值可以达到多选其一的效果
b) 设置checked=“checked” 在页面加载完成后添加默认选中状态
c) 属性和属性值相同时，可以省略属性值

6.复选按钮

语法：<input type="checkbox" checked/>

7.普通按钮

语法：<input type="button" value="立即领取"/>

注：
a) 默认button按钮上的文字内容为空，可通过value进行设置
b) button按钮不具备提交功能，通常结合js点击事件来运用

8.下拉列表

语法：

 <select>
    <option>a</option>
    <option selected>b</option>
    ...
 </select>

注：selected改变默认选中项

9.文本域

语法：<textarea rows="行数" cols="字符宽度"></textarea>

扩展：如何禁止用户拖拽改变文本域的大小，设置如下：

<textarea style="resize:none;"></textarea>

注：disabled=“disabled” 给表单元素添加禁用状态

扩展：get和post的区别

I.get主要用来接收数据，post主要用来发送数据

**II.**get传送的数据会显示在url地址栏中，post方式直接通过服务器发送数据，用户看不到这个过程

III.get可以传送的数据量较小，一般不能超过2kb，post可以传送的数据量较大，一般不受限制

IV.get安全性较低，post安全性较高

三、div

作用：无语义标签，主要用来布局和划分板块

语法：<div></div>

四、span

语法：<span></span>

作用：
a） span标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
b）span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

五、iframe框架

语法：<iframe src="外部文件路径" width="数值" height="数值" frameborder="0|1" scrolling="no"></iframe>

注：
如何隐藏或去掉iframe的滚动条 scrolling="no"

作用：
将外部文件的内容嵌入到本页面iframe标记所在的位置

六、html注释

语法：

注：被注释的内容不会显示在网页中