第二章 使用HTML标签组织页面内容

前言：

使用VS Code进行一系列的实操，跟着学习，一起进步。这章大部分代码注释都在代码段里边，需要点开查阅。作者希望和大家一起探讨，不断吸取经验，感谢鼓励。之后还会有有关CSS、JavaScript、JQuery等的更新，欢迎关注收藏订阅。

---

学习内容：

1.HTML语言概述

2.基本HTML标签

3.表格设置

4.表单设置

---

一、 HTMl语言概述

二、 基本HTML标签

1.标题标签：h1-h6六个标签，有三种对齐方式，左对齐：left通常默认左对齐；右对齐：right；

居中：center。

    
默认左对齐
    
左对齐
    
右对齐
    
居中

2.

标签：文本文档的基本形式输出，同样可以设置三种对齐方式，可以根据浏览器页面自动换行

---

水平线，将段落之间用水平线隔开。 
强制换行

    
    
这是第一个p标签居中样式
    

    
    
这是第二个p标签，
从此处换行

3.

块标签，将一些文档放在一起。列表标签：有序列表ol和无序列表ul。

    
这是一个块
    

        
列表1
        
列表2
        
列表3
    
    
    
    

        
图片1,样式为实心圆
        
图片2，样式为空心圆
        
图片3，样式为方块
    
    
    

4.img图像

5.超链接。点击后跳转到相应的网站

    
    
    京东
    
    


    
    
    。。
    

三、表格设置

创建表格使用

标签，表格既是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。

    
    
合并单元格6和7:colspan
    
合并单元格15和20:rowspan
    
水平合并，保存左边，删除右边
    
垂直合并，保存上边，删除下边
    
    

这是五行五列的表格

单元格1	单元格2	单元格3	单元格4	单元格5
单元格6单元格7		单元格8	单元格9	单元格10
单元格11	单元格12	单元格13 18 23	单元格14	单元格15单元格20
单元格16 17 21 22			单元格19
			单元格24	单元格25

表头一般在第一行，可以将标签换成标签，标签的作用是将其文本加粗居中

四、表单设置

表单在网页中主要负责数据采集功能，分为表单标签、表单域和表单按钮。

1.表单基本定义及文本框和密码框：

    
        

            
            
            用户名: 
            密 码: 
            
            
            
            
        
    

2.多行文本框

</p> <p>                                                           初始文本信息(可以不写)   

 3.单选按钮与复选框

单选按钮type属性使用radio，复选框type属性使用checkbox。

    
    

        男: 
        女: 
        
        

        
        选择喜欢的水果:
        

        苹果:
        香蕉:
        梨子:
        
        

        
        
    

 4.表单元素分组与下拉列表和列表框

当表单里包含较多元素时，通过

实现信息的分组，嵌套在

里面。

    
        
        

            
            
这是第一个分组表单 
            
            
你好
            请输入信息： 
            提交：
            重置：
        
        

            
            
这是第二个分组表单
            
            
                1
                2
                3
            
            
            
        
        

              
            
这是第三个分组表单
        
            
            4
            5
            6
            7
            
        
        
    

》》》》》》》》》》》》》》》》》》》》》

谢谢你在百忙之中观看，小鱼在这里致以诚挚的问候。若代码有误，还望指出，您的指出是我前进的动力，希望您多多支持！今天的学习就到此为止吧，咱们下期再见。