<table> ：表格的最外层容器
<tr> ：定义表格行
<th> ：定义表头
<td> ：定义表格单元
<caption> ：定义表格标题
注:之间是有嵌套关系的，要符合嵌套规范
<tHead>、<tBody>、<tFoot>。语义化标签 ：tHead、tBody、tFoot
注:在一个table中，tBody是可以出现多次的，但是tHead、tFoot只能出现一次
border ：表格边框
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式（left、center、right）
valign ：上下对齐方式（top、middle、bottom）
form、input、textarea、select、label…
input标签(单标签)有一个type属性，决定是什么控件。
还有一些常见的属性:
checked、disabled、name…
<form> ：表单的最外层容器
<input> ：标签用于搜集用户信息，根据不同的type属性，展示不同的控件，如输入框、密码框、复选框等
<textarea> ：多行文本框
<select>、<option> ：下拉菜单
<label> ：辅助表单
| type属性 | 含义 |
|---|---|
| text | 普通的文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com">
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="gender" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" name="gender" id="woman"><label for="woman">女</label>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="3">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<h2>上传文件</h2>
<input type="file" multiple>
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
表格表单之间可以互相组合形成数据展示效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户信息</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
<div>与<span>
div（块）：
div全称division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：
用来修饰文字的。
注:div和span都是没有任何默认样式的，需要配合CSS才行
选择器{属性1:值1;属性2:值2;}
长度单位 ：
（1）px→像素(pixel)
（2）%→百分比
例：外容器1：600px 当前容器：50% → 300px
外容器2：400px 当前容器：50% → 200px
width ：宽
height ：高
background-color ：背景色
/* CSS注释的内容 */
在html标签上添加style属性来实现的
在<style>标签内添加的样式
注:内部样式的优点:可以复用代码
内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px; height: 100px; background-color: red;}
</style>
</head>
<body>
<!-- <div style="width: 100px; height: 100px; background: red;">这是一个块</div>
<div style="width: 100px; height: 100px; background: red;">另外一个块</div> -->
<div>这是一个块</div>
<div>另外一个块</div>
</body>
</html>
引入一个单独的CSS文件（例：name.css）
（1）通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。
点此查看更多link的rel属性
（2）通过@import方式引入外部样式。(这种方式有很多问题，不建议使用)
点此查看link与@import区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="***.css"> -->
<title>Document</title>
<style>
@import url('***.css');
</style>
</head>
<body>
<div>这是一个快</div>
</body>
</html>
red、blue、green、yellow…
点此查看CSS颜色名
#000000、#ffffff
十进制：0 1 2 3 4 5 6 7 8 9
二进制：0 1
十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb(255,255,255);
取值范围 0~255
提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具
| 属性取值 | 字体大小 |
|---|---|
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 正常(默认值) |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
注:字体大小一般为偶数
下划线 ：underline
删除线 ：line-through
上划线 ：overline
不添加任何装饰 ：none
注:添加多个文本修饰时用空格符号隔开
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
对齐方式：left、right、center、justify（两端点对齐）
定义（什么是行高）：一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化。
取值：（1）number(px)
（2）scale(比例值，跟文字大小成比例的)
字之间的间距
词之间的间距（针对英文段落的）
英文和数字不自动拆行的问题：
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合的写法 ：是通过空格的方式实现的，复合写法有的是不需要关心顺序，例如：background、border；有的是需要关心顺序，例如：font。
1. background:red url() repeat 0 0;
2.border:1px red solid;
3.font（最少要有两个值）:size family;（√）
weight style size family;（√）
style weight size family;（√）
weight style size/line-height family;（√）
注:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。
css ：#elem{}
heml ：id=“elem”
注：
（1）ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
（2）命名的规范，由字母、下划线、中划线、数字(并且第一个不能是数字)。
（3）驼峰式写法:searchButton(小驼峰)、SearchButton(大驼峰)、searchSmallButton
短线式写法:search-small-button
下划线式写法:search_small_button
css ：.elem{}
heml ：class=“elem”
注：
（1）class选择器是可以复用的。
（2）可以添加多个class样式。
（3）多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
（4）标签+类的写法
/* css : */div{}
<!-- html ：--><div></div>
使用的场景：1.去掉某些标签的默认样式时
2.复杂的选择器中，如:层次选择器
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
*{ } → div,ul,li,p,h1,h2 … { }
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：
去掉所有标签的默认样式时。
后代：M N{ }
父子：M>N{ }
兄弟：M~N{ }（当前M下面的所有兄弟N标签）
相邻：M+N{ }（当前M下面相邻的N标签）
| 选择器 | 说明 |
|---|---|
| M[attr] | M元素选择指定为attr属性的集合 |
| M[attr=value] | M元素选择指定为attr属性和value值的集合（完全匹配） |
| M[attr*=value] | M元素选择指定为attr属性并且包含值为value的集合（部分匹配） |
| M[attr^=value] | M元素选择指定为attr属性并且起始值为value的集合（起始匹配） |
| M[attr$=value] | M元素选择指定为attr属性并且结束值为value的集合（结束匹配） |
| M[attr1][attr2] | M元素选择满足多个属性的集合（组合匹配） |
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
M:伪类{}
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）
注 ：
1.link visited只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序：L V H A。
3.一般网站只这样去设置：a{} a:hover{}。
:after 通过伪类的方式给元素添加一段文本内容，使用content属性
:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked 针对表单元素
:disabled 针对表单元素
:focus 针对表单元素
:nth-of-type()、:nth-child() 角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
:first-of-type、:first-child
:last-of-type、:last-child
:only-of-type、:only-child
##-of-type和##-child之间的区别：
##-of-type:类型
##-child:孩子
如何学好web前端
感兴趣,够努力。