目录:
前言:
该篇是基于b站 3小时前端入门教程(HTML,CSS,JS)所做出来的笔记,方便读者在观看视频之后,查阅这份笔记来进行复习,具体了解,请前往原作品3小时前端入门教程(HTML,CSS,JS)
HTML标签:
HTML全称是`Hypertext Markup Language(超文本标记语言),HTML,通过一系列的标签(也称为元素),来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键字。
标签通常成对出现,包括开始标签和结束标签(也称为双标签),内容位于这两个标签之间:
除了双标签,也存在单标签,例如:
区别:单标签用于没有内容的元素,双标签用于有内容的元素
HTML属性:
属性在 HTML,中起到非常重要的作用,它们用于定义元素的行为和外观,以及与其他元素的关系。
基本语法:
<开始标签 属性名="属性值">
每个HTML元素可以具有不同的属性
属性名称不区分大小写,属性值对大小写敏感
块元素(block):
块级元素通常用于组织和布局页面的主要结构和内容,例如段落、标题、列表、表格等。它们用于创建页面的主要部分,将内容分隔成逻辑块。
1、块级元素通常会从新行开始,并占据整行的宽度,因此它们会在页面上呈现为一块独立的内容块。
2、可以包含其他块级元素和行内元素。
3、常见的块级元素包括`div>`,`<p>`,`<h1>`到`<h6>`,`<u1>`,`<ol>`,`<li>`,`<table>`,`<form>等。
行内元素(inline):
行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素,例如超链接、强调文本等。
1、行内元素通常在同一行内呈现,不会独占一行。
2、它们只占据其内容所需的宽度,而不是整行的宽度。
3、行内元素不能包含块级元素,但可以包含其他行内元素。
4、常见的行内元素包括`span>,<a>,<strong>`,`<em>`<img>`,`<br>,<input>等。
CSS 简介:
1、CSS 全名是`cascading style sheets`,中文名 层叠样式表`。
2、用于定义网页样式和布局的样式表语言。
3、通过 CSS,你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式,从而实现更精确的页面设计。
CSS 语法 :
CSS 通常由选择器、属性和属性值组成,多个规则可以组合在一起,以便同时应用多个样式。
1、选择器的声明中可以写无数条属性。
2.声明的每一行属性,都需要以英文分号结尾。
3、声明中的所有属性和值都是以键值对这种形式出现的。
示例:
CSS 三种导入方式:
1、内联样式(Inline styles)
2、内部样式表(Internal Stylesheet)
3、外部样式表(External Stylesheet)
三种导入方式的优先级:内联样式>内部样式表>外部样式表
选择器:
选择器是 CSS中 的关键部分,它允许你针对特定元素或一组元素定义样式
1、元素选择器
2、类选择器
3、ID 选择器
4、通用选择器
5、子元素选择器
6、后代选择器
7、并集选择器
8、后代选择器(包含选择器)
9、并集选择器(兄弟选择器)
10、伪类选择器
示例1:
示例2:
属性连续赋值
盒子模型
传统网页布局方式 :
在学习浮动之前,先了解传统的网页布局方式
网页布局方式有以下五种:
1、标准流(普通流、文档流):网页按照元素的书写顺序依次排列
2、浮动
3、定位
4、`Flexbox`和`Grid`(自适应布局)
5、标准流·是由块级元素和行内元素按照默认规定的方式来排列,块级就是占一行,行内元素一行放好多个元素。
浮动:
元素脱离文档流,根据开发者的意愿漂浮到网页的任意方向。
浮动·属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘,这样即可使得元素进行浮动。
语法:
选择器{
float:left/right/none;
}
注意:浮动是相对于父元素浮动,只会在父元素的内部移动
浮动的三大特性:
1、脱标:脱离标准流。
2、一行显示,顶部对齐。
3、具备行内快元素特性。
定位:
定位布局可以精准定位,但缺乏灵活性.
定位方式:
1、相对定位:相对于元素在文档流中的正常位置进行定位。
2、绝对定位:相对于其最近的已定位祖先元素进行定位,不占据文档流。
3、固定定位:相对于浏览器窗口进行定位。不占据文栏流,固定在屏幕上的位置,不随滚动而移动。
相对定位:
例如,如果你将一个元素设置为相对定位,并且将 top: 20px; left: 30px;
应用于它,那么该元素将在其原始位置的基础上向下偏移 20 像素,向右偏移 30 像素。
总而言之,相对定位是相对于元素自身在文档流中的位置进行定位的,而不是相对于其他元素的位置。
绝对定位:
在 HTML 中,绝对定位(Absolute positioning)是相对于元素的最近的已定位(positioned)祖先元素进行定位的,如果不存在已定位的祖先元素,则相对于最初的包含块(通常是文档的 <body>
元素)进行定位。
绝对定位通过 position: absolute;
CSS 属性来实现。一旦设置了绝对定位,元素会从文档流中脱离出来,并且不再占据文档流中的位置,而是根据其最近的已定位祖先元素进行定位。
可以使用 top
、right
、bottom
和 left
属性来指定元素相对于其包含块的偏移量。包含块是指最近的已定位祖先元素,如果不存在已定位的祖先元素,则包含块是初始包含块(通常是文档的 <html>
元素)。
总而言之,绝对定位是相对于元素的最近的已定位祖先元素进行定位的,如果不存在已定位的祖先元素,则相对于初始包含块进行定位。
固定定位:
在 HTML 中,固定定位(Fixed positioning)是相对于浏览器窗口进行定位的,而不是相对于元素的父级元素或文档流的位置。
固定定位通过 `position: fixed;` CSS 属性来实现。一旦设置了固定定位,元素会从文档流中脱离出来,并且不再占据文档流中的位置,而是相对于浏览器窗口进行定位。这意味着即使用户滚动页面,固定定位的元素也会保持在相同的位置。
可以使用 `top`、`right`、`bottom` 和 `left` 属性来指定元素相对于浏览器窗口的偏移量。
固定定位常用于创建固定的导航栏、悬浮广告等需要始终保持在屏幕可视区域内的元素。
总而言之,固定定位是相对于浏览器窗口进行定位的,使得元素始终保持在屏幕可视区域内,并且不受用户滚动页面的影响。
JavaScript:
简介:
1、JavaScript 简称 JS。
2、JavaScript 是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果,增加用户与网页的交互性。
3、作为一种客户端脚本语言,JavaScript 可以直接嵌入 HTML,并在浏览器中执行。
4、与 HTML和 CSS 不同,JavaScript 使得网页不再是静态的,而是可以根据用户的操作动态变化的。
JavaScript的作用:
1、客户端脚本:用于在用户浏览器中执行,实现动态效果和用户交互。
2、网页开发:与 HTML和 CSS 协同工作,使得网页具有更强的交互性和动态性。
3、后端开发:使用 Node.js,JavaScript 也可以在服务器端运行,实现服务器端应用的开发。
JS的导入方式:
基本语法:
事件:
事件绑定 :
JavaScript 绑定事件的方法有三种:
1、HTML属性。
2、DOM属性。
3、addEventListener方法。