【Web前端——HTML】基础部分

目录

一、列表标签

1.1无序列表

1.2 有序列表

1.3 自定义列表

1.4 代码样例及总结

二、表格标签

2.1 基本标签

2.2 相关属性

2.3 表格标题和相关属性

2.4 结构标签（了解）

2.5 合并单元格

2.6 代码样例及总结

三、表单标签

3.1 input系列标签

3.2 button按钮标签

3.3 select下拉菜单标签

3.4 textarea文本域标签

3.5 label标签

3.6 代码样例及总结

四、语义化标签

4.1 无语义的布局标签–div和span

4.2 有语义的布局标签

4.3 代码样例及总结

五、字符实体

5.1 常见字符实体

5.2 代码样例及总结

---

一、列表标签

1.1无序列表

1.2 有序列表

1.3 自定义列表

1.4 代码样例及总结

    
    
    
    


    
    

        
        
        
榴莲
        
        
香蕉
        
苹果
    
    
    

        
        
        
700rmb
        
800rmb
        
900rmb
    
    
    

        
        
        
自定义标题
        
账户管理
        
帮助中心
        
订单操作
    

• ul、ol标签中只允许嵌套li标签

• li标签中可以嵌套任意内容

自定义列表中：

• dl标签中只允许嵌套dt/dd标签

• dt/dd标签中可以嵌套任意内容

二、表格标签

2.1 基本标签

2.2 相关属性

2.3 表格标题和相关属性

2.4 结构标签（了解）

2.5 合并单元格

2.6 代码样例及总结

    
    
    
    


    
    

        
表格标题
        
        

            
            

            
 
                
姓名
                
性别
                
年龄
            
        
        
        
    

        
  
            
            
            
            
小B
            
女
            
30
        
        

            
小C
            
女
            
24
        
    

    

        

            
平均年龄
            
/
            
27
        
    


    
    

        
表格标题
        
        

            
            

            
 
                
姓名
                
成绩
                
评语
            
        
        
        
    

        
  
            
小B
            
100
            
好
        
        

            
小C
            
厉害
        
    

    

        

            
总结
            
优秀
        
    
    

 

总结：

1、在合并单元格时先删除在进行代码块合并，利用colspan、rowspan属性实现跨行、跨列合并

2、注意区分标签与属性的概念。属性是对标签内的某些内容的特殊指定

3、标签的嵌套关系 table(表格整体) > tr(表格每行的内容，包裹td) > td (每一行内单独小格子的内容）

三、表单标签

3.1 input系列标签

常用属性：
placeholder：占位符。提示用户输入的内容
value：用户输入的内容，提交之后会发送给后端服务器
name：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值

注意：
按钮功能需要配合form标签一起使用，利用form标签把表单标签一起包裹起来

3.2 button按钮标签

3.3 select下拉菜单标签

3.4 textarea文本域标签

3.5 label标签

3.6 代码样例及总结

    
    
    
    


    
    
    

    文本框：
    


    密码框：
    


    
    单选框： 男 女
    


    多选框：ABC
    


    文件选择框：
    


        

            
    文本框：
    


    密码框：
    


    提交按钮：
    


    重置按钮：
    


    
    普通按钮：
        
    

    
    占位符：
    


    
    提交按钮
    



    
    
        北京
        上海
        深圳
        
        重庆
    
    


    
        在此输入文本
    
    


    
    
    单选框：
     男
    女

总结：

1、使用label标签可以使单选范围变大，即使把鼠标放在汉字上也可以选中

2、下拉菜单选择 select 标签中加入 selected 属性，可以指定某选择为默认选择

3、value属性：可以修改提示词

4、placeholder：占位符。提示文本框内容

四、语义化标签

4.1 无语义的布局标签–div和span

4.2 有语义的布局标签

4.3 代码样例及总结

    
    
    
    


    普通文字
    
    
这是div标签
    这是span标签 这是span标签
    



    
    手机端网页，用css添加别的内容
    
网页头部
    
网页导航
    
网页底部
    
侧边栏
    
区块区域

五、字符实体

5.1 常见字符实体

5.2 代码样例及总结

    
    
    
    


    
    打好几个空格       好几个空格
    

需要几个空格就打几个‘ ’