HTML2

Day32 表格、表单、CSS初识

1. 表格
   1.1 概述
   表格就可以看做数据库表,多少行多少列,列名 等
   主要用于展示数据

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

注意 :

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

1.3 使用方式

1.4 Table属性

1.5 结构

1.6 标题

使用caption来定义表的标题

1.7 合并单元格
跨行合并：rowspan
跨列合并：colspan
合并单元格的步骤：
1、先判断跨行合并还是跨列合并
2、跨行合并用rowspan属性，跨列合并用个colspan属性
3、将rowspan 或者colspan写在第一个要合并的单元格上
4、将合并的行数和列数写在指定的属性值上
5、将多余的单元格注释掉

2. 表单
   2.1 概述
   主要用于对用户进行数据采集,让用户输入数据
   比如 登陆,注册,添加,更改等 所有需要用户输入的地方

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。
一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
应用场景：主要是应用在数据的提交，比如点击按钮发送数据到服务端。
2.2 表单标签
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

2.2.1常用属性

1. action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
   Get 明文传输,数据量相对较少,不是很安全
   Post 非明文传递,有请求体,数据量相对较大,较安全
   获取数据用get,发送数据用post
   3.name用于指定表单的名称，以区分同一个页面中的多个表单。
   

2.3 input控件
input 输入的意思。在上面的语法中，input标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。
除了type属性之外，input标签还可以定义很多其他的属性，其常用属性如下表所示。
2.3.1 属性和取值

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

        </tr>
        <tr align="center">
            <td colspan="2">
                <!-- 可以提交 -->
                <button>button会触发action</button>
                <!-- 普通按钮 -->
                <button type="button">button[type="button"]不会触发action</button>
                <!-- 普通按钮 -->
                <input type="button" value="input[type='button']不会触发action">
                <!-- 提交按钮 -->
                <input type="submit" value="input[type='submit']会触发action">
                <!-- 重置按钮 -->
                <input type="reset" value="重置">
                <!-- 使用图片代替提交按钮 -->
                <input type="image" src="./images/faq01.jpg">
            </td>
        </tr>
    </form>
</table>

学员信息录入

姓名
密码
性别	男 女 保密
学校	河北科技大学 河北师范大学 河北地质大学
选修课程	java Oracle Android
自我评价
上传头像

2.3.3 扩展-禁用输入框
比如更改操作,用户名不可以更改,这种情况,可以使用对该输入框禁用
Readonly : 可以获得焦点,但是不可以修改,另外数据可以传递
Disable : 不可以获得焦点,不可以修改,数据不可以传递

4. CSS
   4.1 概述
   美化页面、布局排版
   从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
   4.2 放置方式
   如何将html和css关联起来
   4.2.1 内部样式
   又称为内嵌式,在head标签中 使用style标签来编写css代码

总结：

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

4.2.2 行内样式
行内样式表,是通过标签的style属性来进行编写css代码

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

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

4.2.4 优缺点对比

4.3 语法结构
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
在上面的样式规则中:
1.选择器用于指定CSS样式的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落和表格的对齐的演示。

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

4.4.2 Font-weight 字体粗细
字体加粗除了用b和strong标签之外，可以使用CSS 来实现，但CSS是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值：
normal、bold、bolder、lighter、100~900（100的整数倍）。
小技巧：
数字400等价于normal，而700等价于bold。但是我们更喜欢用数字来表示
4.4.3 Font-style 字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

4.4.4 Font-family 字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:“微软雅黑”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
   Unicode字体
   在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
   方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。
   方案二：在CSS 直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

4.4.5 font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
注意：

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

4.4.6 案例

4.5 外观属性

4.6 选择器