前端必须要知道的知识

最新推荐文章于 2025-02-02 21:44:17 发布

原创最新推荐文章于 2025-02-02 21:44:17 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

1.字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312；
gb2312简单中文，包括6763个汉字；
BIG5繁体中文，港澳台等用；
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312；
UTF-8则包含全世界所有国家需要用到的字符；

记住一点：以后我们统统使用UTF-8字符集，这样就避免出现字符集不统一而引起乱码的情况了。
2.标题标签

单词缩写：head 头部、标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即：

image.png

标题标签语义：作为标题使用，并且依据重要性递减!

image.png

其基本语法格式如下：

image.png

注意：h1标签因为重要，尽量少用，一般h1都是给logo使用。
3.段落标签

单词缩写：paragraph 段落
在网页中要把文字有条理的显示出来，离不来段落标签，就如同写文章需要首行缩进、需要分段一样，整个网页也可以分为若干个段落。
段落标签：

image.png

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。例如以下的文本，就随着窗口大小的变化换行：

image.png
4.水平线标签

单词缩写：horizontal横线
在网页中常常看到一些水平线讲段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，其基本语法格式如下：

image.png

横线如下图：

image.png

image.png
5.换行标签

在HTML中一个段落的文字会从左到右依次排列，直到浏览器窗口的右端，然后自行换行。如果希望某段文本强制换行显示，就需要使用换行标签。
<br/>
这时如果还像在word中直接敲回车键换行就不起作用了。

image.png

image.png
6.div span标签

div span是没有语义的，是我们网页布局主要的两个盒子；
div就是分割、分区的意思，其实有很多div来组合网页；
span跨度、跨距、范围。

image.png
7.文本格式化标签

在网页中有时需要为文字设置粗体、斜体或者下划线效果，这时候就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。

image.png
8.图像标签

图像标签：img
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必要属性。
<img src=“图像URL”/>

image.png
9.链接标签

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href=“跳转目标”target=“目标窗口的弹出方式”>文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
Target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
10.锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

image.png

image.png
11.base标签

base可以设置整体链接的打开状态。
<base target=“blank”/>

image.png

image.png
12.特殊字符标签

image.png
13.注释标签

多写注释是非常好的写代码习惯，团队协作更顺畅。注释是写给队友看的，浏览器是不执行的。例如：

image.png
14.相对路径

路径可以分为两种：相对路径和绝对路径

相对路径：
（1）图像文件和HTML文件位于同一文件夹，只需要输入图像文件的名称即可，如<img src=“logo.gif”>.
（2）图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如<img src=“img/img01/logo.gif”/>.
（3）图像文件位于HTML文件的上一级文件夹，在文件名之前加入“../”，如果是上两级，则需要使用“../../”,以此类推，如<img src=“../logo.gif”/>.
绝对路径：
“D：webimgiogo.gif”，或者完整的网络地址。
15.无须列表

无需列表的各个列表项之间没有顺序级别之分，是并列的，起基本语法格式如下：

image.png

image.png
16.有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下:

image.png
17.自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号，其基本语法如下：

image.png
18.CSS的书写方式

书写方式有三种：嵌入式、外链式、行内式。
嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中！
语法规则：
<style type=“text/css”>
/*书写css代码*/
选择器（属性：值；属性；值）
</style>
如果我们使用的是HTML5的文档，type属性可以省略不写！

image.png

注意：
<style></style>它可以出现在HTML中的任何地方，但是一般情况我们只会将它放置在head标签里面。
外链式：
外链式是指单独写一个以.css为扩展名的文件，然后在<head></head>标签中使用<link/>标签，将这个css文件链接到html文件中。
注意：css文件不能单独的运行，它必须要依赖于HTML文件！
语法格式：

image.png

代码示例：

image.png

我们一定要确保css文件已经被正确的引入成功！

image.png

link标签可以有多个，一个HTML页面可以同时引入多个单独的css文件。

image.png

行内式：
将css代码书写在HTML标签的style属性中。
style是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：
<标签名 style=“属性：值；属性；值；”></标签名>

image.png

总结：
-使用嵌入式的方式来书写css代码，它只能作用于当前的HTML文件。
-使用外链式的方式来书写css代码，它可以作用于多个HTML文件。
19.注释

格式：
/*注释的内容*/

image.png

注意：千万不要在css代码中使用HTML的注释。
20.基本选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式。
选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

image.png

通用选择器：

image.png

标签选择器：

image.png

类选择器：

image.png

Id选择器：

image.png
21.尺寸样式属性

image.png

问：<span></span>能够设置宽度、高度吗？
答：不可以，因为span标签式一个行内元素，它是不可以设置宽度和高度的，只有块级元素才可以设置宽度与高度。
22.文本属性

image.png

image.png
23.字体属性

image.png

关于字体：一般很特殊的字体，网站上面都是使用图片来表示，是否能够显示此字体是根据用户电脑里面是否有对应的字体文件，如果没有该文件就会显示为宋体。
24.复合选择器

image.png
25.列表样式属性

这里的列表指的是：无序列表和有序列表。
在整个网页布局中无序列表使用的是最多的。

image.png

list-style-image:将列表前面的项目符号设置为一张图片，它的值是：url（图片的地址）

list-style：这个属性是一个简写属性，它集成了上面三个属性的功能，可以同时设置上面的三个属性，每一个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以有三个，其属性值个数不定，位置也不定！

image.png
26.伪类选择器

伪类选择器是用来给超级链接的不同状态设置样式。
超级链接的不同状态：
-正常状态超链接没有被访问 :link
-访问过后状态超链接已经被访问 :visited
-鼠标放上状态鼠标放在超链接上面，但是并没有将鼠标的左键按下去 :hover
-激活状态鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active
伪类选择器都是带有冒号“：”

image.png

:link

image.png

:visited

image.png

:hover

image.png

:active

image.png

注意：
超链接的不同状态它其实是有顺序，也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序，那么样式就会失效。
顺序：要遵守“爱恨原则”，要先有爱，才有恨。
27.属性选择器

属性选择器它是与标签的属性名和属性值有关。
属性选择器是通过标签的属性名和属性值来匹配元素。
attr是英文单词“attribute”的简写，中文意思“属性” 属性名
val是英文单词“value”的简写，中文意思是“值” 属性值

image.png
28.JavaScript语句

程序的三种基本结构
顺序结构：从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的；
分支结构：根据不同的情况及判断，执行对应代码；
循环结构：重复执行一段代码；
If判断：

image.png

switch-case的用法：

image.png

While循环：

image.png

do-while循环：

image.png

For循环：

image.png

Continue和break
break立即跳出整个循环，即循环结果，开始执行循环后面的内容；
continue立即跳出当前循环，继续下一次循环。

image.png

代码的执行流程分为顺序、分支和循环三种结构，顺序结构是默认的，判断结构主要有if-else和switch-case两种，循环结构有while、do-while、for三种，其中continue和break是跳出循环。
————————————————
版权声明：本文为优快云博主「xzj6266」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/xzj6266/article/details/120948250