html常用标签

目录

基本标签

双标签

1.标题标签

 2.p标签

3.em标签

​4.strong标签

5.a链接

列表

表格 

表单

表单之input标签

表单之label标签

audio/vedio

单标签

1.hr标签

​ 2.br标签

3.img标签

---

基本标签

所有网页标签都包含在该标签中

用于定义文档的头部包括title,meta等标签

用于定义网页中的内容，包含标题标签h1-h6,段落标签

等

双标签

1.标题标签

形如

内容

...

内容

分别是一级标题，二级标题....六级标题。数字越大，字号越小，粗细程度也越细

属性：在网页中占据一整行，且能够自动换行

             高度由文字本身的高度撑开(由h1标签背景色可知)

 
这是一个h1标签
 
这是一个h2标签
 
这是一个h3标签
 
这是一个h4标签
 
这是一个h5标签
 
这是一个h6标签

 2.p标签

即段落标签，用于包裹文字，形如

内容

属性：能够自动换行

 
这是一个p标签这是一个p标签这是一个p标签这是一个p标签这是一个p标签
        
 
这是一个测试标签

---

3.em标签

倾斜标签，包裹在其中的文字会有所倾斜，形如内容

属性：不会自动换行

这是一个em标签这是一个em标签这是一个em标签这是一个em标签这是一个em标签
    这是一个测试标签

4.strong标签

加粗标签，包裹在其中的文字会加粗，形如内容

属性：不会自动换行

这是一个strong标签这是一个strong标签这是一个strong标签这是一个strong标签
    这是一个测试标签

5.a链接

即超链接标签，分为页面间的链接和锚链接。形如链接

页面间的连接即HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一个页面跳转到另一个页面。

锚链接即跳至自身固定位置，或A页跳到B页固定位置，需锚标记

属性：

1.href:超链接地址  

href=" #" 时跳转到当前页面

2.target 目标窗口的位置

            _blank 新建窗口打开超链接

            _self  在自身窗口打开超链接

a链接之页面间的链接

    
点击此处跳转
    

上述代码段中，href属性中存放的超链接地址是一个图片地址，点击h1标签内包裹的链接时，跳转至该图片所在地址，并在网页中展示该图片。

target属性中存放的是打开该图片时窗口的位置。

下图为h1标签包裹的文字在网页中的样式。

 a链接之锚链接

 
 回到顶部 

在上述代码中，第一行代码设置跳转标记，第二行代码设置跳转链接，当用户在页面中点击“回到顶部”，则浏览器自动跳转至第一行代码所在位置。当我们把第一行代码放到页面的初始位置，即可达到回到页面顶部的目的。

同理可得，我们还可以设置去往页面底部的链接

 a链接之其他

1.点击图片跳转：把a链接中的链接由文字改为图片时，就可以实现点击图片跳转

2.拨打电话：把a链接中的链接地址改为电话号码，可以实现拨打电话功能

  1234542321

 上述代码的格式为电话号码

此处的电话号码必须保持一致。

3.下载文件： a链接本身 不带有下载文件的功能，但是由于浏览器无法打开链接地址中指向的文件，故下载

    下载文件

浏览器无法打开的文件格式有.pptx,doc等等 

列表

列表分为有序列表，无序列表和自定义列表

1.有序列表

用来声明有序列表。
1. 用来表示列表项。

   有序列表的各个列表项是有顺序的。有序列表从

   开始，到
   结束，中间的列表项是
2. 标签内容。

   标签和
   1. 标签是配合使用，没有单独使用，而且
      标签内部不能存在任何其他标签，一般情况下只能存在
      1. 标签

   属性： type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。

   1             数字1，2，3，4....

   a/A           小/大写英文字母

   i/I              小/大写罗马字母

    
     
           
    html
           
   java
           
   c++
       
       
   
           
    html
           
   java
           
   c++
       
       
   
           
    html
           
   java
           
   c++
       
       
   
           
    html
           
   java
           
   c++
       
       
   
           
    html
           
   java
           
   c++
       

    

   2.无序列表 

   用来声明无序列表。
   • 用来表示列表项。

     标签表示一个无序列表的开始和结束，

     表示这是一个列表项。在一个无序列表中可以包含多个列表项。

     标签和
     • 标签配合使用，不能单独使用

     type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。 

     disc        默认值，实心圆点

     circle        空心圆点

     square      实心正方形

     none        没有列表符号

      
     
             
      html
             
     java
             
     c++
         
         
     
             
      html
             
     java
             
     c++
         
         
     
             
      html
             
     java
             
     c++
         
         
     
             
      html
             
     java
             
     c++
         

      

     3.自定义列表

     声明自定义列表

     表示列表标题

     表示列表内容

     标签和

     标签是配合使用，没有单独使用，而且

     标签内部不能存在任何其他标签

       
     
             
     CSDN里面有什么
                 
     c++
                 
     java
                 
     html
                 
     css
             
     动物园里有什么
                 
     猴子
                 
     大象
                 
     水獭
         

      

     表格 

     属性：

     边框border 初始为0

             宽度width

             高度height 被表中数据平分

     水平对齐的方式align

            居中center

             左对齐left

            右对齐right

     背景颜色bgcolor

             1.英文单词

              2.十六进制

              3.rgb() 0-255

      跨行跨列

              rowspan

              colspan

     rowspan和colspan属性值为整数，表示合并几行为一行或合并几列为一列

      th：表头单元格

      tr:描述行

      td:描述列

     设置单元格之间的距离cellspacing 一般设置为0、

     表单

     form表单的属性   接名(name)得值(value)

             action:向何处发送数据

             mothed:以何种方式发送数据

             get

                 1.通过url地址栏发送数据

                 2.不安全

                 3.发送数据量小

             post

                 1.通过通信协议https/http将表单数据发送到后台

                 2.相对安全

                 3.理论上没有限制

                 4.需要服务器环境支持

     表单之input标签

     属性

     1.hidden                  隐藏域，在url中隐藏用户输入的数据

     2.password             密码输入框，将用户输入大的内容显示为密文

     3.file                       上传文件

     4.radio                    单选框，常用于性别选择

     单选框选中后无法取消，只能通过选择另一个单选框来取消

     5.checkbox             多选框

     6.select                   下拉列表

     7.textarea                文本域，可存放大段文字

     8.submit                   提交按钮

     9.reset                      重置，可做取消使用

     10.image                   具有提交功能的图片

     表单之label标签

     

     用于表单中，包裹文字，以增强手指，鼠标的可用性，

     在上述图片中，用户不仅可以通过单击输入框输入账号，还可以通过单击“账号”来输入 

      /label> 
             
     
     

     上述代码中第二行中的name值和第一行中for的属性值必须保持一致 

     audio/vedio

     属性：

              src路径

             controls 显示播放器控件

             autoplay  自动播放

             loop 循环

             width/height 视频播放器的宽高

     在该文件的同级目录下必须包含这首歌的mp3文件才能打开

     单标签

     1.hr标签

     水平线标签，可以自动换行，在网页中展示一条水平线

     可设置颜色，宽度高度等基本属性

      2.br标签

     换行标签，可以与其他不会换行的标签搭配使用

     3.img标签

     图片标签，将图片展示到网页中

     属性：

     1.src 图片路径属性

                             绝对路径

     由于代码可能会运行在其他系统上，因此在项目开发过程中，很少使用绝对路径

                             相对路径包括以下三种

                                   /     根路径

                                  ./    同级路径 ：与该html文件存放在同一个文件夹中

                                  ../   上一级路径：存放在该html文件的上一级的文件夹中

         2.高度属性 height  

             宽度属性 width  单位均为像素px

         3.alt属性 图片不能正常加载时的提示

         4.title属性 鼠标划上去显示的内容

          小结：关于html的基本标签记录完毕，如果有人看到了这篇博客，发现了其中的一些错误，恳请能够指正，非常感谢！