前端基础笔记

短命女 2024-04-08 10:42 44阅读 0赞

来到北大青鸟学习了半个月，首先学了半个月的前端，记录了预科班学习的前端一些简单的布局，下面是我的一些基础笔记，过两天就要开始学java了，加油！

## html ##

#### 元素单词意思 ####

padding 内边距 align 对齐

margin 外边距 image 图像

border 边框 decoration 修饰

font 字体 width 宽度

body 身体 height 高度

size 大小 link 链接

text 文本 bold 加粗

style 样式 weight 加重

input 输入 main 主体

line-height 行高 background 背景

color 颜色 message 提示信息

#### 代码标签 ####

1：<h1></h2>一级标题 1~6 共六级 一级标题最大

2：<p></p> 段落标签

3：强调标签:

em 字体斜体 strong 字体有点加深

没有独占一行，属于行内元素

4:<br>强制换行

5:<hr>分割线

6：<del></del> 删除线

7 ：<center></center> 让元素居中

8：<div></div> 表示一个区块

9：网页布局组成

nav 网页的导航

header 网页头部

main 主体部分

aside 侧边栏

footer 网页底部

9：<span></span> 用来组合文档中的行内元素

里面只能放span或em，不能放<div>

10:列表

#### 有序列表 ####

默认数字为123 用ol创建，li表示列表项

默认样式：左边有间距，有项目符号

#### 无序列表 ####

默认样式为原点

#### 定义列表 ####

用dl创建，dt下定义（可以有多个） dd解释定义

#### 注：type改变属性 ####

有序列表可以更改为a A l i <ol type =" ">

无序列表 <ul type =" ">

disc 默认值 ，实心原点 square 实心方块 circle 实心的圆

列表可以嵌套使用，相互嵌套

11：使用img标签向网页中引入一个外部图片

四个属性

src属性 引入图片路径

alt属性 对图片的描述，它会在图片上引入不成功的时候，显示文字

width属性 设置图片的宽度

height属性 设置图片的高度

src

<img src " ./ " >同一目录下 ./

<img src " ../ " > 跳出当前目录 ../

12:超链接

<a href = " ">什么都能放</a>

属性href+填写地址 （绝对地址或相对地址）

target 控制超链接打开方式

\_\_\_self 在当前页面打开跳跃的超链接（默认值）

\_\_\_blank 新页面打开

空链接

![bcf945fef48e4c2b8618c5a0c3471091.png][]

## css ##

1：color设置字体颜色

2：backgroundcolor设置背景颜色

3：font-size设置字体大小

4：text-decoration：none去掉链接下划线

5：li\{

list-style:none;

\}去掉项目符号

6：fist-child第一个子元素

7：last-child最后一个子元素

8：li last-child\{

color:red;

\}某行一直为红色

9：去除默认样式

\*\{

padding：0

margin：0

list-style：none

text-decortion：none

10：将元素隐藏 display：none

11： 移入出现

div：hover>span\{

display:inline-block;

12:过渡效果 transition: all 3s（时间）

13：设置行高一样

text-align：center（文字居中）

line-height：xxpx（与行高设置一样）

14：hover鼠标移入后，元素的状态

a:hover\{

font-size：30px；

color：red；

\}移入变大变红

p:\{

background-color：pink

\}移入背景为粉色

15：active 鼠标点击后元素的状态

div：active（与hover用法一样）

16：id属性值带\#\{\}独一无二的，首字母为字母

class属性值带.\{\}

这些就是部分一些语法，多多指教

###  ###

[bcf945fef48e4c2b8618c5a0c3471091.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/79d57f33761840819e46d4a38cab62c7.png

前端基础笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端基础笔记

相关 2020-web前端-JavaScript基础笔记

相关前端学习笔记(八)前端框架之vue基础

相关前端基础学习笔记盒模型

相关前端基础学习笔记 CSS选择器

相关前端基础学习笔记选择器（高级）

相关前端基础学习笔记定位

相关前端基础学习笔记表单

相关前端基础学习笔记表格

相关前端基础学习笔记弹性盒子模型