HTML基础~（2）

1 表格

1. 
   表格的语法

table标签：表示网页的开始和结束，表格的所有内容都要写在这对标签里 tr标签：表示表格中的一行 table row td标签：是真正存放数据的地方，一行有几个单元格就表示有几列 table datacell

1. 表格的可选标记

caption标签: 表格的标题 thead标签：表头部分 tbody标签：表主体部分 th标签：行/列的标题，文字加粗显示

1. 表格的属性

border=“1px” 给表格添加边框 style="border-collapse: collapse;" 表格默认的边框是带有间距的，想去掉可以加这句代码

1. 不规则的表格

写在td元素中 colspan=“n”跨列，从当前单元格开始，向右合并n个单元格 rowspan=“n” 跨行，从当前单元格开始，向下合并n个单元格 被合并的单元格一定得删掉！！！

1. 表格的大小

表格的大小是靠内容撑起来的 如果修改了某个单元格的高度，这一行单元的高度都会随之改变 同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变

2 列表

1. 有序列表

<ol> 有序列表 order list        <li> </li> 列表项 list item        <li> </li> </ol>

有序列表的属性: start=“4” 指定列表项的编号起始值从4开始 默认值是1 type=“1”指定编号的类型，默认值1代表阿拉伯数字 a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字

1. 无序列表

<ul> 有序列表 unorder list        <li> </li> 列表项 list item        <li> </li> </ul>

无序列表的属性: type=“disc”实心圆，默认值 circle空心圆 square方块 none没有标识

1. 列表的嵌套

ul与ol的直接子元素必须是li 所以，所有被嵌套的内容都需要写在li中 https://www.codeboy.com/xuezi/admin/

3 表单

1. 特点

提供了一些可视化的输入控件 会自动收集整理用户输入的内容，并提交给服务器

1. 语法

<form></form> 可以添加的属性: action=“url” 表示会将表单收集的数据提交到哪个服务器 目前我们可以先写一个#,表示提交到当前页面

1. input元素

公共属性： type 设置input元素的类型，默认值是text value 用来保存用户输入的值，用于后期提交给服务器       如果控件是按钮，value用来设置按钮上显示的文本 name 为控件起名字,注意：form表单必须起name否则提交不了数据

1文本框与密码框 type=“text” 普通文本输入框 type=“password” 密码框 属性： maxlength="5" 设置输入数据的最大长度 placeholder="请输入用户名" 提示文字 value="jack" 表示给当前输入框设置了一个默认值jack 这个属性不写默认也有，默认值为空，到时用户输入什么数据，value就保存什么值

2按钮 type=“submit”提交按钮，会自动手机整理用户输入的数据，提交 type=“reset 重置按钮，会将表单的控件恢复到初始状态，注意不是清空 type="button" 普通按钮，后期会绑定JS代码 注意: 按钮的value属性是用来设置按钮上显示的文字 H5新增了一个表示按钮的标签 <button></button>等价于上面的type=”button”

3单选与多选框 type="radio" 单选框 type="checkbox" 多选框 属性： name【必须加】 为控件起名并分组，一组单选框/多选框的名称必须相同才能实现效果 value【必须加】 不加提交的值是on checked 表示当前项默认被选中

4文件上传 请上传您的文件<input type="file" multiple> multiple可以实现文件上传的多选效果

1. h5新增的input控件

数字控件 <input type="number" max="30" min="10" step="3"/> min 最小值 max最大值 step步长，一次递增/递减的大小，默认步长为1 注意：这个输入框无法阻止用户自行输入数据

颜色控件 <input type="color"/> 提供了一个取色器，可以选择不同的颜色，默认是黑色

日期控件 <input type="date"/> 可以年月日，后期如果想要其他更加精美的日期效果，可以使用其他的插件

月份控件 <input type="month"/> 选择年-月

星期控件 <input type="week"/> 选择年-周 一年有52周

搜索控件 <input type="search"/> 提供了一个快速删除所有内容的小叉叉

范围控件 <input type="range" min="10" max="30" step="7"/> min最小值 max最大值 step步长，表示数字滑动的跨度 作用:可以控制区间，比如音量 地图缩放 进度 注意：设置步长时应该选取可以除得尽的值，否则区间中会有一部分值无法被选中

1select下拉选择框

<select name="food" multiple>     <option value="1" >四川火锅</option>     <option value="2">东北乱炖</option> </select> 提交时如果没有给option设置value值，提交的就是option标签之间的文本 selected 设置当前option默认被选中 multiple 设置当前下拉选择框可以多选

2textarea多行文本域

<textarea rows="10" cols="50"></textarea> rows="10" 文本域的行数，改变的是高度 cols="50" 文本域的列数，改变的是宽度 注意：默认的文本域大小可以被用户随意拖拽改变，想要禁用拖拽： style="resize:none;"

3label关联控件

用于将form表单中的文本与控件进行关联 点击文本，效果如同点击控件 <label for="要关联控件的id值"></label> <input type="checkbox" name="yes" id="y" value="1"> <label for="y">请同意此协议</label>