<!--

        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. poj 1419(图的着色问题，搜索)

    题目链接:http://poj.org/problem?id=1419 思路:只怪数据太弱!直接爆搜,按顺序搜索即可. #include<iostream> #include<cst ...

  2. ios --转载-从URL中截取所包含的参数,并且以字典的形式返回和参数字典转URL

    - (NSString *)keyValueStringWithDict:(NSDictionary *)dict { if (dict == nil) { return nil; } NSMutab ...

  3. 编写高质量代码–改善python程序的建议（五）

    原文发表在我的博客主页,转载请注明出处! 建议二十三:遵循异常处理的几点基本原则 python中常用的异常处理语法是try.except.else.finally,它们可以有多种组合,语法形式如下: ...

  4. git 分回滚后无法合并代码问题

    git reset & git revert 区别: 1. git revert是用一次新的commit来回滚之前的commit,git reset是直接删除指定的commit. 2. 在回滚 ...

  5. 【BZOJ1367】[Baltic2004]sequence 左偏树

    [BZOJ1367][Baltic2004]sequence Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sampl ...

  6. VMware虚拟机NAT(地址转换模式)

    转载于:https://www.linuxidc.com/Linux/2016-09/135521p2.htm 二.NAT(地址转换模式)   刚刚我们说到,如果你的网络ip资源紧缺,但是你又希望你的 ...

  7. 160720、SSM-Shiro使用详解

    前言 相比有做过企业级开发的童鞋应该都有做过权限安全之类的功能吧,最先开始我采用的是建用户表,角色表,权限表,之后在拦截器中对每一个请求进行拦截,再到数据库中进行查询看当前用户是否有该权限,这样的设计 ...

  8. 使用maven搭建SSM框架

    使用maven搭建SSM框架,首先得准备好maven环境. 搭建maven环境 第一步:下载maven http://maven.apache.org/download.cgi 下载后解压就可以了. ...

  9. minikube操作命令

    1. 下载minikube   https://storage.googleapis.com/minikube/releases/v0.16.0/minikube-linux-amd64     ch ...

  10. mysql 获取id最大值

    数据库表中id列不为自动增加,需要程序来增加id的SQL SELECTCASE IFNULL(MAX(id),1)WHEN 1 THEN 1ELSE MAX(id) + 1END AS newmaxi ...