目录
HTML day01
html 超文本标记语言
html1.0---1993 html4.01 ---1999 html5----2014
html基本骨架结构
<div>你好</div> 开始 内容 结束
class=“box” 属性名称 属性值
嵌套关系 父子 并列关系 兄弟 姐妹
单标签 和 双标签
常用标签
h1---h6 标题标签 1-6 从大到小 字体加粗 w3c 一个页面只允许使用一个h1 一般都是留给logo使用
p 段落标签 上下有空白间隙 独占一行 文字没有任何的特殊效果
hr 水平线 分割线 单标签
br 换行标签
div 盒子标签 什么样式都没有 span 盒子文本标签 装饰特殊文本
b strong 加粗 i em 倾斜 s del 删除线 u ins 下划线
语义化标签 可读性强 见其名知其意
img 图像标签 src 添加路径 alt 当图片加载失败的时候出现的提示文本 title 鼠标停留在图片上出现的提示 width 宽 height 高
路径的使用方法 相对路径 和 绝对路径
a 链接标签 蓝色文本 下划线 鼠标移入变小手 点击的时候变色 href 添加url地址 target 选择跳转的方式 _blank 在新的页面打开
1.访问网络资源 2.访问本地资源 3.锚点定位 4.下载
特殊字符 空格符 © 版权符   全角空格 ≶ 小于 >
添加页面小图标 link favicon
HTML day02
列表
无序列表 ul定义无序 li定义列表项 默认样式 黑点 内外边距 type定义列表类型
有序列表 ol定义有序 li定义列表项 默认样式 数字 内外边距 type定义列表类型 start定义从哪开始
自定义列表 dl定义自定义 dt定义标题 dd定义列表项
表格
标签
table定义表格 tr定义行 td定义单元格 thead定义表头 tbody定义主体 tfoot定义底部 caption定义标题 th定义表头内容
属性
border边框粗细 align表格的水平的位置 cellspacing两个单元格之间的空白间隙 cellpadding内容到边框线之间的距离
colspan横着合并 rowspan竖着合并 width 宽 height 高
浏览器会帮助我们添加tbody，th加粗且居中 不单单可以在thead里面使用
表单
input 组件 type改变类型 value内容 值 name名称
type类型
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 多选按钮
button 普通按钮
submit 提交按钮
reset 重置按钮
form 表单域 method 表单提交方式 get 在url地址栏中提交？后面 相对不安全 post 在form data里面提交 相对安全
action 跳转地址
textarea 文本域 多行文本输入框 rows行 cols列 disabled 禁用 readonly 只读 maxlength 最大可输入字符数量
select 下拉菜单 size 可视数量 multiple 多选 disabled 禁用 readonly 只读
option 下拉菜单列表内容
label 提示文本 for 绑定input标签 通过id
iframe 框架
CSS day01
css----层叠样式表
1.行内样式 写在 开始标签里面 通过style属性书写 不推荐使用
2.内部样式 写在 文件内部 通过style标签书写样式 可以使用
3.外部样式 写在单独的css文件 通过link标签引入 推荐使用
div{
• color:red;
}
/*选择器 {
样式名称:样式值;
}*/
字体样式
font-size 设置字体大小 值px像素的数字 页面默认16px 最小在老浏览器中会出现最小10px 但是0px消失不见
font-family 设置字体主题 值写当前电脑中所拥有的主题名称 必须使用引号 可以通过逗号指定多个字体
font-weight 设置字体粗细程度 值 100 - 900 只可以设置整百位数 100最细 900最粗
font-style 设置字体风格 设置是否倾斜
font 字体简写 style weight size family
选择器
基本选择器
标签名称选择器 标签的名字 会全选所有相同标签
通配符选择器 选择页面的全部标签
id选择器 选择对应的id名字的标签 通过#表示 不允许重复
类选择器 class选择器 选择对应的class名字的标签 通过.表示 允许重复
伪元素选择器
:link 未访问的链接
:visited 访问过的链接
:hover 鼠标悬停的链接
:active 鼠标单击的链接
冒号前面和选择器中不可有任何的空格 link visited 只可以针对链接使用
顺序 当有hover和active的时候 hover必须在active上面
后面 空格 选择器 可以样式给后面的元素 但前提 后面必须是前面元素的子元素
文本样式
color 文字颜色 值 预先定义的颜色单词 16进制颜色代码 rgb三原色代码 rgba 带透明度的三原色代码
line-height 行高 设置文本的垂直居中 值 px像素的数字 如果需要垂直居中 和盒子的高度保持一致即可
text-align 设置文本的水平对齐方式 值 left左对齐 right右对齐 center居中 justify 两端对齐
text-indent 首行缩进 值 px像素的数字 或 em相对单位 如果需要缩进两个字符 2em
text-decoration 文本修饰 加线 值 overline 上划线 underline 下划线 line-through 删除线 none 没有样式（去除a的下划线）
text-transform 大小写转换
letter-spacing 字符间距 值 px像素的数字 可以为负数
text-shadow 文字阴影 值 水平位置 垂直位置 模糊程度 颜色
css注释 /* */
css书写规范
1.标识符 建议小写 驼峰命名法 myNameIs小驼峰 MyNameIs大驼峰
2.选择器规范 嵌套的层级不应大于3级
3.属性规范 每一个属性单独一行 最后必须以英文分号结尾
CSS day02
复合选择器
1.交集选择器 同时满足多个条件 不允许使用任何的符号或空格
2.并集选择器 和 且 多选 中间使用逗号分隔
3.后代选择器 选择父元素的特定元素 选择所有的后代 使用空格分隔
4.直接后代选择器 选择父元素的直接子元素 使用大于号分隔
标签显示模式
display 值
block 块级元素
1.独占一整行 默认宽度100%
2.可以设置宽度高度内外边距
3.可以包含任意元素或内容
h1-h6 div p hr br ul li dt dd dl ol
inline 行内元素
1.不独占一整行 默认大小 就是内容大小
2.不可以设置宽度高度
3.只能包含文本图片或行内元素
span b i s u strong del ins em a img input
inline-block 行内块元素
1.不独占一整行 默认大小 就是内容大小
2.可以设置宽度高度
3.可以包含任意元素或内容
img
none 隐藏元素
背景样式
background-color 背景颜色 值 同color
background-image 背景图片 值url(图片路径—相对路径)
background-repeat 背景重复方式 值no-repeat 不重复 repeat xy轴平铺 repeat-x x轴平铺 repeat-y y轴平铺
background-position 背景图片定位 值 x轴 y轴的方位 px单位的值 精灵图技术
background-attachment 背景附着 将背景图片定位在盒子的后面 值fixed
background 背景简写 color image repeat attachment position 必须有颜色或图片
background-size 背景图片尺寸 值 宽度 高度
CSS day03
盒子模型
边框
border 边框线 值 颜色 类型 粗细
border-top 上边框 border-right 右边框 border-bottom 下边框 border-left 左边框
边框线的三角形原理 将三条边框线 设置透明度 宽度高度为0
border-radius 圆角边框 值 如果是50% 圆形 px单位的数字
内边距
padding 内边距 文本到盒子边框之间的距离 使用内边距改变盒子内容所在的位置
四个值 上右下左 三个值 上 左右 下 两个值 上下 左右 一个值 上下左右
内边距 会改变盒子大小
外边距
margin 外边距 盒子边框外边的距离 使用内边距改变盒子内容所在的位置
四个值 上右下左 三个值 上 左右 下 两个值 上下 左右 一个值 上下左右
外边距 会改变盒子大小
外边距合并
1.上下两个盒子之间的外边距 合并 解决办法 尽量避免 只给其中一个盒子添加外边距
2.父子关系的上方外边距 解决办法 父元素设置 上边框线 上内边距 bfc
盒子居中 ---- margin: 0 auto; 只能水平居中 只对设置宽度的盒子使用
box-shadow 盒子阴影 值 位置 水平 垂直 模糊程度 阴影尺寸 颜色
overflow 溢出隐藏 值 hidden 溢出隐藏 scroll 添加滚动条 auto 超出自动添加滚动条
CSS day04
浮动
float 浮动 让元素漂浮移动 会脱离标准流 值 left 左浮动 right 右浮动 none 没有浮动
浮动带来的影响 ： 父元素高度为0 解决办法
1.给父元素设置高度 2.给父元素设置bfc 3.额外新添加一个标签 4.overflow：hidden 5.伪元素 clear：both
定位 position
1.relative 相对定位 根据原本位置进行定位 不会脱离文档流
2.absolute 绝对定位 根据已有定位的父元素进行定位 会脱离文档流
3.fixed 固定定位 根据页面可视的窗口进行定位 会脱离文档流
4.sticky 粘性定位 在页面没有滚动到对应位置之前是相对定位 在到位之后是固定定位
子绝父相 子元素绝对定位 父元素使用相对定位
让盒子在父元素中居中 定位 top left 设置50% 在通过margin负数向回走盒子宽度高度的一半
z-index 叠放次序 只可以对脱离文档流的定位元素使用 默认 0
列表样式
list-style-type 列表样式 值 none 去除小黑点 或数字
list-style-image 将列表样式变成图片 值 url()
list-style-position 将样式改变在内容或外边距的区域
CSS day05
元素的显示与隐藏
1.display 标签显示模式 值 none隐藏 除了none以外的其他所有值来显示 隐藏之后不会保留位置
2.visibility 隐藏元素 值hidden 对象隐藏 visible 对象显示 隐藏之后会保留原本的位置
3.overflow 溢出隐藏 值 hidden 溢出隐藏 scroll 添加滚动条 auto 超出自动添加滚动条
用户样式
1.cursor 鼠标样式 值 default 小白(默认样式) | pointer 小手 | move 移动 | text 文本 | not-allowed 禁止
2.pointer-events 实现阻止鼠标效果 值 none 阻止
3.outline 轮廓 设置边框线外边的轮廓 用法和border相同 不占据盒子大小 和外边距位置重叠
4.溢出文字.....代替
4.1 将 文本强制在一行显示 white-space ： nowrap
4.2 超出部分隐藏 overflow：hidden
4.3将超出文本的部分使用省略号代替 text-overflow：ellipsis
5.css的书写顺序 1.位置属性 2.自身的属性 3.文字的属性 4.文本属性 解决浏览器回流
6.版心 960px、980px、1000px、1200px
7.BFC 块级格式化上下文 1.html 根元素 2.浮动 3.定位 4.display：flow-root 5.overflow:hidden 6.弹性盒子
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
