前端笔记试发

嘁嘁柒柒七七七

已于 2023-03-24 10:51:43 修改

阅读量165

点赞数

文章标签：前端 html css javascript

于 2023-03-16 18:59:03 首次发布

本文链接：https://blog.csdn.net/m0_74425301/article/details/129594374

版权

常用快捷键

按键	效果	按键	效果
`Ctrl` + `Enter`	切换下一行	`Alt`+`Shift`+`↓`	向下拷贝
`Ctrl` + `/`	注释	`Win` + `D`	回到桌面

🚩HTML

1.1 html元素(element)速查

HTML(HyperText Markup Language):超文本标记语言；
html元素格式:<开始标签属性1="值" 属性2='值'>内容</结束标签>;
html元素参考 - MDN。

1.2 html结构

！+回车快速生成html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>
</html>

lang=“zh-CN"或"en”；
head元素内编写配置信息(也称为元数据[meta data])
charset(字符编码)。

1.3 html元素

常见元素：

p、h元素；img、a、iframe元素；div、span元素；
ul、ol、li元素；button、input元素；
table、thead、tbody、thead、th、tr、td。

1、h元素(heading)

2、p元素(paragraph)

3、img元素：单标签、可替换元素

绝对(absolute)路径：

网址、盘符

相对(relative)路径：

. 代表当前文件夹，可以省略；
… 代表上级文件夹；
对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 / ，而不是 \ 。

① src(source)属性：本地、网络路径；

② alt属性：当图片加载不成功时，显示这段文本；

③ ~~width、height、border~~。

4、a元素(锚anchor)

① href(Hypertext Reference)属性：本地、网络路径(url、下载内容、邮箱跳转)；

② target属性：

_self：默认值；
_blank：在一个新的窗口中打开URL。

设置锚链接：

<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">HYMiniMall</a>
<a href="mai1to:3021523556@qq.com">发邮件到qq邮箱</a>

设置id，用#id链接
<p id="one"></p>
<a href="#one">段落一</a>

图片链接，a和img结合运用
<a href=""><img src="../image/01.jpg" alt="图片"></a>

5、iframe元素

① src(source)属性；

② frameborder属性：1显示；0不显示；

③ a元素target的其他值(配合iframe):

_parent：在父窗口(上一个窗口)中打开URL；
_top：在顶层窗口中打开URL。

6、span、div(division)元素🔥

相同：div元素跟span元素都是纯粹的容器,也可以称作"盒子",都是用来包裹内容的；
区别：div：块级元素，独占一行；

span：显示在同一行，强调文字。

7、不常用元素

strong元素：加粗；
i元素：斜体；
code元素：等宽字体，用于代码；
br元素：换行；
hr元素：分割线。

8、全局元素

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式时标识元素；
class：单元素可以设定多个class、用空格隔开，它允许css,js通过类选择器(或者dom方法)选择和访问特定的元素；
style：给元素添加内联样式；
title：给元素添加提示文本。

9、link元素

① href属性；

② rel属性：指定链接类型，常见链接类型

icon：站点图标；
stylesheet：css样式表；
dns-prefetch：dns预解析。

1.4 补充

1、字符实体

字符实体

2、url相关

url标准格式:

[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源；

URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号。

URL是URI的一个子集

3、SEO优化

搜索引擎优化（search engine optimization）:

提高网站在搜索引擎内的排名；
元素语义化(用正确的元素做正确的事情。),有利于SEO。

4、字符编码

🪄CSS

2.1 css文档速查

CSS(Cascading Style Sheet):层叠样式表；
css格式:属性: 属性值;
css官方文档:W3C；
CSS推荐文档:MDN；
可以到https://caniuse.com/查询CSS属性的可用性。

2.2 css运用

1、内联样式(inline style)

也称为行内样式，存在于html元素的style属性之中。

<div style="color:▣red; font-size； 20px;">我是div元素</div>

2、内部样式表(internal style sheet)

也称为文档样式表（document style sheet）、内嵌样式表（embed style sheet）；
将CSS放在HTML文件元素里的

<head>
  <title>Document</title>
  <style>
    .title {
	  margin: 20px 0;
	  font-size: 24px;
	  font-weight: 700;
    }
    .box {
	  width: 100px;
	  height: 100px;
	  background-color: ▣red;
    }
  </style>
</head>

3、外部样式表(external style sheet)

将css编写一个独立的文件中，并且通过元素引入；

<head>
  <title>Document</title>
  <link rel="stylesheet"href="./css/styles.css">
<head>
  
/* css */
div {
  font-size: 24px;
  font-weight: 700;
  color: ▣red;
}

4、@import

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

/* 新建index.css */
@import url(./text.css); 或者 @import "./text.css";

2.3 css属性

1、文本属性

① text-decoration(常用)

none；开发中使用reset.css去除默认属性
underline(a元素默认)；
overline；
linethough：删除线。

② text-transform(用JS替代)

none；
capitalize：资本化，首字母大写；
uppercase：全部大写；
lowercase：全部小写。

③ text-indent

首行缩进，单位 px 或 2em(缩进2个字符)。

④ text-align(重要)

行内级元素通用的对齐方式(块级元素可用display: inline-block;转行内)

left；
right；
center；
justify：两端对齐(对最后一行无效，须使用text-align-last单独设置)。

⑤ letter-spacing、word-spacing

分别用于设置字母、单词之间的间距；
默认是0，可以设置为负数。

2、

2.x 补充

1、计算机中的进制

某进制：达到某数时，进一位：

二进制(0b开头, binary)；

八进制(0o开头, Octonary)；

十六进制(0x开头, hexadecimal)：其中的数字由0~9和字母a-f组成(大小写都可以)。

其他进制转十进制

二进制的1001转成十进制: 1 * 2³ + 0 * 2² + 0 * 2 + 1 = 9；
八进制的1234转成十进制: 1 * 8³ + 2 * 8² + 3 * 8 + 4 = 668；
十六进制的522转成十进制: 5 * 16² + 2 * 16 + 2 = 1314。

二进制转其他进制

二进制转八进制：从右向左，三位转成一位八进制，不足三位补0；
二进制转十六进制：从右向左，四位转成一位十六进制，不足四位补0。

2、CSS中的颜色

① 直接使用颜色单词color: red;

② 使用 rgb(R, G, B, A)

R，G，B取值 0~255 或 0~100%；
A(alpha)设置透明度(1为不透明) 0~1 或 0~100%。

color: rgb(255, 255, 255)；

③ 使用 #十六进制

color: #ffffff; 或者 color: #fff;

🚀JavaScript

3.1