zoukankan      html  css  js  c++  java
  • html入门(行级标签)

    行级元素
    行级标签  特点:宽度跟自己的内容等宽
            行级标签的种类:
    1
        <!--通过a标签添加一个锚点-->
        <a name="top"></a>
     
    2
        <!--span
                1:用于包裹文本中的某一个或某几个字段,以方便添加样式。
                2:它本身是没有任何样式的  -->
        <p>商品价格:仅售<span style="color: red;font-size: 50px">10</span></p>
    
    
    (3)
        <!--img
                1src:用来指定你要显示的图片的路径。
                2alt:当你指定的图片不存在时,相关的错误提示信息。
                3title:当鼠标悬浮在图片上时,相关的提示信息。
                4align:指定图片的显示位置
                5指定图片的宽度
                6heght:指定图片的高度-->
        <img src="../../img/left.jpeg" alt="图片不存在!" title="阿娇" width="320" height="200">
       
    4
    <!--em:
            1:显示效果为倾斜,并且有强调意思。可以更方便的被浏览器搜索到。-->
        <!--i:
            1:显示效果为倾斜,没有强调意思。-->
        <em>版权所有,侵权必究</em>  --作者;
        <br>
        <i>版权所有,侵权必究</i>  --作何;
    
        <p>版权所有,侵权必究    ---作者</p>
    
    
     
    (5)
        <!--strong:
           1:显示效果为粗体,并且有强调意思。可以更方便的被浏览器搜索到。-->
        <!--b:
            1:显示效果为粗体,没有强调意思。-->
        <strong>
            版权所有,侵权必究    ---作者
        </strong>
        <br>
        <b>
            版权所有,侵权必究    ---作者
        </b>
       
    (6)
    
        <!--q:主动为你的内容加上引号-->
        <p>版权所有,侵权必究    --- <q>作者</q></p>
    
    
    (7)
        <!--small :相比相邻的文本,small标签里的字体会更小-->
        <p>版权<small>所有</small>,侵权必究    ---作者</p>
    <!—注意:bigh5里面不允许使用了-->
     <p>版权<big>所有</big>,侵权必究    ---作者</p>
    
    
    (8)
        <!--a标签三种功能:
              1:页面跳转
              2:锚点链接
              3:功能链接-->
        <!--属性:
            1href 用来指定超链接要跳转的页面  页面可以本地页面,也可以是非本地页面。
            2title  用来指定鼠标悬浮时的提示文本
            3target  用来指定要打开的网页在什么位置显示
                        _self   _blank
            4rel  用来指定要打开的页面和当前页面的关系  添加该属性可以做到搜索引擎优化。
                        next   prev  -->
        <a href="http://www.baidu.com/" title="百度" target="_self"
            rel="next">
            百度
        </a>
        <!--跳转到外部页面的同时,也可以指定跳转位置
            方法:路径地址+锚点地址(锚点名称)-->
        <a href="../01/02_BlockTags.html#ccy">
    本地页面跳转
    </a>
        <!--跳转到锚点名称为top地方去,文中的页首位置-->
        <a href="#top">返回顶部</a>
    
        <!--功能性链接:mailto://xxxxxxx 给指定邮箱发送邮件
        tencent://message/?uin=xxxxxxx 给指定QQ发送消息-->
    
        <a href="mailto://chency@jerei.com">发邮件</a>
       <a href="tencent://message/?uin=512040302">发消息           </a>
    
    
    
    (9)
        <!--删除线 用来显示删除数据-->
        <strike>这是被删除的文本</strike>
     <s>这是被删除的文本</s>
     <!--HTML5推荐的实现方法-->
        <span style="text-decoration: line-through">这是被删除的文本</span>
    
    
    (10)
        <!--u:下划线-->
        <br>
        <u>下划线文本</u>
        <br>
        <!--HTML5推荐的实现方法-->
        <span style="text-decoration: underline">下划线文本</span>
        <br><br>
        <span style="text-decoration: overline">上划线文本</span>
    
    
    
    (11)
        <!--cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用-->
        <br><br>
        <cite>这是cite标签</cite>
    
    
    (12)
        <!--mark:高亮或标记文本  浏览器显示为黄色背景-->
        <br><br>
        <mark>高亮显示文本</mark>
    
     (13) 
    <!--code:只是表示计算机代码。但是浏览器只会显示等宽字体,
                不会保留代码格式,需配合pre标签使用-->
        <pre>
        <code>
            StringBuffer sb = new StringBuffer();
            for(String s : arr){
                  sb.append(s);
            }
        </code>
        </pre>
    
    
    (14)
        <!--bdo:表示文本方向,dir="ltr" 从左往右  dir="rtl" 从右往左-->
        <br>
        <bdo dir="rtl">天道酬勤</bdo>
    `
    (15)
        <!--sup:上标文本-->
        <br><br>
        X<sup>2</sup>
    
    
    (16)
        <!--sub:下标文本-->
        <br><br>
        log<sub>2</sub>10
        <br><br>
        S<sub>2</sub>O<sup>-4</sup>
    
    
        <p> 博 &nbsp;&nbsp;&nbsp;&nbsp; 主 </p>
    
       
    17
        <!--版权符号-->
        &copy;
        <!--左括号-->
    &lt;
        <!--右尖括号-->
        &gt;
        <!--斜线-->
        &frasl;
    
        &lt;u&gt;下划线&lt;&frasl;u&gt;
    
        <u>下划线</u>
    
    
     
     

     

  • 相关阅读:
    win10下的MyEclipse2017 ci7 破解教程+全套资源+失败处理(转)
    layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理
    layui 或者layer 父页面获取子页面数据 或者子页面获取父页面操作方法(转)
    layui弹出层两个以上置顶弹出
    div自动获焦并将光标定位到最后
    hibernate 的SessionFactory的getCurrentSession 与 openSession() 的区别
    形参与实参的区别
    linux下安装Mysql(干货!!!)解决mysql 1130问题,远程登录问题
    linux下安装Mysql(干货!!!)
    java文件上传与下载
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252657.html
Copyright © 2011-2022 走看看