web_学习笔记
网页背景
##########################################################
-------------------------------------------
背景
background-color: #fff; 背景颜色
background-image: url(); 背景图片
background-repeat: no-repeat; 背景平铺
取值：no-repeat--不平铺 repeat--平铺(默认值) repeat-x 水平平铺 repeat-y 垂直平铺
background-position: 0 0; 背景位置
取值：
方位名词 left center right top bottom
坐标系 原点(0,0)
背景连写
background: color image repeat position 推荐顺序
背景图片与img标签区别
img是一个标签有默认宽高
背景图片仅仅只是装饰的css样式，不能撑开div标签
-------------------------------------------
##########################################################
页面标签
####################################################################
标签
段落标签
换行标签
水平线标签
-----------------------
加粗
下划线
倾斜
-----------------------
推荐使用
加粗 加粗
下划线 下划线
倾斜 倾斜
------------------------
图片标签 src 图片路径 alt 提示文本 图片加载失败才显示
---------音视频---------------
音频标签
视频标签
src 文件路径 controls 播放控件
autoplay 自动播放(部分浏览器支持)
loop 循环播放
muted 静音 （谷歌浏览器视频支持静音自动播放）
注意 音频标签目前只支持三种格式： MP3、Wav、Ogg 视频标签仅支持三种格式：MP4、WebM、Ogg
------------------------
超链接
href 跳转目标链接 # 1、空链接回到顶部功能 2、占位
target 取值 _self 默认值，当前窗口跳转覆盖原网页 _blank 在新窗口中跳转(保留原网页)
----------列表--------------
注意： ul标签 和 ol标签 中只允许包含 li标签 li标签可以包含任意内容
-----------列表-------------
自定义列表
- dl 表示自定义列表的整体
dt 表示自定义列表的主题(标题)
dd 表示自定义列表中的每一项解释说明
注意： dl标签 中只允许包含dt/dd标签 dt/dd标签可以包含任意内容
------------表格------------
| th标签 表头单元格 | |
|---|---|
| td标签 表格的单元格 | |
表格结构标签：
表格头部
表格身体
表格底部
表格属性：
border: 表格的边框
rowspan: 合并单元格 多行 垂直方向合并
colspan: 合并单元格 多列 水平方向合并
----------表单--------------
type属性值：
text 文本框，用于文本输入 placeholder 属性 文本占位符
password 密码框，用于输入密码
radio 单选框，用于多选一 name属性--分组 checked属性--默认选中
checkbox 多选框，用于多选多 checked属性--默认选中
file 文件选择，用于之后上传文件 multiple--选中多个文件
submit 提交按钮用于提交
reset 重置按钮，用于重置
button 普通按钮，默认无功能，之后配合js添加功能 value--修改默认值
button按钮标签
注意：谷歌浏览器中button默认是提交按钮 button标签是双标签，更便于包裹其他内容：文字，图片等
---------下拉菜单---------------
----------textarea文本域标签--------------
cols 宽度
rows 行数
------------------------
label标签 绑定与input标签的区域
-----------语义化标签-------------
没有语义的标签：
div 独占一行
span 一行可以显示多个
-------------HTML空格合并现象--------------------
多个空格解析后只会展示一个空格
用字符实体解决
字符实体类型：
空格
< 小于号 <
> 大于号 >
& 和号 &
" 引号 "
' 撇号 ' （IE不支持）
¢ 分
£ 磅
¥ 元
€ 欧元
§ 小节
© 版权
------------------------------------------------
有语义的标签
------------------------------------------------
####################################################################
属性
title 鼠标悬停时显示的文本
width 宽度
height 高度
####################################################################
网页特效
############################################################################
--- offset 系列属性
element.offsetParent // 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop // 返回元素相对带有定位父元素上方的偏移
element.offsetLeft // 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth // 返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight // 返回自身包括padding、边框、内容区的高度，返回数值不带单位
--- client 系列属性
element.clientTop // 返回元素上边框大小
element.clientLeft // 返回元素左边框大小
element.clientWidth // 返回自身包括padding 内容区的宽度，不含边框，返回数值不带单位
element.clientHight // 返回自身包括padding 内容区的高度，不含边框，返回数值不带单位
--- scroll 系列属性
element.scrollTop // 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft // 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth // 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight // 返回自身实际的高度，不含边框，返回数值不带单位
-- 页面被卷去的头部
window.pageYoffset
############################################################################
--- 立即执行函数
-- 格式一
(function(){})()
-- 格式二
(function(){}())
############################################################################
--- 移动端触摸事件
touchstart // 触摸
touchmove // 移动触摸
touchend // 离开
div.addEventListener('touchend', function(){})
-- 触摸事件对象
touches // 正在触摸屏幕的所有手指的一个列表
targetTouches // 正在触摸当前DOM元素上的手指的一个列表
changedTouches // 手指状态发生了改变的列表，从无到有，从有到无变化
############################################################################
第三章学习到 3-18 移动端插件使用及轮播图实现
############################################################################
--- 边框图片
border-image-source // 用在边框的图片的路径
border-image-slice // 图片边框内偏移（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width // 图片边框的宽度（需要加单位）（不是边框的宽度时边框图片的宽度）
border-image-repeat // 图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）默认拉伸
############################################################################
响应式布局
############################################################################
/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
body {
background-color: pink;
}
}
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}
###################################