行级标签和组合标签

最新推荐文章于 2022-12-16 18:00:00 发布

朝思暮林

最新推荐文章于 2022-12-16 18:00:00 发布

阅读量846

点赞数

分类专栏： H5 文章标签：标签行级标签组合标签 H5

本文链接：https://blog.csdn.net/zhaolimulin/article/details/65962425

版权

H5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

--标签的分类  标题标签  h1     水平标签  hr  换行标签  br
    1：块级标签 特点：独占一行
    2：行级标签 特点：宽度跟里面的内容等宽-->

还有一些是组合标签

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--<p></p>-->
<!--<figure>-->
    <!--<img src="../../img/lenovo.jpg" alt="" width="150px" height="220px"/>-->
    <!--<figcaption>-->
        <!--产品型号：Y470，-->
    <!--</figcaption>-->
<!--</figure>-->
<div>
    <div style="height: 80px">
        <img src="../../img/logo.png" alt=""/>
        <img src="../../img/logo_kouhao.png" alt=""/>
        <img src="../../img/logo_Tel2.png" alt=""/>
    </div>
    <div style="height: 40px; background-color: red"></div>
    <div style="height:100px;background-color: blue"></div>
</div>
</body>
</html>

这是一些行级标签在H5中，标签的属性支持在style中都修改，例如：

添加下划线有很多中方法，但是最好用style添加下划线的方法

又或者是上章表格的属性中添加背景图片也有两种方法在style中用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
<h1>q·span ·a ·strong ·em ·i·s ·cite·mark·code <br/> 转义字符 </h1>
<!--通过a标签的锚点
           跳转到外面页面的同时，也可以指定跳转位置
           方法：路径地址+错点地址（错点名称）-->
<a name="top"></a>
<!-- span：用于包裹文本中的某一个或某几个字段，以方便添加样式
2：他本身是不没有任何样式的-->
<p>商品价格；仅售 <span style="color: red;font-size: 30px">10</span> 元</p>
<img src="../../img/lenovo.jpg" alt="图片不存在" title="联想电脑 " align="left"；
        height="100px" width="200px"/>
<!--img：
    src：用来指定你要像是的图片的路径
    alt：当你指定的图片不存在时，相关的错误提示信息
    title：当鼠标悬浮在图片上时，相关提示信息
    align：指定图片的位置
    height width：指定图片的长度和宽度-->
<p>山商<em>26</em>号楼</p> <!--em 斜体 有强调作用，可以更方便的被浏览器搜索到
  i 标签只有倾斜的作用-->
<p>
    <P>版权所有，侵权必究。</P>
 <br/>
<!--strong有强调作用-->
    <strong>
        版权所有，侵权必究  --   <q>杰瑞教育</q><!--q标签有引用的作用-->
    </strong>
<br/>
    <b>版权所有，侵权必究</b>
</p>
<br/>
<p>版权 <small>所有</small>，侵权必究</p><!--相比相邻的文本  small标签里的字体更小-->
<!--A标签实现三种功能：
                    1：页面跳转
                    2：锚点链接
                    3：功能链接
                               （属性） title target 页面跳转不同-->
<!-- 属性
            1：href 用来指定超链接要跳转的页面，页面可以是本地页面，也可以是非本地页面
            2：title 用来指定鼠标悬浮是的提示文本
            3：target 用来指定要打开的网页在什么位置显示 self black
            4： rel 用来指定要打开的页面跟当前页面的关系  添加该属性可以做到搜索引擎优
            化 next  prev -->
<a href="../03/biji3.html#ddl" title="百度" target="_self" rel="next">页面跳转到biji3</a>
<a href="liebiao.html">页面跳转</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#top">返回顶部</a> <!--跳转到锚点名称为top的地方去-->
<!--功能性链接：-->
<a href="tencent://message/?uin=471236494">发消息</a>
<a href="mailto://471236494.com">发邮件</a>
<br/>
<s>删除线的标签</s><!--s标签  用来删除数据的-->
<br/>
<strike>这是被删除的文本 已经被被淘汰</strike>
<br/>
<u>下划线已经被淘汰</u>
<br/>
<span style="text-decoration: underline">这是h5推荐的方法</span>
<span style="text-decoration: overline">这个是上划线</span>
<br/>
<mark>高亮显示</mark>
<br/>
<cite>标签</cite><!-- 浏览器显示为斜体，常用于书 画 作品的引用-->
<br/>
<pre>
    <code>
        hssajajjas      sjhjasja
        hshashdaskas
        fjjdjsd
        <!--保存代码   不保存代码的格式 和pre标签配合-->
    </code>
</pre>
<br/>
<bdo dir="ltr">我是帅哥</bdo>
<bdo dir="rtl">我是帅哥</bdo> <!--文本的显示顺序-->
<br/>
<!--sup 上标文本-->
x<sup>2</sup>
<!--sub 下表文本-->
log<sub>30</sub><sup>2</sup>
log<sup>2</sup>30
<br/>
H<sub>2</sub>SO<sub>4</sub>
<br/>
O<sup>2-</sup>+2H<sup>-</sup>=H<sub>2</sub>O
<br/>
<span style="text-decoration: underline;color: crimson">
    O<sup>2-</sup>+2H<sup>-</sup>=H<sub>2</sub>O</span>
<br/>
<p>多个 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
<!--多个bnbsp可以多显示几个空格-->
<br/>
<hr/>
<!--版权符号-->
&copy;
<br/>
<!--括号-->
&lt; <br/> &gt;&frasl;
<br/>
<u></u>
&lt;u&gt;下划线&lt;&frasl;u&gt;
</body>
</html>