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属性

 

posted @ 2018-09-17 15:13  氐惆  阅读(154)  评论(0)  编辑  收藏  举报