html 图片居中_css与html常见属性

第一章笔记

01行业的介绍

大概的介绍了HTML5的作用

02什么是网页的制作

1. 网页的载体的浏览器

2. 微信看到的都是网页，是由微信内置的浏览器，是基于QQ浏览器开发的。

3. Center居中，button按钮

4. 标签是成对出现的，HTML(超级文本标记语言)

5. W3c

03学习HTML的准备

1. 软件的下载

2. 需要养成良好的习惯

04的介绍

1.

只有1-6的标题，标题的增大，文字越来越小

2. 使字体变成斜体

3.

---

是单标签，使用其是一条下划线

4.

独占一行，也叫段落标签

5. 对文字进行加粗

6.
换行

7. &nbs；具有空格的作用

05新闻的列表

1.

2.

• 带一个点

3.

1. 使其自动的排序

4.

06图片的使用

1. 图片是默认从左到右排列，并且是底部对齐的。

2. 100%是自动的填充

07盗图和切图

08知识点补充

1. 超链接：a)覆盖原来的窗口 b)新建一个窗口target="_blank"

2. 无序列表：a)type="disc"实心点 b)type="circle"空心点 c)type="square"实心方块

3. 有序列表：a)type="1"数字排序 b)type="a"小写字母 c)type="A"大写字母 d)type="i"小写阿拉伯字母 d)type="I"大写阿拉伯字母

4. 关于图片：

5. 其它标签：给文字添加删除标签

^{文字变成上标}

给文字加下划线

文字居中

09相对路径于绝对路径

10表格

1.

2.

表示一列，我可以对一列进行操作

11单元格的合并

1. 横向的合并：colspan="占多少格"

2. 纵向的合并：rowspan="占多少格"

12列表的知识补充

1. 如果一列的重复属性太多了，那么可以使用

2. Html的注释

13使用表单提交数据

1.

2.

3. input必须放在form标签里面才能生效

14get与post请求的区别

1. get通常表示获取数据

2. get请求发送的数据会在数据栏显示

3. get请求不能大量的提交数据，post可以

4. post通常表示提交数据

5. post请求发送的数据用户不能看见

15认识css

1. 层叠样式表(css)

16知识扩展

1. span一个容器标签，仅包裹文本

2. div 一个通用的标签，可以包裹任何内容

3. text-align:center; 让内部元素水平居中

4. margin: auto; 让元素本身水平居中

5. background-color: gray; 设定背景颜色

6. font-size:24px; 设定字体的大小

17

1. line-height: 10px; 行高

18

1. border-right: solid 1px #000; 边框只留下右边框

19选择器的权重

1.

2.

20

1. font-style: italic; 文字斜体

2. text-indent: 10px; 文字的缩进

21常见的图片格式

22背景图的使用

1. background-image: url("图片地址"); 背景图，这个他会无限的平铺

2. background-repeat: no-repeat; 不给图片平铺

3. background-position: center center; 这个可以让定位背景图

23元素的浮动布局(上)

1. float: left; 靠左排版

2. 组合选择器，用法如下：

24元素的浮动布局(中)

1. clear:both; 浮动不受左右的影响

2. clear:right/left 浮动不受左右的影响

25元素的浮动布局(下)

1. 浮动元素不会覆盖文字内容

2. 浮动元素不会覆盖图片内容

3. 浮动元素不会覆盖表单元素

4. 浮动元素只参考前一个元素的位置

26盒子模型

1. margin:auto; 让父元素自动设置边距，左右边距相等，只有水平方向有效

2. margin:20px; 边距

27填充

1. padding 自动填充

28布局练习

1. border:1px dashed black; 边框，虚线

2. border-left/right/top/bottom; 边框不显示

29css属性的简写

1. background-color 背景颜色

2. background-image 背景图片

3. background-repeat 背景的平铺方式

4. background: 背景颜色 url(背景图) 平铺方式

border边框

5. border-width 边框宽度

6. border-style 边框样式

7. border-color 边框颜色

8. border: 1px solid #fff；其中样式不能省略

字体

9. font-style: italic; 斜体

10. font-weight: bold; 加粗

11. font-family: arial, sans-serif; 字体的种类

12. font-size: 20px; 字号大小

13. line-height: 20px; 行高

30元素的不同类型

31元素的定位(上)

1. position: relative; 这个在父的div

2. position: absolute; 这个在子的div

3. 子div需要有坐标，left top

32元素的定位(下)

1. Position: fixed;固定定位, 因为是对整个页面定位，所以不需要对其它的元素进行修改

33鼠标划入效果

1. :hover{}

2. text-decoration: underline; 文字下面加一个下划线