本教程案例在线演示

有路网PC端
有路网挪动端

收费配套视频教程

收费配套视频教程

教程配套源码资源

教程配套源码资源

表格

table标签（表格）、
tr标签（行）、
td标签（规范单元格）、
caption标签（题目）、
th标签（表头单元格）。

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。

这三个标签把表格分为三局部：表头、表身、表脚。

table 表格

caption 题目

thead 表头（语义划分）

tbody 表身（语义划分）

tfoot 表尾（语义划分）

tr 行

th 表头单元格

td 表格单元格

<table>    <caption>考试成绩表</caption>        <thead>    <tr>        <th>姓名</th>                <th>语文</th>                <th>英语</th>                <th>数学</th>            <tr>    </thead>        <tbody>    <tr>        <td>小明</td>                <td>80</td>                <td>80</td>                <td>80</td>            </tr>    <tr>        <td>小红</td>                <td>90</td>                <td>90</td>                <td>90</td>            </tr>        <tr>        <td>小杰</td>                <td>100</td>                <td>100</td>                <td>100</td>            </tr>        </tbody>        <tfoot>    <tr>        <td>均匀</td>                <td>90</td>                <td>90</td>                <td>90</td>            </tr>        </tfoot>    </table>

表格款式丑化

<style>table, th, td {     border: 1px solid black;     border-collapse: collapse;    }th, td {     padding: 6px;    color: blue;    }</style>

给表格增加边框，设置字体色彩，
以及给单元格设置一些padding

表单

表单就是收集用户信息的，就是让用户填写的、抉择的。

<div> <h3>欢送注册本网站</h3>    <form> 所有的表单内容，都要写在form标签外面</form></div>

form是英语表单的意思，form两头能够增加文本框、明码框、单选按钮、复选框、下拉列表、按钮、文本域等内容
1.文本框

<input type="text" value="默认值" />

2.明码框

<input type="password"/>

3.单选按钮

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

input的type的值如果是radio就是单选按钮。

须要留神的是必须要有雷同的name属性，单选按钮能力互斥。

label标签

<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /><label for=“nv”>女</label>

input元素要有一个id，而后label标签就有一个for属性，和id雷同，就示意绑定了，这个label和input就有绑定关系了。点击label标签中的文字就能够抉择相应的单选框

5.4.复选框

<input type="checkbox" name="aihao"/> 睡觉 <input type="checkbox" name="aihao"/> 吃饭

复选框，最好也是有雷同的name（便于服务器端收集用户选中的信息）。

5.下拉列表

<select>    <option>吃饭</option>    <option>睡觉</option>    <option>打豆豆</option></select>

select就是“抉择”，
select标签和ul、ol、dl一样，都是组标签
option“选项”。

6.文本域

<textarea cols="20" rows="10"></textarea>

cols属性示意columns“列”，

rows属性示意rows“行”。

值就是数字，示意行数和列数。标签对儿两头的文字是默认呈现在文本框的文字，个别不须要写字。

7.按钮

一般按钮

<input type="button" value="我是一个一般按钮" />

button就是英语“按钮”的意思。value的“值”就是按钮下面显示的文字。

提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不须要写value主动就有“提交”文字。这个按钮点击，表单会提交到服务器。

重置按钮

<input type="reset" />

reset就是“复位”“重置”的意思，能够重置后面各个表单元素中填写的值。

只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly"><input type="submit "  disabled="disabled"  value="保留" >

我的项目实战

制作商品搜寻表单

search-form.css

.search{  height: 40px;  width: 420px;  margin: 0 auto;  margin-top: 60px;}.search .input{  border: 3px solid red;  width: 300px;  height: 36px;  font-size: 20px;}.search .btn{  height: 44px;  width: 100px;  border:0;  background-color: red;  color: white;  font-size: 18px;  font-weight: bold;  margin-left: -4px;  vertical-align: top;  letter-spacing: 6px;}

youlu-search-form.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <link rel="stylesheet" href="reset.css">  <link rel="stylesheet" href="search-form.css"></head><body>  <div class="search">    <form action="#">      <input class="input" type="text" placeholder="书名">      <input class="btn" type="button" value="搜寻">    </form>  </div></body></html>