您的位置：首页 > 编程语言

关于块级标签，列表，分区标签的使用（实例代码）

2017-04-23 13:23 423 查看
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>块级标签</title>

</head>

<body>

<!--标签的分类

1：块级标签  特点：独占一行

2：行级标签  特点：宽度跟自己的内容等宽-->

<p style="font-size: 32px;font-weight: bolder">杰瑞教育</p>

<!--hx标签  标题-->

<h1>杰瑞教育</h1>

<h2>杰瑞教育</h2>

<h3>杰瑞教育</h3>

<h4>杰瑞教育</h4>

<h5>杰瑞教育</h5>

<h6>杰瑞教育</h6>

<!--hr标签：分割线-->

<hr>

<!--p标签：段落-->

<p>这是一个普通的段落</p>

<!--引用标签,cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->

<blockquote cite="www.baidu.com">

    横眉冷对千夫指，俯首甘为孺子牛。

</blockquote>

<!--预格式标签   保留文本默认的样式-->

<pre>

    var fun = function () {

        console.log("杰瑞教育！");

    }

</pre>

<!--有序列表

    1：修饰符是数字，它会随着项目的增多，自动增加。

    2：有序列表也是可以嵌套的。-->

<ol>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

    <li>列表项4</li>

</ol>

<!--无序列表：

    1：修饰符是默认的原点，

    2：可以嵌套，嵌套的修饰符会与外层产生区别，以示区分。-->

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

    <ul>

        <li>子列表1</li>

        <li>子列表2</li>

        <li>子列表3</li>

    </ul>

    <li>列表项3</li>

</ul>

<!--定义列表:

    1:子标签分两个  dt  dd

    2：dt:列表的标题  没有缩进

    3：dd：列表的描述  有缩进-->

<dl>

    <dt>列表标题</dt>

    <dd>列表内容1</dd>

    <dd>列表内容2</dd>

    <dd>列表内容3</dd>

</dl>

<!--组
4000
合标签：<figure></figure> 用于显示图片及图片标题

    两个子标签：

              <img /> 图片

              <figcaption></figcaption> 图片的标题

    显示效果：图片下面一个标题，同时图片和标题前带缩进。

-->

<figure>

    <img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>

    <figcaption>这是图片标题</figcaption>

</figure>

<!--分区标签-->

<hr>

<div>

    <header style="height: 80px">

        <img src="../../img/logo.png" alt="" style="margin-left: 20px;margin-top: 10px">

        <img src="../../img/logo_kouhao.png" alt="" style="margin-left: 20px">

        <img src="../../img/logo_Tel2.png" alt="" align="right" style="margin-top: 20px">

    </header>

    <nav style="height: 40px;background-color: yellow">菜单区域</nav>

    <section style="height: 500px;background-color: blue">详情区域</section>

</div>

<!--补充：

    start:指定列表的开始索引

    reversed：列表索引倒序显示

    type：指定列表索引的类型-->

<!--添加锚点-->

<a name="ccy"></a>

<ol start="3" reversed type="a">

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

    <li>列表项4</li>

    <li>列表项5</li>

    <li>列表项6</li>

    <li>列表项7</li>

</ol>

<figure>

    <img src="../../img/lenovo2.jpg" alt="lianxiang">

    <figcaption>

        这是联想电脑!

    </figcaption>

</figure>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航