前端web入门-HTML-day02

 (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

列表 

无序列表

有序列表

定义列表 

表格

基本使用

合并单元格

跨列合并 

跨行合并

表单

input 

input标签基本使用 

input 标签占位文本 

单选框 radio 

上传文件 - file 

多选框 - checkbox 

下拉表单

文本域

label 标签

按钮 - button

语义化

无语义的布局标签

字符实体 

---

列表 

作用：布局内容排列整齐的区域。
列表分类：无序列表、有序列表、定义列表。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

注意事项：
• ul 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容 

    
    
    
    


    

        
列表条目1
        
列表条目2
        
列表条目3
    

网页显示为：                                     

有序列表

作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

注意事项：
• ol 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容 

    
    
    
    


    

        
步骤1
        
步骤2
        
步骤3
    

网页显示为：                                                                    

定义列表 

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

注意事项：
• dl 里面只能包含dt 和 dd
• dt 和 dd 里面可以包含任何内容 

    
    
    
    


    

        
主内容
        
分内容
        
分内容
        
分内容
    

网页显示为：                                                                  

表格

基本使用

网页中的表格与 Excel 表格类似，用来展示数据。

标签：table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。 

    
    
    
    


    

        

            
姓名
            
语文
            
数学
            
英语
        
        

            
小周
            
80
            
80
            
60
        
        

            
小耿
            
90
            
90
            
100
        
        
    

 

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：
1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
– 跨行合并，保留最上单元格，添加属性 rowspan
– 跨列合并，保留最左单元格，添加属性 colspan
3. 删除其他单元格

跨列合并 

        
            小周
            80
            
            60
        

网页显示为：                                                          

跨行合并

        
            小周
            80 
            
            60
        

网页显示为：                                                     

表单

作用：收集用户信息。
使用场景：
• 登录页面
• 注册页面
• 搜索区域

input 

input标签基本使用 

input 标签 type 属性值不同，则功能不同。

    
    
    
    


    
    文本框：
    

    
    密码框：
    

    单选框：
    

    多选框: 
    

    上传文件：

网页显示为：                          

input 标签占位文本 

占位文本：提示信息。

文本框和密码框都可以使用。

    
    
    
    


    文本框：
    

    文本框：
    

    密码框：
    

    密码框：

网页显示为：                           

单选框 radio 

常用属性：

男
女 

提示：name 属性值自定义。

    
    
    
    


    
    性别：
    男
    女

网页显示为：                                                            

上传文件 - file 

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

多选框 - checkbox 

多选框也叫复选框。
默认选中：checked。

 

    
    
    
    


    兴趣爱好：
    敲代码
    敲前端代码
    
    敲前端html代码

网页显示为：

下拉表单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。 

        北京
        上海
        广州
        深圳
        武汉

默认显示第一项，selected 属性实现默认选中功能

    
    
    
    


    城市：
    
        北京
        上海
        广州
        深圳
        
        武汉
    

网页显示为：                                                                 

文本域

作用：多行输入文本的表单控件

标签：textarea，双标签。

默认提示文字 
注意点：
• 实际开发中，使用 CSS 设置 文本域的尺寸
• 实际开发中，一般禁用右下角的拖拽功能

    
    
    
    


    
    请输入评论

 网页显示为：                                                     

label 标签

作用：网页中，某个标签的说明文本。

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一
label 标签只包裹内容，不包裹表单控件
设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

男

写法二

使用 label 标签包裹文字和表单控件，不需要属性

女

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

    
    
    
    


    性别：
    
    男
    
    女

网页显示：                                                                   

按钮 - button

按钮

type属性值：

提示：
• 注意：按钮需配合 form 标签（表单区域）才能实现对应的功能。 

    
    
    
    


    
   

        用户名：
        


        密码：  
        


        
        提交 
        重置
        普通按钮
   

网页显示为：                                

语义化

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）
 div：独占一行
 span：不换行

div 标签，独占一行

span 标签，不换行

    
    
    
    


    
    
div标签
    
div标签
    
    span标签
    span标签

网页显示为：                                                               

字符实体 

作用：在网页中显示预留字符。 

提示：
• lt 是 less than 的缩写
• gt 是 greater than 的缩写 

    
    
    
    


    
    乾坤未定，你我皆是黑           马
    

    乾坤未定，你我皆是黑    马
    

    <p>

网页显示为：