zoukankan      html  css  js  c++  java
  • HTML第三天学习笔记

      昨天学的超链接,今天深入学习了下,发现了更多的知识点,而且关于初始新建网页时,由于是初学者,所以还是纯手写代码~

     1 <html>
     2 <head>
     3     <title>超链接</title>
     4     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">
     5     <script type = "text/javascript"></script>
     6 </head>
     7 <body>
     8     <h2>绝对地址</h2>
     9     <a href = "http://www.baidu.com" target = "_blank">百度</a><br>
    10     <a href = "file:///D:文档视频同步视频同步:作业02.html" target = "_blank">视频同步:作业02</a>
    11     <hr>
    12     <h2>相对地址</h2>
    13     <a href = "视频同步:项目符号.html" target = "_blank">视频同步:项目符号</a>
    14     <hr>
    15     <h2>特殊链接</h2>
    16     <a href = "Images0.zip">下载图片</a><br>
    17     <a href = "mailto:3148113255@qq.com">发送邮件</a><br>
    18     <a href = "#" target = "_blank">空链接</a><br>
    19     <a href = "javascript:window.close()">关闭窗口</a>
    20 </body>
    21 </html>

    常用属性
     href:目标文件地址的URL,该URL是相对地址,也可以是绝对地址;
     target:目标文件的显示窗口
      _blank:在新窗口中打开目标文件
      _self:在当前窗口打开目标文件,相当替换;
      _parent:在父级窗口中打开目标文件;
      _top:在最顶级窗口打开目标文件;
     其中_parent和_top常用于框架网页中
     name:定义锚点链接的名称;

     绝对地址URL
      1、远程的绝对地址
       访问远程的文件,总是以域名、主机名开头。
      2、本地的绝对地址
       访问本地的绝对地址,是以“file:///”开头的绝对地址。

     相对地址URL
      1、当前文件和目标文件是同级文件;
       链接地址直接写目标文件名;
      2、当前文件与目标文件所在的文件夹同级;
       先找文件夹名,再找文件名;
      3、目标文件位于上一层目录中;
       上一级文件使用"../"表示
       上两级文件使用"../../"表示
       以此类推;

    特殊链接
     1、下载链接:网页不能直接打开的文件会提示下载;
     2、邮箱链接:
      mailto:(邮箱地址)
     3、普通空链接:
     4、js链接
      在链接地址中写#号;
      在火狐window.colse()用不了时使用如下代码;
      <a href = "javascript:window.open('about:blank','_self').close()">关闭窗口</a>
      或输入地址 about:config 然后再输入关键字 close_window 修改其布尔值;

    ============================================================================

    第二个是关于锚点链接:

     1 <html>
     2 <head>
     3     <title>视频同步:锚点链接</title>
     4     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">
     5     <script type = "text/javascript"></script>
     6 </head>
     7 <body>
     8     <h4>界面的跳转</h4>
     9     <ul>
    10         <li><a href = "视频同步:作业02.html#this">跳转界面</a></li>
    11     </ul>
    12 </body>
    13 </html>

    锚点链接:
     含义:在一个网业的不同区域进行跳转。锚点定义为“定义记号”;
     定义锚点:<a name = "锚点名称"></a>
      锚点名称的命名规则:可以包含字母、数字、下划线,但只能以字母开头。
      注意:<a>和</a>之间没有内容,换句话说,这个记号不是给我们看的,而是给链接看的。
      例如: <a name = "Top_2"></a>
     跳转到锚点:
      语法:  <a href = "文件名#锚点名称">内容</a>
      文件名:可有可无,如果是同一网页的不同部分跳转,不用文件名,有则反之;
      注意:<a>和</a>之间要有内容,否则会无法进行跳转。

    ========================================================================================

    第三个知识点是关于meta标记

    1 <html>
    2 <head>
    3     <title>meta标记</title>
    4     <meta http-equiv = "content-type" content = "text/html" charset = "uft-8">
    5 </head>
    6 <body>
    7     
    8 </body>
    9 </html>

    meta的主要作用:
     是提供网页的元信息。比如:指定网页的搜索关键字;
     <meta>有两个属性:一个是http-equiv和name
     1、http-equiv属性
      功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。
      http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。
      (1)、设置网页的字符集;
      <meta = http-equiv = "content-type" content = "text/html" charset = "uft-8">
      (2)、网页自动刷新;
      <meta = http-equiv = "refresh" content = "2">//每隔两秒钟刷新网页一次;
      <meta = http-equiv = "refresh" contrnt = "2" url = "http://www.baidu.com">每隔两秒跳一次到百度。
     2、name属性
      name属性主要用于设置网页的搜索关键字、版权信息、作者等
      (1)、设置网页关键字搜索;
      <meta name = "keywords" content = "关键字">
      (2)、设置网页描述信息
      <meta name = "description"> content = "描述">

    ===================================================================================

    第四个知识点是表格的制作

     1 <html>
     2 <head>
     3     <title>Border</title>
     4     <meta http-equiv = "content-type" content = "text/html; charset = tuf-8">
     5 <head>
     6 <body>
     7     <table border = "1" width = "500">
     8         <tr>
     9             <td>&nbsp</td>
    10             <td>&nbsp</td>
    11             <td>&nbsp</td>
    12         </tr>
    13         <tr>
    14             <td>&nbsp</td>
    15             <td>&nbsp</td>
    16             <td>&nbsp</td>
    17         </tr>
    18     </table>
    19 </body>
    20 </html>

    <table>属性
     表格宽度,单位可以是百分比也可以是固定值。
     heigth:表格高度
     align:表格水平对齐方式,取值:left、center、right
     border:边框粗细
     bordercolor:边框颜色
     bgcolor:表格背景颜色
     background:背景图片URL
     cellpadding:单元格边线到内容间的距离(填充距离)
     cellspacing:单元格与单元格之间的距离(间距)
     rules:合并单元格边框线,取值:all
      注意:rules兼容性不好,请用CSS取代;

    <tr>属性——行标记
     bgcolor:行的背景色
     height:行的高度
     align:行的文本水平居中
     valign:垂直居中,取值:top,middle,bottom

    <td>是普通单元格<th>是标题单元格,居中加粗显示

    知行合一
  • 相关阅读:
    Educational Codeforces Round 92
    练习
    03 并查集(带权,分类) 树状数组 线段树
    02 动态规划 LIS LCS
    05 矩阵优化 (斜率优化等待补)
    01 STL 打表 二分查找
    AtCoder Beginner Contest 174
    Codeforces Round #660 (Div. 2)
    PCHMI工控组态开发视频教程
    分享一款免费的工控组态软件(PCHMI)
  • 原文地址:https://www.cnblogs.com/YeYunRong/p/6075837.html
Copyright © 2011-2022 走看看