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>
    
    

    
    

  • 相关阅读:
    Spring security 浅谈用户验证机制
    Spring Boot Oauth2
    解决端口被占用问题
    Intellij idea run dashboard面板
    深入了解Vue组件 — Prop(上)
    深入了解Vue组件 — 组件注册
    使用命令行工具创建Vue项目
    Vue.js — 组件基础
    Vue.js — 表单输入绑定
    Vue.js — 事件处理
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252658.html
Copyright © 2011-2022 走看看