Web前端 知识点总结（HTML、CSS、JS）
Web前端 知识点总结（HTML、CSS、JS）
·
一、前端
- 前端概念：前端是网站前后台部分，能在PC端、移动端等浏览器界面上展示给用户浏览的网页窗口。
在进入前端的学习之前，需要先去了解熟悉一下以下几种名词解释
- HTML ------ Hypertext Markup Language，超文本标记语言
- HTML是一种用来描述网页内容和结构的一种语言。
- HTML是一种用来描述网页内容和结构的一种语言。
- HTML5 ------ 是HTML语言的最新标准。
- HTML5比以往的版本新增许多更加强大的功能。
- 并且Android和iOS系统都对HTML5支持度高，能实现同样的代码都能在双平台运行实现。
- CSS —— Cascade Style Sheet，层叠样式表
- 在HTML中我们通常会将网页的内容描述其中，CSS就好像一件漂亮的衣服，装饰着网页中的内容。
- 在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>
-
— <!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>
- < br >换行标签（break：换行、打断）
- br标签是单标签
- 如果希望某段文字，显示在新的一行，那就可以使用br标签达到强制换行的效果。
<p>如果你想让后面的内容<br>显示到下方就可以使用br标签</p>
文本格式话标签
- 在需求中，有时候需要设置文字为粗体、斜体、下划线等等效果，这时候就需要使用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>
其实html标签由很多很多，一 一列举是不现实的。所以我们在日常中，需要不断的学习、积累。
HMTL的块级元素和行内元素
- 块级元素
- 块级元素是：占据一整行，其宽度自动填满父元素宽度，垂直向下排列。
- 块级元素：可以设置宽高和外边距。
- 块级元素内可以包含其他块级元素和行内元素。
- 行内元素
- 行内元素和其他行内元素都会在同一行上水平排列。
- 行内元素不可以设置宽高，宽度高度都会随着文本内容的变化而变化，但是行内元素可以设置行高(line-height)，如果设置外边距margin上下无效，margin左右有限，padding可以随意设置。
- 需要注意的是行内元素不可以包含块级元素，只能包含文本或者其他行内元素。
- 块级元素和行内元素的相互转换
- 块级元素和行内元素：可以通过display属性来互相切换（display：inline，display：block）
- 块级元素和行内元素：可以通过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>
HMTL标签的style属性
每个标签都由style属性，用于设置标签的样式。
- 例如：设置背景颜色为天蓝色（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>
HMTL的img标签
img标签的功能是引用一张存在的图片，然后在预先设定好的位置上显示图片。
- src：应用图片资源的路径
- 相对路径：根据当前文件所在的位置，去寻找其他资源文件（ ./表示当前目录 ）
- 绝对路径：从根目录开始的路径
- alt：这个属性是预防图片如果没有正常加载成功，则会显示alt的文字说明，显示提前设置好的提示信息。
### HMTL的列表标签
列表标签分为有序标签(ol：Orderly label)和无序标签(ul：Unordered label)
<ul>
<li>无序标签</li>
<li>是小黑圆点</li>
</ul>
<ol>
<li>有序标签</li>
<li>是数字排序</li>
</ol>
以上就是HTML中的一些基础知识，由于篇幅有限的原因，后面CSS、JS的知识点，我会以网址链接跳转的方式，这样也方便大家阅读。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
1- 0
已为社区贡献1条内容
所有评论(0)