表格、表单、CSS初识

Day32 表格、表单、CSS初识

1. 表格
   表格就可以看做数据库表,多少行多少列,列名
   1.1 标签
   table用于定义一个表格
   tr 用于定义表格中的一行 中只能嵌套
   th /td：必须嵌套在标签中 列

thead,tbody 位于table中 thead介绍table tbody是table的主体
caption 定义表的标题

1.2 合并单元格
先布局，具体写时，写一行如果有跨 ，就注释相应内容
跨行合并：rowspan
跨列合并：colspan
2. 表单
主要用于对用户进行数据采集,让用户输入数据
比如 登陆,注册,添加,更改等 所有需要用户输入的地方

一个表单有三个基本组成部分：表单标签、表单域、表单按钮

form标签被用于创建一个表单

属性： 1、action 传输到指定位置
2、method用于设置表单数据的提交方式，其取值为get或post
获取数据用get,发送数据用post
3、name用于指定表单的名称，以区分同一个页面中的多个表单。
2.3 input控件

radio如果是一组，必须给他们命名相同的名字name
Input的size跟字体大小有关系，不设置的情况下，浏览器默认情况下，input默认的输入框的宽度就是169px

禁用输入框
Readonly : 可以获得焦点,但是不可以修改,另外数据可以传递
Disable : 不可以获得焦点,不可以修改,数据不可以传递

3. CSS
   美化页面、布局排版
   3.1 放置方式
   将css和html关联起来
   内部样式，行内样式，外部样式（用的最多）
   3.1.1 内部样式
   语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方
   3.1.2 行内样式
   通过标签的style属性来进行编写css代码

3.1.3 外部样式
单独创建一个css文件,把所有的css代码写到里面，使用时在html中使用link标签引入即可。

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

3.2 语法结构
CSS样式规则，具体格式如下：
在上面的样式规则中:
1.选择器用于指定CSS样式的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。

3.3 字体属性
3.3.1Font-size 字体大小,常用单位px和em

Font-weight 字体粗细
normal、bold、bolder、lighter、100~900（100的整数倍）
Font-style 字体风格
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
Font-family 字体
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，基本语法格式：
选择器{font: font-style  font-weight  font-size/line-height  font-family;}
注意：

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