Web前端学习—基础篇(5)_常用行级标签有哪些

前端学习——基础篇

三、HTML学习

7、常用标签

7.2、行级标签

​ 文本格式化标签

7.2.1、span标签

​ 无语义标签 万能标签 用来区分样式

<span>[内容]</span>

样例：

<div>
在创作出风靡全球的艺术绘本<span>《鲍勃是个艺术家》、《鲍勃的蓝色忧郁期》</span>之前，马里恩 · 杜查斯在英国的设计圈、插画圈已经赫赫有名。
</div>

7.2.2、 b标签

​ 一个实体标签，包裹的文字显示粗体效果

样例：

<b>字体加粗</b>

7.2.3、strong标签

​ 语义标签，强调语气，包裹文字显示粗体效果

样例：

<strong>字体加粗，表示强调</strong>

7.2.4、i标签

​ 包裹的文字显示斜体效果

样例：

<i>字体倾斜</i>

7.2.5、em标签

​ 语义标签，强调语气，包裹文字显示斜体效果

样例：

<em>字体倾斜，表示强调</em>

7.2.6、sup标签

​ 上标

样例：

<span>X<sup>2</sup></span>

7.2.7、sub标签

​ 下标

样例：

<span>H<sub>2</sub>O</span>

7.2.8、del标签

​ 删除线文字

特性

• 默认宽度由内容撑开
• 默认高度由内容撑开
• 横向显示——水平布局，一行排不下自动折行
• 换行和空格会被解析

样例：

<span>&yen;99.99<del>&yen;128</del></span>

7.2.9、a标签 超链接标签

语法

<a href="目标地址" target="_blank|_self" title="提示信息">链接文字</a>
<!-- href属性，属性值可以是网址、本地文件地址、空链接、锚点链接、伪链接。
     target属性：
        target="_blank" 在新窗口中打开
        target="_self"  在当前窗口打开，默认值 -->

特性

• 默认宽度由内容撑开
• 默认高度由内容撑开
• 横向显示——水平布局，一行排不下自动换行
• 换行和空格会被解析
• 默认自带文字颜色
• 默认自带下划线

使用

    <!-- 网址 -->
    <a href="http://www.baidu.com">链接文字1</a>
    <!-- 本地文件 -->
    <a href="readme.md">链接文字2</a>
    <!-- # 占位，可以跳转到当前页的顶部 -->
    <a href="#">链接文字3</a>
    <!-- 锚点：长页面跳转、跳转到某个页面的某个位置
        第一步：定义锚点
            <a name="锚点名称"></a>
            <div id="锚点名称"></div>
        第二步：引用锚点
            <a href="#锚点名称">链接文字</a>
            <a href="demo06-锚点.html#con2">demo06-锚点.html#con2</a>
    -->
    <!-- 伪链接 不跳转 -->
    <a href="javascript:">内容</a>
    <a href="javascript:alert('haha')">内容</a>