zoukankan      html  css  js  c++  java
  • 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
        2dt:列表的标题  没有缩进
        3dd:列表的描述  有缩进-->
    <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>
    
    

    
    

  • 相关阅读:
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    block的是发送信号的线程,又不是处理槽函数的线程
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252658.html
Copyright © 2011-2022 走看看