<!--

        a：
　　　　　　　　 a{ /*清除a标签的下划线*/ text-decoration: none; } 

                （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 标签与列表标签的简单使用的更多相关文章

  1. [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口

    <a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...

  2. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  3. css , dl , dt , dd 的使用. calc

    dl .dt, dd 虽然很少使用, 但是 有时使用会有 更好的效果: 一: 展示图片: ------------------------- 代码: <!DOCTYPE html> < ...

  4. dl dt dd标签

    <dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...

  5. html中的dl,dt,dd标签

    html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...

  6. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  7. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  8. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  9. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

随机推荐

  1. 使用AngularJS创建应用的5个框架

    [导读] 如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用 ...

  2. Django - 安装wagtail

    感觉这个CMS系统不错,试用了一下,记录过程: 1. 安装Virtualenv mkdir wagtail virtualenv --no-site-packages --python=3.5 wag ...

  3. ASP.NET中JSON对时间进行序列化和反序列化

    JSON格式不直接支持日期和时间.DateTime值显示为“/Date(0+0800)/”形式的JSON字符串,其中第一个数字是GMT时区中自1970年1月1 日午夜以来按正常时间(非夏令时)经过的毫 ...

  4. 《转》openstack中删除虚拟主机，状态一直deleting

    一.我重新启动了该机器.之后想删除没有创建成功的虚拟机(没有打开cpu的vt).结果发现状态一直为deleting状态.在这个状态下创建虚拟机也失败. 二.分析:在/var/log/nova/nova ...

  5. 【爱江山越野跑】ITRA积分认证流程

    背景:目前在越野跑领域,高级别的赛事有很多,比如UTMB,TDG等,而想报名参与这些赛事需要一定的积分(ITRA积分), 而这些积分的获得,需要参与获得ITRA认证的赛事,赛事难度不同,获得的积分也不 ...

  6. boost容器bimap简单使用

    C++标准提供了map和multi_map,把key映射到value;    但是这种映射是单向的,只能是key到value,不能反过来;    boost.bimap扩展了标准库映射型容器,提供双向 ...

  7. [MySQL] 变量（参数）的查看和设置 [转]

    [MySQL] 变量(参数)的查看和设置 类似于Oracle的参数文件,MySQL的选项文件(如my.cnf)用于配置MySQL服务器,但和Oracle叫法不一样,在MySQL里, 官方叫变量(Var ...

  8. Jenkins publish over ssh 路劲配置问题 记录

    每次通过jenkins 实现  maven项目编辑后 自动通过 ssh发布到 服务器的功能时,对配置的路劲有疑问,特整理出来 前提:服务器路径   /home/ubuntu/aps 目标: 构建后的j ...

  9. 【BZOJ1570】[JSOI2008]Blue Mary的旅行 动态加边网络流

    [BZOJ1570][JSOI2008]Blue Mary的旅行 Description 在一段时间之后,网络公司终于有了一定的知名度,也开始收到一些订单,其中最大的一宗来自B市.Blue Mary决 ...

  10. js如何去除多个cookie?

    转自:https://zhidao.baidu.com/question/211006012.html :1:设置cookie 最简单的就是:document.cookie="user=aa ...