zoukankan      html  css  js  c++  java
  • HTML 常用标签

    <a>标签的使用:

      (1) 超链接

      href 超链接的地址

      target:_self 默认 在当前中打开链接地址

           _blank 在空白的页面打开链接地址

      (2) 标签内部跳转

      锚点 默认有点击行为.我们可以javascript:void(0);阻止a标签的默认点击行为.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <div id="peiqi">配齐</div>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <p>alex</p>
        <!-- hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为-->
        <a href="javascript:void(0);">找小猪1</a>
        <a href="#">找小猪2</a>
        <a href="#">找小猪3</a>
        <a href="#">找小猪4</a>
        <a href="#">找小猪5</a>
        <a href="#">找小猪6</a>
        <!-- <a href="tell:18511803134">打电话</a> -->
    
    
    </body>
    </html>
    标签

    <img>标签的使用:

      (1)src:连接的图片资源

      (2)alt:图片资源加载失败.显示的文本

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a{
                display: inline-block;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
    
        <div class="box">
            <a href="javascript:void(0);">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537752361&di=eeaea9ec907f0162f3fd1f2e1ebaf9d0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F160216%2F5329500_160443_1.png" width="300" height="300">
            </a>
        </div>
    
        <div>
            
            <span>哈哈哈哈</span>
        </div>
    
    </body>
    </html>
    示例

    <ul>标签的使用:

      unordered list 无序列表 ul下的子元素只能是li

      li

      type='circle'  圆心

      type='square'  方块

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <ul>
            <li>
                alex
                <ul>
                    <li>
                        哈哈哈哈
    
                        <ul>
                            <li>ahhaha</li>
                        </ul>
                    </li>
                    <li>哈哈哈哈2</li>
                    <li>哈哈哈哈3</li>
                    <li>哈哈哈哈4</li>
                    <li>哈哈哈哈5</li>
                </ul>
            </li>
            <li>wusir</li>
            <li>太亮</li>
            <li>女神</li>
            <li>日天</li>
            <li>涛哥</li>
        </ul>
        <ul type="square">
            <li>alex</li>
            <li>wusir</li>
            <li>太亮</li>
            <li>女神</li>
            <li>日天</li>
            <li>涛哥</li>
        </ul>
        <ul type="circle">
            <li>alex</li>
            <li>wusir</li>
            <li>太亮</li>
            <li>女神</li>
            <li>日天</li>
            <li>涛哥</li>
        </ul>
        <ul>
            <li>
                <a href="">
                    <img src="">
                </a>
            </li>
        </ul>
        <ol type="i" start="3">
            <li>alex</li>
            <li>alex</li>
            <li>alex</li>
            <li>alex</li>
            <li>alex</li>
            <li>aaaa</li>
        </ol>
        <dl>
            <dt>第一条规则</dt>
            <dd>不准睡觉</dd>
            <dd>不准交头接耳</dd>
            <dd>不准下神</dd>
    
            <dt>第二条规则</dt>
            <dd>可以泡妞</dd>
            <dd>可以找妹子</dd>
            <dd>可以看mv</dd>
        </dl>
    
    </body>
    </html>
    示例

    <input>标签的使用:

    type:
        text: 文本输入框
        password:密码输入框
        file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
        submit:提交按钮
        button:普通按钮
    name:提交到服务器端的key
    value: 显示的文本内容,与服务器端的value
    placeholder:文本代替
    type属性
  • 相关阅读:
    Grid 拾遗
    WPF 依赖属性
    升级cordova
    oracle比较一行的最大值或最小值
    nginx完全关闭log
    hive计算周一的日期
    查看linux文件目录的大小和文件夹包含的文件数
    linux设置服务器时间同步
    oracle取出多个字段列中的最大值和最小值
    oracle SQL语句取本周本月本年的数据
  • 原文地址:https://www.cnblogs.com/zbw582922417/p/9662306.html
Copyright © 2011-2022 走看看