HTML常见标签（一）

一、基础

1、写HTML代码的快捷生成方式：在VScode中，英文的 ！然后回车即可出现如下画面

 圈出的那两行不重要，可以删除也可保留。

 2、注释标签

快捷键     ctrl + /（取消注释也是）

二、常用标签

1、标题标签     

    
      
     


     你好，html
    
标题1
    
标题2
    
标题3
    
标题4
    
标题5
    
标题6

2、段落便签     

我们想要的分段效果：

未使用p标签：

使用p标签：

    
入党从自身做起
    我们不仅仅要做到思想上入党，更要在实际行动中有所体现。所以，在今后的生活工作中，我要努力做到以下几点：
    

    1、不断加强自我的政治理论学习，提高自我的政治觉悟、思想水平，进取与周围党员就党的理论进行讨论、学习。
     

    2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题，主动和入党联系人进行交流，使自我更快的提高，也使党组织时刻了解自我的发展情景。
     

    3、在平时的工作中勤奋努力，进取提高，不断提高业务水平，努力钻研专业知识。

 

3、 换行符   

    
入党从自身做起
    我们不仅仅要做到思想上入党，更要在实际行动中有所体现。所以，在今后的生活工作中，我要努力做到以下几点：
    

    1、不断加强自我的政治理论学习，提高自我的政治觉悟、思想水平，进取与周围党员就党的理论进行讨论、学习。
     

    2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题，主动和入党联系人进行交流，使自我更快的提高，也使党组织时刻了解自我的发展情景。
      

    3、在平时的工作中勤奋努力，进取提高，不断提高业务水平，努力钻研专业知识。

段落和换行的对比：红色的是使用段落符的效果，蓝色的使用换行符的效果

 4、文字格式符

  4.1 加粗            或者   

4.2   倾斜         或者   

 我们不仅仅要做到思想上入党，更要在实际行动中有所体现。

 4.3  删除标签          或者 

原价：150
    

    现价： 99

 

4.4下划线   

 很多事情没有来日方长我现在就要快乐！

 

5、图片标签

5.1         

当我使用相对路径，以html所在位置为基准，找到图片所在位置

(1)当图片和  .html 文件都在桌面时

(2）当图片和  .html 文件在同一磁盘不同文件夹内,就需跳出一级目录，使用   ../   

如需跳出两级目录，就是  ../../

（3）当图片和  .html 文件在同一磁盘，我的  .html文件 在D盘的根目录下，图片在D盘的Html文件夹内

 在使用img 标签时,发现按照src语法引用本地图片地址时,图片加载失败，代码如下

使用谷歌浏览器运行之后，出现如下情况

 当我尝试多次，最终如下代码可以正常显示（谷歌浏览器），这次使用的是绝对路径

使用绝对路径的好处：无论html移动到哪里，图片的路径是固定不变的，都可以访问到

5.2  描述图片信息

（1）当图片显示不出来的时候，对图片加以描述     alt="描述"   

    当图片正常显示的时候，那句描述的话语不会出现

（2）当鼠标移动到图片时，会显示相关信息     title= " 信息"

5.3   设置宽和高

width设置宽，height设置高  ，可使用px 或百分比

（1）使用px

(2)利用百分比

 ​​​​​​

 设置百分比的好处：图片不会压缩或拉长，会根据当前电脑的展示页面按照设置的百分比显示图片。

5.4  设置边框    border=" "

6、超链接标签     

6.1外部链接

 完全二叉树 和满二叉树的比较

 

点击"完全二叉树"直接跳转到百度百科的完全二叉树，但是默认打开的是当前的页面，如果想要重新打开一个页面，就是用    target="_blank"

 完全二叉树 和满二叉树的比较

6.2锚点链接

  可以快速定位到⻚⾯中的某个位置.  

 第⼀章 
 第⼆章
 第三章
     

          第⼀章剧情介绍 

          第⼀章剧情介绍 

          ...
     
 
     

          第⼆章剧情介绍 

          第⼆章剧情介绍 

          ...
     
     

          第三章剧情介绍 

          第三章剧情介绍 

          ...
     

 

 点击第一行的第一章可以直接跳转到如下图

以谷歌浏览器为例，也可直接改后缀地址为222，直接会跳到第二章。

7、表格标签

   表格

     行

   列（居中加粗显示）

    列（居左显示）

border="数字"    设置表格边框

height="数字px"    设置表格高度

width="数字px"     设置表格宽度

         

             
姓名
             
性别
             
年龄
         
         

            
张泽
            
男
            
21
         
         

            
宋依
            
女
            
22
         

 

合并单元格（使用不多，了解即可）

跨⾏合并: rowspan="n"

跨列合并: colspan="n"

8、列表标签

8.1  ⽆序列表 ul li 和有序列表 ol li

无序列表
    

        
哆啦A梦
        
海绵宝宝
        
猫和老鼠
        
大耳朵图图
    
有序列表
    

        
小学
        
初中
        
高中
        
大学
    

8.2  ⾃定义列表

dl (总标签)    dt (⼩标题)      dd (围绕标题来说明)

上⾯有个⼩标题, 下⾯有⼏个 ，围绕着标题来展开的

 

 
⾃定义列表
 
    

           
我所学的课程
           
计算机网络
           
操作系统
           
JAVA