HTML常用标签及属性

1.html标签

作用:文件的开始、结束

2.head标签

  

作用:用于放置文件标题

3.title标签



    HTML常用标签及属性
  

作用:网页标题

如图所示:

20f1a25e1122432596848089808d1c30.png

 

 

4.body标签


    .body标签

 

作用:用于放置网页内容

如图所示:

 

HTML常用标签及属性_第1张图片

 

 

5.标题标签

1111

1111

1111

1111

1111
1111

作用:设置不同级标题

如图所示:HTML常用标签及属性_第2张图片

6.标签




    
    
    
    Document



    
    

作用:用于在网页中展示图片

7.链接标签




    
    
    
    Document



    qq.com

    

 

作用:点击a链接的文字即可跳转当前页面

8.字体效果标签

  • ....

    标题字(最大)
  • ...
    标题字(最小)
  • ...粗体字
  • ...粗体字(强调) (同上效果略同)
  • ...斜体字
  • ...斜体字(强调)
  • ...底线
  • ...删除线(表示删除)
  • 换行标签
    :跳到下一个新行

代码展示:




    
    
    
    Document


    

22222

22222

22222

22222

22222
22222
粗体 粗体 斜体 斜体 底线 删除线
换行标签

效果如图所示:

HTML常用标签及属性_第3张图片

 9.列表类标签

1.无序列表(常用)

    1. 标签:用来声明有序列表
    2. 标签:用来表示列表项
    3. 有序列表的特点:有序列表的各个列表项是有顺序的。有序列表从
        开始,到
      结束,中间的列表项是
    4. 标签内容;
        标签和
      1. 标签是配合使用,没有单独使用,而且
          标签内部不能存在任何其他标签,一般情况下只能存在
        1. 标签



    
    
    
    Document


    
    
  • 111
  • 111
  • 111
  • 111
  • 111

效果:

HTML常用标签及属性_第4张图片

 

2.有序列表

    • 标签:用来声明无序列表
    • 标签:用来表示列表项
    • 无序列表的特点:
        标签表示一个无序列表的开始和结束,
      • 表示这是一个列表项。在一个无序列表中可以包含多个列表项;
          标签和
        • 标签配合使用,不能单独使用
        
        
        
            
            
            
            Document
        
        
         
            
        1. 222
        2. 222
        3. 222
        4. 222
        5. 222

        效果:

        HTML常用标签及属性_第5张图片        

         

        3.自定义列表

        • 用来声明自定义列表。
        • 用来表示列表标题。
        • 用来表示列表内容
        • 标签和
          标签是配合使用,没有单独使用,而且
          标签内部不能存在任何其他标签
        
        
        
            
            
            
            Document
        
        
        
            
        web前端
        html
        css
        javascripe
        wechat
        后台服务器
        java
        php
        c#
        python
        数据库
        mysql
        spl server
        oracle
        DB2

        效果:

        HTML常用标签及属性_第6张图片

         10.表格类标签

        1.定义类标签

        • 标签:每行被分割为若干单元格使用td标签
        • 标签:表格均由若干行组成使用tr
        • 标签 :定义HTML表格中的表头单元格
        • table标签 ----定义表格

        2.美化标签

        • border  边框
        • bgcolor  背景颜色
        • align  设置对齐颜色
        • width/height   表格宽度/高度
        • cellspacing   设置单元格之间的距离
        • cellpadding   设置文字与单元格之间的距离
        
        
        
            
            
            
            Document
        
        
        
            
        单元格 单元格 单元格 单元格 单元格
        222 222 222 222 222
        33333 33333 33333 33333 33333

        效果:

        HTML常用标签及属性_第7张图片

         11.表单类标签

        表单元素可分为三类,input输入表单元素、select下拉表单元素、textarea文本域元素

        1.input输入表单元素

        标签是一个单标签,用于收集用户信息

        标签的属性:

        属性值

        描述
        button 定义克点击按钮
        checked 定义复选框
        file 定义输入字段和“浏览”按钮,工文件上传
        hidden 定义隐藏的输入字段
        image 定义图像形式的提交按钮
        password

        定义密码字段

        radio 定义单选按钮

        reset

        定义重置按钮。会清除所有数据
        subm 定义提交按钮
        text 定义单行的输入字段,用户可输入文本,默认宽度为20个字符

        几个重要属性的作用:

        1.文本框(text)  

            

                

        2.密码框(password) 

            

        3.单选按钮(radio) 

            
        性别:男

        4.复选框(checkbox) 

            
        爱好:吃饭睡觉

        5.提交按钮(submit) 

            

        6.重置按钮(reset) 

            

        7.普通按钮(button)

            

        8.文件域 (file) 

            
        上传头像:

        综合应用

        
        
        
            
            
            
            Document
        
        
        
            
        用户名:
        密码:
        性别:男
        爱好:吃饭 睡觉 打豆豆

        上传头像:

        HTML常用标签及属性_第8张图片

         2.select 下拉表单元素

        注意点:

        1. 效果图:

          HTML常用标签及属性_第9张图片

           3.textarea 表单元素

          当用户输入内容较多的情况下,我们可以用表单元素标签替代文本框标签,在表单元素中,

          效果展示:

          HTML常用标签及属性_第10张图片

           

           

    你可能感兴趣的:(html)