前端知识——标签知识

news2024/9/25 3:11:39

1.p段落标签 ——一个p标签表示一个段落单独占一行

>p标签里面不可以嵌套其它的块级标签(div h1~h6 p等) 会导致浏览器自动分裂成两个标签不规范的写法

>但是可以包裹span标签

2.span标签 ——包裹文字标签可以和span一行显示

3.文本格式化标签 ——给文本使用的标签

- b和strong 加粗标签

>b:加粗标签视觉上加粗效果

>strong:加粗标签视觉上加粗效果能快速被搜索引擎找到 seo

- 文字倾斜标签 i和em

>i 文字倾斜视觉上倾斜效果

>em 文字倾斜视觉上倾斜效果能快速被搜索引擎找到

4.br换行标签

代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>这是我的网页</title>
    </head>

    <body>
        
        <!-- 段落标签  可以放很长文字   或者一个段落 -->
        <p>
           在城市的绿色和乡村的绿色之外，还有一块心灵的绿色，它茂盛地长在每个人的心灵沃土上。它不以美丽的外表示人，它独自体现着生命的本质，既承受阳光雨露，呕经历电闪雷鸣。它无形却胜过有形，因为一个人的心灵如果失去了绿色，也就失去了善意，失去了真诚，失去了生机和活力。
        </p>

        <!-- p标签里面不可以嵌套其它的块级标签(div  h1~h6 p等)  会导致浏览器自动分裂成两个标签   不规范的写法 -->
        <!-- <p> -->
            <!-- <div>我是盒子标签</div> -->
            <!-- <h1>一级标题</h1> -->
            <!-- <p>我是自己人p标签</p> -->
        <!-- </p> -->

        <p>大家感觉学的怎么样?1</p>
        <p>大家感觉学的怎么样?2</p>

        <!-- span标签  包裹文字标签  短文字   -->
        <span>
            我是span包裹的文字内容1
        </span>
        <span>
            我是span包裹的文字内容2
        </span>

        <!-- span的结合样式的突出用法  -->
        <p>
            班主任说: <span style='color:red;'>大家今天都要认真学习哦</span>
        </p>

        
        <!-- b:加粗标签   视觉上加粗效果-->
        <b>加粗的标签</b>
        <!-- strong:加粗标签   视觉上加粗效果 能快速被搜索引擎找到 seo-->
        <strong>看看我</strong>


        <!-- 文字倾斜标签  -->
        <i>无限</i>
        <em>今晚有空 开黑?</em>

        <!-- 文字加粗并且倾斜 -->
        <strong>
            <i>看看倾斜了没</i>
        </strong>
         <br>
        <!-- 下划线标签  u/ins -->
        <u>
            下划线标签
        </u>
        <!-- 换行标签  -->
        <br>
        <ins>文字有下划线</ins>

        <!-- 删除线标签   -->
        <s>特价:9.9</s>

        <del>我也是删除线标签</del>

    </body>

</html>

5.a标签——超链接标签 /超文本标签

href:超链接地址路径

target: 指定你的超链接打开位置

1.默认值: target='_self': 默认在当前页面中去打开新的链接地址

2.target='_blank' 新开标签页点多少次就新开多少个

3.target="_new" 新开所有new只会新开一个

代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <!-- a:超链接  href:超链接跳转地址  -->
        <a href="https://www.bilibili.com/">哔哩哔哩 俺想看b站</a>
        <!-- 
        href 可以放网络地址  
        
        相对路径方式: 
        ./:在同级目录下去找对应的文件地址    常用
        ../: 在上一个文件夹里面去找文件路径   02 访问 01 文件夹里的内容   不常用


        绝对路径: 从什么盘开始     一直到你的文件后缀名结束  完整的地址 
        写作业  最好不要用绝对路径的写法   (每个人的盘是不一样的    如果你要分享东西给别人最好用相对路径  )
    
     -->

        <a href="./1-基础标签.html">点击我 去找01页面</a>
        <!-- <a href="./1-基础标签.html">11111</a> -->

        <!-- 我现在是在02 文件夹里面 想访问01 文件夹 怎么办 -->
        <a href='../01_前端基础/01-网页模板介绍.html'>点我去01文件找 01-网页模板介绍</a>

        <!-- 绝对路径演示 -->
        <a href="F:\前端基础\02_标签知识\1-基础标签.html">用绝对去找</a>

        <br>
        <!-- 网络路径  有网就可以访问的 -->
        <a href="https://img2.baidu.com/it/u=347034249,179256317&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
            点我给你看好看的
        </a>

        <!-- 超链接放本地的图片  -->
        <a href="E:\星星月亮共闪耀\chengpin1.jpg">我自己的图片</a>
        <!-- <a href="">
        <p>我是p标签</p>
        </a> -->

        <p>
            <a href="">超链接标签</a>
        </p>

        <!-- 不规范的写法 不允许a标签  嵌套a标签 -->
        <!-- <a href="">
            <a href=""></a>
        </a> -->

       
    </body>

</html>

a标签锚点:

a标签之间锚点绑定对应的name属性加#

a标签然后想跳转到其他标签位置那就需要用id名来进行跳转