1.html是框架，有两种排版方式
表格的真正作用是用来展示数据的，排版有点不太美观。
2.表格的规范写法：
*<table><tr><td>(table row;table data)首行会自动缩进一个TAB距离。
（添加）table标签 放 caption和tr标签 tr里放两种单元格标签。
tr标签内，除了两个单元格标签外不允许插入任何标签
*小技巧：可以整行复制
3.表格标签的属性（table）
*align设置对其方式：center居中 left right
*cellspacing 单元格与单元格之间的距离
（border width height）
4.*单元格合并
1）是跨行还是跨列呢？
在同一行就 跨列合并colspan （col列）
在同一列就 跨行合并rowspan)(row行)
2)根据顺序 先上后下 先左后右
找到目标单元格标签，写上rowspan="合并数量"
3）删除多余的数量（合并数量-1）
拓展：table标签内
thead表头 tbody主体 tfoot 可以分别控制，来实现不同的效果
*表的主体或表格可以放在tbody里面，方便以后修改
表头主题要合并，不必要用thead，tbody.
5.表格标题标签caption ，放在table标签里面
表头标签th（* table head）：整行或整列会加粗并居中显示（第二种单元格标签）
6.列表
*表格是用来显示数据的，列表是用来布局的。
表格规范 列表布局自由，随意摆放。
7帮助
ctrl+shift+C 查看表格等像素
右键查看源代码
W3C 查看文档 ctrl+F查看
8.input标签控件
属性type 属性值 text 单行文本输入框（用户名）
password 密码输入框 （密码）
1）radio 单选按钮（不可取消）
2）checkbox 复选框（可以勾选并取消）
默认勾选 checked="checked"
1)button 普通按钮
2)sumbit 提交按钮
3）reset 重置按钮
4）image 图像提交按钮 （*效果：做注册，提交等效果）
5）file 文件域（可以打开文件提交窗口）
属性name 用于分组。结合form表单域提交使用
（添加）纠错：二选一按钮可以用到 （name一致）
*属性value属性placeholder value默认文本
placeholder为占位符，用户输入会消失（效果）
9.label标签：提升用户体验（效果）
点label标签内容，光标到文本框内
1）label标签直接包含文字和input
2）label包含文字并加上for="id名"，放在input标签（已经加入id）上
10下拉列表标签：select（效果）
<select> <option>第一个option选项</option> </select>
*11.无序列表（unorder list）
<ul> <li>第一个li选项</li> </ul>
作用：导航栏，京东商品展示
一个div,可以放n个列表项
12（添加）自定义列表，网页底部用的最多
css
CSS属性 字体.文本.边框.背景. 盒子模型（内外边距内外边距）
1.CSS层叠性：
当权重值值一样时，给同一个标签一样的
* .box1
.box2 {
height: 220px; width: 200px;
background-color:red;
}
.box2{
background-color: pink;
}
<div class="box1"></div>
<div class="box2"></div>
2.CSS聚成性 聚成父标签的某些样式属性
（text- ，font- ，line- color开头，与文字有关的属性，盒子属性不能聚成）
4.*权重值叠加
*1） 分析修改样式的标签有没有被选中（特例：标签a需要先在style里面定义样式）
2）标签未被直接选中，直接分析*父亲*的权重（聚成权重值为0）；
标签被选中，看权重值 ID> 类及伪类 > 标签
？？？ 标签样式>标签默认样式（a）>通配符>聚成
特例.权重值相同，选离的最近的标签
*后代选择器所有标签都被选中
5.
no-repeat（repeat重复）不平铺（repeat-x横向平铺）
位置：方位名词top bottom left等 第二种跟任意一个精确单位 左边 X抽 右边Y周
6.*插入图片：用作产品展示。
（*通过盒模型移动位置，改图片标签的内边距margin 或者改父盒子的内边距 padding）
（text-align：center 也可以设置居中对齐）
用margin：auto； 设置没用。
//插入图片，无法垂直居中
背景图片：用作logo等。
（通过background-position:;移动位置）
//背景上可以插图，图片不能
7. * 字体颜色：color；
背景综合写法： background:颜色 url() 平铺 滚动 位置 （没有顺序）
4.字体连写（综合写法）
*类{font:style weight size/line-height 字体系列family }
(顺序不变，字号 字体系列两个不能少。)
*倾斜样式font-styl: italic normal(正常，不倾斜)
字体加粗样式：加粗 700 不加粗 400
5.文本的外观（样式）属性（5个）：
*用处：文本类标签p,a
*行高（行间距） line-height： 一般行高比字大7-8像素。
*首行缩进 text-indent:2em; 1个em是1个font-size大小.
//(不能用：span a em strong del ins)
*文本修饰（下划线删除线） 对齐方式 颜色
8.边框
border:1px solid red;
宽度 边框样式 颜色 shi线 dashed虚线 点选
？？?细线表格（border-collapse:collapse;）
9.边框圆角：
border:radious
5%矩形圆角 50%圆 高度的一半 高度的一半（两头是圆）
盒子的内外边距
9. *内边距外边距
padding（内容到边框的距离）和margin（盒子到四边的距离）
只能设置四个方向
一个值:上下左右；
两个值：上下 左右；
三个值：上 左右 下；
四个值：上 右 下 左；（顺时针）
10.padding和margin都会撑大盒子
//*嵌套里面，子盒子是可以撑开子盒子超过父盒子
//不会撑开的例子：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子（上下不受影响
）
|
|
收藏
淘帖
踩
