1.HTML简介
我的第一个标题
我的第一个段落。
2.HTML 标题 HTML 标题(Heading)是通过-
标签来定义的。
这是一个标题
这是一个标题
这是一个标题
3.HTML 段落
HTML 段落是通过标签
来定义的。
这是一个段落。
这是另外一个段落。
4.HTML 链接
HTML 链接是通过标签 来定义的。
5.HTML 图像
6.表单的提交方式
action提交的地址
method提交的方式
post提交方式
get
账号:
密码:
<! 解决数字换行问题
<!1111111111111111111111111111111111111111111111>
7. 取消a标签默认下划线text-decoration: none
text-decoration: none,underline,定义文本下的一条线
overline,定义文本上的一条线
line-through;定义穿过文本的一条线
111111
8.文本转换
text-transform:uppercase;转为大写
text-transform:lowercase;转为小写
Hellow Word Lady
9.text-indent首行缩进 -->
Hellow Word Lady
10.字体样式
font-style字体倾斜
font-size字体大小
font-family字体样式宋体,微软雅黑
font-weigh字体的粗细 bold或者数字
啦啦啦啦
em字体大小由浏览器默认大小决定
em==>px em*浏览器字体大小=px
%单位,字体大小由浏览器默认的百分之多少计算
11. 列表
list-style-type:“none”;
- 第一
- 第二
- 第三
12. 有序列表
- 第一
- 第二
- 第三
自定义
- 第一
- 第二
- 第三
- 第一
- 第二
- 第三
- 第一
- 第二
- 第三
- 第一
- 第二
- 第三
13. table图表
cellspacing单元格之间的距离
cellpadding边框和内容的距离
行
表格的头部列
列的内容
必考点: colspan合并列
rowspan合并行
14. 标准盒子模型
必考点:IE盒子模型|怪异盒子模型
box-sizing:content-box;
<div style="width: 100px;height: 100px;border:1px solid red;padding: 10px;">
啦啦啦啦
</div>
边框
boder-top-style :样式
solid实线
dashed虚线
dotted点线
double双实线
边框宽度:border-width
boder-上下左右-width
边框颜色:border-color
单独一条边:border-top
<div style="width: 100px;height: 100px;
border:5px solid red ;
border-top-style: dashed;">
</div>
15. 轮廓
outline: 2px solid #000"
<div style="width: 100px;height: 100px;
border: 1px solid red;
outline: 2px solid #000">
</div>
16. margin-top
margin-left
margin-right
margin-bottom
17.最大值,最小值
<div style="width: 100px;height: 100px;
border: 1px solid red;margin: 10px 20px 30px;">
</div>
分组
<div class="box1 boss"></div>
<div class="box2"></div>
<div class="box3 boss"></div>
<p style="width: 200px;height: 50px;
background-color: red;
">这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。
这一段的最大高度设置为50 px。</p>
18.隐藏方式
display:none 隐藏,不占位置
Visibility: hidden;隐藏,占位置
opacity: 0;透明度,隐藏,占位置
color: transparent;颜色为无色
-khtml-苹果浏览器
-webkit-opacity兼容谷歌浏览器
-o-opacity兼容Opera浏览器
-moz-opacity兼容火狐浏览器
-ms-兼容IE,普通样式属性
{
兼容IE浏览器,50指的是百分之50%
opacity:0.5;
filter:alpha(opacity=50);
}
姓名 | 年龄 | 性别 | 学号 |
---|---|---|---|
余某某 | 20 | 女 | 28 |
徐某某 | 19 | 女 | 26 |
123123123
19.定位 static默认值 relative相对定位,相对浏览器定位,不脱离文档流 fixed固定定位 absolute绝对定位,脱离文档流,寻找父级是否有相对定位, 如果有根据父级定位,如果没有找到会忘父级的父级寻找, 直到浏览器,才会根据浏览器定位 sticky粘性定位
11111
↑
20. overflow overflow: hidden;溢出隐藏 visible默认值 scroll内容超过固定区域会出现滚动条 auto内容超出固定区域出现滚动条否则不出现 overflow-x: hidden;隐藏横向滚动条 overflow-y: hidden;隐藏纵向滚动条
<div style="width: 50px;height: 50px;
background-color: #00FFFF;
overflow-y: hidden;">
aaaaaaaaaaaaaaaaaaaaaaa
</div>
21. 浮动 ,脱离文档流
<div class="clearfix">
<div style="width: 50px;height: 50px;
background-color: #00FFFF;float: left;"></div>
<div style="width: 50px;height: 50px;
background-color: blue;float: right;"></div>
</div>
<p style="width: 500px;height: 500px;
background-color: orange;">hsdkjsadjkashdkjsa</p>
21.居中方式
水平居中
垂直居中
<div style="width: 100px;height: 100px;
background-color: #00FFFF;margin: 0 auto;"></div>
<div style="width: 100px;height: 100px;
background-color: #00FFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);"></div>
margin: -50px 0 0 -50px;
不推荐
<div style="width: 100px;height: 100px;
background-color: #00FFFF;
float: left;
margin: 40% 0 0 45%;">
</div>
22. 后代选择器(以空格 分隔)
所有子元素选择器(以大于 > 号分隔)
相邻兄弟选择器(以加号 + 分隔)
所有普通兄弟选择器(以波浪号 ~ 分隔)
<div class="bor1">
1
<p class="bor2">2</p>
<p class="bor3">3</p>
<p class="bor4">4</p>
</div>
<div class="bor5">
5
<p>55</p>
<p>555</p>
<p>55</p>
</div>
<p class="bor6">6</p>