学习笔记
1.网页组成
HTML为框架,CSS为修饰,JS为动态
2.基本格式
html
head
title /title
<link rel="stylesheet" href="">//引入样式表
/head
body
<header></header> 头部
<main></main> 主体
<footer></footer> 底部
<nav></nav> 导航栏
<aside></aside> 侧边栏
<article></article> 一个独立的文章
<section></section> 表示独立区块
<div></div> 表示独立区块
<span></span> 表示独立行内元素
/body
/html
3.小知识点
1.在vscode创建html文件后!+enter可以快速构建html框架
2.ctrl+/生成注释
3.ctrl+c 和 ctrl+v可以把光标在的一行向下复制,shift+alt+向下箭头也可以
4.可以直接输入像h2然后enter就可以快速成对应的<>
5.不断ctrl+d可以选中很多第一次选中的一样的文字然后同时修改
6.vscode里查看里选择自动换行可以避免一段很长的文字只占一行
7.
4.简单名词
| 标签 | 含义 |
|---|---|
| b/strong | (语气轻/重)加粗 |
| u/ins | (语气轻/重)下划线 |
| i/em | (语气轻/重)倾斜 |
| s/del | (语气轻/重)删除线 |
| hr | 水平分割线 |
| br | 换行 |
| h1-h6 | 标题从大到小 |
| blockquote | 长引用 |
| q | 短引用 |
| p | 段落标签 |
| img | 图片 |
| audio | 音频 |
| video | 视频 |
| a | 超链接 |
| ul | 无序列表 |
| ol | 有序列表 |
| dl | 自定义列表 |
| table | 表格 |
| input | 表单系列标签 |
| select | 下拉框 |
| textarea | 文本域 |
|   | 空格 |
| > | 大于 |
| < | 小于 |
| lorem | 自动生成一段英文 |
| id属性 | 元素唯一标识,英文开头 |
| iframe | 内联框架 |
5.图片
<img src="" alt="" title="" width="">
行内块
各个属性间用空格隔开
src 放图片的地址
alt 如果地址失效显示的文字,同时用于搜索引擎识别
title 悬停时显示的文字
width 图片的宽
6.音频
<audio src="" controls autoplay loop> </audio>
<audio controls autoplay loop>
<source src="">
<source src="">
<embed src="" type="" width="" height="">基本所以浏览器都支持
type引入文件的格式,width和height如果不设置按钮可能很小
</audio>
| 属性名 | 功能 |
|---|---|
| src | 路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(很多浏览器禁止) |
| loop | 循环播放 |
7.视频
| 属性名 | 功能 |
|---|---|
| src | 路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(需配合muted静音) |
| loop | 循环播放 |
8.路径
1.绝对路径
(1)直接从网络上复制的图片的链接
(2)从盘符开始一套一套直到图片
2.相对路径
(1)同级
1.直接写名字 src="图片.png"
2.src="./图片.png"
(2)下级
src="source/图片.png"
(3)上级
src="../source/东秦鸡鸣湖.png"
上多少级偶多少"../"
9.超链接
<a href=" " target =" "> </a>
1.target 网页打开方式
_self 默认值,覆盖网页
_blank 新窗口跳转
2.a:link{} 没访问过的链接
a:visited{} 访问过的链接
| 属性名 | 功能 |
|---|---|
| href | 目标地址 |
| javascript:; | 什么也不会发生 |
| # | 回到当前界面顶部 |
| #+跳转目标id | 跳转到界面目标位置 |
| target | 网页打开方式 |
10.列表
无序列表:
ui>li*5//快速生成
<ul>
<li>1</li>
<li>2</li>
</ul>
自定义列表:
<dl>
<dt>第一列</dt>
<dd>第一列1</dd>
<dd>第一列2</dd>
<dt>第二列</dt>
<dd>第二列1</dd>
<dd>第二列2</dd>
</dl>
| 属性名 | 功能 |
|---|---|
| ul | 无序列表整体 |
| ol | 有序列表整体 |
| dl | 自定义列表的整体 |
| 属性名 | 功能 |
|---|---|
| li | 列表的每一项 |
| dt | 自定义列表的主题 |
| dd | 主题的每一项内容 |
11.表格
border-collapse:collapse合并边框
| 属性名 | 功能 |
|---|---|
| table | 总 |
| tr | 每行 |
| td | 每行中的每个 |
| border | 边框宽度 |
| width | 表格宽度 |
| height | 表格高度 |
| caption | 表格大标题 |
| th | 表头单元格 |
| thead | 表格头部 |
| tbody | 表格主题 |
| tfoot | 表格底部 |
| rowspan | 跨行合并 |
| colspan | 跨列合并 |
12.表单
| input(type=“”) | 表单系列标签 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 文件选择 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮/也可以作为标签 |
| placeholder | 占位符 |
| name | 单选框分组 |
| checked | 默认选中 |
| multiple | 多文件选择 |
| form | 表单域 |
| select | 下拉菜单 |
| option | 下拉菜单的每一项 |
| selected | 默认选中 |
| textarea | 文本域 |
| label | 标签 |
13.内联框架
<iframe src=" " frameborder="0"> </iframe>
1.src 引入的页面
2.frameborder 引入界面的边框,0代表无,1代表有
14.选择器
<link rel="stylesheet" href="">
1.标签选择器
所有为这个标签的都被标签选择器控制,比如p{},那所有的段落都是这个格式
p{}
2.类选择器
以.开头制定类,哪个需要用哪个,如果同时要用多个类,就空格往后加
.name{}
.age{}
<h1 class="name age"></h1>
3.id选择器
以#开头,配合js使用,一个id选择器只能选中一个标签
#id{}
4.通配符选择器
只有一个*,控制所有的标签
*{}
5.复合选择器
(1)后代选择器 div p{},比如写div中的p,div里面的p全部被选中
(2)子代选择器 div>p>h1{},只选择儿子,再小的就不选了
(3)兄弟选择器 p+span{},找紧挨着p的span兄弟元素,如果没有紧挨着就不选中
p~span{},选择下面的全部span元素
(4)并集选择器 div,p,.a,.b,.c{}
(5)交集选择器 p.box.a.b.c{},选择同时包含p,box,a,b,c的标签
(6)属性选择器 p[title],选择有title属性的p标签
p[title=abc],选择含有指定属性值的标签
p[title^=abc],含有以abc开头的属性值的标签
p[title$=abc],以abc结尾
p[title*=a],只要含有a
(7)伪类选择器 a:hover{},第一个子元素,被点击的元素,鼠标悬停变色等
ul>li:first-child ul第一个子元素
ul>li:first-child ul最后一个子元素
ul>li:nth-child() ul第n个子元素,从0开始
n 全部
2n/even 偶数位元素
2n+1/odd 奇数位元素
-n+5 前五个元素
ul>li:first-of-type ul中li的同类型第一个元素
ul>li:not(:nth-of-type(3)),除了第三
(8)伪元素选择器
div::before{
content:;
color:;
}
必须配合content使用
选择器层叠性,后面的覆盖前面的属性
所有css伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 元素。 |
| :empty | p:empty | 选择没有子元素的每个 元素。 |
| :enabled | input:enabled | 选择每个已启用的 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
| :focus | input:focus | 选择获得焦点的 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 “it” 开头的 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not§ | 选择每个非 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 元素的每个 元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 |
| :optional | input:optional | 选择不带 “required” 属性的 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 |
| :read-only | input:read-only | 选择指定了 “readonly” 属性的 元素。 |
| :read-write | input:read-write | 选择不带 “readonly” 属性的 元素。 |
| :required | input:required | 选择指定了 “required” 属性的 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
所有css伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 元素之后插入内容。 |
| ::before | p::before | 在每个 元素之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分。 |
15.文字样式
font(font-style font-weight font-size font-family)
1.font-weight
正常粗细 normal/400
加粗 bold/700
2.font-style
正常 normal
倾斜 italic
| 代码 | 效果 |
|---|---|
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| front-style | 字体倾斜 |
| front-family | 字体选择 |
| sans-serif | 无衬线字体 |
16.文本样式
1.text-indent 文本缩进
数字+em(推荐) 1em=当前标签的font-size的大小
2.text-align 水平对齐方式
左 left
右 right
中 center
div等居中 margin 0 auto
3.text-decoration 文本修饰线
underline 下划线
line-through 删除线
overline 上划线
none 无装饰线(去掉超链接的线)
4.line-height 行高
可以加**px或者1.5等
17.颜色表示
| 预定义颜色名 | red |
|---|---|
| rgb | rgb(0,0,0) |
| rgba | rgba(255,255,255,0.5) |
| 十六进制表示 | #000 #f00 |
18.背景
background:background-color background-image background-repeat background-position
1.background-color 背景颜色
2.background-image 背景图片
3.background-repeat
repeat 都铺
no-repeat 不铺
repeat-x x铺
repeat-y y铺
4.background-position
(1)水平方向
left
center
right
(2)垂直方向
top
center
bottom
(3)数字+px
0,0(左上角)
19.元素显示模式
1. 行内元素 span
2. 行内块元素 input
3. 块级元素 div
4.p和h,div不能相互嵌套
5.a不能套a
6.display
display:block 转换成块级元素
display:inline-block 转换成行内块元素
display:inline 转换成行内元素
20.css特性
(1)继承性:子继承父,文字全部继承,其他都不能继承
a标签使color继承失效
h是font-size继承失效
(2)层叠性:优先级高的选择器生效,优先级相同后来者居上
(3)优先级:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
- !important加在;前
- !important不要给继承加
- 权重叠加计算采用string比大小对比法
21.盒子模型
| 盒子模型 | |
|---|---|
| 内容 | connect |
| 内边距区域 | padding |
| 边框 | border |
| 外边距区域 | margin |
1.自动删减:box-sizing:border_box
2.border 边框
(1)尺寸:
10px
(2)线的类型:
solid(实线)
dashed(虚线)
dotted(点线)
(3)颜色:
red
(4)单方向设置:
border-left
3.内边距
padding:上 右 下 左
padding:上(左右)下
padding:(上下)(左右)
4.外边距margin
类似内边距padding
5.清除默认内外边距
*{
margin: 0;
padding: 0;
}
6.解决塌陷现象
overflow:hidden
22.浮动
float
1.因为有浮动所以text-align不生效
23.css书写顺序
1.浮动/display
2.盒子模型
3.文字样式
24.清除浮动
-
直接设置高度法
-
额外标签法:clear:both
-
单伪元素清除法
.clearfix::after{ content:''; display: block; clear: both; height: 0; visibility: hidden; }4.双伪元素清除法
.clearfix2::after, .clearfix2::before{ content: ''; display: table; } .clearfix2::after{ clear: both; }5.给父元素设置overflow:hidden
25.图片对齐方式
| vertical-align | |
|---|---|
| 默认,基线对齐 | baseline |
| 顶部对齐 | top |
| 中部对齐 | middle |
| 底部对齐 | bottom |
26.定位
标准流,浮动,定位
| 定位 | position |
|---|---|
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
| 静态定位 | static |
27.定位居中
transform: translate(-50%,-50%);
28.定位优先度
z-index:n,n越大优先度越高,如果都为0,后来者居上
29.光标类型
| 属性值(cursor) | 效果 |
|---|---|
| default | 默认值,箭头 |
| pointer | 小手,可以点击 |
| text | 工字型,可以选择文字 |
| move | 十字光标,可以移动 |
30.圆角
border-radius:半径 半径 半径 半径,左上开始顺时针
31.溢出显示
| 属性值overflow | |
|---|---|
| visible | 溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出都显示滚动条 |
| auto | 根据是否溢出决定是否显示滚动条 |
32.显示隐藏
| visibility:hidden | 占位隐藏 |
|---|---|
| display:none | 不占位隐藏 |
33.元素整体透明度
opacity 0~1,1完全不透明,0完全透明
34.背景移动
background-position
35.背景大小
background-size
| 数字+px | |
|---|---|
| 百分比 | |
| contain | 包含,背景图片等比例缩放,直到不会超出盒子 |
| cover | 覆盖,等比例缩放,直到刚好填满盒子 |
36.背景连写
background:color image repeat position/size
37.盒子阴影
box-shadow
| h-shadow | 必须,水平偏移量 |
|---|---|
| v-shadow | 必须,垂直偏移量 |
| blur | 模糊度 |
| spread | 阴影扩大 |
| color | 阴影颜色 |
| inset | 改为内部阴影 |
38.过渡
| transition | |
|---|---|
| 属性 | all:所有属性;具体名称如width |
| 时长 | 数字+s |
39.网页
link-favicon