zoukankan      html  css  js  c++  java
  • HTML5块级标签

    块级标签特点

    独占一行,不允许其他元素和自己同行显示

    标题标签<h1-6></h1-6>
    标题标签默认是加大粗体效果
    h1最大,h6最小

    段落标签<p></p>

    <!--例如:<p style="text-align: justify;text-indent: 2em;">文本</p>-->

    技巧

    在文本的开始处添加空格没有任何效果
    在文本之间的多个空格或者回车换行,浏览器默认为一个空格
    justify作用是使文本前后都整齐对齐

    换行标签<br>

    技巧
    文本内换行在字后边加个空格,然后才能用Tab补全br

    分割线标签<hr>

    引用标签<blockquote></blockquote>

    <!--例如:<blockquote cite="网址">文字</blockquote>-->

    <p>
    谦虚使人进步,骄傲使人落后!---毛主席
    </p>
    <!--cite指明引用途径-->
    <blockquote cite="www.baidu.com">
    谦虚使人进步,骄傲使人落后!---毛主席
    </blockquote>

    运行图

    特点
    定义引用标签, 浏览器在blockquote元素前后添加了换行,并增加了外边距。
    cite指明引用途径

    预格式标签<pre></pre>

    保留文本的默认样式

    <body>
    <!--保留文本的默认样式-->
    <pre>
        青岛理工大学
            理学院
                电子专业
                    电子一班
    </pre>
    </body>

    运行图

    列表

    <!--有序列表-->
    <ol><!--Orderlist-->
        <li>填写信息</li><!--listItem列表项-->
        <li>接收邮件</li>
        <li>注册成功</li>
    </ol>
    
    
    <!--无序列表-->
    <ul><!--unorderlist-->
        <li>如何激活会员</li>
        <li>如何注册会员</li>
        <li>设置密码的要求</li>
        <li>权限认证</li>
    </ul>
    
    
    <!--定义列表-->
    <dl><!--definelist-->
        <dt>咖啡</dt><!--标题definelisttitle-->
        <dd><!--描述definelistdescription-->
            一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料。
        </dd>
    </dl>

    运行图


    列表可以互相嵌套

    组合标签
    <!--图文混合用-->

    <!--图文混合-->
    <figure>
        <img src="../../img/city.jpg" width="150" height="100"><!--图片-->
        <figcaption><!--文字-->
            百度一下,你就了
        </figcaption>
    </figure>

    运行图

    分区标签div

    <div style="height: 100px;background-color: red"></div><!--px是像素密度-->
    <div style="height: 50px;background-color: yellow">
        <ul>
            <li>首页</li>
            <li>IOS课程</li>
            <li>Android课程</li>
            <li>HTML5课程</li>
            <li>JAVAEE课程</li>
            <li>视频课程</li>
            <li>就业保障</li>
            <li>走进杰瑞</li>
        </ul>
    </div>
    <div style="height: 300px;background-color: blue"></div>
    <div style="height: 1000px;background-color: yellow"></div>

    运行图

     

     

  • 相关阅读:
    使用helm管理复杂kubernetes应用
    helm repository 相关
    PSQLException: An I/O error occurred while sending to the backend.
    使用helm进行kubernetes包管理
    Slave作为其它Slave的Master时使用
    ext3是对ext2文件系统的一个扩展高性能日志文件系统
    ready是先执行的,load后执行,DOM文档的加载步骤
    jQuery上定义插件并重设插件构造函数
    在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合
    decode 函数将字符串从某种编码转为 unicode 字符
  • 原文地址:https://www.cnblogs.com/haloxinghong/p/7209691.html
Copyright © 2011-2022 走看看