推荐博客：付铭
day-01
HTML
1、HTML 基本语法
html标签
- 单标签
文章图片
1.1 语法规范- 标签嵌套 用缩进
- 标签名 不区分大小写 建议小写
- 属性名 不区分大小写 建议小写
1.2 常用HTML实体-
-
<<
-
>>
-
&；&
-
©；版权
-
¥；人民币
2、HTML常用标签
主体结构
-
- 锐客网
-
指定网页的元信息 指定关键字 指定描述 指定字符集 属性： charset、name、content
-
-
导入css或者指定网页图标 属性 src、 type 、 rel
-
导入javascript
-
1~6 标题
-
-
-
-
分隔
-
-
强调 表现为斜体
-
强调 表现为粗体
-
H5新增 表示被选择
-
上标
-
下标
-
添加的内容
-
-
/加拼音 H5新增
3、CSS基本语法
使用CSS
- link 引入外部的CSS文件
-
- 使用html元素的style属性
选择器 {
CSS属性: 值;
CSS属性: 值;
}
?
选择器 {属性:值; 属性:值}
注释
/* */
CSS长度单位
px像素
em默认大小的倍数
百分比默认大小参照
cm
mm
pt
CSS 颜色单位
colorName：red/green/bue/purple/orange/yellow/pink/skyblue
?
rgb数字rgb(34,45,23)rgb(20%, 57%, 100%)
?
16进制数字#abcdef#f90#ccc
4、CSS选择器
标签名选择器
tagName {
}
?
类名
.className {
}
?
ID选择器
#idName {
}
?
?
全局选择器
* {
}
?
组合 后代元素：空格连接，包含子代选择器
选择器 选择器{
}
?
组合 子元素：> 连接
选择器>选择器 {
}
?
群组
选择器,选择器,选择器{
}
?
多条件
p.item
?
5、选择器优先级
ID > CLASS > tagName > *
?
组合选择器 数数
6、CSS常用属性
6.1 字体- font-family字体家族
- font-size
- font-weightnormal | bold
- font-stylenormal | italic
- font-variantnormal | small-caps
- font 复合属性
font:[weith | style | variant] size family
- color
- word-spacing
- letter-spacing字间距
- text-align: left / center / right水平居中
- vertical-align: baseline / middle ....垂直居中
- line-height行高
- text-decoration ： none/overline/underline/line-through 一般用于a标签去除下划线
- text-indent:2em
- word-wrap:break-word
- overflow-wrap word-wrap的别名 CSS3
- white-space pre pre-wrap
尺寸
- width max-width min-width
- height max-height min-height
- border-style 边框风格 solid / dotted / dashed / double / none
- border-width 边框宽度
- border-color 边框颜色
- border 复合属性
border: 1px solid #ccc
- padding-left
- padding-top
- padding-right
- padding-bottom
- padding
padding: 值; 上下左右
padding: 值1 值2；上下 左右
padding: 值1 值2 值3; 上 左右 下
padding: 值2 值2 值3 值4； 上 右 下 左
- background-color 背景颜色
transparent
- background-image 背景图片 url()
- background-repeat 背景图片平铺 repeat no-repeat repeat-x repeat-y
- background-position 背景图片位置
- background-attachment 背景图片固定 scroll / fixed
- background 复合属性
background: color image repeat postion attachment
- 利用 background-position 设置背景图片的位置
- 把很多小的图片 集成到一张大图上
- 好处： 减少网络请求数量
8.1 a 元素
属性
- href
- target _blank（空白页打开） / _self
- title鼠标悬浮时的文本提示
- downloadH5新增的
- 发短信smsto
- 打电话telto
- 发邮件mailto
- 相对路径 ./（当前路径） ../（上一级路径）
- 绝对路径 URL
http://www.biadu.com/index.html
- 特殊的相对路径
/lesson/path/index.html
pointer /move / no-drop
8.4 锚点
设置锚点
第一种方式
?
第二种方式
随便一个元素
跳转到指定锚点
8.5 完整URL
http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1
协议protocolhttp
主机名hostnamewww.baidu.com / IP
路径 path/path/demo/contents/
文件名filenameindex.php
查询内容query?a=100&b=300
锚点#mao1
9、图片
img元素
属性
- src
- title图片的文本信息（鼠标悬浮时展示）
- alt图片资源加载失败时的文本提示
- usemap
-
- name
- id
- name
-
- shape rect circle poly
- coords
- target
- href
- title
- shape rect circle poly
列表标签
有序列表
无序列表
定义列表
列表相关的CSS属性
适用于
list-style-type: disc/circle/square.../none
list-style-position: outside/inside
list-style-image: url()
list-style: 复合属性
reset操作:
ol,ul {
margin: 0;
padding: 0;
list-style: none; }
11、表格
HTML标签
标题 行 单元格 表头单元格
CSS属性
table-layout: auto / fixed列宽固定(相等)
border-collapse: separate/ collapse 合并单元格边框
border-spacing: 长度; 单元格和单元格之间的间隙单元格不能合并
caption-side: top/bottom标题的位置
empty-cells:hide/show空的单元格显示/隐藏 单元格不能合并
合并单元格
td或者th的属性：
colspan跨列
rowspan跨行
12、表单
12.1 表单的组成(控件)- 文本输入框
placeholder
maxlength
value
- 密码框
placeholder
maxlength
value
- 单选按钮
- 复选框
- 文件选择
multiple 多个
- 规定类型的文本输入框 (H5)
input:email
input:url
input:numbermax/min/step
input:search
input:tel
- 范围选择框 (H5)
- 颜色选择(H5)
input:color
- 时间日期(H5)
?
?
?
?
- 下拉选项
?
multiple 多选
- 多行文本
maxlenth
- 按钮
input:submitinput:resetinput:button
button:submit button:reset button:button默认submit
12.2 表单标签action（提交的后台接口，即请求的服务器路径）method（请求方式）
typenamemax/min/stepmaxlengthchecked valueplaceholder（H5） list(H5)
name
value
rows colsnameplaceholder
?
?
(H5) 嵌套option
?
12.3 表单验证 （H5） 必须
required 属性给所有可以输入的表单控件
指定类型
email/url/number
正则
pattern 属性 所有可输入
ttile
12.4 表单控件的通用属性disabled所有的表单控件元素 禁用 enabled可用 readonly只读用于可以输入的表单控件(input/textarea) autofocus自动获取焦点所有的表单元素H5 autocomplete自动完成 on/offH5 pattern title required
13、视频/音频(H5)
视频
controls autoplay poster= "" preload 预加载 loop
mp4 / ogg / webm
音频
controls autoplay preload loop
mp3 / wav / ogg
source
day_05 14、浮动
- 如何设置浮动
float:left\right\none
- 设置浮动之后的特点
脱离文档流。 对父元素和后面元素的影响 块状元素，可以共享一行。多个元素浮动，宽度超过父元素会自动换行 元素一旦浮动，都变为块状。浮动元素的默认宽度，被内容撑开 父元素的宽度仍然会对浮动的元素产生限制
- 消除浮动的影响
父元素：
设置overflow: auto/hidden
父元素也浮动
后面的元素 设置 css属性`clear:both`
- 元素可以设置向左 或者 向右浮动 （不会跳出父元素的宽）
- 元素浮动后，会脱离文档流。 （对后面的元素产生影响）
- 元素一旦浮动，会转换为块状元素
- 浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流
- 浮动的元素，宽度默认会是auto，被内容撑开
- 多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行
- 对后面元素影响。 后面元素会整体向前
- 对父元素有影响 （父元素的高不能被撑开）
- 消除元素对后面元素的影响， 在后面的元素设置
clear:both/left/right
concent：“”；
display：block；
clear：both；
}
- 消除子元素浮动对父元素的影响 。 给元素浮动者设置
overflow:hidden
15.1 相对定位- 通过
position:relative设置元素为相对定位元素
- 元素设置为相对定位之后，不会脱离文档流，不影响其他元素
- 可以通过
left、top、right、bottom给相对定位的元素设置位置
- 定位元素： 根据 原先默认的位置 去定位
- 通过
position:absolute来设置绝对定位
- 元素绝对定位后，脱离文档流，影响后面的元素。 宽度默认会被内容撑开
- 可以通过
left、top、right、bottom给绝对定位的元素设置位置
- 定位规则： 根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。 祖先元素什么定位都可以
position: fixed; left/top/right/bottom: 长度单位；
- 根据屏幕进行定位
- 脱离文档流 （宽度默认变成内容撑开）
- 元素设置为
固定定位或绝对定位之后，会变为块状元素
z-index: number; 只能用于被定位的元素
16、定义使用的CSS属性
position:
left
top
right
bottom
z-index
day_06 17、布局知识点总结
元素垂直左右居中position: absolute;
left: 50%;
top: 50%;
marign-top: -高的一半
margin-left: -宽的一半
元素水平居中margin-left:auto;
margin-right: auto;
?
margin:0 auto;
text-align- 让文字水平居中
- 内联元素(inline 和 inline-block)
- 让一行文字垂直居中。 line-height的值等于元素的高
- 内联元素(inline inline-block)
18.1 CSS重置- reset.css
去掉所有元素的默认样式 也可以保证浏览器效果相同
文章图片
文章图片
/*整体设置 start*/ html{ color:#000; background:#FFF; } body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td { margin: 0; padding: 0; } fieldset, img { border:0; } input,select,textarea,button { outline:none; } textarea{ resize:none; } /*i一般作为字体图片使用*/ i { font-style: normal; /*文本垂直居中*/ vertical-align: middle; } a{ text-decoration:none; color: #333; } table { border-collapse:collapse; border-spacing:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }ol, ul { list-style:none; }caption, th { text-align:left; } /*整体设置 end*/
reset.css
- normalize.css
重新设计了所有元素的默认样式 保证所有浏览器效果相同优点： 添加了H5新元素的样式重置 没有简单粗暴
header footer main aside article section dialog双标签，没有任何默认样式，跟div一样。 有语义
19、字体图标
详情点击?http://fontawesome.dashgame.com/
day_07 20、CSS3 的选择器
20.1 基本选择器tagName .className #idName * slector,selector,selector
20.2 层级选择器selector1 selector2后代 selectoer1>selectoer2子元素 selector1+selector2紧邻在后面的兄弟元素 selector1~selector 后面所有兄弟元素
20.3 属性选择器selector[attr]包含指定的属性 selector[attr=value]指定属性的值 selector[attr^=value]属性值以value开头 selector[attr$=value]属性值以value结束 selector[attr*=value]属性值包含value selector[][][]多个属性选择器
属性选择器优先级 同 class
20.4 伪类选择器/*语法*/
selector:伪类 {
}
:link未访问的超链接 :visited访问过的超链接 :hover鼠标悬停 任意元素 :actived激活状态的超链接:focus获得焦点时:first-child :last-child :nth-child()指定数字，也可以指定关键字"odd", "even" :nth-last-child :only-child:fist-of-type :last-of-type :nth-of-type() 指定数字，也可以指定关键字"odd", "even" :nth-last-of-type() :only-of-type()
20.5 伪元素选择器::first-letter第一个字
::first-line第一行
::before最前面插入一个子元素
::after最后面追加一个子元素
21、CSS3 基础
21.1 浏览器私有前缀
-weibkit-*chrome/safari
-moz-*firefox
-ms-*ie
-o-*opera
21.2 CSS3 新增的颜色
background:rgba(r,g,b,不透明度)不透明度：0~1 小数， 数越大，越不透明
21.3 CSS3新增长度单位
px em默认字体大小的倍数 rem根元素字体大小的倍数 vw窗口宽度分成100份50vw vh窗口高度分成100份
21.4 CSS3新增属性
# 重新设置 盒子模型的规则 box-sizing: content-box(默认) / border-box （width/height盒子的宽高）# 外轮廓在border的外面 不算盒子 outline: outline-style outline-color outline-width# 不透明度 opacity 0~1 小数
21.5 设置圆角
border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
22、CSS3 选择器
22.1 层级- 空格
-
>
-
+.item+li
-
~.item~p
- [attr]
- [attr=value]
- [attr^=value]
- [attr$=value]
- [attr*=value]
-
[][][]
- :link
- :visited
- :hover
- :active
- :focus
- :first-child
.list li:first-child
- :last-child
- :nth-child() 从1开始 odd even
- :nth-last-child() 从1开始
- :only-child
li:only-child
- :first-of-type
- :last-of-type
- nth-of-type()
- nth-last-of-type()
- only-of-type
- li:nth-of-type(3)
22.4 伪元素选择器- ::before
.item::before
- ::after
.clearfix::after {content:''; display:block; clear:both}
子元素浮动 [::after 此处是伪元素创建的]
- ::first-letter
- ::first-line
- ::selection
- ::placeholder
::placeholder {color:red}
23.1 新增颜色单位
- rgba() 不透明0~1
- rem
- vw
- vh
24.1 边框圆角border-radius 长度单位 border-top-left-radius border-top-righ-radius border-bottom-left-radius border-bottom-right-radius
24.2 布局display: 值很多很多 .... table table-row... box-sizing: content-box（默认值） / border-box
24.3 外轮廓outline:1px solid #ccc outline-style outline-color outline-width
24.4 不透明度opacity: 0~1
24.5 阴影box-shadow:水平偏移 垂直偏移; 偏移可以负值 box-shadow:水平偏移 垂直偏移 颜色; box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/ box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;
24.5 背景background-size: cover / contain / 400px 300px / 100% 100% background: color image postion/size repeat attachment
24.6 CSS3变换- transform
- translatex()
- translatey()
- translate(x, y)翻转
- rotate()旋转 角度 deg
- 【php|HTML及CSS学习笔记】skewx()歪斜角度deg
- skewy()
- skew(x, y)
- translatex()
- transform-origin 变换的原点。 对translate没有意义。 对rotate影响大
- 哪些CSS属性可以过渡
长度 (padding margin width heightleft/top/right/bottom border-widthbackground-position ...) 颜色 变换 纯数字 (opacity、z-index)
- 触发过渡
伪类触发:hover:focus.... 媒体查询@media JS
- 相关属性
transition-property指定要过渡的属性 用,隔开。默认是 all transition-duration过渡持续时间 transition-timing-function过渡线性效果默认 ease transition-delay过渡延迟 transition：property timing-function duration delay
24.8 CSS3动画 关键帧
@keyframes 动画名字 {
0% {
}
20% {
}
40% {
}
100% {
}
}
相关CSS属性
animation-name指定动画的名字
animation-duration动画的执行时间
animation-timing-function 执行效果速度
animation-delay延迟
animation-iteration-count循环 次数infinite(无限)
animation-direction:alternate （正向 反向 交替）\ reverse（反向）
animation-play-state: running / paused
animation 复合属性
转载于:https://www.cnblogs.com/rongge95500/p/9762654.html
推荐阅读
- 前端|对请求，响应和前后端生命周期的理解。
- 微信小程序|基于uni-app实现微信小程序一键登录和退出登录功能
- PHP毕设含lunwen|含文档+PPT+源码等]精品基于PHP实现的好物优购商城|电商小程序[包运行成功]计算机毕业设计PHP毕业设计项目源码计算机PHP毕业设计微信小程序
- 前端|聊一聊前端程序员的现状与挑战
- java|抖音API接口（item_search-根据关键词取商品列表）
- web安全|［网络安全］实操AWVS靶场复现CSRF漏洞
- java|抖音API接口（item_get-获得抖音商品详情）
- 一起来学华为云数据库，RDS实践
- WebStor|Vue的使用方法
- 标签嵌套 用缩进
