<!--

        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. nested exception is java.lang.VerifyError: Expecting a stackmap frame at bra

    Caused by: java.lang.VerifyError: Expecting a stackmap frame (2016-05-19 09:56:29) 转载▼ 标签: it 分类: Ja ...

  2. 下列哪一个接口定义了用于查找、创建和删除EJB实例

    下列哪一个接口定义了用于查找.创建和删除EJB实例 A.Home B.Remote C.Local D.Message 解答:A remote接口定义了业务方法,用于EJB客户端调用业务方法. hom ...

  3. QT软件初次使用中遇到的若干问题及思考

    1.QT窗口名称汉字设置问题? 答案:在MSVC中试用诸多方法,亲测都不行. 解决方案1:创建项目时,选择使用MSGW方案,用gcc进行编译,即可解决 2.QT中ui文件中组件不能再.cpp文件中显示 ...

  4. mac 安装memcache扩展问题

    执行php -i 报错: Warning: PHP Startup: memcached: Unable to initialize module Module compiled with build ...

  5. web之Django之Form组件

    Django之Form组件 本节内容 基本使用 form中字段和插件 自定义验证规则 动态加载数据到form中 1. 基本使用 django中的Form组件有以下几个功能: 生成HTML标签 验证用户 ...

  6. ModelShowDialog缓存上次浏览的URL

    1. 一种解决方法设置每次清楚浏览的页面. In IE7, go to Tools  |  Internet Options.  Click the Browsing History "Se ...

  7. jeesite学习笔记（一） 项目框架

    JeeSite是基于多个优秀的开源项目,高度整合封装而成的高效,高性能,强安全性的开源Java EE快速开发平台. 在github上,对jeesite平台有详细的介绍,这里稍作整理,给出项目的内置功能 ...

  8. JS循环语句的理解

    循环语句就是让程序重复性去做某些工作 最常见的就是for循环 那它的写法都有哪些呢? 1.必须要有初始值 2.要有条件判断 3.状态的改变 4.循环体 一定要控制循环多少次结束,否则就变成了死循环,消 ...

  9. 联想打字必须按FN+数字-fn打字

    对于联想G40.14英寸系列的本本,好多时候无意间可能把数字键锁定了. 这时候要做的是:打开运行--输入OSK--打开虚拟屏幕键盘.这时候可以找到 选项---打开数字键盘. 有时候某些电脑上没有NUM ...

  10. java反射——构造方法

    大家都知道反射技术在Java里面时非常重要的一个技术点,因为Java好多框架的编写都是基于反射的,别的不多说,spring框架里面的IOC就是基于反射实现.那么什么是反射呢?JAVA反射机制是在运行状 ...