weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

Web前端知识点总结（HTML、CSS、JS）_web前端知识点总结

作者：weixin_40725706 | 2024-02-22 06:32:05

踩

web前端知识点总结

一、前端

前端概念：前端是网站前后台部分，能在PC端、移动端等浏览器界面上展示给用户浏览的网页窗口。

在进入前端的学习之前，需要先去了解熟悉一下以下几种名词解释

HTML ------ Hypertext Markup Language，超文本标记语言
- HTML是一种用来描述网页内容和结构的一种语言。
HTML5 ------ 是HTML语言的最新标准。
- HTML5比以往的版本新增许多更加强大的功能。
- 并且Android和iOS系统都对HTML5支持度高，能实现同样的代码都能在双平台运行实现。
CSS —— Cascade Style Sheet，层叠样式表
- 在HTML中我们通常会将网页的内容描述其中，CSS就好像一件漂亮的衣服，装饰着网页中的内容。
JavaScript 简称（“JS”）
- 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
- 是一种解释型或即时编译型的编程语言，它的解释器被称为JavaScript引擎。
  -广泛用于客户端的脚本语言，用于实现页面内容与用户的交互。
jQuery
- 用于简化网页中的JS编写
- jQuery提供理论四个方面的简化方法：DOM操作、事件处理、动画函数、AJAX封装。

二、HTML介绍

HMTL的基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
1
2
3
4
5
6
7
8
9

— <!DOCTYPE> 声明—
- 它不是html标签，只是为浏览器提供的一项声明，意为你所使用的HTML的版本。
- 自从HTML创建以来，有许许多多个版本，只有正确的向浏览器声明HTML的版本，你所编写的代码才能正确的显示运行。
HTML标签与元素的介绍
- 一个HTML文件是由一系列的元素和标签来组成的。
- HTML的标签是分为单独出现和成对出现两种形式
  - 成对出现的标签仅作用于：成对标签其包含的的部分。
  - 单独出现的标签<元素名字>：作用于相对应元素插入的位置（例如：
    换行）
HTML文件跟其他编译软件一样，需要注意文件乱码的情况
- 需要在head标签内部的meta标签中，设置编码方式为utf-8。
- 同时创建文件的时候也需要把编码格式设置为uft-8。

1.在这里提一下平时自己学习一个方法，基本上在学习编程语言的过程中，会接触到许多关键词和单词。

2.自己都会去百度一下关键词的全称是怎么意思，以及如何拼写。这也算一个学习英语陌生单词的过程，从JavaSE到前端三剑客(html、css、js)自己也积累了许多单词。

3.自己渐渐发现，这个过程也能帮助自己提升对编程语言的学习。

HMTL的文本标签

< h1 > ~ < h6 >:标题标签（head：头部标题）
- < h1 >代表最大的标题，< h6 >代表最小的标题
- 作为标题使用，按照标题重要性依次递减。
< p >段落标签 (paragraph:段落)
- 在日常生活中，网页中要想把文字有段落感显示出来，就离不开段落p标签。
- p标签是一个文本及标签，里面只能放文字、图片、表单元素。
- p标签默认情况下，是独占一行，后面的内容会自动换行。
< hr >水平线标签(horizontal:横线)
- hr标签是单标签。
- 通过hr标签能使文档结构更加清晰，增加层次感。

		<h2>这是hr标签上面的文字</h2>
		<hr>
		<h2>这是hr标签下面的文字</h2>
1
2
3

在这里插入图片描述

< br >换行标签（break：换行、打断）
- br标签是单标签
- 如果希望某段文字，显示在新的一行，那就可以使用br标签达到强制换行的效果。

<p>如果你想让后面的内容<br>显示到下方就可以使用br标签</p>
1

在这里插入图片描述

文本格式话标签

在需求中，有时候需要设置文字为粗体、斜体、下划线等等效果，这时候就需要使用HTML中的文本格式化标签来达到自己想要的效果。

标签	效果
< b>< /b>和< strong>< /strong>	文字以粗体显示
< i>< /i>和< em>< /em>	文字以斜体的方式显示
< s>< /s>和< del>< /del>	文字以加了删除线的方式显示
< u>< /u>和< ins>< /ins>	文字以加下划线的方式显示
< small>< /small>	文字定义为小号字体，比标签包含的文本字体小一号
< big>< /big>	文字定义为大号字体，比标签包含的文本字体大一号
< sub>< /sub>	定义下标文本
< sup>< /sup>	定义上标文本

例子：以<sub></sub>下标文本 
	    <sup></sup>上标文本举例
		<p>x<sup>2</sup>>+y<sup>2</sup> > x+y</p>
		-----
		CO<sub>2</sub> 二氧化碳
		</p>
1
2
3
4
5
6

在这里插入图片描述

其实html标签由很多很多，一一列举是不现实的。所以我们在日常中，需要不断的学习、积累。

HMTL的块级元素和行内元素

块级元素
- 块级元素是：占据一整行，其宽度自动填满父元素宽度，垂直向下排列。
- 块级元素：可以设置宽高和外边距。
- 块级元素内可以包含其他块级元素和行内元素。
行内元素
- 行内元素和其他行内元素都会在同一行上水平排列。
- 行内元素不可以设置宽高，宽度高度都会随着文本内容的变化而变化，但是行内元素可以设置行高(line-height)，如果设置外边距margin上下无效，margin左右有限，padding可以随意设置。
- 需要注意的是行内元素不可以包含块级元素，只能包含文本或者其他行内元素。
块级元素和行内元素的相互转换
- 块级元素和行内元素：可以通过display属性来互相切换（display：inline，display：block）
常见的块级元素和行内元素
- 常见的块级元素：div、p、h、form、table、li、ul、ol。
- 常见的行内元素：span、label、a、input、img。

HMTL的锚点设置

在日常需求中，常常会遇到想要从网页底端回到网页顶端，甚至是你想要达到的地方。
这里就可以通过a标签使用定义锚点的名字，来达到跳转到指定位置的效果。

锚点的运用，可以让自己的界面跳转更加自然，方便。所以合理的设置锚点可以让用户体验更加自然。

<!-- 设置一个顶部的标记 -->
		<a name="top" ></a>
<!-- 通过定义的锚点的名字top，跳转到锚点所在位置 -->
		<a href="#top">回到顶部</a>
1
2
3
4

HMTL标签的style属性

每个标签都由style属性，用于设置标签的样式。
1

例如：设置背景颜色为天蓝色（background-color:skyblue）
例如：设置边框border（border：1px solid green）
例如：设置宽高（ width: 100px;height: 100px）

<div style="background-color: skyblue;
					 border: 1px solid black;
					 width: 100px;height: 100px;
		 ">
		 </div>
1
2
3
4
5

在这里插入图片描述

HMTL的img标签

img标签的功能是引用一张存在的图片，然后在预先设定好的位置上显示图片。
1

src：应用图片资源的路径
- 相对路径：根据当前文件所在的位置，去寻找其他资源文件（ ./表示当前目录）
- 绝对路径：从根目录开始的路径
- alt：这个属性是预防图片如果没有正常加载成功，则会显示alt的文字说明，显示提前设置好的提示信息。

### HMTL的列表标签

列表标签分为有序标签(ol：Orderly label)和无序标签(ul：Unordered label)
1

<ul>
			<li>无序标签</li>
			<li>是小黑圆点</li>
		</ul>
		<ol>
			<li>有序标签</li>
			<li>是数字排序</li>
		</ol>
1
2
3
4
5
6
7
8

在这里插入图片描述

以上就是HTML中的一些基础知识，由于篇幅有限的原因，后面CSS、JS的知识点，我会以网址链接跳转的方式，这样也方便大家阅读。

CSS 知识点总结篇>>>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/128907

Web前端 知识点总结（HTML、CSS、JS）_web前端知识点总结

一、前端

二、HTML介绍

HMTL的基本结构

HMTL的文本标签

HMTL的块级元素和行内元素

HMTL的锚点设置

HMTL标签的style属性

HMTL的img标签

Web前端知识点总结（HTML、CSS、JS）_web前端知识点总结