1+x web前端初级----html（2）

声明：需要讲解的留言哈，表单必过，死记硬背也得过哈

特殊字体 （选择题偶尔考考，要认识哈）

表格

格在网站中应用常用场景通常是金融类的网站，数据做统计，后台管理系统等

1.相关标签

画图说明，table是一个表格的模块，里面有行，光有行不行，里面要有列，在html中不叫列，叫单元格，再有很多行，就组成了表格-------》table标签包含行tr---》再包含单元格td

表格：<table></table>

行：<tr></tr>

单元格：<td></td>

每列的标题：<th></th>

表格标题：<caption></caption>【操作题常考，要会哈】

表格的边框 语法

<tableborder=1>

</table>

注意：border这个属性一定加在table标签上，加在td上不生效

2.对齐方式

a) 水平对齐

语法：align="center/left/right"

b) 垂直对齐

语法：valign="top/middle/bottom"

3.单元格间距和填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

1. 合并单元格（选择操作常搞）

这种合并是上下合并，所以合并的是行。如果是左右合并，那就是合并的列

合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面

合并列(colspan)：把不同列合并起来，写在左边的单元格上面

取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉

注意：合并以后一定要把多余的单元格td删掉

两个排版标签

这两个标签没有语义

div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子

span标签：一般只用于存放文字--------存放文字

标签的通用属性

1.id属性

id属性是标签的唯一标识，一个页面中可以有很多id属性，但是每个标签的id属性的值必须是唯一的

多学一招：通常用在写动态效果-----javascript

2.class属性----类

通常用来使用class属性值给标签设置样式，样式一样的标签可以设置同样的class

3.name属性

设置标签的名字，可以有同样的名字

多学一招：通常用在表单中

4.style属性

设置标签样式

表单

表单的作用就是用来收集用户输入的信息

表单的组成：表单域，表单元素

表单域标签：<form></form>，放置所有的表单元素

表单元素：

1.文本框

可输入明文内容的输入框----用户名

<input type="text" maxlength="6">

多学一招：maxlength属性可以限制最大输入长度，为了让服务器端接收到输入的数据，表单元素都需要加name属性

2.密码框

输入密文的输入框----密码

<input type="password">

密码框的属性和使用和文本框一样

3.单选框

只能选择一项的表单----性别选择

<input type="radio" value="0">

注意：要想单选框的单选功能生效，必须添加name属性，并且name属性的值必须一样，这种无法输入的表单元素必须赋值：value="值"，默认选中项使用checked="checked"属性

代码

<inputtype="radio"name="sex"value="0">男

<inputtype="radio"name="sex"value="1"checked>女

4.复选框

可以选择多项的表单----爱好选择

<input type="checkbox" value="0">

使用方式和属性与单选框一样

5.文件上传

<input type="file">

6.下拉菜单

通常用于选择籍贯或收货地址中的省市区

<select>

<option>江苏</option>

<option>浙江</option>

<option>安徽</option>

</select>

默认选中项使用selected="selected"

多学一招：下拉菜单可以分组展示

<select>

<optgroup label="省份">

<option value="1">山东省</option>

<option value="2">河北省</option>

<option value="3" selected>河南省</option>

</optgroup>

<optgroup label="行业">

<option value="1">IT互联网</option>

<option value="2">制造业</option>

<option value="3" selected>零售业</option>

</optgroup>

<optgroup label="薪资范围">

<option value="1">1000~3000元/月</option>

<option value="2">3000~5000元/月</option>

<option value="3" selected>5000~8000月</option>

</optgroup>

</select>

7.文本域

可以输入很多的内容----qq的留言输入框

<textarea></textarea>

多学一招：文本域可以通过两个属性来设置大小，宽度使用cols属性，高度使用rows属性（选择题常考）

8.普通按钮

点击不会有任何效果

<input type="button" value="普通按钮">

9.提交按钮

用于提交表单的按钮

<input type="submit">

多学一招：该按钮点击后默认会将表单的数据提交

10.重置按钮

将表单的输入状态还原的按钮

<input type="reset">

表单域

标签：<form></form>

作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址

第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素

只考过选择题