html思维导图
css思维导图
01.vscode软件的使用
ctrl+ +- ：调整视图大小
！+table ：初始化html结构
CTRL +？ ：添加注释
注释的作用： 给网页添加说明
h1+table ：快速闭合标签
div{hello}+table ：设置标签内容
div*5+table ：创建5个div （5为需要创建的个数）
alt+鼠标左键 ：创建多个光标，可以进行同时修改
div.box+tab 生成带类名的标签
alt+ 鼠标左键 修改多处
shift+tab 退缩进
关键帧动画及相关的属性
@keyframes ：创建动画是通过逐步改变从一个CSS样式设定到另一个。
/* 添加关键帧动画 格式 @keyframes 动画名*/
@keyframesshang{
to{
margin-top:-200px;
}
}
该属性需要与 animation属性配合使用
animation 该属性有多个内容 名称要与关键帧属性的名称相同， 时间就是动画的持续时间
animation:shang5ssteps(4)infinite;
/* 参数一 动画名 参数二动画持续时间 参数三 运动速率 参数四 动画延迟 参数五 动画播放次数 参数六 动画方向 参数七 动画结束时的状态 */
animation:namedurationtiming-functiondelayiteration-countdirectionfill-mode;
overflow: hidden 溢出隐藏，将子类超出父类元素的部分隐藏
.fu{
width:1229px;
height:580px;
background-color:blue;
/* 溢出隐藏 */
overflow:hidden;
}
.zi{
width:1200px;
height:2900px;
font-size:0px;
background-color:brown;
animation:shang10s;
鼠标在范围内动画播放状态
:hover 选择器用于选择鼠标指针浮动在上面的元素。
hover只能影响元素本身及其子元素
.zhong:hover{
animation-play-state:paused;
}
.zhong:hover.small{/*当鼠标经过.box时.box 的子元素.small改变 */
animation-play-state:paused;
}
鼠标再特定位置上动画的播放状态
animation-play-state:paused;
psused:停止
running:播放
元素过渡效果
transition:all2s
当元素css属性发生变化时会有2s的过度时间
元素转换
transform 不管怎么变都不会影响元素本身占位
transform:scale(2)//元素沿中心放大或缩小几倍
transform:rotate(45deg)//元素旋转多少度，数字为正顺时针旋转，为负逆时针。deg时角度单位
transform:scale(2)rotate(45deg);可同时使用
translat()
元素透明
opacity:0.5;
opacity设置元素透明度，默认为1.（范围0-1）
其他
文本
行高和容器高度一致时，文本内容可以上下居中
height:50px;
line-height:50px;
text-aglin:center文本居中
设置字体 font-family:微软雅黑;
引入字体 @font-face
@font-face {
font-family:粗体 ;
src:url("STHUPO.TTF");
}
定位
position : relative 相对定位 成为子元素绝对定位的参照物
position: absolute 绝对定位 脱离文档流 悬浮在其他元素之上
绝对定位元素参考的是离他最近的带有==定位==属性的父级元素
元素投影
box-shadow盒阴影 text-shadow 文字阴影 有4个值
x轴偏移量
y轴偏移量
模糊程度
投影颜色
inset 内投影 <!--(只有和阴影可用)-->
box-shadow:010px10pxrgb(100,99,99);
text-shadow:3px4px1pxred ;
HTML正式开始
01初识web应用
CS BS
client客户端 server服务端 browser浏览器
client-server app 桌面端应用
bowser-server 网页应用
BS相当于CS的优点
BS依赖于浏览器 无需安装
BS跨平台
混合app开发 app外壳内置浏览器
界面开发
html负责网页搭建结构
css负责元素的美化
javascript 负责网页交互（网页特效）
框架： Vue React Angular
开发流程
产品经理规划功能（客户） 出草图（原型图）；
交给ui出效果图；-----需求文档交给后端；
交给前端写页面布局及网络特效
将静态页面转化为动态页面；
静态到动态：
1. 传统模式：将静态页面交给后端 后端使用模板引擎技术 将数据与结构混合；
2. 前后端分离：前端请求数据接口，通过js将数据与结构混合；
测试
发布上线
实体字符
标签
语义化标签（标签的意思和使用场景）
对语义化标签的理解：
什么标签放什么内容，h标签放标题，p标签放段落文字，
就算css加载失败 也能清晰展示页面结构
方便搜索引擎抓取网页内容，有利于seo；
div和span没有任何语义
块标签
（占据一行，上下排列）
块元素 如果不设定宽度 宽度会与父元素保持一致
如果不设定高度 高度靠子元素撑起
div 容器标签
p 文本标签
h1-h6 标题标签
ul li 无序列表
展示列表信息
ul 包含整个列表
li 单个选项
list-style:none; 清除样式
ol li 有序列表
table 表格
table 的开始标签中 添加border属性定义边框 cellpadding 扩展单元格 cellspacing单元格间距
tr 行
td 单元格
rowspan 竖跨几行 独占几行
colspan 横跨几列 独占几列
th 标题单元格
定义表格
table的开始标签中添加borter属性定义表格
cellpadding 扩展单元格
-->
受理员
受理数
自办数
直接解答
到办意见
返回修改
工单类型
同意
比例
数量
比例
建议件
述求件
咨询件
form 表单区域
action 指定表单提交地址
提交路径 ？ 之前是提交地址 ？之后是 本次携带的信息
提交按钮 可以提交当前form包裹的所有表单元素信息
行内标签：
(对于局部文字进行修饰,无法设置元素宽高)
行内块元素 无法设定宽高
span 行内的div
em 倾斜
strong 加粗
a 链接标签
href 指定链接地址
返回上一级 ../
加入我们
target 默认值 self 在当前标签内打开新页面
blank 新建标签页打开新页面
让a标签点击不跳转 在href中只填加 # 号
按钮
==锚点==：
点击a标签时页面会滚动到相应ID名的元素的位置
点击a标签时 页面会滚动到相应ID名的元素位置
-->
下载软件
江苏网通
河南电信
山东移动
行内块
如果不设定宽度 宽度靠子元素撑起
img 引入图片
img标签 默认按照图片原始尺寸显示
src指定资源路径 可以引入网络路径也可引入本地路径
title 添加图片说明
alt 当图片资源加载失败时的替代文本
在这里我就要说一下，在什么情况下才使用这个标签，除了一些装饰的图片、或没有实际用途的，我们一般用CSS的背景图来设置。在一些实用的数据，如：新闻的图片，介绍某种东西的图片，这种情况下，我们建议使用img来实现，相册大家都知道使用img标签吧，如果使用背景，就没办法保存图片，这也就是实用数据的表现!
img标签有2个重要的属性，建议都填写
img的主要属性作用备注
src图片的地址（一般是网络路径/绝对路径）一定要有，不然图片就显示了一个红色的叉
alt用于描述图片的文字叙述建议写，在某些情况下，如果图片无法显示，都还可以用写文字提示给用户看
input 输入框
类型解释
type设定输入框的格式
value指定输入框默认填写内容
placeholder设置占位内容 用于提示输入框功能
Type描述基础例子Spec
button没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox复选框，可设为选中或未选中。
color用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 HTML5
date输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 HTML5
datetime-local输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 HTML5
email编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
number用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。 HTML5
reset此按钮将表单的所有内容重置为默认值。不推荐。
search用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 HTML5
submit用于提交表单的按钮。
tel用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 HTML5
text默认值。单行的文本区域，输入中的换行会被自动去除。
url用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 HTML5
week用于输入以年和周数组成的日期，不带时区。
废弃的值
datetime用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。
type="text" 文本输入框
type="password" 密码输入框
type="date" 选择日期
type="radio" 单选按钮 一组单选按钮需要添加共同的name值 添加checked属性指定默认选择项
男
女
type="checkbox" 多选框 需要添加共同的name值 name值需要在最后加[]号 添加checked属性指定默认选择项
唱
跳
type="color" 颜色选择（不常用）
type=“button” 按钮
type=“submit” 提交按钮
typle="file" 选择文件
value 指定输入框默认填写内容
placeholder 提示框 设置占位内容 用于提示输入框功能
label 扩大鼠标的点击区域
跳
rap
select 选择框
option标签内容是让用户看的，value值是让程序使用的；
当程序获取选择结果时， 优先获取所选option的value值
option 包裹单个选项
option 添加 selected属性指定默认选择项
格式化标签
center 内容居中
br 折行
<pre> </pre> 保留代码缩进
实体字符
src 和href的区别
src引入外部资源
href关联外部资源
css
引入方式
行内式 缺点：
html和css混杂在一起 结构不够直观
多个元素相同样式 还需重复书写
helloworld
内嵌式 在head中创建style标签书写样式
书写结构 选择器{
样式属性：样式值
}
外链式 通过link引入外部css资源
css常用命名
包裹容器 wrap 页面主体 main 网页头部 header 网页底部 footer 轮播图 banner 广告 ad 导航 nav 菜单 menu 子菜单 sub-menu 列表 list 选项 item 下载 download 标志 logo 提示 tips 热点 hot 新闻 news 地址 address 登录 login 注册 registry 用户名 userName 密码 password 内容 content 文本 text 价格 price 上一个 prev 下一个 next 箭头 arrow 更多 more 标题 title 子标题 sub-title 商品 product 添加 add 修改 update 删除 delete 消息 message 笔记 note 搜索 search 结果 result 加入 join 主页 home 手机号 tel 状态 status 时间 time 日期 date 图片 picture 图标 icon 数据 data 左 left 右 right 上 up 下 down 中 center 当前 current 激活 active 显示 show 隐藏 hide 打开 open 关闭 close 禁用 disabled 扩展 extend
css三大特性
层叠性
继承性： 有些不能继承定位 过度 浮动 颜色 字体 居中
优先级
css选择器
*通配符 选择页面中所有标签 一般用于重置浏览器默认样式
*{
color:red;
}
同级选择器 优先级采用就近原则
标签选择器 指定标签名
p{
color:green;
}
类名选择器 .类名
.text{
color:purple;
}
id选择器 #id
#txt{
color:orange;
}
类名
首字符必须是字母或 _ 剩余字符可以是字母、数字、_ 、-
公共样式 起一个共同的类名
某一个元素有差异 单独增加类名定义样式
id选择器
唯一性
级联选择器
增加权重
使用： .+类名+空格+.+类名+空格+...+标签名
子代选择器
只能选择作为某元素子元素的元素
选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素
例：
.wrap>p{
} //.wrap字标签中的子标签p
并列选择器
同时选择几个标签 中间用逗号隔开
div,p{
}
属性选择器
属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
存在id属性的元素
a[id]{
}
优先级
!important强制优先级>行内>id>class>标签>*
当使用嵌套选择器 按照权重值计算优先级
*0
标签名 1
类名 10
id 100
文本样式
color： 文字颜色
font-size: 字号
text-indent：2em；首行缩进 1em=一个文字的大小 2em表示缩进2个文字
font-weight: 字体粗细
bolder; 加粗
normal 取消加粗
line-height: 行高
letter-spacing: 字间距 主要用于调整汉字
world-spacing: 字间距 用于调整 单词
/* 文字颜色 */
color:red;
/* 文字大小 */
font-size:20px;
/* 首行缩进 2字符 */
text-indent:2em;
/* 加粗 */
font-weight:bolder;
/* 行高 */
line-height:30px;
/* 字间距 */
letter-spacing:10px;
/* 字体 */
font-family:楷体;
font-family:宋体； 字体
如果用到特殊字体 导入字体文件
@font-face {
font-family:粗体 ;
src:url("STHUPO.TTF");
}
文本修饰
text-decoration:
line-through;删除线
underline 下划线
overline 上划线
none 重置
text-aligin:center 文本对齐
center 居中
left 居左 默认值
right 居右
/* 文本居右 */
text-align:right;
/* 下划线 */
text-decoration:underline;
/* 取消加粗 */
font-weight:normal;
/* 删除线 */
text-decoration:line-through
单行文本溢出显示省略号
溢出隐藏
overflow:hidden
强制文本不换行
white-space: nowrap
溢出部分文本如何显示 省略号
text-overflow: ellipsis
盒模型
块元素 如果不设定宽度 宽度会与父元素保持一致
如果不设定高度 高度靠子元素撑起
行内元素 不能设置宽高
行内块 如果不设定宽度 宽度靠子元素撑起
背景色
width: 100px; 元素宽度 width:50%;
height:100px; 高度
padding 填充
一个值：上下左右
两个值：第一个上下 第二个左右
四个值：上 右 下 左
padding:20px;
padding:10px20px;
padding-top:50px;
padding-right:100px;
padding-bottom:150px;
padding-left:200px;
设置边框
border:线宽 类型 颜色
类型：solid 实现 dashed 虚线
border:10pxdashedblack;
border-width:10px;
border-style:solid;
border-color:black;
border-top-width
border-top
border-bottom
border-left
border-right
border:none 去除边框
margin 元素间距
一个值：上下左右
两个值：第一个上下 第二个左右
四个值：上 右 下 左
margin:100px
margin-top
margin-bottom
margin-left
margin-right
border-radius:
盒模型和怪异模式
盒模型 元素真实占位 =width&height+padding+border
怪异模式 元素真实占位 =width&height
margin-top穿透问题
一个块的第一个子元素设置margin-top时会出现穿透问题（将会带动父元素一起移动）
解决方案： 给父元素添加overflow：hidden; 子元素的margin-top将不会带动父元素
背景属性
background-color背景色
背景重复 ： 不重复
background-repeat-:no-repeat ;
background-image背景图
背景图定位 ：左侧距离 上侧距离
/* 3中写法 */
background-position:100px50px;
background-position:rightcenter;/*右侧距离 上下居中 */
background-position:20%0;
行内块
行内块会存在间距问题
原因： 标签折行缩进被解析成一个空白字符
解决方案：给行内块父级元素设置font-size:0；
==注意：font-size:0；导致行内块元素内部文字不显示 需要单独设置字号==
行内块对齐方式：
行内块高度不一致时 默认底部对齐
内容结构不一致时 按照内容基线对齐
vertical-align:; 调整对齐方式
middle 横向中线对齐
bottom 底部对齐
top 顶部对齐
浮动
float: right 右浮动
left 左浮动
清除左右浮动
可以给浮动元素的父级元素添加一个height
overflow:hidden;清除浮动
给浮动添加一个同级块元素 设置 clear:both 清除左右
.clear::after{
content:"";
display:block;
clear:both;
}
行内块和浮动：水平布局
行内块：间距问题 对齐问题
浮动： 清除浮动 子元素可以依附在父元素两侧
浮动之后
行内标签和行内块 都会转换为块元素
元素宽度靠子元素撑起
伪元素
标签：：after { 在标签之前添加新元素
content:'内容'
}
块的转换
display : inline
inline-block
block
none 隐藏
伪类
所有标签都可添加的伪类
hover 当鼠标经过元素是应用的样式
active 当鼠标在元素上按下时应用的样式
a标签独有的伪类
link 未被访问的a标签样式
visited 访问过的a标签样式
伪类只能影响元素本身及其子代元素
写法：
.box:hover{color:red} 当鼠标经过.box 时 .box文字变为红色
.box:hover p{color:blue} 当鼠标经过.box .box内部的p标签变成蓝色
.box::after:hover{}
.box:hover::after{}
鼠标手势
cursor: pointer 鼠标箭头变小手
透明度
opacity :
opacity设置元素透明度，默认为1.（范围0-1）
opacity 元素本身变透明
rgba：
颜色透明度
定位
当一个元素需要覆盖在其他元素之上时 使用定位布局
position:
fixed 固定定位
absolute 绝对定位
relative 相对定位
sticky 粘性定位
#sticky-nav {
position:sticky;
top:100px;
}
设置position:sticky 同时给一个 (top,bottom,right,left) 之一即可
static 默认 正常排列在文档流中
固定定位 参考浏览器窗口定位 不随页面的滚动而滚动
会脱离文档流
如果不设置宽高 可以同时使用left/right 拉伸元素宽度 top/bottom拉伸元素高度
.box{
position:fixed;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:red;
width:100px;
height:100px;
}
相对定位 参考元素自身位置 原始位置仍然占位
绝对定位 会脱离文档流 参考离他最近的带有定位属性的父级元素
如果没有带有父级定位属性的父级元素 则参考body
sticky 粘性定位 position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置 ==不会脱离文档流==
使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
两个同级定位属性，
叠层
z-index:2;
容器溢出
滚动条
overflow: hidden; 溢出隐藏
scroll 滚动条
auto 自动
雪碧图
性能优化
将页面中的固定图片整合到一张大图上
通过背景图定位展示大图局部
减少网络请求次数
边框
border:1pxsolidrgba(0,0,0,0);
//透明边框
border:1pxsolidtransparent;
01.vscode软件的使用
ctrl+ +- ：调整视图大小
！+table ：初始化html结构
CTRL +？ ：添加注释
注释的作用： 给网页添加说明
h1+table ：快速闭合标签
div{hello}+table ：设置标签内容
div*5+table ：创建5个div （5为需要创建的个数）
alt+鼠标左键 ：创建多个光标，可以进行同时修改
div.box+tab 生成带类名的标签
alt+ 鼠标左键 修改多处
shift+tab 退缩进
关键帧动画及相关的属性
@keyframes ：创建动画是通过逐步改变从一个CSS样式设定到另一个。
/* 添加关键帧动画 格式 @keyframes 动画名*/
@keyframesshang{
to{
margin-top:-200px;
}
}
该属性需要与 animation属性配合使用
animation 该属性有多个内容 名称要与关键帧属性的名称相同， 时间就是动画的持续时间
animation:shang5ssteps(4)infinite;
/* 参数一 动画名 参数二动画持续时间 参数三 运动速率 参数四 动画延迟 参数五 动画播放次数 参数六 动画方向 参数七 动画结束时的状态 */
animation:namedurationtiming-functiondelayiteration-countdirectionfill-mode;
overflow: hidden 溢出隐藏，将子类超出父类元素的部分隐藏
.fu{
width:1229px;
height:580px;
background-color:blue;
/* 溢出隐藏 */
overflow:hidden;
}
.zi{
width:1200px;
height:2900px;
font-size:0px;
background-color:brown;
animation:shang10s;
鼠标在范围内动画播放状态
:hover 选择器用于选择鼠标指针浮动在上面的元素。
hover只能影响元素本身及其子元素
.zhong:hover{
animation-play-state:paused;
}
.zhong:hover.small{/*当鼠标经过.box时.box 的子元素.small改变 */
animation-play-state:paused;
}
鼠标再特定位置上动画的播放状态
animation-play-state:paused;
psused:停止
running:播放
元素过渡效果
transition:all2s
当元素css属性发生变化时会有2s的过度时间
元素转换
transform 不管怎么变都不会影响元素本身占位
transform:scale(2)//元素沿中心放大或缩小几倍
transform:rotate(45deg)//元素旋转多少度，数字为正顺时针旋转，为负逆时针。deg时角度单位
transform:scale(2)rotate(45deg);可同时使用
translat()
元素透明
opacity:0.5;
opacity设置元素透明度，默认为1.（范围0-1）
其他
文本
行高和容器高度一致时，文本内容可以上下居中
height:50px;
line-height:50px;
text-aglin:center文本居中
设置字体 font-family:微软雅黑;
引入字体 @font-face
@font-face {
font-family:粗体 ;
src:url("STHUPO.TTF");
}
定位
position : relative 相对定位 成为子元素绝对定位的参照物
position: absolute 绝对定位 脱离文档流 悬浮在其他元素之上
绝对定位元素参考的是离他最近的带有==定位==属性的父级元素
元素投影
box-shadow盒阴影 text-shadow 文字阴影 有4个值
x轴偏移量
y轴偏移量
模糊程度
投影颜色
inset 内投影 <!--(只有和阴影可用)-->
box-shadow:010px10pxrgb(100,99,99);
text-shadow:3px4px1pxred ;
HTML正式开始
01初识web应用
CS BS
client客户端 server服务端 browser浏览器
client-server app 桌面端应用
bowser-server 网页应用
BS相当于CS的优点
BS依赖于浏览器 无需安装
BS跨平台
混合app开发 app外壳内置浏览器
界面开发
html负责网页搭建结构
css负责元素的美化
javascript 负责网页交互（网页特效）
框架： Vue React Angular
开发流程
产品经理规划功能（客户） 出草图（原型图）；
交给ui出效果图；-----需求文档交给后端；
交给前端写页面布局及网络特效
将静态页面转化为动态页面；
静态到动态：
1. 传统模式：将静态页面交给后端 后端使用模板引擎技术 将数据与结构混合；
2. 前后端分离：前端请求数据接口，通过js将数据与结构混合；
测试
发布上线
实体字符
标签
语义化标签（标签的意思和使用场景）
对语义化标签的理解：
什么标签放什么内容，h标签放标题，p标签放段落文字，
就算css加载失败 也能清晰展示页面结构
方便搜索引擎抓取网页内容，有利于seo；
div和span没有任何语义
块标签
（占据一行，上下排列）
块元素 如果不设定宽度 宽度会与父元素保持一致
如果不设定高度 高度靠子元素撑起
div 容器标签
p 文本标签
h1-h6 标题标签
ul li 无序列表
展示列表信息
ul 包含整个列表
li 单个选项
list-style:none; 清除样式
ol li 有序列表
table 表格
table 的开始标签中 添加border属性定义边框 cellpadding 扩展单元格 cellspacing单元格间距
tr 行
td 单元格
rowspan 竖跨几行 独占几行
colspan 横跨几列 独占几列
th 标题单元格
定义表格
table的开始标签中添加borter属性定义表格
cellpadding 扩展单元格
-->
受理员
受理数
自办数
直接解答
到办意见
返回修改
工单类型
同意
比例
数量
比例
建议件
述求件
咨询件
form 表单区域
action 指定表单提交地址
提交路径 ？ 之前是提交地址 ？之后是 本次携带的信息
提交按钮 可以提交当前form包裹的所有表单元素信息
行内标签：
(对于局部文字进行修饰,无法设置元素宽高)
行内块元素 无法设定宽高
span 行内的div
em 倾斜
strong 加粗
a 链接标签
href 指定链接地址
返回上一级 ../
加入我们
target 默认值 self 在当前标签内打开新页面
blank 新建标签页打开新页面
让a标签点击不跳转 在href中只填加 # 号
按钮
==锚点==：
点击a标签时页面会滚动到相应ID名的元素的位置
点击a标签时 页面会滚动到相应ID名的元素位置
-->
下载软件
江苏网通
河南电信
山东移动
行内块
如果不设定宽度 宽度靠子元素撑起
img 引入图片
img标签 默认按照图片原始尺寸显示
src指定资源路径 可以引入网络路径也可引入本地路径
title 添加图片说明
alt 当图片资源加载失败时的替代文本
在这里我就要说一下，在什么情况下才使用这个标签，除了一些装饰的图片、或没有实际用途的，我们一般用CSS的背景图来设置。在一些实用的数据，如：新闻的图片，介绍某种东西的图片，这种情况下，我们建议使用img来实现，相册大家都知道使用img标签吧，如果使用背景，就没办法保存图片，这也就是实用数据的表现!
img标签有2个重要的属性，建议都填写
img的主要属性作用备注
src图片的地址（一般是网络路径/绝对路径）一定要有，不然图片就显示了一个红色的叉
alt用于描述图片的文字叙述建议写，在某些情况下，如果图片无法显示，都还可以用写文字提示给用户看
input 输入框
类型解释
type设定输入框的格式
value指定输入框默认填写内容
placeholder设置占位内容 用于提示输入框功能
Type描述基础例子Spec
button没有默认行为的按钮，上面显示 value 属性的值，默认为空。
checkbox复选框，可设为选中或未选中。
color用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 HTML5
date输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 HTML5
datetime-local输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 HTML5
email编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。
file让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。
hidden不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。
image带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
number用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。
password单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
radio单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。
range此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用htmlattrdefmin 和 htmlattrdefmax来规定值的范围。 HTML5
reset此按钮将表单的所有内容重置为默认值。不推荐。
search用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 HTML5
submit用于提交表单的按钮。
tel用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 HTML5
text默认值。单行的文本区域，输入中的换行会被自动去除。
url用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 HTML5
week用于输入以年和周数组成的日期，不带时区。
废弃的值
datetime用于输入基于UTC时区的日期和时间（时、分、秒及秒的小数部分）。
type="text" 文本输入框
type="password" 密码输入框
type="date" 选择日期
type="radio" 单选按钮 一组单选按钮需要添加共同的name值 添加checked属性指定默认选择项
男
女
type="checkbox" 多选框 需要添加共同的name值 name值需要在最后加[]号 添加checked属性指定默认选择项
唱
跳
type="color" 颜色选择（不常用）
type=“button” 按钮
type=“submit” 提交按钮
typle="file" 选择文件
value 指定输入框默认填写内容
placeholder 提示框 设置占位内容 用于提示输入框功能
label 扩大鼠标的点击区域
跳
rap
select 选择框
option标签内容是让用户看的，value值是让程序使用的；
当程序获取选择结果时， 优先获取所选option的value值
option 包裹单个选项
option 添加 selected属性指定默认选择项
格式化标签
center 内容居中
br 折行
<pre> </pre> 保留代码缩进
实体字符
src 和href的区别
src引入外部资源
href关联外部资源
css
引入方式
行内式 缺点：
html和css混杂在一起 结构不够直观
多个元素相同样式 还需重复书写
helloworld
内嵌式 在head中创建style标签书写样式
书写结构 选择器{
样式属性：样式值
}
外链式 通过link引入外部css资源
css常用命名
包裹容器 wrap 页面主体 main 网页头部 header 网页底部 footer 轮播图 banner 广告 ad 导航 nav 菜单 menu 子菜单 sub-menu 列表 list 选项 item 下载 download 标志 logo 提示 tips 热点 hot 新闻 news 地址 address 登录 login 注册 registry 用户名 userName 密码 password 内容 content 文本 text 价格 price 上一个 prev 下一个 next 箭头 arrow 更多 more 标题 title 子标题 sub-title 商品 product 添加 add 修改 update 删除 delete 消息 message 笔记 note 搜索 search 结果 result 加入 join 主页 home 手机号 tel 状态 status 时间 time 日期 date 图片 picture 图标 icon 数据 data 左 left 右 right 上 up 下 down 中 center 当前 current 激活 active 显示 show 隐藏 hide 打开 open 关闭 close 禁用 disabled 扩展 extend
css三大特性
层叠性
继承性： 有些不能继承定位 过度 浮动 颜色 字体 居中
优先级
css选择器
*通配符 选择页面中所有标签 一般用于重置浏览器默认样式
*{
color:red;
}
同级选择器 优先级采用就近原则
标签选择器 指定标签名
p{
color:green;
}
类名选择器 .类名
.text{
color:purple;
}
id选择器 #id
#txt{
color:orange;
}
类名
首字符必须是字母或 _ 剩余字符可以是字母、数字、_ 、-
公共样式 起一个共同的类名
某一个元素有差异 单独增加类名定义样式
id选择器
唯一性
级联选择器
增加权重
使用： .+类名+空格+.+类名+空格+...+标签名
子代选择器
只能选择作为某元素子元素的元素
选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素
例：
.wrap>p{
} //.wrap字标签中的子标签p
并列选择器
同时选择几个标签 中间用逗号隔开
div,p{
}
属性选择器
属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
存在id属性的元素
a[id]{
}
优先级
!important强制优先级>行内>id>class>标签>*
当使用嵌套选择器 按照权重值计算优先级
*0
标签名 1
类名 10
id 100
文本样式
color： 文字颜色
font-size: 字号
text-indent：2em；首行缩进 1em=一个文字的大小 2em表示缩进2个文字
font-weight: 字体粗细
bolder; 加粗
normal 取消加粗
line-height: 行高
letter-spacing: 字间距 主要用于调整汉字
world-spacing: 字间距 用于调整 单词
/* 文字颜色 */
color:red;
/* 文字大小 */
font-size:20px;
/* 首行缩进 2字符 */
text-indent:2em;
/* 加粗 */
font-weight:bolder;
/* 行高 */
line-height:30px;
/* 字间距 */
letter-spacing:10px;
/* 字体 */
font-family:楷体;
font-family:宋体； 字体
如果用到特殊字体 导入字体文件
@font-face {
font-family:粗体 ;
src:url("STHUPO.TTF");
}
文本修饰
text-decoration:
line-through;删除线
underline 下划线
overline 上划线
none 重置
text-aligin:center 文本对齐
center 居中
left 居左 默认值
right 居右
/* 文本居右 */
text-align:right;
/* 下划线 */
text-decoration:underline;
/* 取消加粗 */
font-weight:normal;
/* 删除线 */
text-decoration:line-through
单行文本溢出显示省略号
溢出隐藏
overflow:hidden
强制文本不换行
white-space: nowrap
溢出部分文本如何显示 省略号
text-overflow: ellipsis
盒模型
块元素 如果不设定宽度 宽度会与父元素保持一致
如果不设定高度 高度靠子元素撑起
行内元素 不能设置宽高
行内块 如果不设定宽度 宽度靠子元素撑起
背景色
width: 100px; 元素宽度 width:50%;
height:100px; 高度
padding 填充
一个值：上下左右
两个值：第一个上下 第二个左右
四个值：上 右 下 左
padding:20px;
padding:10px20px;
padding-top:50px;
padding-right:100px;
padding-bottom:150px;
padding-left:200px;
设置边框
border:线宽 类型 颜色
类型：solid 实现 dashed 虚线
border:10pxdashedblack;
border-width:10px;
border-style:solid;
border-color:black;
border-top-width
border-top
border-bottom
border-left
border-right
border:none 去除边框
margin 元素间距
一个值：上下左右
两个值：第一个上下 第二个左右
四个值：上 右 下 左
margin:100px
margin-top
margin-bottom
margin-left
margin-right
border-radius:
盒模型和怪异模式
盒模型 元素真实占位 =width&height+padding+border
怪异模式 元素真实占位 =width&height
margin-top穿透问题
一个块的第一个子元素设置margin-top时会出现穿透问题（将会带动父元素一起移动）
解决方案： 给父元素添加overflow：hidden; 子元素的margin-top将不会带动父元素
背景属性
background-color背景色
背景重复 ： 不重复
background-repeat-:no-repeat ;
background-image背景图
背景图定位 ：左侧距离 上侧距离
/* 3中写法 */
background-position:100px50px;
background-position:rightcenter;/*右侧距离 上下居中 */
background-position:20%0;
行内块
行内块会存在间距问题
原因： 标签折行缩进被解析成一个空白字符
解决方案：给行内块父级元素设置font-size:0；
==注意：font-size:0；导致行内块元素内部文字不显示 需要单独设置字号==
行内块对齐方式：
行内块高度不一致时 默认底部对齐
内容结构不一致时 按照内容基线对齐
vertical-align:; 调整对齐方式
middle 横向中线对齐
bottom 底部对齐
top 顶部对齐
浮动
float: right 右浮动
left 左浮动
清除左右浮动
可以给浮动元素的父级元素添加一个height
overflow:hidden;清除浮动
给浮动添加一个同级块元素 设置 clear:both 清除左右
.clear::after{
content:"";
display:block;
clear:both;
}
行内块和浮动：水平布局
行内块：间距问题 对齐问题
浮动： 清除浮动 子元素可以依附在父元素两侧
浮动之后
行内标签和行内块 都会转换为块元素
元素宽度靠子元素撑起
伪元素
标签：：after { 在标签之前添加新元素
content:'内容'
}
块的转换
display : inline
inline-block
block
none 隐藏
伪类
所有标签都可添加的伪类
hover 当鼠标经过元素是应用的样式
active 当鼠标在元素上按下时应用的样式
a标签独有的伪类
link 未被访问的a标签样式
visited 访问过的a标签样式
伪类只能影响元素本身及其子代元素
写法：
.box:hover{color:red} 当鼠标经过.box 时 .box文字变为红色
.box:hover p{color:blue} 当鼠标经过.box .box内部的p标签变成蓝色
.box::after:hover{}
.box:hover::after{}
鼠标手势
cursor: pointer 鼠标箭头变小手
透明度
opacity :
opacity设置元素透明度，默认为1.（范围0-1）
opacity 元素本身变透明
rgba：
颜色透明度
定位
当一个元素需要覆盖在其他元素之上时 使用定位布局
position:
fixed 固定定位
absolute 绝对定位
relative 相对定位
sticky 粘性定位
#sticky-nav {
position:sticky;
top:100px;
}
设置position:sticky 同时给一个 (top,bottom,right,left) 之一即可
static 默认 正常排列在文档流中
固定定位 参考浏览器窗口定位 不随页面的滚动而滚动
会脱离文档流
如果不设置宽高 可以同时使用left/right 拉伸元素宽度 top/bottom拉伸元素高度
.box{
position:fixed;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:red;
width:100px;
height:100px;
}
相对定位 参考元素自身位置 原始位置仍然占位
绝对定位 会脱离文档流 参考离他最近的带有定位属性的父级元素
如果没有带有父级定位属性的父级元素 则参考body
sticky 粘性定位 position:sticky是css定位新增属性；可以说是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置 ==不会脱离文档流==
使用条件：
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
两个同级定位属性，
叠层
z-index:2;
容器溢出
滚动条
overflow: hidden; 溢出隐藏
scroll 滚动条
auto 自动
雪碧图
性能优化
将页面中的固定图片整合到一张大图上
通过背景图定位展示大图局部
减少网络请求次数
边框
border:1pxsolidrgba(0,0,0,0);
//透明边框
border:1pxsolidtransparent;
