---HTML
1.HTMl骨架
html:整个网页
head:网页头部,用来存放给浏览器看的信息,如css
body:网页主体,用来存放给用户看的信息,例如图片和文字
2.标题标签中h1标签只能使用一次,其他可以无限次试用
3.列表
无序列表:ul嵌套li
有序列表:ol嵌套li
定义列表:dl嵌套dt和dd,dt是定义列表的标题,dd是定义列表的描述/详情
4.表格
和excel类似,用于展示数据
table嵌套tr,tr嵌套td/th
5.表单
作用:收集用户信息
使用场景:登陆页面,注册页面,搜索区域
6.无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
<div>div 标签,独占一行</div>
<span>span标签,不换行</span>
----CSS
7.CSS选择器
标签选择器:使用标签名作为选择器,选中同名标签就设置为相同的样式,所以无法差异化的设置同名标签的显示效果
类选择器:通过类名来查找标签,可以差异化的设置标签的显示效果(.类名的方式)
一个类选择器可以给多个标签使用,一个标签可以使用多个类型
id选择器:一般配合JS使用,很少用来设置CSS样式,同一个id在一个页面只能使用一次
通配符选择器:(*),用于把页面的所有标签设置为相同的样式,一般用于清除标签的默认样式,如标签默认的外边距,内边距。
8.网页制作思路
从上到下,先整体再局部
先标签,再CSS美化
9.复合选择器
后代选择器:选中某元素的后代元素
子代选择器:选择某元素的子代元素(最近的子代)
并集选择器:选择多组标签设置相同的样式
交集选择器:选中同时满足多个条件的元素
伪类选择器:伪类表示元素的状态,选中元素的某个状态设置样式
10.显示模式
块级元素
特点:独占一行,宽度默认是父级的100%,添加宽高属性生效
行内元素
特点:一行可以显示多个,设置宽高属性不生效,宽高尺寸由内容撑开
行内块元素
特点:一行可以显示多个,设置宽高属性生效,宽高尺寸也可以由内容撑开
转换显示模式的方法:
display属性:block-->块级;inline-block-->行内块;inline-->行内
11.结构伪类选择器
作用:根据元素的结构关系查找元素
公式::nth-child(查找公式)
12.盒子模型
组成:
内容区域 -- width & height
内边距 -- padding(盒子内)
边框线 -- border
外边距 -- margin(盒子外)
div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}
13.版心居中
margin属性的左右值设置为auto,并且盒子要有宽度