JavaWeb——HTML基本标签详解及案例实战（文件标签、文本标签、图片标签、列表标签、链接标签、块标签、语义化标签、表格标签）

目录

1、文件标签

2、文本标签

3、图片标签

4、列表标签

5、链接标签

6、块标签

7、语义化标签

8、表格标签

9、综合案例

---

上一节介绍了HTML的基本概念，和基本语法，本节介绍下HTML的基本标签和表单标签。这部分学习可以参照W3Cschool，一个很好的网站。

1、文件标签

文件标签是构成HTML最基本的标签，包括：

• html：html文档 的根标签
• head：头标签，用于指定html文档的一些属性，引入外部的资源
• title：标题标签
• body：体标签
• ：html5中定义该文档是html文档

2、文本标签

文本标签是和文本相关的标签，包括：

注释：

• 
  换行标签，自闭和标签

• 标题标签，字体大小逐渐递减，自带换行效果

• 段落标签

• ---

  显示一条水平线，可以修改属性（color、width、size、align），但是不建议使用了，后续学习CSS时进行样式优化
• 字体加粗
•   斜体
• 字体标签，可以设置属性（color、size、face等）
•   居中标签

【举例】：利用IDEA新建HTML文件，观察使用以上几个标签的效果

    
    


    

    hello, 

    world 


    环游世界

    
 环游世界 
    
 环游世界 
    
 环游世界 
    
 环游世界 
    
 环游世界 
    
 环游世界 

    

        第一段：环游世界环游世界环游世界环游世界环游世界环游世界
    
    

        第二段：环游世界环游世界环游世界环游世界环游世界环游世界
    
    

        第三段：环游世界环游世界环游世界环游世界环游世界环游世界
    

    

    


    江山无限好

    江山无限好

    


    确实不错噢

    确实不错噢
    

    


    
        
            确实不错噢
        
    

另外，HTML中有一些特殊字符，要每个特殊字符标识不同，列表如下：

3、图片标签

展示图片，其重要属性 src：指定图片的位置，其余还有设置长宽、对齐属性等；

【举例】：图片标签的使用，注意下src 设置路径的两种形式

4、列表标签

列表标签包括有序列表ol和无序列表ul，列表的每一项用li闭合。

【举例】：使用有序列表和无序列表

    
    



    

        
 上厕所 
        
 洗脸 
        
 刷牙 
        
 吃饭 
    

    

        
 上厕所 
        
 洗脸 
        
 刷牙 
        
 吃饭 
    
    

        
 上厕所 
        
 洗脸 
        
 刷牙 
        
 吃饭 
    

5、链接标签

a：定义一个超链接，关键属性：

• href：指定访问资源的URL
• target：指定打开资源的方式
    _self：默认值，在当前页面打开
    _blank：在空白页面打开

【举例】：使用链接标签

    
    



    点我 
    

     点我_本页面跳转 
    

     点我_新选项卡跳转 
    

    
        
    

6、块标签

次此处简单介绍div和span标签，后续一般配合css使用。

【举例】：div 和 span 标签

    
    



    百度 
     一下 
    

    
 百度 
    
 一下 

7、语义化标签

html5中，为了提高程序的可读性，使用的标签，一般也是结合css一起使用。

【举例】使用header、footer

    
    




    我是头



    我是尾

8、表格标签

html中表格的形式，先有行，然后每个行中定义单元格。

• table：定义表格，一下属性了解即可，一般使用css控制表格样式
      width：宽度
      border：边框
      cellpadding：定义内容与单元格之间的距离
      cellspacing：定义单元格之间的距离，若为0，则单元格的线会合为一条
      bgcolor：表格背景色
      align：表格对齐方式
• tr：定义行
• td：定义单元格
• th：定义表头单元格

【举例】：使用表格标签

    
    




    

        
编号
        
姓名
        
成绩
    
    

        
1
        
张三
        
100
    
    

        
2
        
李四
        
99
    

其他相关标签：

• caption：定义表格标题
• thead：表示表格头部分
• tbody：表示表格体部分
• tfoot：表示表格尾部分

9、综合案例

做一个模拟百度网站的首页，早期没有css时，基本都用的是table进行布局：

• 1.确定使用table进行布局
• 2.如果某一行只有一个单元格，则使用
• 3.如果某一行有多个单元格，则使用，内嵌单元格，避免使用合并单元格方式，不利于维护

   

         

                 

         

   

    
    




    

        

            

                        

                            
  新闻 
                            
 hao123 
                            
 地图 
                            
 视频 
                            
 贴吧 
                            
 学术 
                            
 更多 
                            
                         
                            
 抗击肺炎 
                            
 南京 
                            
 晴15℃ 
                            
 设置 
                            
 账号 

                        
                    
                

                

                    

                        
                    
                
                

                    

                        
                    
                
            
        
    

 

本文为博主原创文章，转载请注明出处，若本文对您有些许帮助，关注/评论/点赞/收藏，就是对我最大的支持，多谢！