<!--

        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. Ubuntu apt-get update错误解决

    用apt-get命令安装开发软件非常方便,但由于各种原因,经常链接不上软件源,于是需要使用sudo apt-get update命令来更新软件源. 而屋漏偏逢连夜雨,这时候更新命令也罢工,出现各种错误 ...

  2. 目标跟踪之卡尔曼滤波---理解Kalman滤波的使用

    http://www.cnblogs.com/jcchen1987/p/4371439.html

  3. jQuery 事件的命名空间的含义

    对于jquery的on的events解释是 一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin&qu ...

  4. 提高SDN控制器拓扑发现性能

    原文由我发表在sdnlab.com.原文链接:http://www.sdnlab.com/15425.html SDN网络的一大特点就是资源由控制器集中管理,控制器管理网络,最基本的当然需要知道网络的 ...

  5. Hibernate 中多对多（many-to-many）关系的查询语句

    两个对象: 学生表:Student 课程表:Course 两者的关系是多对多,当查询Student对象,并以Course对象作为条件时的sql语句写法如下: select pa from Studen ...

  6. html ； css ； javascript ； json ；

    [说明]今天因为看到了前端的js页面和html页面,觉得有必要熟悉一下他们的基本语法,所以花了一天的时间去复习巩固了一下(之前学习过),包括html语法,css语法,javascript语法,对象.B ...

  7. struts2的配置文件为什么可以使用${}符号?

    转自:https://www.cnblogs.com/sharpest/p/6030265.html 一．#符号的用途一般有三种. “#”主要有三种用途: 1. 访问OGNL上下文和Action上下文 ...

  8. A day

    今天推荐一部微电影,从老人的视角看这个社会. 老人在途中买橘子的经历仿佛是看到了当年自己的影子. A day对于有些人来说,很长.对于某些人来说很短暂.这一天所做的事情就是穿过马路走过天桥去水果店买四 ...

  9. 与Mysqli相关的四种数据库取值

    <!--取值方案一:通过数字数组 fetch_row()--><meta http-equiv="Content-Type" content="text ...

  10. 手动爬虫之京东笔记本栏（ptyhon3）

    import urllib.request as ur import urllib.error as ue import re # 目标网址 url = 'https://list.jd.com/li ...