前端基础
2021-09-14 19:34:29 4 举报AI智能生成
HTML+CSS基础收集，喜欢的可以支持一下
作者其他创作
大纲/内容
CSS
方式
外部样式表
内部样式表
内联样式表
以上三个的优先级
语法
选择器
基础选择器
标签选择器
类选择器
.开头
class
可以组合使用
id选择器
#开头
id
通配符选择器
复合选择器
后代选择器
子元素选择器
并集选择器
伪类选择器
:link
:visited
:hover
:active
:focus
:first-child
:lang
伪元素选择器
:first-line
:first-letter
:before
:after
::selection
结构性伪类选择器
:root()
:not()
:empty()
:target(n)
:first-child(n)
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
UI状态元素伪类选择器
E:checked{attribute}
E:enabled{attribute}
E:disabled{attribute}
E::selection{attribute}
目标伪类
E:target{attribute}
字体
font
style weight size family
font-family
font-size
font-weight
font-style
文本
color
text-align
left
center
right
line-height
文本垂直居中
text-decoration
none
line-through
underline
text-shadow: h-shadow v-shadow blur color;
text-indent
首行缩进
white-space
nowrap
背景
background
color image repeat postion
background-image
url()函数
background-color
rgb()
颜色值
background-repeat
no-repeat
repeat-x
repeat-y
repeat
background-size
像素值
百分比
background-position
left
top
right
bottom
center
以上的可以两两组成
background-attachment
fixed
练习
图片铺满效果
背景属性的使用
html和body的高度默认是0
html和body有一个自带样式
超链接
伪类
hover
经过
visited
被点击过
link
默认
active
按住
表格
table
border
tr
border
nth-of-type(odd)
nth-of-type(even)
显示
display
block
inline
inline-block
换行符/空格间隙问题
办法一：解决元素之间的空白符
方法二：为父元素中设置font-size: 0，在子元素上重置正确的font-size
HTML本质上就是XML
none
flex
弹性盒子
direction
控制盒子的位置
ltr
rtl
写在父元素上
flex-diretion
控制盒子的子元素方向
row
row-reserve
column
column-reserve
justify-content
水平对齐
center
flex-start
flex-end
space-between
space-around
align-items
垂直对齐
center
flex-start
flex-end
stretch
flex-wrap
自动换行
nowrap
wrap
align-content
行对齐
center
flex-start
flex-end
space-between
space-around
写在子元素上
align-self
写在子元素上，子元素自定义位置
center
flex-start
flex-end
baseline
stretch
flex
visiblity
hidden
轮廓
outline
与border差不多
none
盒子模型
width和height
border
简写
style
width
color
radius
top、bottom、left、right
前端面试题？
如何使用border画三角形？
如何使用border画三角形？
margin
简写
一个值
二个值
三个值
四个值
margin-left
margin-start
margin-start
margin-right
margin-end
margin-end
margin-top
margin-bottom
子元素margin-top失效问题
两个盒子上下边距计算问题
padding
CSS3
box-sizing
border-box
content-box
padding和border会影响盒子的宽高
定位
position
absolute
relative
父相子绝
fixed
sticky
static
left
top
bottom
right
z-index
浮动
float
left
right
clear
left
right
both
浮动对文字的效果
解决浮动引起的父元素塌陷
指定父元素高度
overflow
清除浮动
伪元素:after
溢出
overflow
auto
解决margin子元素异常
清除浮动
列表
list-style-type
none
transform
2D转换
rotate(deg)
transform-origin：原点设置
方位值
center
top
right
bottom
left
也可以两两组合
百分比
50% 50%：表示中心点
像素值
translate(x, y)
scale(x, y)
x和y：指的是倍数
如果只写一个值，影响宽和高
也可以设置中心点
以上三个可以混合使用，使用空格分隔，会依次运行，建议位移写在最前面
练习：使用定位和转换实现元素的水平和垂直居中
transform属性的效果不会影响其它元素的位置，而width和height变化时，会影响其它元素的位置
3D转换
坐标系统
x轴：水平方向，正值向右
y轴：垂直方向，正值向下
z轴：正值为近视，负值为远视
相关属性及方法
位移
translate3d(x,y,z)
translateX()
translateY()
translateZ()
旋转
左手准则
rotate3d(x,y,z,deg)
rotateX()
rotateY()
rotateZ()
透视
perspective
模拟人眼与屏幕之间的距离，比如俗话说的一叶障目不见泰山
3D效果必填
该属性是写在3D显示元素的父元素上
数值px
3D呈现
transfrom-style
控制子元素是否开启三维立体环境
flat：2D显示
preserve-3d：3D显示
写在父元素上
练习：旋转硬币效果
过渡
transition: property duration timing-function delay;
默认值：all 0 ease 0。多个值使用逗号分隔，如
all 0 ease 0, all 0 ease 0, all 0 ease 0
默认值：all 0 ease 0。多个值使用逗号分隔，如
all 0 ease 0, all 0 ease 0, all 0 ease 0
transition-property：属性名称列表，多个值使用空格分隔。
all表示影响所有属性，none表示不对任何属性有效
all表示影响所有属性，none表示不对任何属性有效
transition-duration：持续时间，单位s或ms
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
动效速率
动效速率
对齐
水平居中
text-align
center
margin
对块级元素有效
auto
width必须指定
padding
垂直居中
line-height
控制文字比较多
padding
margin
position+transform
translate()
translateX()
translateY()
弹性盒子
动画
定义动画
@keyframes 名称 {}
动画序列
from和to
百分比：可以做更细的操作
0%相当于from
其它%
100%相当于to
使用动画
animation-name：必填
animation-duration：必填
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|steps(步数值);速率
使用steps()实现漂亮的数字倒计时
animation-iteration-count：次数；数值或infinite
animation-direction
alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
animation-play-state: paused|running;
animation-delay
练习
正方形运动轨迹
菱形轨迹动画，里面的菱形可以不画
圆形轨迹动画
渐变
background-image
background-color：不支持
元素透明度
opacity
权重
媒体查询
@media：@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。
格式:
@media not|only mediatype and (expressions) {
CSS 代码...;
}
@media not|only mediatype and (expressions) {
CSS 代码...;
}
not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
精灵登录页面
背景铺满
表单水平和垂直居中
输入框的样式及placeholder的颜色
按钮的样式及轮廓去除
Jquery
Vue
HTML
概述
网页
什么是网页？
什么是网站
什么是B/S系统
B：Browser
S：Server
网页是如何组成的？
HTML
CSS
Javascript
HTML概述
HTML全称：Hyper Text Markup Language(超文本标记语言)
HTML是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。
浏览器来解析HTML标记的内容（文字的处理，画面排版安排，图片如何显示、音频、视频等等）
HTML是用来创建网页的标记语言
HTML是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。
浏览器来解析HTML标记的内容（文字的处理，画面排版安排，图片如何显示、音频、视频等等）
HTML是用来创建网页的标记语言
HTML特点
1、简易性：超文本标记语言的版本升级采用的超集方式。更加方便灵活
2、可扩展性：超文本标记语言采取的子类元素的方式，为系统扩展带来保证
3、平台无关性：所谓的平台指的是操作系统，比如Windows、Linux、Macos、Android、IOS。只要有浏览器就行了
4、通用性：HTML是网络的通用语言，一种简单、通用的标记语言。
2、可扩展性：超文本标记语言采取的子类元素的方式，为系统扩展带来保证
3、平台无关性：所谓的平台指的是操作系统，比如Windows、Linux、Macos、Android、IOS。只要有浏览器就行了
4、通用性：HTML是网络的通用语言，一种简单、通用的标记语言。
HTML的发展
超文本标记语言(第一版)------1993年6月作为互联网工程小组(IETF)工作草案发布(并非标准)
HTML2.0 --1995年11月
HTML3.2 --1997年1月14日，W3C标准
HTML4.0 --1997年12月18日 W3C标准
HTML4.01 --1999年12月24日 W3C的推荐标准
HTML5 ---2014年10月29日，W3C推荐标准
HTML2.0 --1995年11月
HTML3.2 --1997年1月14日，W3C标准
HTML4.0 --1997年12月18日 W3C标准
HTML4.01 --1999年12月24日 W3C的推荐标准
HTML5 ---2014年10月29日，W3C推荐标准
W3C标准
HTML
结构
CSS
表现
Javascript
行为
常用浏览器
HTML基本结构
1、HTML页面包含头部head和主体body
2、HTML标签通常是成对出现的，有开始标签，有结束标签，称为对标签。没有结束标签的为 空标签
3、HTML标签都长都有属性，格式：属性名 = "属性值" 属性名 = "属性值"。多个属性用空格间隔
4、HTML标签不区分大小写，建议小写
5、HTML文件后缀名为html或htm
2、HTML标签通常是成对出现的，有开始标签，有结束标签，称为对标签。没有结束标签的为 空标签
3、HTML标签都长都有属性，格式：属性名 = "属性值" 属性名 = "属性值"。多个属性用空格间隔
4、HTML标签不区分大小写，建议小写
5、HTML文件后缀名为html或htm
标签关系
父子关系或包含关系
兄弟关系或并列关系
开发工具
NotePad
NotePad++
SublimeText
Hbuilder
VSCode
WebStorm
IDEA
Eclipse
字符编码
什么编码？
常用编码
utf-8
gbk
gb2312
乱码
文件保存的编码
html设置的编码
HTML声明
推荐文档
菜鸟教程
https://www.runoob.com/html/html-tutorial.html
W3CSchool
https://www.w3school.com.cn/h.asp
MDN: https://developer.mozilla.org/zh-CN/
如何学好编程
练，所谓键盘敲烂，月薪过万
常用标签
p
段落标签
h1~h6
标题标签
br
换行标签
hr
水平线
文本格式化标签
<!--粗体文本-->
<b>今天天气好</b><br />
<!--大号字-->
<big>今天天气好</big><br />
<!--着重文字-->
<em>今天天气好</em><br />
<!--斜体字 物理上把字体倾斜-->
<i>今天天气好</i><br /
<!--小号字-->
<small>今天天气好</small><br />
<!--定义加重语气-->
<strong>今天天气好</strong><br />
<!--下标字-->
CO<sub>2</sub><br />
<!--上标字-->
孙悟空三打张阔<sup>①</sup><br />
<!--插入字-->
<ins>今天天气好</ins><br />
<!--删除字-->
<del>今天天气好</del>
<b>今天天气好</b><br />
<!--大号字-->
<big>今天天气好</big><br />
<!--着重文字-->
<em>今天天气好</em><br />
<!--斜体字 物理上把字体倾斜-->
<i>今天天气好</i><br /
<!--小号字-->
<small>今天天气好</small><br />
<!--定义加重语气-->
<strong>今天天气好</strong><br />
<!--下标字-->
CO<sub>2</sub><br />
<!--上标字-->
孙悟空三打张阔<sup>①</sup><br />
<!--插入字-->
<ins>今天天气好</ins><br />
<!--删除字-->
<del>今天天气好</del>
加粗
b
strong
斜体
i
em
字体大小
big
small
标签速查
https://jquery.cuishifeng.cn/html5.html
练习
https://sports.sina.com.cn/basketball/nba/2021-01-17/doc-ikftssan7299775.shtml
HTML的打开方式
file协议
http协议
img
alt
width
height
border
src
路径
约对路径
相对路径
a
href
target
_self
_blank
_search
分类
外部链接
跳转到百度
只可以使用绝对路径
只可以使用绝对路径
内部链接
绝对路径
相对路径
下载链接
download
锚点链接
#
#id值
特殊字符
注释
<!--内容-->
通用属性
id
class
style
title
name
布局标签
div
span
列表
ul
li
ol
li
自定义
dl
dt
dd
table
thead
tr
th
tbody
tr
td
tfoot
表单
form
action
method
get
post
enctype
文件上传必埴
multipart/form-data
input
type
text
password
date
datetime
datetime-local
radio
name很重要
checked
checkbox
checked
hidden
看不见的
number
tel
submit
reset
name
在表单提交时
placeholder
提示内容
value
输入框的值
select
name
option
selected
value
optionGroup
label
textarea
文本域
rows
cols
button
type
submit，默认值
reset
button
练习
JavaScript
Bootstrap
0 条评论
下一页
