���录

HTML常见标签

HTML注释标签

HTML标题标签

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签

HTML图片标签及属性

HTML图片路径属性

HTML图片替换文本属性

HTML图片宽度和高度属性

HTML图片边框属性

HTML图片提示属性

---

HTML常见标签

HTML注释标签

注释不会显示在网页界面上，目的是提高代码的可读性

使用包裹注释的内容

• 在VSCode中可以使用Ctrl+/进行快速注释

  注释的原则：

  1. 要和代码逻辑一致
  2. 尽量使用中文
  3. 不要传递负能量

  📌

  在浏览器中需要查看代码注释可以使用开发者工具查看源代码看到注释内容

  HTML标题标签

  在HTML中有6个标题标签，从h1~h6，数字越大，则字体越小

  一级标题
  二级标题
  三级标题
  四级标题
  五级标题
  六级标题

  HTML段落标签

  在HTML中，为文本分段可以使用段落标签

  包裹需要放在一段的文字

  这是第一个段落
  这是第二个段落

  注意：

  1. 在网页界面显示时，段落和段落 之间存在一个较大的空隙
  2. 当前的

     标签描述的段落，前面还没有缩进

  3. 自动根据浏览器宽度来决定排版
  4. HTML 内容首尾处的换行, 空格均无效
  5. 在 HTML 中文字之间输入的多个空格只相当于一个空格.
  6. HTML中直接输入换行不会真的换行，而是相当于一个空格

  HTML换行标签

  在HTML中，常见用标签表示换行，也可以用标签，但是不规范

  📌

  注意标签为单标签

  这是第一句话，接下来需要换行已经换行

  HTML格式化标签

  在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用

  1. 加粗: 标签 和 标签
  2. 倾斜: 标签 和 标签
  3. 删除线: 标签 和 标签
  4. 下划线: 标签 和 标签

  📌

  在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签

  加粗标签

  
  
      
      
      粗体测试
  
  
      
  下面是加粗文本和非加粗文本的对比
      这是一个加粗文本
      这是一个普通文本
  
  

  倾斜标签

  
  
      
      
      倾斜标签测试
  
  
      
  下面是倾斜文本和非倾斜文本对比
      这是一个倾斜的文本
      这是一个普通文本
  
  

  删除线标签

  
  
      
      
      删除线标签测试
  
  
      
  下面是有删除线和没有删除线的文本对比
      这是有删除线的文本
      这是一个普通文本
  
  

  下划线标签

  
  
      
      
      下划线标签测试
  
  
      
  下面是有下划线的文本和无下划线的文本对比
      这是一个有下划线的文本
      这是一个普通文本
  
  

  HTML水平线标签

  在HTML中，使用

  ---

  标签可以在网页上实现水平分割线的效果

  📌

  注意，水平分割线标签为单标签

  
  
      
      
      水平线标签测试
  
  
      
  当前标签下面的横线为水平线
      
  
      这是分割线下方的测试文本
  
  

  HTML图片标签及属性

  在HTML中，可以使用标签为网页添加图片

  在HTML中，使用图片标签一般包含下面的四个属性

  1. 图片路径属性src
  2. 图片替换文本属性alt
  3. 图片高度和宽度属性width和height
  4. 图片边框属性border

  📌

  所有的图片属性一定放在标签内部，每一个属性之间用空格或者代码中的换行（不是标签）隔开，同时每个属性的顺序没有固定要求，并且标签为单标签

  HTML图片路径属性

  在标签中要添加图片，需要键入图片的路径，此时需要用到属性src，即

  在HTML中一般图片路径分为相对路径和绝对路径

  • 相对路径：相对于照片所在的文件夹的位置的路径，一般包括当前路径，上级路径和下级路径
    • 同级路径: 直接写文件名即可 (或者 ./)
    • 下一级路径: image/1.jpg
    • 上一级路径: ../image/1.jpg
  • 绝对路径：从根目录一直到照片所在的位置，一般包括本地绝对路径和网页绝对路径
    • 本地绝对路径：D:/rose.jpg
    • 网络路径：https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

    
    
        
        
        图片标签测试
    
    
        
    下面是图片标签的测试
        
    下面是相对路径中的下级路径
        
    下面是相对路径中的当前路径
        
    下面是相对路径中的上级路径
        
    下面是绝对路径的本地路径
        
    下面是绝对路径的网络路径
        

    HTML图片替换文本属性

    在HTML中，当图片因某种错误（一般是图片路径出错）导致无法被解析时，可以使用替换文本属性alt用文本代替于错误图片的位置显示在网页上

    
    
        
        
        图片标签及alt属性测试
    
    
        
    下面是图片标签的测试
        

    HTML图片宽度和高度属性

    在HTML中，当需要修改图片的宽度和高度时，可以使用到width和height属性对宽度和高度进行修改

    📌

    在HTML中，width和height属性单位为像素px

    
    
        
        
        图片标签及width和height属性测试
    
    
        
    下面是图片标签的测试
        

    HTML图片边框属性

    在HTML中，需要为图片添加边框时，可以使用border属性为所需要的图片添加边框，但是一般使用 CSS 来设定

    
    
        
        
        图片标签及border属性测试
    
    
        
    下面是图片标签的测试
        

    📌

    在HTML中，border属性的单位为像素px

    HTML图片提示属性

    在HTML中，可以使用title属性对图片显示提示信息

    
    
        
        
        图片标签及title属性测试
    
    
        
    下面是图片标签的测试