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