DAY 36 前端学习

一 table标签
语义：标记一段数据为表格

#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的

#2、格式
<table>
<tr>
<td></td>
</tr>
</table>

tr代表表格的一行数据
td表一行中的一个普通单元格th表示表头单元格

#3、注意点：
表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框

表格属性：
#1、宽度和高度
可以给table和td设置width和height属性

1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高

1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度

#2、水平对齐和垂直对齐
水平对齐align可以给table、tr、td标签设置
垂直对齐valign只能给tr、td标签设置

========水平对齐===========
取值
align=“left”
align=“center”
align=“right”

2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
强调：table只能设置水平方向

2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐

2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准

========垂直对齐===========
取值
valign=“top”
valign=“center”
valign=“bottom”

2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐

#3、外边距和内边距
只能给table设置

3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"

三种方式细线表格：
为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
#1、表格的标题:caption
特点:相对于表格宽度自动居中对齐
注意:
1.1 该标签一定要写在table标签里，否则无效
1.2 caption一定要紧跟在table标签内的第一个

#2、表格的表头信息:thead
特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

#3、表格的主体信息:tbody
注意：
3.1 如果没有添加tbody，浏览器会自动添加
3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着
表格的高度变化而变化

#4、表尾信息:tfoot

<caption>学员信息统计</caption>
<thead>
<tr bgcolor="white">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>

</body>
</html>

单元格合并：
#1、水平向上的单元格colspan
可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
<td colspan="2"></td>

#2、垂直向上的单元格rowspan
可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待

#注意注意注意:
1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格
2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

#1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

#2、单元格里面嵌套表格

#3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

#4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：
#1、快速制作用于演示的html页面

#2、商业推广EDM制作(广告邮件)

二 form标签
语义：标记表单
#1、什么是表单？
表单就是专门用来接收用户输入或采集用户信息的

#2、表单的格式
<form>
<表单元素>
</form>

补充知识（了解即可）
在form内还可以添加一种标签
<fieldset>添加边框
<legend>注册页面</legend>
表单控件......
</fieldset>

三什么是CSS？
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

四为何要用CSS？
在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性。

缺点：
#1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果

#2、代码耦合度高：HTML语义与样式耦合到一起

#3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改

五如何使用CSS？
1、如何使用CSS之CSS的语法
CSS语法可以分为两部分：
#1、选择器
#2、声明
声明由属性和值组成，多个声明之间用分号分隔。

2、如何使用CSS之CSS的四种引入方式？
#1、内联式
<p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>

#2、嵌入式
<head>
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>

#3、导入式
<head>
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>

#4、外联式（企业开发中使用这种方式）
<head>
<link rel="stylesheet" href="css/mystyle.css">
</head>

详细解释：
#1、行内式
行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>

#2、嵌入式
嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中。格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>

#新建外部样式表，然后使用导入式和链接式引入
首先在与html文件同级目录下有一个css文件夹，该文件夹下新建一个外部样式表mystyle.css,内容为
p {
color: red;
font-size: 50px;
text-align: center
}

#3、导入式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");

</style>
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>

#4、链接式（推荐使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>

<p>Egon是一个非常了不起的人</p>

</body>
</html>

#导入式与链接式的区别:
1、<link/>标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
2、导入式的缺点：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。
3、链接式的优点：
使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

#！！！注意点！！！
1、style标签必须放到head内 ,type="text/css"代表文本类型的css
2、type属性其实可以不用写，默认就是type="text/css"
3、设置样式时必须按照固定的格式来设置，key:value;
其中;不能省略，最后一个属性其实可以省略，但我们可以简单地统一记成不
能省略就行了

3、css注释
/*这是注释*/

六基本选择器
1、id选择器
#1、作用：
根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性

#2、格式
id名称 {
属性：值;
}

#3、注意点：
1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等

2、类选择器
#1、作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性

#2、格式：
.类名称 {
属性：值;
}

#3、注意点：
1、类名就是专门用来给某个特定的标签设置样式的
2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
3、引用class一定要加点.
4、类名的命名规则与id的命名规则相同

3、标签选择器
#1、作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

#2、格式：
标签名称 {
属性：值;
}

#3、注意点：
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器，无论嵌套多少层都能选中

4、通配符选择器
#1、作用：选择所有标签

#2、格式：
* {
属性：值；
}

#3、注意点：
1、在企业开发中一般不会使用通配符选择器
理由是：
由于通配符选择器是设置界面上所有的标签的属性，
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多，那么性能就会比较差

七组合选择器
1、后代选择器
#1、作用：找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性

#2、格式：
标签名1 xxx {
属性：值;
}

#3、注意：
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去

2、子元素选择器
#1、作用：找到制定标签的所有特定的直接子元素，然后设置属性

#2、格式：
标签名1>标签名2 {
属性：值;
}

先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

#3、注意：
1、子元素选择器之间需要用>符号链接，并且不能有空格
比如div >p会找div标签的所有后代标签，标签名为">p"
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去

3、毗邻选择器，CSS2推出（又称相邻兄弟选择器）
#1、作用：选定紧跟其后的那个标签

#2、格式
选择器1+选择器2 {
属性：值;
}

#3、注意点：
1、毗邻选择器必须通过+号链接
2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

4、弟弟选择器，CSS3推出（又称通用兄弟选择器）
#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式：
选择器1~选择器2 {
属性：值;
}

#3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中

八交集选择器与并集选择器
1、交集选择器（不常用）
#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性

#2、格式：
选择器1选择器2 {
属性：值;
}

#3、注意：
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见，了解即可
因为：p.part1 完全可以用.part1取代

2、并集选择器
#1、作用：给所有满足条件的标签设置属性

#2、格式：
选择器1,选择器2 {
属性：值;
}

#3、注意：
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class