• 第二篇 Html(13章节)-a标签,img标签,列表,表格


    1. a标签

    - 超链接,可以跳转

    - 锚  href='#某个标签的ID'    标签的ID不允许重复

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>百度跳转</title>
     6 </head>
     7 <body>
     8      <div>
     9          <a href="http://www.baidu.com" target="_blank">百度</a>
    10      </div>
    11      <div>
    12          <a href="#i1">第一章</a>
    13          <a href="#i2">第二章</a>
    14          <a href="#i3">第三章</a>
    15          <a href="#i4">第四章</a>
    16      </div>
    17 
    18      <div id="i1"  style="height:400px;">第一章的内容</div>
    19      <div id="i2"  style="height:400px;">第二章的内容</div>
    20      <div id="i3"  style="height:400px;">第三章的内容</div>
    21      <div id="i4"  style="height:400px;">第四章的内容</div>
    22 
    23 </body>
    24 </html>

    2. img 标签

    src,title,alt,style

    3. 列表

    ul-li

    ol-li

    dl-dt大标题

        dd小标题

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <img src="1.jpeg">
     9     <ul>
    10         <li>qwer</li>
    11         <li>tyuii</li>
    12         <li>ahdfhaj</li>
    13         <li>adhsh</li>
    14     </ul>
    15     <ol>
    16         <li>asdfq</li>
    17         <li>hhhjk</li>
    18         <li>sfhhh</li>
    19         <li>ddddd</li>
    20     </ol>
    21     <dl>
    22         <dt>111</dt>
    23         <dd>aaa</dd>
    24         <dd>bbb</dd>
    25         <dd>ccc</dd>
    26         <dt>222</dt>
    27         <dd>qqq</dd>
    28         <dd>www</dd>
    29         <dd>eee</dd>
    30     </dl>
    31 </body>
    32 </html>

    4.表格

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
         <table border="1">
             <tr>
                 <td>主机名</td>
                 <td>端口</td>
                 <td>操作</td>
             </tr>
             <tr>
                 <td>1.1.1.1</td>
                 <td>80</td>
                 <td>
                     <a href="1.html">查看详细</a>
                     <a href="#">修改</a>
                 </td>
             </tr>
         </table>
    </body>
    </html>

    标准写法

    table

          thead

                  tr

                    th

          tbody

                 tr

                   td

    colspan

    rowspan

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
          <table border="1">
              <thead>
                    <tr>
                        <th>表头1</th>
                        <th>表头2</th>
                        <th>表头3</th>
                    </tr>
              </thead>
              <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td colspan="2">a</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>qqq</td>
                        <td rowspan="2">rrr</td>
                    </tr>
    
              </tbody>
          </table>
    
    </body>
    </html>
  • 相关阅读:
    .net Ioc 之 Unity 适合刚开始使用
    今天研究Unity Ioc 框架
    C#连接周立功CAN盒,调用ZCAN_OpenDevice函数时返回值一直是0失败。
    CAN通讯
    初学winform 自定义控件
    linq联表查询的时候报错
    dot net core 在IIS发布后,打开网页报错
    网卡驱动正常,网线也正常,但是网线插入电脑网口,网口指示灯就是不亮,网络适配器显示网线拔出
    flutter环境配置(windows)
    C#连接oracle数据库报错:OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用
  • 原文地址:https://www.cnblogs.com/wz123/p/10059973.html
Copyright © 2020-2023  润新知