HTML表格、表单、标签、CSS、选择器

目录

一、HTML 表格

二、表单

三、布局标签

四、CSS

五、选择器

---

一、HTML 表格

table: 表格

tr：行

td：单元格；rowspan: 纵向合并相邻单元格；clospan：横向合并相邻单元格

th：单元格加粗居中

border：加上边框

cellspacing: 边框与边框之间距离

cellpadding：控制边框大小

caption：表格标题

align：使表格居中

  

  

      

  

       

       

       

       

       

  

  

  

       

       

       

       

       

  

  

       

       

       

       

       

  

  

       

       

       

       

       

学生信息表

1	小英	女	18	1 班
2	a	女	19	1 班
3	b	女	20	2 班
合计	3 人

实现效果：

将第 5 列两行的 1 班合并，将第 5 行的二三四五列的人数合并

  

  

      

  

       

       

       

       

       

  

  

  

       

       

       

       

        （注释掉）

  

  

       

       

       

       

       

  

  

       

       

        （注释掉）

学生信息表

1	小英	女	18	1 班
2	a	女	19
3	b	女	20	2 班
合计	3 人

 实现效果：

二、表单

1. 常见：登录注册

form: 表单

action: 提交表单的输入值到目标地址

input: 输入标签，用于获取用户在网页中的键盘、鼠标输入

·placeholder: 输入框中的提示文字

·name：最终提交表单时，该项输入框的数据描述（例如传到网址上，就是？后面的参数值）

   

   

表示此表单中，分别有输入账号和密码 的 输入框

·value: 输入框最终的【输入值 / 选中值 / 按钮文字】

label：点击到 时，会自动聚焦到其绑定的 标签

·for 绑定 标签 id 值

用户名

disabled: 禁止该【输入 / 选择】

type: 通过修改 type 的值，可以更改输入框的功能

·text：普通的文本输入框

·password: 密码输入框

·radio：单选框,

搭配 checked: 默认选择；搭配 disabled：禁止使用

·checkbox：多选框

·file：选择文件

·submit：提交按钮

·reset：重置按钮

·button: 普通按钮，需要写 value 值，按钮才有文字

例：

     
         

            昵称:
             
            
         
         
         

            年龄:
            
            
        
        

            性别:
            
            男
            
            女
        
        

            城市:
            
            福州
            
            漳州
        
        

            
            
        
    

实现效果：

 2. 多行文本

cols：规定初始显示的【列数】（以字为单位）

rows：规定初始显示的【行数】（以字为单位）

3. 下拉选择框

select：下拉选择框容器

option：选项

    微辣

    辣

例：

             城市:
             
                福州
                漳州
                厦门
                泉州
                宁德
                莆田
             
             
             
         
         
  
                                
         

实现效果：

三、布局标签

div 标签：块级元素标签

特点：常用于而划分一块区域，一定占整行宽度，并且换行，搭配 CSS 使用。

span 标签：行内元素标签

特点：没有任何默认样式，宽高随文字撑开，不会换行。

 四、CSS

1. 定义：

层叠样式表：显示设备在视觉上是二维平面的，实际上是多层图层叠加显示的效果，从上往下叠加的效果，！important 最优先效果。

2. 书写格式：

选择器{样式属性 1：值 1；属性 2：值 2}

3. 书写位置：

①内联样式：直接写在标签的 style 属性中，无法重复使用代码。

内联样式

内联样式

②内部样式：在 html 文件的

标签域中，添加

标签，将

代码书写其中，可以通过选择器重复使用代码。

内联优先级>内部

③外部样式：写在新的一个文件，通过 link 连接两个文件

内部优先级>外部

！important：

五、选择器

id 选择器：id=”happy”

#happy{

width:100px;

}

class 选择器：class=”sad”

.sad{

width:50px;

}

 子元素选择器：

相邻元素选择器：