html入门（块级标签介绍）

 块级标签

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

2.块级标签的种类：

（1）

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

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

（2）

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

<hr>

（3）

<!--p标签：段落-->
<p>这是一个普通的段落</p>

（4）

<!--引用标签,cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="www.baidu.com">
    横眉冷对千夫指，俯首甘为孺子牛。
</blockquote>

（5）

<!--预格式标签   保留文本默认的样式-->
<pre>
    var fun = function () {
        console.log("html！");
    }
</pre>

（6）

<!--有序列表
    1：修饰符是数字，它会随着项目的增多，自动增加。
    2：有序列表也是可以嵌套的。-->
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

（7）

<!--无序列表：
    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>

（8）
<!--定义列表:
    1:子标签分两个  dt  dd
    2：dt:列表的标题  没有缩进
    3：dd：列表的描述  有缩进-->
<dl>
    <dt>列表标题</dt>
    <dd>列表内容1</dd>
    <dd>列表内容2</dd>
    <dd>列表内容3</dd>
</dl>

（9）

<!--组合标签：<figure></figure> 用于显示图片及图片标题
    两个子标签：
              <img /> 图片
              <figcaption></figcaption> 图片的标题

    显示效果：图片下面一个标题，同时图片和标题前带缩进。
-->
<figure>
    <img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>
    <figcaption>这是图片标题</figcaption>
</figure>

（10）
<!--分区标签-->
<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>
        这是html!
    </figcaption>
</figure>