HTML的表格、表单和CSS初识

我就是我 2022-11-26 09:51 222阅读 0赞

### 文章目录 ###

*  一、 表格标签(重点)
 *   *  1.创建表格
     *  2.表格属性
     *   *  1. 表头标签
         *  2. 表格结构(了解)
         *  3. 表格标题
         *  4. 合并单元格(难点)
         *  5. 总结表格
 *  二、 表单标签(重点)
 *   *  1.input控件
     *   *   *  1.label标签
             *  2.textarea控件
             *  3.下拉菜单
             *  4.表单域
 *  三、 CSS初识
 *   *   *  1. 样式表
         *  2. CSS样式规则
         *  3. CSS字体样式属性
         *  4 . CSS外观属性
         *  5. 基础选择器(重点)
         *   *   *  1. 标签选择器（元素选择器）
                 *  2. 选择器
                 *  3. 多类名选择器
                 *  4. id选择器
                 *  5. id选择器和类选择器区别
                 *  6.通配符选择器

# 一、 表格标签(重点) #

表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。

## 1.创建表格 ##

> 在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法格式如下：

<table>
    
      <tr>
    
        <td>单元格内的文字</td>
    
       
    ...
    
      </tr>
    
      ...
    
    </table>

在上面的语法中包含三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可。

下面对他们进行具体地解释。

> 1.table用于定义一个表格。
> 
> 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
> 
> 3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

**注意：**

> 1.<tr></tr>中只能嵌套<td></td>
> 
> 2.<td></td>标签，他就像一个容器，可以容纳所有的元素

## 2.表格属性 ##

### 1. 表头标签 ###

> 表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。

### 2. 表格结构(了解) ###

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体如下所示：

> <thead></thead>：用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。  
> <tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

### 3. 表格标题 ###

表格的标题：

> caption

定义和用法：

> caption元素定义表格标题。

示例:

<table>
    
          <caption>我是表格标题</caption>
    
    </table>

**注意：**

> 1.  caption标签只存在表格里面，必须紧随 table 标签之后。
> 2.  只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

### 4. 合并单元格(难点) ###

> 跨行合并：rowspan
> 
> 跨列合并：colspan

合并单元格的思想：

> 将多个内容合并的时候，就会有多余的东西，把它删除。例如：把3个td合并成一个，那就多余了2个，需要删除。

公式：

> 删除的个数 = 合并的个数 - 1

合并的顺序：先上 后下 先左 后右

> 1.先确定是跨行还是跨列合并
> 
> 2.根据 先上 后下 先左 后右的原则找到目标单元格
> 
> 3.删除单元格 删除的个数 = 合并的个数 - 1

### 5. 总结表格 ###

1.      表格提供了HTML中定义表格式数据的方法。
2.      表格中由行中的单元格组成。
3.      表格中没有列元素，列的个数取决于行的单元格个数。
4.      表格不要纠结于外观，那是CSS 的作用。

# 二、 表单标签(重点) #

表单作用：

> 表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

一个表单有三个基本组成部分：

> **表单标签**：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。  
> **表单域**：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。  
> **表单按钮**：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

应用场景：

> 主要是应用在数据的提交，比如点击按钮发送数据到服务端。

## 1.input控件 ##

> input 输入的意思。在上面的语法中，input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

除了type属性之外，input标签还可以定义很多其他的属性，其常用属性如下表所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ0NDY1MA_size_16_color_FFFFFF_t_70]

注意：

> radio如果是一组，必须给他们命名相同的名字name，这样就可以多个选其中的一个啦。
> 
> Input的siz跟字体大小有关系，不设置的情况下，浏览器默认情况下，input默认的输入框的宽度就是169px

font-size:12px;   146px   font-size:13   168px  font-size:14   170px

#### 1.label标签 ####

> label标签为input元素定义标注（标签）。

lable作用：

> 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

> for属性规定label与哪个表单元素绑定。

#### 2.textarea控件 ####

> 如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框

其基本语法格式如下：

<textarea cols="宽度 " rows="高度">  默认是20

文本内容

</textarea>

#### 3.下拉菜单 ####

使用select控件定义下拉菜单的基本语法格式如下：

注意：

> 1.  select中至少应包含一对option。
> 2.  在option中定义selected ="selected "时，当前项即为默认选中项。

#### 4.表单域 ####

> 在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

创建表单的基本语法格式如下：

各种表单控件

</form>

常用属性：

> 1.  action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
> 2.  method用于设置表单数据的提交方式，其取值为get或post。
> 3.  name用于指定表单的名称，以区分同一个页面中的多个表单。

注意：

> 每个表单都应该有自己表单域。

# 三、 CSS初识 #

CSS(Cascading Style Sheets) 主要用于美化样式。

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

### 1. 样式表 ###

CSS可以写到那个位置？ 是不是一定写到html文件里面呢？

**内部样式表**

> 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

其基本语法格式如下：

总结：

> 1.  语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
> 2.  type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

**行内式（内联样式）**

> 内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

其基本语法格式如下：

> <标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

**外部样式表（外链式）**

> 链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

其基本语法格式如下：

注意：link是个单标签。

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

> href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。  
> type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
> 
> rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结（位置）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ0NDY1MA_size_16_color_FFFFFF_t_70 1]

### 2. CSS样式规则 ###

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:

> 1.选择器用于指定CSS样式的HTML对象，花括号内是对该对象设置的具体样式。
> 
> 2.属性和属性值以“键值对”的形式出现。
> 
> 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
> 
> 4.属性和属性值之间用英文“:”连接。
> 
> 5.多个“键值对”之间用英文“;”进行区分。
> 
> 可以用段落和表格的对齐的演示。

### 3. CSS字体样式属性 ###

> font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：

> font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧

> 1.  现在网页中普遍使用14px+。
> 2.  尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
> 3.  各种字体之间必须使用英文状态下的逗号隔开。
> 4.  中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
> 5.  如果字体名中包含空格、\#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
> 6.  尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

> CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在CSS 直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family:  
“\\5FAE\\8F6F\\96C5\\9ED1”，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

用于定义字体的粗细，其可用属性值：

normal、bold、bolder、lighter、100~900（100的整数倍）。

小技巧：

数字400等价于normal，而700等价于bold。但是我们更喜欢用数字来表示。

> font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS  
来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

> normal：默认值，浏览器会显示标准的字体样式。
> 
> italic：浏览器会显示斜体的字体样式。
> 
> oblique：浏览器会显示倾斜的字体样式。

小技巧：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

> font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight
     font-size/line-height
     font-family;}

注意：

> 1.  使用font属性时，必须按上面语法格式中顺序书写，不能更换顺序，各属性以空格隔开。
> 2.  其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

### 4 . CSS外观属性 ###

> color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

> 1.      预定义的颜色值，如red，green，blue等。
> 2.      十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
> 3.      RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

> line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

> text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

> left：左对齐（默认值）
> 
> right：右对齐
> 
> center：居中对齐
> 
> text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度。如果是汉字的段落，1em就是一个汉字的宽度

> text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

小技巧

> 1.      ctrl+滚轮可以放大开发者工具代码大小。
> 2.      左边是HTML元素结构，右边是CSS样式。
> 3.      右边CSS样式可以改动数值和颜色查看更改后效果。

### 5. 基础选择器(重点) ###

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

##### 1. 标签选择器（元素选择器） #####

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

> 标签名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \} 或者
> 
> 元素名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}

特点：

> 1.  标签选择器能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
> 2.  标签选择器可以把某一类标签全部选择出来。

##### 2. 选择器 #####

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

> .类名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}

标签调用的时候用class=“类名”即可。

类选择器的优势：

1.  可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

小技巧：

> 1.长名称或词组可以使用中横线来为选择器命名。
> 
> 2.不建议使用“\_”下划线来命名CSS选择器。
> 
> 3.不要纯数字、中文等命名，尽量使用英文字母来表示。

##### 3. 多类名选择器 #####

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

> 1.  样式显示效果跟HTML元素中的类名先后顺序没有关系,与CSS样式书写的上下顺序有关。
> 2.  各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

##### 4. id选择器 #####

id选择器使用“\#”进行标识，后面紧跟id名，其基本语法格式如下：

> \#id名\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

##### 5. id选择器和类选择器区别 #####

W3C规定，在同一个页面不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器(class)好比人的名字，可以多次重复使用的，比如：张伟、王伟、李伟、李娜。

id选择器好比人的身份证号码，全中国是唯一的，不得重复。

id选择器和类选择器最大的不同在于使用次数上。

##### 6.通配符选择器 #####

通配符选择器用“\*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

>  *  \{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; \}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
    
    margin: 0;                  
     /* 定义外边距*/
    
      padding: 0;                   /* 定义内边距*/
    
    }

注意：

这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。  
我们一般不使用它。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ0NDY1MA_size_16_color_FFFFFF_t_70]: /images/20221124/fa0db0b26ed745478e6d838aea2a985f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODQ0NDY1MA_size_16_color_FFFFFF_t_70 1]: /images/20221124/613f9c20da1a4daa8d032beaadfdc35f.png