html 也是一个文档,文件,只是这个文件的类型是 html 类型。
-
这些标签怎么用?
不会用的标签,块用div, 行内用 span
label 是 form 中的一个标签,它一般和input , select ,textarea 结合使用,label 的for 属性值 是 旁边的表单元素的id 值 。
块元素默认独占一行, 块元素中可以嵌套块元素和行内元素。 行内元素默认占据内容的实际大小,行内元素中不能嵌套块元,可以嵌套其他的行内元素。
-
块标签
-
div
-
h1-h6
-
ul
-
ol
-
dl
-
li
-
dt
-
dd
-
header
-
footer
-
nav
-
main
-
p
-
行内标签
-
label
-
input
-
select
-
textarea
-
span
-
a
-
img
-
video
-
audio
-
canvas : 地图, 图表 , 网页游戏
在html 中需要把数据传递给服务器,用 form ,需要用户输入数据 ,input,table
table row : tr table data : td
table head :thead th
代码是写出来 ,不是背出来 !!!
html 中的标签,就像是屋子里的设施,什么屋子放什么东西,放多少。
-
-
这些标签到底什么意思 ?
meta : 元信息, 描述页面信息 charset : 当前页面中符号使用的字符集 name : 名字 keywords : 关键字 viewport: view: 视图 , port: 端口, 视窗 content : 内容 scale : 缩放 http-equiv : 编译指示指令 refresh : 刷新 ,
标签的意思实际上就是英文单词的意思。
-
这些标签的属性值是什么?
W3C 指定的属性值 例: input标签的type属性值 meta 标签的namen属性值 ,content 属性值 ,http-eqive 属性值 等。 可以参考官方网站公布属性用法 。 用户自己定义的 class : 类名是用户自己定义的,类名可以重复,一般用在样式定义中,表示这几个元素使用相同样式。 id : id 值是用户自定义的,但是ID 值不能重复 body 中常用的标签的 title, name, alt 等属性值,也可以让用户自己定义。 可以参考官方文件中的全局属性。
其他标签及符号
-
frame / iframe 框架
-
strong
-
路径的表示方法
-
绝对路径
除非用户移动,删除文件,否则,文件位置永远不变!
文件系统的绝对路径 file:///c://path.../xxx.png
url 的绝对路径 http://www.baidu.com/path..../xxx.html
-
相对路径
相对于当前项目中的某个文件位置。
./ : 当前这个文件和引入的文件在同一个目录中,有的人习惯把 ./ 省略。 ../ : 当前文件的上一级目录, 几层父目录,写几个../ / : 项目的根目录
-
-
标记语言中的特殊符号
< <
> © 空格
a < b > c ==> a>b<c
-
注释
<!-- 注释的内容 -->
html 的注释
注释除了解释说明代码,还有梳理思路的功能。
css
层叠样式表
css 是什么
让页面中元素显示成我们希望的样子。 页面的装饰,样式。
CSS 怎么用
-
在元素的开始标签中通过 style 属性定义元素的样式。 -- 极端情况下使用 生效的优先级最高。
-
通过style 标签书写当前页面中元素的样式 -- 练习、学习的时候方便 在当前页面中可以重复使用; 样式代码只在当前页面中生效; css 代码和 html 代码初步分离。
-
通过link 标签引入外部CSS资源文件。-- 推荐 样式可以在多个页面中生效; CSS 代码和 HTML 代码完全分离
CSS 代码生效的时候,看最后定义的,匹配的规则 : 靠近原则 。
最后定义,指的是同一个属性,谁最后定义。
CSS 代码怎么写
语法: 选择器 {属性列表... } 选择器 :匹配页面中的某些元素
-
基本选择器
-
(通配符) : 表示页面中的所有元素 div (标签) :表示页面中指定的标签 class (类) :匹配页面中所有元素的class 属性名和当前相同的元素,类名可以重复,一个元素可以有多个类名,之间使用 空格 间隔。 用法: .类名 id (id) :页面中的元素id 属性值不允许重复。用法: #id
现代的浏览器ID 属性值重复的时候,不会报错,但是只有第一个定义的id 值生效。
-
-
css 3选择器
-
属性选择器
表单元素匹配的时候用的比较多
[attr]:某个元素上有这个属性的 [attr=value] : 匹配指定属性和值的元素 [attr^=value] : 指定属性值以value 开始的元素 [attr!=value] : 指定属性不是 value 的元素
-
伪类 :伪类名
表示状态: :hover : 鼠标悬停在某个元素上的状态 :active: 激活,元素激活后的颜色 :focus: 聚焦状态 表示位置: :first-child :last-child :nth-child 结构: :empty : 除了空白字符,没有子元素 函数 : :is() : 相当于 等于 :not() : 相当于 不等于 :where() : 相当于 符合某个条件
-
伪元素 ::before : 在匹配成功的元素内容之前 ::after : 在匹配成功的元素内容之后 ::placeholder : 预占信息元素
-
组合(级联)选择器
并列选择器 , 选择器与选择器之间使用 ',' 间隔 空格,选择器与选择器之间使用空格间隔, 后代选择器
, 父子选择器
-
,前面的元素后紧跟的兄弟元素 ~ ,前面的元素后的所有兄弟元素
-
属性
-
字体
font-size : 字体大小 ,px font-family : 字体, 可以有一个值 ,也可以有多个值。 多个值的时候,每个值需要加引号" '' ", 值与值 之间使用逗号间隔。字体依次使用计算机支持的字体。 font-weight: 数字 | 单词。 字重号,名字: bold | lighter
-
颜色 颜色单词-- 练习 hex(16进制) rgb(0-255,0-255,0-255) rgba(0-255,0-255,0-255,0-1)
-
尺寸单位
-
px : 像素
-
% : 百分比, 以父元素为基础单位,进行计算
-
vw / vh : v : view , w : width ,h : height vw : 视窗宽度的百分比 vh : 视窗高度的百分比
-
em : 以父元素的font-size 值为基本单位,进行计算。 eg: 父: font-size: 20px; 子元素 :width: 20em; 子元素的实际尺寸宽度应该是 20*20 = 400px;
-
rem : r : root , 根元素的font-size 为基本单位 。一般是html 的font-size 值 ,页面中的元素使用 rem 为单位。这种用法经常用在 移动设备中。
-
-
盒子模型
-
IE(怪异)盒子模型 border-box
-
W3C(标准)盒子模型 content-box 盒子的width, height 的计算方式是一样的。
-
box-sizing: border-box | content-box ;
-
margin : 当前元素和其他元素之间的距离 margin-top margin-right margin-bottom margin-left
margin : 10px; 四个方向的外边距 margin : 10px 20px; 上下 左右 方向的外边距 margin: 10px 15px; 20px; 上 左右 下 方向 margin : 5px 10px 15px 20px; 上 右 下 左 方向
-
padding : 元素的边框和内容之间的距离
-
border : 边框 border-width : 边框宽度 可以在width 前添加四个方向词,指定某个方向上的边框宽度 border-style 实线: solid 点状: dotted 虚线: dashed border-color
border-image 边框图片
上面的三个属性可以和四个方向结合单独设置某个方向上的信息
-
-
css 3 中新增 @font-face
自定义字体库
@font-face { font-family: 自定义的字体名称 ; src: url(字体文件地址); }
- overflow :
- hidden : 超出父元素盒子的时候,隐藏内容
- scroll: 超出父盒子,可以滚动,产生滚动条
- clip : 以元素的边距盒进行裁剪。
- visiable: 子元素可以正常展示 ,但是会展示在父元素盒子外边。
可以实现轮播图效果
- background : 背景
- background-color :
- background-image : url("xxx.png")
linear-gradient
radial-gradient
repeat : 设置背景图的重复方式。repeat | no-repeat
- background-position : 背景图的位置
- border-radius:边框圆角
- word-brak :
brek-word: 在任意字符间断行
keep-all : 保持一个完整的单词
- line-height : 行高
1.5 : 按文字的倍数设置行高
20px :可以让文字在该行中垂直居中
- vertical-align :
- top
- bottom
- middle : 以 x 中线中间位置
- margin :
margin : 0 auto; 可以设置块元素的居中方式
但是要求块元素必须设置 width
媒体查询
主要是解决页面在不同尺寸的设备上,显示的效果,页面布局能随时变化 --- 响应式。 响应式实现的方式: - 在页面中定义根元素的 max-width ,页面定义% 。 - 使用 媒体查询 + % | rem 实现。 媒体查询的语法: @media 设备类型 and | or(,) (媒体规则) ... {} 常用的规则 : - width width min-width max-width - orientation: 检测屏幕竖屏或横屏 landscape : 横屏 portrait : 竖屏
阴影
-
元素的阴影效果:
-
扩散方式 : inset
-
位移距离 : x, y , 最多使用三个方向,想要更好的立体效果,值都不要太大
-
模糊面积
-
阴影颜色 , 阴影颜色会逐步淡化
-
-
字体阴影 text-shadow
-
盒子阴影 box-shadow
两种阴影效果定义方式一样。
常见的布局
-
静态布局 (固态布局)
实现的方式: 所有的元素使用 px 为单位,浏览器根据元素本身的布局进行渲染。
-
float 布局
早期的时候把整个页面设置 float ,做整体布局。现在已经比较少了
-
flex (弹性盒子)布局
实际上弹性盒子有三种方式: columns , flex , grid 。 但是现在我们主要说的是 flex 。
-
position
页面中的元素进行定位 。
-
栅格
主要实现的方式: % 或 vw/vh 实现 。
-
响应式
-
媒体查询
-
媒体查询 + %
-
rem 布局
-
动画
-
transition : 过渡效果
一般和状态伪类结合使用。 transition : property druation timing-function delay; - property : 属性名,如果需要多个属性,可以设置为 all - druation : 动画完成时间 - timing-funtion : 动画方式 - delay: 动画开始前延迟时间, 支持 2000ms , 2s
.box { width: 100px; height: 50px; background-color: aqua; } .box:hover{ width:400px; height: 200px; transition: all 3s ; }
动画方式:
-
ease: 默认值,中间加速,结束减速
-
linear : 匀速运动
-
ease-in : 开始慢,逐渐加速
-
ease-out : 开始快,逐渐减速
-
ease-in-out : 开始慢--> 加速-->减速
-
-
transform : 使...变形
-
旋转: rotate(deg, position)
-
缩放: scale(x,y) : scaleX() scaleY()
-
位移:translate(x,y),translateX() ,translateY()
-
倾斜:skew(x,y), skewX() skewY()
eg: transform: rotate(45deg) scale(1.5, 2) translate(200px, 100px)
-
-
animation : 动画
aimation : name druation timing-function
-
animation-name : 一个或多个动画名
-
animation-duration :动画完成的时间
-
-
-
animation-timing-function : 动画方式 ease: 默认值,中间加速,结束减速 linear : 匀速运动 ease-in : 开始慢,逐渐加速 ease-out : 开始快,逐渐减速 ease-in-out : 开始慢--> 加速-->减速 cubic-bezier(p1,p2,p3,p4): 自定义三次贝塞尔曲线,p1, p3 在0-1之间 steps(n) : 步长 jump-start | start : 左连续 jump-end | end : 右连续 jump-none :
-
animation-delay : 开始之前的等待时间
-
animation-iteration-count : 播放次数: infinite(无限次) | n (>0) 次数不能是负数,可以是0.5次
-
animation-direction : 播放的方向: normal : 默认值 ,正向 reverse : 反向 alternate : 正反交替, 第一次是正向 alternate-reverse :正反交替,第一次是反向 animation-fill-mode : 动画在执行之前和之后如何将样式应用于其目标。 none : 默认值, 未开始前,不会将样式应用于目标 forwards : 目标保留最后一帧计算值 backwards : 立即应用第一关键帧定义的值 both : 遵循 forwards 和 backwards ,从两个方向上扩展动画属性。
-
animation-play-state : 动画状态,是运行(running)还是暂停(paused)
-
animation 的值 可以是一组,也可以是多组。组与组之间用逗号间隔。
-
-
@keyframes
-
使用 from, to 定义动画开始的数据,和结束的数据
-
使用百分比定义每个阶段的状态数据
-