欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html的标签分类————body内标签系列

程序员文章站 2022-04-11 20:17:49
超链接标签 text,此类标签通常是超链接。其中href后面跟进的是超链接的地址，target代表打开新页面的方式，_blank代表在新的标签页打开。 通过超链接“text”跳转到百度首页。

超链接标签

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

  • 通过超链接“text”跳转到百度首页。
html的标签分类————body内标签系列html的标签分类————body内标签系列
<!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不能重复，否则会报错。
html的标签分类————body内标签系列html的标签分类————body内标签系列
<!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>来实现超链接。
html的标签分类————body内标签系列html的标签分类————body内标签系列
<!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;width: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"来合并。
html的标签分类————body内标签系列html的标签分类————body内标签系列
<!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标签应用的场景更少，只是构造某个边框时候才会使用，可以稍微对照着就能搞明白。
html的标签分类————body内标签系列html的标签分类————body内标签系列
<!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

 

上一篇： 真爱在人间,不论男女,不论多少。

下一篇： 盘点荧屏上明星装扮最丑陋的一幕

推荐阅读