zoukankan      html  css  js  c++  java
  • html 后手

    1.a

    (1.)超链接 

    <a href="new.html">点击进入到新网页</a>
    这里可以直接跳转到一个页面
    <a href="http://www.baidu.com" target="_blank">进入百度</a>
    这里 target="_blank 指可以在空白页面打开新网址
    target="_self  指可以再当前页面显示新网址
    (2)标签内部跳转
    锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
     1 <!DOCTYPE html>
     2 <html >
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 
     7 </head>
     8 <body>
     9 <p>my</p>
    10 <p>my</p>
    11 <p>my</p>
    12 <p>my</p><p>my</p>
    13 <p>my</p>
    14 <div id="zhangqing">张庆</div>
    15 <p>my</p>
    16 <p>my</p>
    17 <p>my</p>
    18 <p>my</p>
    19 <p>my</p>
    20 <p>my</p>
    21 <p>my</p>
    22 <p>my</p>
    23 <p>my</p><p>my</p>
    24 <p>my</p>
    25 <p>my</p><p>my</p>
    26 <p>my</p>
    27 <p>my</p>
    28 <p>my</p>
    29 <p>my</p>
    30 <p>my</p><p>my</p>
    31 <p>my</p>
    32 <p>my</p><p>my</p>
    33 <p>my</p>
    34 <p>my</p><p>my</p>
    35 <p>my</p>
    36 <p>my</p><p>my</p>
    37 <p>my</p>
    38 <p>my</p><p>my</p>
    39 <p>my</p>
    40 <p>my</p><p>my</p>
    41 <p>my</p>
    42 <p>my</p>
    43 <a href="#zhangqing">找张庆</a>
    44 <a href="#zhangqing">找张庆</a>
    45 <a href="#">找张庆</a>
    46 <a href="#">找张庆</a>
    47 <a href="javascript:void(20)">找张庆1</a>
    48 <a href="javascript:void(0)">找张庆2</a>
    49 
    50 </body>
    51 </html>
    内部跳转
    锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
    第一个根据 id 查找 第二个 回到顶部 第三个 刷新
    2.image
    src:连接的图片资源
    alt:图片资源加载失败。显示的文本
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style type="text/css">
     7         span{
     8             color: blue;
     9         }
    10         a{
    11             display: inline-block;
    12             width: 300px;
    13             height: 300px;
    14         }
    15     </style>
    16 </head>
    17 <body>
    18 <div class="box">
    19     <a href="javascript:void(0);">
    20         <img src="https://img04.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee8772786500.jpg" alt="奥斯卡讲道理" width="500" height="600">
    21     </a>
    22 </div>
    23 <div>
    24     <span>我最强</span>
    25 </div>
    26 </body>
    27 </html>
    a与img 设置图片链接
            a{
                display: inline-block;
                 300px;
                height: 300px;
            }

    这里是将超链接于图片重合不会卡位置

    3.ul ol dl

    ul为无序 这里并不是没有序号 而是一个语句  可以嵌套 li

    ol 为有序  有自己的type类型 

    dl为自定义 dt dd 

    dt 是主要描述的 是特别加粗的

    dd是用来描述dt的 可没有

    4.table

    border='1' style="border-collapse:collapse;" 将单元格的线和表格的单元合并1
    table 由 tr td 组成 tr是上面的列 td 是列上的内容 table实现的的是一个竖列
    table 可以设置单元格的大小 border 是显示那些单元格的线
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <table border="2" style="align-collapse: collapse;">
     9     <tr>
    10 
    11         <td>我是</td>
    12         <td>我是</td>
    13         <td rowspan="2"></td>
    14     </tr>
    15     <tr>
    16         <td>拿着</td>
    17            <td>拿着</td>
    18     </tr>
    19 </table>
    20 </body>
    21 </html>
    将上下单元格合并

    单元格可以合并成一块 横向(左右)为

    <td colspan="2">日天</td>  需要将空缺的是改掉 后面接的是合并的块
    单元格可以合并成一块 纵向(上下)为
    <td colspan="2">日天</td>
    在表格中 有优先级<thead> <tbody> <tfoot> 这三个优先级
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <table border="2" style="align-collapse: collapse;">
     9     <tfoot>
    10         <tr>
    11         <td>21拿着</td>
    12            <td>我拿着</td>
    13     </tr>
    14     </tfoot>
    15     <thead>
    16     <tr>
    17 
    18         <td>我是</td>
    19         <td>我是</td>
    20         <td rowspan="2"></td>
    21     </tr>
    22     </thead>
    23 
    24     <tr>
    25         <td>拿着</td>
    26            <td>拿着</td>
    27     </tr>
    28 </table>
    29 </body>
    30 </html>
    table 优先级

      
    5.form
    form
    HTTP协议
    action:提交的服务器网址
    method:get(默认)| post(应用:登录注册、上传文件)
    页面中的a img link 默认是get请求

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <form action="" method="get"    enctype="multipart/form-data">
     9 
    10      姓名<input value="哈哈">逗比<br>
    11      昵称<input value="哈哈" readonly="">逗比<br>
    12    名字<input type="text" value="name" ><br>
    13     密码<input type="password" value="pwd" size="50"><br>
    14     性别<input type="radio" name="gender" value="male" checked="">15     <input type="radio" name="gender" value="male" ><br>
    16     爱好:<input type="checkbox" name="love" value="eat">吃饭
    17     <input type="checkbox" name="love" value="sleep">睡觉
    18     <input type="checkbox" name="love" value="bat">打豆豆
    19     </form>
    20 
    21 </form>
    22 
    23 </body>
    24 </html>
    input文本
    • checkbox:多选按钮,名字相同的按钮作为一组进行选择。
    • checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。
      • value="内容":文本框里的默认内容(已经被填好了的)
      • size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
        注意size属性值的单位不是像素哦
      • readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
        用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。
      • disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。

    6.select 下拉列表清单
     1 <form>
     2         <select>
     3             <option>小学</option>
     4             <option>初中</option>
     5             <option>高中</option>
     6             <option>大学</option>
     7             <option selected="">研究生</option>
     8         </select>
     9         <br><br><br>
    10 
    11         <select size="3">
    12             <option>小学</option>
    13             <option>初中</option>
    14             <option>高中</option>
    15             <option>大学</option>
    16             <option>研究生</option>
    17         </select>
    18         <br><br><br>
    19 
    20         <select multiple="">
    21             <option>小学</option>
    22             <option>初中</option>
    23             <option selected="">高中</option>
    24             <option selected="">大学</option>
    25             <option>研究生</option>
    26         </select>
    27         <br><br><br>
    28 
    29     </form>
    下拉列表

     <option selected="">研究生</option>  为优先研究生

    size 默认为1 为下拉视图   size="3 "  就按照滚动式图





                      


  • 相关阅读:
    PAT (Advanced Level) 1080. Graduate Admission (30)
    PAT (Advanced Level) 1079. Total Sales of Supply Chain (25)
    PAT (Advanced Level) 1078. Hashing (25)
    PAT (Advanced Level) 1077. Kuchiguse (20)
    PAT (Advanced Level) 1076. Forwards on Weibo (30)
    PAT (Advanced Level) 1075. PAT Judge (25)
    PAT (Advanced Level) 1074. Reversing Linked List (25)
    PAT (Advanced Level) 1073. Scientific Notation (20)
    PAT (Advanced Level) 1072. Gas Station (30)
    PAT (Advanced Level) 1071. Speech Patterns (25)
  • 原文地址:https://www.cnblogs.com/zhangqing979797/p/9664352.html
Copyright © 2011-2022 走看看