html的基本知识

1、常用HTML标签

• 其他

  • br标签：强制换行

  <br >  |  <br />
  应用场景:用于强行换行
  ​
  > 不参与分类，不能设置其他样式
   

1）行级标记

文本格式化标签

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

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

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

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

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

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

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

• del标签：删除线

• sup标签：上标

• sub标签：下标

• 特性

  • 宽度默认由内容撑开

  • 高度默认由内容撑开

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

  • 换行和空格会被解析

a标签--超链接标签

 <!-- 网址 -->
    <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>

2）行内块级标记

img图像标签

 <!-- 网址  右击--复制图片地址 -->
    <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:高度
        特性：
        1.默认横向显示，水平布局，一行排不下，自动折行
        2.换行和空格会被解析
        3.可以设置宽高
   
​

2、路径

1、绝对路径

• 带着协议的完整的路径 百度一下，你就知道

• 盘符下的某个路径 E:\1_1.jpg

2、相对路径

• / 表示根目录 ,当前文件夹所在的盘符路径

• ./ 表示当前目录 可以省略的

• ../ 表示上一级目录

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

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