<!--

        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. VMWare虚拟机 网络连接模式

    这个是rocks 群里面我的一个朋友分享的,我觉很好而且描述的很清楚,这是一个做事的态度问题.   1 VMWare虚拟机bridged.host-only和NAT网络模式的区别和用法 VMWare提 ...

  2. Unity3D和网页数据交互的基本原理

    简介: 1.Unity3D的游戏引擎是和编辑器集成在一起的,所有它也是一个制作/开发平台. 2.Unity3D是使用JavaScript.C#作为核心脚本语言来驱动事个游戏引擎. 3.平台可以发布Ex ...

  3. 嵌入式开发之信号采集同步---VSYNC和HSYNC的作用以及它们两者之间的关系

    VSYNC和HSYNC的作用以及它们两者之间的关系 VSYNC和HSYNC的作用以及它们两者之间的关系 VSYNC和HSYNC是什么 VSYNC: vertical synchronization,指 ...

  4. 三角矩阵怎么用MathType输入

    虽然现在已经是暑假,但还是有很多学霸们在炎炎夏日中努力奋战,连暑假都不放过.也许正在实验室里面做得昏天暗地,也许是正在跟数据努力奋战,也许还在办公室里面一点一点地码着论文.码论文的时候,不时地要敲着复 ...

  5. 设计模式之简单工厂模式(Simply Factory)摘录

    从设计模式的类型上来说,简单工厂模式是属于创建型模式,又叫静态工厂方法(Static Factory Method)模式.但不属于23种GOF设计模式之中的一个.简单工厂模式是由一个工厂对象决定创建出 ...

  6. Cannot call sendRedirect() after the response has been committed错误；

    Cannot call sendRedirect() after the response has been committed提示信息其实很清楚,如果response已经提交过了,就无法再发送sen ...

  7. Dropdownlist中用viewmodel传值处理方法

    背景:MVC框架,页面使用razor语法,下拉框的话使用了@Html.DropDownList(),以前传值使用viewdata,但是我们老大说这个方式比较low,希望我可以使用viewmodel的方 ...

  8. JavaScript实践-简单的贪吃蛇小游戏

    实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...

  9. UNION ALL与UNION

    UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列 ...

  10. Android 中 js 和 原生交互

    Android中的WebView 中加载的URL 默认是在手机浏览器中加载的,我们可以覆盖这种默认的动作,让网页在WebView中打开.通过设置WebView的WebViewClent 达到这个效果. ...