web前端1.3

### 2）行级标记

#### 文本格式化标签

- span标签:无语义标签，用于区分样式

  * 没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容

  * 应用场景：控制局部文本的样式

- b标签：一个实体标签，它里面包围的文本显示粗体效果

- strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果

- i标签：它里面包围的文本显示斜体效果

- em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果

- del标签：删除线

- sup标签：上标

- sub标签：下标

- 特性

  - 宽度默认由内容撑开

  - 高度默认由内容撑开

  - 默认横向显示——水平布局，一行排不下，自动折行

  - 换行和空格会被解析

#### a标签--超链接标签

```html

 <!-- 网址 -->

    <a href="https://www.baidu.com/">百度</a>

    <!-- 本地文件 -->

    <a href="./摩洛哥/moluoge.html" target="_self">本地文件1</a>

    <!-- 空链接 -->

    <a href="#">空链接</a>

    <!-- 伪链接 -->

    <a href="javascript:" title="我是伪链接">伪链接</a>

    <!-- title -->

    <a href="https://www.baidu.com/" title="百度">百度title</a>

    <!-- a:超链接标签

        href:跳转的路径；

        网址，本地文件，空链接（#占位，跳转到当前页的顶部），伪链接（href="javascript:"假链接，不跳转的）

        title:提示信息的作用

        target:被链接文档在哪里显示

              1.target='_self' 在当前窗口跳转,默认值

              2.target='_blank'在新窗口跳转

          语法：

          <a href="">内容</a>

          特性：

          1.宽度默认由内容撑开

          2.高度默认由内容撑开

          3.默认横向显示，水平布局，一行排不下，自动折行

          4.换行和空格会被解析

          5.自带文字颜色

          6.自带下划线

          7.鼠标指针的形状为手型

          8.去掉a标签下划线text-decoration: none;

          利用锚点来跳转指定锚点处

          定义锚点

          <div id='锚点名称'></div>

          引用锚点

          <a href="#锚点名称">内容</a>

    -->

 <!-- 点击这个也会跳转到顶部，但是跳转到顶部的原因:由于href属性没有写东西，点击的时候会刷新页面 -->

  <a href="">点击跳转到顶部没有#</a>

```

### 3）行内块级标记

img图像标签

```html

 <!-- 网址  右击--复制图片地址 -->

    <img src="https://img0.baidu.com/it/u=2409410196,1796254698&fm=26&fmt=auto&gp=0.jpg" alt="">

    <!-- 盘符下的某个路径 -->

    <img src="C:\Users\Administrator\Desktop\1.jpg" alt="">

    <!-- 本地文件 -->

    <img src="./images/2.jpg" alt="">

    <img src="./images/3.gif" alt="">

    <!-- alt -->

    <img src="./images/4.jpg" alt="图片4">

    <img src="./images/44.jpg" alt="图片4">

    <img src="./images/444.jpg" alt="">

    <!-- title -->

    <img src="./images/1.jpg" alt="" title="打架" width="300px" height="200px">

   img标签

        语法：<img src="" alt="">

        src:图片的路径

        ../../表示上上级目录

        alt:作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验

        title:提示信息的作用,鼠标悬停在图片时显示提示信息

        width：宽度

        height:高度

     注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放

        特性：

        1.默认横向显示，水平布局，一行排不下，自动折行

        2.换行和空格会被解析

        3.可以设置宽高

```

## 四、路径

### 1、绝对路径

- 带着协议的完整的路径

  https://www.baidu.com/

- 盘符下的某个路径

  E:\1_1.jpg

### 2、相对路径

- ./ 表示当前目录  一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。 可以省略的

- ../  表示上一级目录  两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录。

- ../../表示上上级目录

- 文件夹名/  表示下一级目录  

  **注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。