HTML实训课程笔记_03

来源：互联网发布：人工智能技术论坛编辑：程序博客网时间：2024/06/05 10:33

1.
相对路径的理解：

    ./代表当前路径比如：D:\Ncode\02\day03\test\test1
    ./../代表当前路径的上一级目录：D:\Ncode\02\day03\test
    ./../../代表当前路径的上一级目录的上一级目录：D:\Ncode\02\day03
    注意：一上写法一般会省略./(但在实际项目开的过程中都会进行处理)

    目录：D:\Ncode\02\day03\test\test1
     上一级目录：../   D:\Ncode\02\day03\test
     上一级目录的上一级目录：../../D:\Ncode\02\day03
     上一经目录的上一级目录中的a.html:../../a.html


    目录：D:\Ncode\02\day03
   ./代表的是当前路径 D:\Ncode\02\day03\
   ./img.html代表的是当前路径 D:\Ncode\02\day03\img.html
   备注：如果说 img.html与a.html在同一个目录一般会省略./(但在实际项目开的过程中都会进行处理)
绝对路径的理解：
      1.绝对路径：是从盘符开始的路径，形如C:\windows\system32\cmd.exe
   2.包含了标识Internet上的文件所需要的所有信息，包括完整的协议名称、主机名称、文件夹名称和文件名称。格式为：
        通信协议://服务器地址:端口号/文件位置…/文件名例如：http://ww.sina.com.cn/web/index.html

案例：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超链接的使用</title></head><body>           <h3>超链接的使用</h3>    <hr noshade="noshade"/>    <a href="./test/img.html" target="_self" title="我是链接">我是链接</a>   <!--必须用href属性       它的属性值有：       # 代表本页    http://www.baidu.com  可以是一个URL地址 （绝对路径）  img.html　（相对路径）  file:///D|/Ncode/02/day02/news_2.html 本地文件 （绝对路径）       D:\Ncode\02\day03   img.html 相当于 ./img.html 的写法   ./代表的是当前路径 D:\Ncode\02\day03    ./img.html代表的是当前路径 D:\Ncode\02\day03\img.html  备注：如果说 img.html与a.html在同一个目录  会省略./  href="./test/img.html" <==等价于==>href="test/img.html"     -->  </body></html>

2.
<a href="#" target="是否在新窗口显示" title="鼠标指向链接时显示的文字">链接名称</a>

关于target属性值的说明：
   当属性值为：_parent 代表：在上一级窗口中打开，一般使用分桢的框架页会经常使用
   当属性值为：_blank 代表：在新窗口打开
   当属性值为：_self 代表：在同一个框架或窗口中打开，该项一般不用设置
   当属性值为：_top     代表：在浏览器的整个窗口中打开，忽略任何框架

3.
关于锚标记的理解：锚记标签用于使用户"跳"到文档的某个部分
1.HTML 的 NAME 属性用于创建锚标记例如：<a name ="marker">主题名称</a>
2.为达到这种跳转效果，请在 HREF 参数中使用该标记例如：<a href="#marker">主题名称</a>
补充知识：
3.利用锚标记跳转到指定页面的指定部分：<a href="a2.html#sanguo">跳转到a2.html页面</a>

4.
邮件发送处理
     <a href="mailto:02@qq.com?subject=关于我问题&body=领导下方面。&cc=xin@qq.com&bcc=dalingdao@qq.com">02@qq.com</a>

案例：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body>          如国有您有什么疑问，请发送邮件至： <a href="mailto:02@qq.com?subject=关于我问题&body=领导下方面。&cc=xin@qq.com&bcc=dalingdao@qq.com">02@qq.com</a> <!--   mailto:发送邮件的地址 第一次后边跟参数的时候 用?链接 以后的参数用&的链接      subject:主体   body：内容   cc：抄送   bcc：暗送    -->   <a href="a2.html#sanguo">跳转到a2.html页面</a><!--利用锚标记跳转到指定页面的指定部分--></body></html>

5.
表单
form表单采用get方式提交给服务器
   url地址： a.html?uname=chenhj&upass=111
       1.不安全
    2.大小受限制1KB

   form表单采用post方式提交数据给服务器
       a.html
       1.安全
    2.大小2M

   它两个比较：
    Get是通过http传输，特点在url上有尾巴，长度有限。
Post是通过Socket传输，url无尾巴，安全，无长度限制。
Get是用来取得信息的，Post是用来来发送信息。
Get请求请提交的数据放置在HTTP请求协议中，而POST提交的数据则放在实体数据中。

6.
input标签
    <INPUT type="?" name="?" size="?" value="?" maxlength="?" checked="?">

1.Type:此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。
2.Name:此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。
3.Value:此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。
4.Size:此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。

5.Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
    6.Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。

7.
备注：
1.文本框
     <input name="文本框名称" type="text" value="初始值" size="显示字符数" maxlength="最多容纳字符数">
2.密码框
     <input name="文本框名称" type="password" value="初始值" size="显示字符数" maxlength="最多容纳字符数">
3.多行文本框
     <textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数">
       初始内容
     </textarea>
4.单选框
     <input name="单选框名称" type="radio" value="选择名称" checked(初始状态，如果为默认，则写checked；否则不写)>
5.复选框
     <input name="复选框名称" type="checkbox" value="选择名称" checked(初始状态，如果为选中，则写checked；否则不写)>
6.菜单式
<select name="列表框名称">
  <option selected(哪个为初始选择，就添加selected语句[只有一个]) value="提交值">列表1</option>
  <option value="提交值">列表2</option>
  <option value="提交值">列表3</option>
  ...
</select>
7.列表式
<select name="列表框名称" size="显示的行数" multiple(如果允许多选，则有该命令；否则没有此命令)>
  <option selected(哪个为初始选择，就添加selected语句[可有多个，但没有意义]) value="提交值">列表1</option>
  <option value="提交值">列表2</option>
  <option value="提交值">列表3</option>
  ...
</select>
8.按钮
<input type="按钮类型(reset、submit、button)" name="按钮名称" value="按钮显示文本">
9.隐藏域
    <input name="名称" type="hidden" value="提交值">
10.浏览器打开文件
    <input name="名称" type="file" size="显示字符长度" maxlength="最大长度">

注册案例效果

注册案例代码

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>form</title></head><body><h3 align="center">表单的使用</h3><hr noshade="noshade" /><form action="img.html" method="get">  <table border="1px" cellpadding="0" cellspacing="10" align="center">    <tr>      <td>用户名</td>      <td><input type="text" name="uname" /></td>    </tr>    <tr>      <td>密码</td>      <td><input type="password" name="upass" /></td>    </tr>    <tr>      <td>性别</td>      <td><input type="radio" name="sex" value="男">        男        <input type="radio" name="sex" value="女" checked="checked">        女 </td>    </tr>    <tr>      <td>爱好</td>      <td><input type="checkbox" name="fav" value="玩游戏">        玩游戏        <input type="checkbox" name="fav" value="看书" checked="checked">        看书        <input type="checkbox" name="fav" value="音乐">        音乐 </td>    </tr>    <tr>      <td>学历</td>      <td><select name="edu">          <option value="硕士">硕士</option>          <option value="硕士">专科</option>          <option value="硕士" selected="selected">本科</option>        </select>      </td>    </tr>    <tr>      <td>个人简介</td>      <td><textarea rows="4" cols="35" name="disc"></textarea>      </td>    </tr>    <tr>      <td>照片</td>      <td><input type="file" name="upfile"></td>    </tr>    <tr>      <td align="center" colspan="2"><input type="submit" value="注册" />                            <input type="reset" value="重置" />      </td>    </tr>  </table></form></body></html>

0 0