码迷,mamicode.com
首页 > Web开发 > 详细

html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

时间:2018-09-17 17:38:54      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:链接地址   div   void   char   标题   http   javascrip   问题   inline   

<!--
        a:
                (1)超链接
                 href 超链接的地址
                 target: _self 默认 在当前中打开链接地址
                         _blank  在空白的页面打开连接地址
                (2)标签内部跳转
                 锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
                 如果有href = # 表示返回置当前页页首,相当于刷新,编写时应避免,应该使用 javascript:void(0)

        img
            src:连接的图片资源
            alt:图片资源加载失败。显示的文本

        a 标签与img标签连用 实现图片点击跳转页面
            标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题。先把a标签变成行内块 才能设置大小

        ul: unordered list 无序列表 ul下的子元素只能是li    可设计多级列表 默认变成不同心(用处很广泛 将来去除列表的标志可以做很多事情)
            li
                type=‘circle‘ 圆心
                type=‘square‘ 方块
        ol:
            ordered list
            只能是li

        dl:定义列表
            dt:定义标题
            dd:定义描述 在标题后有缩进
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签的使用</title>
    <style type="text/css">
        a{
            display:inline-block;
            width = 300px;
            height = 300px;
        }
    </style>
</head>
<body>
    <!--a 标签可以装 img 但会出问题 即 a标签会出现在图片下边一行空行 所以只有将a标签设置于图片一样大小才不会出问题-->
    <!--先把a标签变成行内块 才能设置大小-->
    <a href="https://www.baidu.com/">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="图片加载失败显示文字" width="300" height="300">
    </a>
    <!--锚点  这种写法尽量避免-->
    <a href="#">点击刷新 返回顶部</a>
    <!-- hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为-->
    <a href="javascript:void(0);">阻止a标签的默认点击行为</a>


    <!--ul + li 列表标签ul只能装li  type="circle" 圆心 type="square"方心 -->
    <ul>
        <li type="circle">一级列表</li>
        <li type="square">一级列表</li>
        <li>一级列表
            <ul>
                <li>二级列表</li>
                <li>二级列表
                    <ul>
                    <li>三级列表</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>


    <!--ol + li  默认显示 1 1 1 1编号-->
    <ol>
        <li>ol一级
            <ol>
                <li>二级</li>
            </ol>
        </li>
    </ol>
    <!--ol + li 显示编号形式type 选择编号格式  start设置开始编号默认从1开始-->
    <ol type="i" start="3">
        <li>ol一级
            <ol type="1" start="1">
                <li>二级</li>
            </ol>
        </li>
    </ol>

    <!--dl + dt + dd  这表示dt的作为标题 -->
    <dl>
        <dt>dl+dt表格标签一</dt>
        <dd>dl+dt表格标签二</dd>
        <dd>dl+dt表格标签三</dd>
        <dd>dl+dt表格标签四</dd>
    </dl>


</body>
</html>

 

html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

标签:链接地址   div   void   char   标题   http   javascrip   问题   inline   

原文地址:https://www.cnblogs.com/Mr-wangxd/p/9662907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!