11.02-HTML的常规使用以及作业

来源：互联网发布：淘宝哪家买iphone靠谱编辑：程序博客网时间：2024/06/06 10:14

HTML的使用

1.1路径概念

相对路径-顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径使用这种方法。
绝对路径-绝对路径就是你的主页上的文件活目录在硬盘上真正的路径。比如，你的Perl程序是存放在c:/apache/cgi-bin下的，那么c:/apache/cgi-bin就是cgi-bin目录的绝对路径。

1.相对路径使用的特殊符号
“./”：代表目前所在的目录。
“../”：代表上一层目录。
以”/”开头：代表根目录。

2.优缺点及使用
1、绝对路径的优点：
如果网页位置改变，里面的链接还是指向正确的URL。
2、绝对路径的缺点：
网页中资源容易被盗用。
3、相对路径的优点：
容易移动内容，可以整个目录移动。
4、相对路径的缺点：
部分内容页面换了位置时，链接容易失效。

1.2 表格

1.表格简介
HTML中的表格可以大致分为三个部分：
thead ———表格的页眉
tbody ———表格的主体
tfoot ———表格的页脚

thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。
这个标签就是放在三间房子里面的东西，每一个就是表格一行。
表格的每一行被分为一个个单元格。

2.标签用于对表格中的列进行组合，以便对其进行格式化。
标签规定了元素内部的每一列的列属性。

3.合并单元格和表格的间距
colspan属性：合并列
rowspan属性：合并行
以上两个属性均作用在单元格上，并且属性值的数字代表算上单元格本身，一共合并的单元格个数。
cellpadding属性：单元格边框与内容的间距。
cellspacing属性：单元格之间的间距。

1.3 表单域的原理

1.什么是表单
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单在网页中主要负责采集数据。

2. 单选框和复选框
在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
type:当type=”radio”时，控件为单选框。当type=”checkbox”时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：告诉服务器，我们提交的这个value值代表的什么。
checked：当设置checked=”checked”时，该选项被默认选中。

3.下拉列表框
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
value：提交数据到服务器的值。
selected=”selected”：设置selected=”selected”属性，则该选项就被默认选中。
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。

多行文本和上传

1.多行文本
当用户需要在表单中输入大段文字时，需要用到文本输入域。
文本
标签是成对出现的，以开始，以结束。
name：指定输入框的名字。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在标签之间可以输入默认值。

2.上传
在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。
在HTML中，文件上传同样也使用input标签。

提交按钮和重置按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。当我们需要重置表单信息的时候，需要用到重置按钮。

1.提交按钮
type：只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。

2. 重置按钮
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
type：只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。

驼峰命名法：第一个英文首字母小写，第二个英文开始首字母大写
border：定义边框宽度
span：定义列祖数量

作业

<html> <head>  <meta charset="UTF-8">  <title> 课程表 </title>  <style type="text/css">    tr{        text-align:center;    }  </style> </head> <body>    <table border="2" bordercolor="blue">    <caption>课程表</caption>        <tr>            <th>项目</th>            <th colspan="5">上课</th>            <th colspan="2">休息</th>        </tr>        <tr>            <th>星期</th>            <th>星期一</th>            <th>星期二</th>            <th>星期三</th>            <th>星期四</th>            <th>星期五</th>            <th>星期六</th>            <th>星期日</th>        </tr>        <tr>            <td rowspan="4">上午</td>            <td>语文</td>            <td>数学</td>            <td>英语</td>            <td>英语</td>            <td>物理</td>            <td>计算机</td>            <td rowspan="4">休息</td>        </tr>        <tr>            <td>数学</td>            <td>数学</td>            <td>地理</td>            <td>历史</td>            <td>化学</td>            <td>计算机</td>        </tr>        <tr>            <td>化学</td>            <td>语文</td>            <td>体育</td>            <td>计算机</td>            <td>英语</td>            <td>计算机</td>        </tr>        <tr>            <td>政治</td>            <td>英语</td>            <td>体育</td>            <td>历史</td>            <td>地理</td>            <td>计算机</td>        </tr>        <tr>            <td rowspan="2">下午</td>            <td>语文</td>            <td>数学</td>            <td>英语</td>            <td>物理</td>            <td>计算机</td>            <td>英语</td>            <td rowspan="2">休息</td>        </tr>        <tr>            <td>数学</td>            <td>数学</td>            <td>地理</td>            <td>历史</td>            <td>化学</td>            <td>计算机</td>        </tr> </body></html>

阅读全文

0 0