携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

1. 表格元素

表格主要用来展示数据

1.1 常用标签：

表格元素的容器使用 table 标签

其他表格元素的标签：thead，tbody，th，tr，td等

thead 和 tbody 代表了表格内的块，类似于 head 和 body

在 thead 中，th 代表标题行的一列

在 tbody 中，tr 代表行，td 代表一行内的一列

1.2 常用属性

table常用属性：border（用于规定边框宽度）

td常用属性：colspan （列合并） rowspan （行合并）

<table border="1">
    <tr>
        <td colspan="4">学生列表</td>
    </tr>
    <tr>
        <td rowspan="3">一班</td>
        <td>1</td>
        <td>小杨</td>
        <td>2岁</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小宇</td>
        <td>4岁</td>
    </tr>
    <tr>
        <td>3</td>
        <td>小海</td>
        <td>5岁</td>
    </tr>
</table>

、

2. 表单元素

表单用于输入，即向服务器发送数据

2.1 常用标签：

表单元素容器使用from标签

input（文本框/按钮框）

label（提示文字，修饰文本框/按钮）

select（下拉选择框）

option（下拉选择选项）

2.2 常用属性

input常见的属性有：

input:type="text"：文本输入框

input:type="password"：密码输入框

input:type="radio"：单选框

input:type="checkout"：复选框

input:type="button"：自定义按钮

input:type="submit"：提交按钮

value：提供按钮的文本内容

name：提供单选框的分类

placeholder：默认提示文本（有输入时消失）

label常见的属性有：

for：用于与 input 标签的 id 捆绑，当点击 label 标签内容时即等于点击与其捆绑的 input 框

1. css概述

css 全称：层叠样式表

网页的内容，由 HTML 控制

网页的样式，由 CSS 控制

2. css语法

元素选择器：

选择器{

属性名1:属性值1;

属性名2:属性值2;

}

h1{
    color:red;
    font-size:12px;
}

类选择器： .

常常制定一个类划分的多个元素

.className{

属性名1:属性值1;

属性名2:属性值2;

}

.text{
    color:red;
}
​
<h1 class="text">hello world</h1>

id选择器：

常常只制定一个元素

#id{

属性名1:属性值1;

属性名2:属性值2;

}

#text{
    color:red;
}
​
<h1 id="text">hello world</h1>

通配符选择器：

制定整个页面的所有标签

*{

属性名1:属性值1;

属性名2:属性值2;

}

3. 常用css属性

字体大小：font-size (chrome浏览器：font-size最小值是12px)

字体颜色：color

宽度：width (可以使用auto代替px与另一个值成比例匹配，防止图片形变)

高度：height (可以使用auto代替px与另一个值成比例匹配，防止图片形变)

背景色：background-color

文本水平居中：text-align

文本行高（垂直居中）：line-height