HTML 网页开发、CSS 基础语法——八.HTML基本语法

表格制作

1.表格基础

创建一个简单的表格至少有三个标签组成，分别是<table>,<tr>,<td>标签。

　　table：表格，定义的是整个的表格大结构。

　　tr：table rows，表格的行，定义的是表格由多少行组成。

　　td：table data, 表格数据，也叫表格单元格，定义每一行内部的单元格

三者的关系：table>tr>td. 一个表格中有多少行，每行中有多少个单元格。

① <table>的属性

<table>标签可以添加border边框属性。

属性值：数字，表示像素值。

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法：设置标签样式属性style。

属性值：border-collapse : collapse; 表示边框塌陷。

 

②表头单元格

 

• 如果要绘制表头，使用标签<th>，table head data，表头单元格。

• 在表格中绘制的时候，替换的是<td>的位置。

• <th>标签中自带默认的css样式效果，文字显示粗体居中。

 

2.合并单元格

常见的表格操作中，有一种叫做合并单元格的，可以通过单元格属性进行设置。

① 单元格属性

• 表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。

• rowspan：跨行和并。上下的合并。

• colspan：跨列合并。左右的合并。

• 属性值：数字，数字是几表示跨几行或跨几列合并。

② 制作技巧

a.先列出所有行<tr>，以最小单元格为标准。

b.再添加每一行的<td>或<th>单元格。

c.划分单元格所在行时，顶边对齐的属于同一行。

d.将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小

的单元格。

 

3.表格分区

一个完整的表格分为四个大的区域：表格标题，表格头部，表格页脚。

① 分区标签

• <table>内部最直接的子级包含四个分区标签，他们都是双标签。

caption：表格的标题，内部书写标题文字。

thead：table head，表格的头部。内部嵌套tr>th。

tbody：table body，表格的主体。内部嵌套tr>td。

tfoot：table foot，表格的页脚。内部嵌套tr>td。

• 四个分区可以选择性的进行组合。

• 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、

tbody、tfoot执行的。

 

② 制作技巧

a.先书写大分区标签结构。

b.填充每个分区的内部内容

c.如果有合并单元格内容，进行单元格合并。

 

表单

1.表单的组成

• HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击

的小控件。

• 在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个

部分构成。

 

2.功能

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

 

3.表单域标签

 

• HTML表单域使用<form>标签进行定义。

• <form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放一个<form>标签之内。

• <form>标签为双标签，容器级标签。

 

4.表单域标签属性

<form action="xxx.php" method="post/get" name="message">
     提示信息及表单控件书写位置
</form>

表单元素

1.<input>标签

• <input>标签是最重要的一个表单元素。

• <input>标签为单标签，本身相当于一个特殊的文本。

• <input>标签需要通过标签属性实现各种功能。

 

 <input>标签常用属性

① 单行文本输入框：text

<input>标签的type属性值为text。

定义提供用户输入的单行文本的输入框，不能输入多行文字。

常用value属性定义默认的输入文字。 

<input type="text" value="默认输入文本" >

② 密码输入框：password

<input>标签的type属性值为password。

定义提供用户输入的密码框。

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

<input type="password">

③ 单选框：radio

<input>标签的type属性值为radio。

定义提供用户点击选择的单选框。

单选框一般都是成组出现，多个单选框组成一组选择的情况。

同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性

值实现。 

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

④ 复选框：checkbox

<input>标签的type属性值为checkbox。

定义提供用户点击选择的多选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

同一组复选框最好也设置相同的name属性。

<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" /> 代码
<input type="checkbox" name="hobby" /> 运动

注：

单选框和复选框都可以提前设置默认选中项。

<input>标签有一个checked属性，如果不设置表示默认没有选中。

属性值如果设置为"checked"，表示该项默认被选中。 

<input type="radio" name="sex" checked="checked" /> 男
<input type="checkbox" name="hobby" checked="checked" /> 唱歌

⑤ 按钮

<input>标签有四种形式的按钮： 

⑥ 文件上传：file

<input>标签的type属性值为file。

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。 

<input type="file">

使用input的multiple属性，可以决定是否可以选择多个文件。

<input type="file" multiple="multiple" />

2. <textarea>属性

<textarea>有两个标签属性，可以设置显示区域大小。

rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，

会被隐藏并且出现滚动条。

cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字

节数（一个汉字按2字节计算）。 

<textarea cols="30" rows="10">默认输入文字</textarea>

3. 下拉菜单

① 标签

下拉菜单需要至少两个标签完成结构：

<select>：选择，表示定义下拉菜单整体结构。

<option>：选项，表示定义下拉菜单的每一项。

两个标签都是双标签，文本级标签。

关系：select>option，option可以有任意多项。 

<select>
    <option>广州</option>
    <option>北京</option>
    <option>重庆</option>
    <option>上海</option>
</select>

② 默认选中项

默认情况下，选中的是第一项。

下拉菜单可以通过给<option>标签设置selected属性，属性值为selected，更改默认选中项。 

<option selected="selected">北京</option>

③ 分组管理

下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。

可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。

关系：select>optgroup>option

<optgroup>可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签<optgroup>是不能被点击选择的。

<select>
    <optgroup label="国内">
        <option>广州</option>
        <option selected="selected">北京</option>
    </optgroup>
    <optgroup label="国外">
        <option>伦敦</option>
        <option>巴黎</option>
    </optgroup>
</select>

4. label标签

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个<label>标签。

<label>标签的作用是帮表单元素定义标注（标记）。

如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。

 

绑定方法一：

a.给表单元素设置id属性。

b.然后将需要绑定的其他内容用<label>标签包裹。

c.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。

<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>

绑定方法二：

如果绑定内容和表单元素写在一起，可以化简绑定写法。

直接使用<label>标签将绑定内容与表单元素一起进行嵌套。

<label><input type="radio" name="sex" />男</label>