overlord-lxy

前端学习笔记

目录

一、VScode

（一）VScode快捷键

生成浏览器文件html的快捷方式
! + 回车
代码格式化：Shift+Alt+F
向上或向下移动一行：Alt+Up或Alt+Down
快速复制一行代码：Shift+Alt+Up或Shift+Alt+Down
快速保存：Ctrl+S
快速查找：Ctrl+F

二、HTML5与基础骨架

HTML5的DOCTYPE声明
<!DOCTYPE html>位于文档最前面，避免浏览器的怪异模式
HTML5基本骨架

  • html标签
  • head标签
  • title标签
  • meta标签：描述HTML网页文档的属性、关键词等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

三、标签

（一）标题

标题通过<h1>到<h6>标签进行定义
<h1>定义最大的标签，<h6>定义最小的标签

生成h1-h6快捷键：h$*6

VSCode插件
快速打开浏览器
扩展 -> 搜索open in browser -> 点击安装

（二）段落

段落是通过<p>标签定义的

（三）换行

不产生新段落的情况下进行换行，使用<br>
<br/>元素是一个空的HTML元素

（四）水平线

<hr/>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>
属性：

  • color：设置水平线的颜色
  • width：设置水平线的宽度
  • size：设置水平线的高度
  • align：设置水平线的对齐方式（默认居中），可取值left | right

（五）图片

<img>标签定义HTML页面中的图像

<img>是单标签
<img src="" alt="" title="" width="" height="">
属性：

  • src：路径（图片地址与名字）
  • alt：规定图像的替代文本
  • width：规定图像的宽度
  • height：规定图像的高度
  • title：鼠标悬停在图片上给予提示

图片路径：

  • 绝对路径：电脑的盘符存储与访问的具体地址
  • 相对路径：两者相对关系，两者在同一路径下可以直接访问
    • 子集关系：/
    • 父集关系：../
    • 同集关系：./
  • 网络路径：具体的网络地址

（六）超文本链接

HTML使用标签<a>来设置超文本链接
<a href="url">链接文本</a>
超链接属性：
在标签<a>中使用了href属性来描述链接的地址
默认情况下

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带有下划线
  • 点击链接时，链接显示为红色并带有下划线
    超链接表现：
    当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

（七）文本

常用文本标签

标签 说明
em 定义着重文字
b 定义粗体文字
i 定义斜体字
strong 定义加重语气
del 定义删除字
span 元素没有特定的含义

（八）列表标签

1、有序列表

有序列表是一列项目，列表项目使用数字进项标记。有序列表始于<ol>标签，每个列表项始于<li>标签
type属性
<ol>的属性type拥有的选项

  • 1 表示列表项目用数字标号（1,2,3……）
  • a 表示列表项目用小写字母标号（a,b,c……）
  • A 表示列表项目用大写字母标号（A,B,C……）
  • i 表示列表项目用小写罗马数字标号（i,ii,iii……）
  • I 表示列表项目用大写罗马数字标号（I,II,III……）

列表是可以嵌套的

2、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点进行标记
无序列表始于<ul>标签。每个列表项始于<li>标签
type属性
<ul>的属性type拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

快捷键：
快速生成ul+li的布局：ul>li*n(n为需要的li数量)

（九）表格

表格组成与特点：
行、列、单元格
单元格特点：同行等高，同列等宽
表格标签：
表格：<table>
行：<tr>
单元格（列）：<td>

快捷键：
快速生成表格结构：table>tr*m>td*n{文本信息}

表格属性：

  • border：设置表格的边框
  • width：设置表格的宽度
  • height：设置表格的高度

表格单元格合并

  • 水平合并：colspan
  • 垂直合并：rowspan

（十）form表单

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框、提交按钮等，这些输入框、提交按钮叫做控件，表单就是容器，能够容纳各种各样的控件
<form action="url" method="get|post" name="myform"></form>
属性说明：
action服务器地址
name表单名称
method中Get和Post的区别：

  • 数据提交方式，get提交的数据url可以看到，post看不到
  • get一般用于提交少量数据，post用来提交大量数据

表单元素：
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

  • 1、文本框
    文本域通过<input type="text">标签来设定，当用户要在表单中输入字母、数字等内容时，就会用到文本域
  • 2、密码框
    密码字段通过标签<input type="password">来定义
    密码字段字符不会明文显示，而是以星号或圆点替代
  • 3、提交按钮
    <input type="submit">
    <input type="submit" value="名称">

（十一）容器标签

<div>
H5新标签：

  • <header></header>头部
  • <nav></nav>导航
  • <section></section>定义文档中的节，比如章节、页眉、页脚
  • <aside></aside>侧边栏
  • <footer></footer>脚部
  • <article></article>代表一个独立的、完整的相关内容块

四、内联元素和块级元素的区别

块级元素 内联元素
块元素会在页面中独占一行（自上向下垂直排列） 行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性 行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素 一般内联元素包含内联元素不包含块级元素

常见块级元素：
div、form、h1-h6、hr、p、table、ul等

常见内联元素（行内元素）：
a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）
button、img、input等

五、CSS

CSS样式表，CSS文件后缀名为css，用于HTML文档中元素样式的定义

（一）语法：

CSS规则由两个主要的部分构成：选择器以及一条或多条声明
选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是设置样式属性，每个属性有一个值，中间用冒号隔开
声明用分号隔开

（二）CSS的引入方式：

内联样式（行内样式）：
在相关的标签内使用样式（style）属性。Style属性可以包含任意CSS属性
内部样式：
当单个文档需要特殊的样式时，使用内部样式表。使用<style>标签在文档头部定义内部样式表
外部样式：
当样式需要应用于很多页面时，使用外部样式表，每个页面使用<link>标签链接到样式表，<link>标签在（文档的）头部
<link rel="stylesheet" type="text/css" href="xxx.css">

（三）选择器

全局选择器*{}
可以与任何元素匹配，优先级最低，一般做样式初始化

元素选择器
HTML文档中的元素，p、b、div、a、img、body等

类选择器
规定用圆点.来定义，针对想要的所有标签使用
class属性的特点：

  • 类选择器可以被多种标签使用
  • 类名不能以数字开头
  • 同一个标签可以使用多个类选择器，用空格隔开

ID选择器
针对某一个特定的标签来使用，只能使用一次。css中ID选择器以#来定义

ID是唯一的，ID不能以数字开头

合并选择器
语法：选择器1，选择器1……{}
作用：提取公共的样式，减少重复代码

选择器优先级：
CSS中，权重用数字衡量
元素选择器的权重为：1
class选择器的权重为：10
id选择器的权重为：100
内联样式的权重为：1000
优先级从高到低：
行内样式>ID选择器>类选择器>元素选择器

（四）字体属性

CSS字体属性定义字体，颜色，大小，加粗，文字样式

1、color
规定文本的颜色

div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0,0.5);}

2、font-size
设置文本大小

3、font-weight
设置文本的粗细

值 描述
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100-900 定义由细到粗，400等同默认，700等同bold

4、font-style
指定文本的字体样式

值 描述
normal 默认值
italic 定义斜体字

5、font-family
font-family属性指定一个元素的字体

每个值用逗号分开
如果字体名称包含空格，必须加上引号

（五）背景属性

属性 描述
background-color 设置背景颜色
background-image 设置背景图片
background-position 设置背景图片显示位置
background-repeat 设置背景图片如何填充
background-size 设置背景图片大小属性

background-repeat属性
设置如何平铺背景图片

值 描述
repeat 默认值
repeat-x 只向水平方向平铺
repeat-y 只向垂直方向平铺
no-repeat 不平铺

background-size属性
设置背景图像的大小

值 说明
length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover 保持图片纵横比将图片缩放成完全覆盖背景区域的最小大小
contain 保持图片纵横比将图片缩放成适合背景定位区域的最大大小

background-position属性
设置背景图片的起始位置，其默认值是：0% 0%

值 说明
left top 左上角
left center 左中
left bottom 左下
right top 右上角
right center 右中
right bottom 右下
center top 中上
center center 中中
center bottom 中下
x% y% 第一个位置是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%。如果只指定了一个值，其他默认值是50%
xpos ypos 单位是像素 
<div class="box"></div>
.box{
    width: 400px;
    height: 400px;
    background-image: url("图片地址");
    background-repeat: no repeat;
}

（六）文本属性

text-align
指定元素文本的水平对齐方式

值 描述
left 文本居左排列，默认值
right 把文本排列到右边
center 把文本排列到中间

text-decoration
text-decoration属性规定添加到文本的修饰，下划线、上划线、删除线等

值 描述
underline 定义下划线
overline 定义上划线
line-through 定义删除线

text-transform
text-transform属性控制文本的大小写

值 描述
captialize 定义每个字母开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母

text-indent
规定文本块中首行文本的缩进

负值是允许的，如果值是负数，将第一行左缩进

（七）表格属性

表格边框
指定CSS表格边框，使用border属性

折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开

表格宽度和高度
width和height属性定义表格的宽度和高度

表格文字对齐方式
text-align属性设置水平对齐方式，向左，右或中心
vertical-align垂直对齐属性设置垂直对齐

表格填充
padding控制空格之间的边框

表格颜色

table, td, th { border:1px solid red;}
td {background-color:blue;color:white;}

（八）关系选择器

1、后代选择器

E F{}
选择所有被E元素包含的F元素

2、子代选择器

E>F{}
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用

3、相邻兄弟选择器

E+F{}
选择紧跟E元素后的F元素，选择相邻的第一个兄弟元素，只能向下选择

4、通用兄弟选择器

E~F{}
选择E元素之后的所有兄弟元素F，作用于多个元素

（九）CSS盒子模型（BOX Model）

外边距（margin），边框（border），内边距（padding）和实际内容（content）

CSS弹性盒内容

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
默认弹性盒里内容横向摆放

父元素上的属性
display属性
display：flex：开启弹性盒，属性设置后子元素默认水平水平排列

flex-direction属性：
flex-direction属性指定了弹性子元素在父容器中的位置
语法：

flex-direction: row | row-reverse | column | column-reverse
  • row：横向从左到右排列（左对齐），默认的排列方式
  • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
  • column：纵向排列
  • column-revrse：反转纵向排列，从后往前排，最后一项排在最上面

justify-content属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

  • flex-start
  • flex-end
  • center

align-items属性
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

  • flex-start
  • flex-end
  • center

子元素上的属性
flex-grow/flex
flex-grow 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间，默认为0

（十）文档流

  • 高矮不齐，底边对齐
  • 空白折叠现象
    • 无论多少个空格、换行、tab都会折叠为一个空格
    • 想要让img标签之间没有空隙，必须紧密链接

使一个元素脱离标准文档流有三种方式：

  • 浮动
  • 绝对定位
  • 固定定位

1、浮动

float属性定义元素在哪个方向浮动，任何元素都可以浮动

值 描述
left 元素向左浮动
right 元素向右浮动
浮动的原理 * 浮动以后使元素脱离了文档流 * 浮动只有左右浮动，没有上下浮动

浮动的副作用：

  • 浮动元素会造成父元素高度塌陷
  • 后续元素会受到影响

清除浮动：
当父元素出现塌陷时，对布局是不不利的

  • 父元素设置高度
  • 受影响的元素增加clear属性，clear:both;
  • overflow清初浮动
  • 伪对象方式

定位
position属性指定了元素的定位类型

值 描述
relative 相对定位
absolute 绝对定位
fixed 固定定位
其中：绝对定位和固定定位会脱离文档流

设置定位后，可以使用四个方向值进行调整位置：left、top、right、bottom

相对定位和绝对定位是相对与具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

Z-index
Z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

（十一）CSS3属性

圆角

border-radius属性

  • 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  • 三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
  • 两个值：第一个值为左上角和右下角，第二个值为右上角和左下角
  • 一个值：四个圆角值相同

阴影

box-shadow向框添加一个或多个阴影

box-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必选，水平阴影的位置
v-shadow 必选，垂直阴影的位置
blur 可选，模糊距离
color 可选，阴影的颜色 
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);

动画

@keyframes创建动画

@keyframes name {
    from|0%{
        CSS样式
    }
    percent{
        CSS样式
    }
    to|100%{
        CSS样式
    }
}

name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；

animation执行动画

animation: name duration timing-function delay iteration-count direction;
值 描述
name 设置动画的名称
duration 设置动画的持续时间
timing-function 设置动画效果的速率
delay 设置动画的开始时间（延时执行）
iteration-count 设置动画循环的次数，infinite为无限次数的循环
direction 设置动画播放的方向
animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值 描述
ease 逐渐变慢（默认）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
direction值 描述
normal 向前播放（默认）
alternate 动画播放在偶数次向前播放，第奇数次向反方向播放

媒体查询

媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签

posted on 2024-07-06 07:41  李向宇  阅读(8)  评论(0)  编辑  收藏  举报

导航