前端基础学习笔记(html)1.1

一、html表格

作用：显示数据

语法：<table border="1" cellspacing="0" width="700" height="150" align="center">
              <tr align="center">
             <th width="100">哈哈</th>
                ...
             </tr>
             <tr>
             <td>嘿嘿</td>
                ...
             </tr>
                ...
        </table>

注：表格相关html标签

a) table 定义表格

b) tr 定义表格行

c) td 定义表格列

d) th 定义表头单元格(居中和加粗效果)

e) caption 定义表格的标题

注：表格相关html属性

a) border=“数值” 设置表格的边框

b) cellspacing=“数值” 设置单元格间距

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

d) width=“数值” 设置表格或单元格的宽度

e) height=“数值” 设置表格或单元格的高度

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

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

扩展：
valign=“top|middle|bottom” 设置单元格内容的垂直对齐方式
bgcolor=“red” 设置表格背景色
bordercolor=“blue” 设置表格边框颜色

二、表单

作用：用来搜集用户信息

1.文本框

语法：<input type="text" placeholder="请输入用户名">

注：placeholder用来设置默认提示信息

2.密码框

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

3.提交按钮

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

注：a) value属性用来设置提交按钮上的文字内容
b) 提交按钮一定要和提交的内容放在一个form中

4.单选按钮

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

注：一组中的单选按钮必须设置一致的name属性值才能达到多选其一的效果

5.复选按钮

语法：<input type="checkbox">

注：checked=“checked” 设置默认选中项

eg:  <input type="radio" name="a" checked>
       <input type="checkbox"  checked>

注：属性和属性值相同时，可以省略属性值

6.重置按钮

语法：<input type="reset">

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

7.普通按钮

语法：<input type="button" value="***">

注：a) 普通按钮不具备提交功能，通常结合js使用

b) 普通按钮默认文字为空，可通过value进行设置

8.下拉列表

语法：<select>
         <option>a</option>
         <option selected>b</option>
           ...
      </select>

9.文本域（多行文本输入框）

语法： <textarea  rows="数值"  cols="数值"></textarea>

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

扩展： 给表单元素添加禁用状态

语法： disabled=“disabled”

扩展： < form method=“get|post” action=“后端文件地址”>…</form

注：
I.所有的表单元素都要放在form标签之间
II.method用来设置发送数据的方式，常用的有get和pos
III.action用来设置数据发送到的位置

扩展：get和post的区别

a) get主要用来获取数据，post主要用来发送数据

b) get发送数据时，内容直接显示在url地址栏中，post直接通过服务器发送数据，用户看不到这个过程

c) get可以传送的数据量较小，post可以传送的数据量较大，理论上没有限制

d) get安全性较低，post安全性较高