zoukankan      html  css  js  c++  java
  • html的标签分类————body内标签系列

    超链接标签

      <a href="" target="_blank">text</a>,此类标签通常是超链接。其中href后面跟进的是超链接的地址,target代表打开新页面的方式,_blank代表在新的标签页打开。

    • 通过超链接“text”跳转到百度首页。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="http:www.baidu.com">text</a>
    </body>
    </html>
    View Code
    • 通过超链接跳转到需要查看的位置。通过id来判断跳转的位置,在href中必须加上’#‘,而且,id不能重复,否则会报错。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="#1">第一章</a>
        <a href="#2">第二章</a>
        <a href="#3">第三章</a>
        <div id="1" style="height:600px;">第一章的内容</div>
        <div id="2" style="height:600px;">第二章的内容</div>
        <div id="3" style="height:600px;">第三章的内容</div>
    </body>
    </html>
    View Code

    插入图片和列表

    • 插入图片通常用img,具体使用方法很简单。可以通过嵌套实现图片的超链接,通过title显示图片的标识,当找不到图片的路径时,可以通过alt来实现对其描述。说也说不明白,贴段代码自己研究吧。
    •  插入列表更简单,有三种表现形式:ul-li, ol-li, dl-dt/dd,具体的表现形式自己可以研究,分别以点、数字和标题形式存在。同时可以插入<a href=""></a>来实现超链接。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="s1.html">
            <img src="aa.jpg" style="height:200px;200px;" alt="beauty" title="大美女">
        </a>
        <ul>
            <li>姓名</li>
            <li>张钊</li>
            <li>陈狗</li>
        </ul>
         <ol>
            <li>姓名</li>
            <li>张钊</li>
            <li>陈狗</li>
        </ol>
        <dl>
            <dt>姓名</dt>
            <dd>张钊</dd>
            <dd>陈狗</dd>
        </dl>
    
    </body>
    </html>
    View Code

    插入表格

    • 一个规范的表格结构-:table-----thead-----tr-----th(代表标题)/ -----tbody-----tr-----td(代表表格内容)。
    • 如果想要合并单元格,可以通过colspan="num"或者rowspan="num"来合并。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张钊</td>
                    <td>18</td>
                    <td><a href="#">查询信息</a></td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <td>陈狗</td>
                    <td>28</td>
                    <td><a href="https:www.baidu.com">查询信息</a></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    View Code

    lable标签和fieldset标签

    • label标签运用场景较少,通常是输入用户名或密码时,不仅仅可以通过点击text部分,通过点击用户名或密码也可以进入文本框的光标。通过和text的id绑定使用。
    • fieldset标签应用的场景更少,只是构造某个边框时候才会使用,可以稍微对照着就能搞明白。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <fieldset>
            <legend>
                登录
            </legend>
            <label for="1">
            用户名:
            </label>
            <input id="1" type="text" name="user"/>
            <label for="2">
            密码:
            </label>
            <input id="2" type="text" name="password"/>
        </fieldset>
    </body>
    </html>
    View Code
  • 相关阅读:
    092、部署Graylog日志系统(2019-05-16 周四)
    091、万能的数据收集器 Fluentd (2019-05-15 周三)
    090、ELK完成部署和使用 (2019-05-13 周二)
    在CentOS7上无人值守安装Zabbix4.2
    089、初探ELK (2019-05-13 周一)
    34、Scrapy 知识总结
    33、豆瓣图书短评
    32、出任爬虫公司CEO(爬取职友网招聘信息)
    31、当当图书榜单爬虫
    30、吃什么不会胖
  • 原文地址:https://www.cnblogs.com/zz1314/p/10320433.html
Copyright © 2011-2022 走看看