• 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>

    运行图

     

     

  • 相关阅读:
    20172306 2018-2019-2 《Java程序设计与数据结构》第七周学习总结
    20172306 2018-2019-2 《Java程序设计与数据结构》第六周学习总结
    网页图片
    20172302 2018-2019-1《程序设计与数据结构》课程总结
    Do-Now—团队Scrum 冲刺博客五
    Do-Now—团队Scrum 冲刺博客二
    哈夫曼编码测试
    20172302 《Java软件结构与数据结构》实验三:查找与排序实验报告
    团队作业第一周
    20172302 《Java软件结构与数据结构》第九周学习总结
  • 原文地址:https://www.cnblogs.com/haloxinghong/p/7209691.html
Copyright © 2020-2023  润新知