当前位置：首页 > news >正文

HTML+CSS+JavaScript学习笔记~ 从入门到精通！

news 文章来源：https://blog.csdn.net/weixin_46447549/article/details/129081121 2024/11/1 4:26:36

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、HTML
- 1. 什么是HTML？
- - 一个完整的页面：
  - <!DOCTYPE> 声明
  - 中文编码
- 2.HTML基础
- - ①标签
  - - 头部元素
    - 标题
    - 段落
    - 注释
    - 水平线
    - 文本格式化
  - ②属性
- 3.HTML_CSS
- - 内联样式
  - 内部样式表
  - 外部引用
- 4.HTML应用
- - 布局
  - 表单
  - 框架
  - 脚本
- 5.资源总结
- - 颜色
  - HTML速查列表
  - 标签简写及全称
二、CSS：层叠样式表 (Cascading Style Sheets)
- 1.语法
- - CSS 规则
  - CSS 注释
- 2.class用法
- 3.其他属性值可以用到的时候再百度~
三、JS
- 1.简介
- 2.用法
- 3.输出
- 4.语法
- - 数据类型
  - 数组（Array）
  - 对象（Object）
  - 函数（Function）
  - 变量（一个名称
  - 语句
- 5.HTML中的window对象和document对象（存疑）
- 6.事件

前言

导师布置了任务，原话是“多学习一下界面开发设计，也算掌握一门技能”；我觉得老师说的对！所以，搞一下~
之前开会的时候说到过vue框架开发前端很好用，所以就先从这里入手啦~
大二的时候自己学过html＋css＋js，但是很遗憾两年没用了，现在都又还回去了QAQ 所以还是先复习一下，再学习Ajax和vue~

一、HTML

1. 什么是HTML？

HTML 是用来描述网页的一种语言，目前最新常用的版本为HTML5(2012年发布）
HTML文档也叫做 web 页面
HTML 不是一种编程语言，而是一种标记语言
HTML标签通常是成对出现的，比如和；开始：开放标签、结束：闭合标签
一个 HTML 元素包含了开始标签与结束标签，如这是一个HTML元素：

 <p>这是一个段落。</p>

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）可以读取HTML文件，并将根据其标签，将HTML页面展现给用户。

一个完整的页面：

在这里插入图片描述

<!DOCTYPE> 声明

doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本，这个一定要写！（为了防止页面渲染出错。
html5的声明为：

 <!DOCTYPE html>

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。 <meta charset="utf-8">
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

2.HTML基础

HTML元素的内容写在开始标签与结束标签之间
大多数 HTML 元素可拥有属性（写在开始标签内部，以名称/值对的形式出现，值加引号，比如：name=“value”。）
虽然html标签和属性值都对大小写不敏感，但建议使用小写标签和属性（值）
虽然
（换行标签，没有内容的空元素）目前有效，但使用
闭合一下是更长远的保障

①标签

HTML标签参考手册：https://www.runoob.com/tags/html-reference.html
常用的标签：

头部元素

在这里插入图片描述

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<base href="http://www.baidu.com/images/" target="_blank">

标签定义了文档与外部资源之间的关系，常用于链接到样式表:

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">
body {background-color:yellow;
}
p {color:blue
}
</style>

标题

通过

-

标签来定义的，1最大，6最小；浏览器会自动地在标题的前后添加空行，搜索引擎使用标题为网页的结构和内容编制索引。

段落

<p>这是一个段落</p>

注释

<!-- 这是一个注释 -->

水平线

标签在 HTML 页面中创建水平线。 #### 超链接 ```html 百度 ``` 使用 target 属性可以定义被链接的文档在何处显示（例如：target="_blank"，在新窗口打开）。 #### 图像标签也是空标签 ```html

``` alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/79de2419f4bf4e08973d59b45c21a342.png)

文本格式化

详情参考：https://www.runoob.com/html/html-formatting.html
在这里插入图片描述

②属性

HTML标准属性参考手册：https://www.runoob.com/tags/ref-standardattributes.html
一些常用的属性如下：
在这里插入图片描述

3.HTML_CSS

CSS 可以通过以下方式添加到HTML中:

内联样式

在HTML元素中使用"style" 属性

 <p style="color:blue;margin-left:20px;">这是一个段落。</p>

style属性中可以用的键有很多，例如：background-color:yellow（背景颜色）；font-family（字体）；color（颜色）；和font-size（字体大小）； text-align（文字对齐）

内部样式表

在HTML文档头部区域使用

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部引用

当同一个样式需要被应用到很多页面时，可以在头部引用外部css文件（样式表）。这样就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4.HTML应用

布局

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如: <h1>, <p>, <ul>, <table>
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器，如果与 CSS 一同使用，可以用于对大的内容块设置样式属性。

内联元素在显示时通常不会以新行开始。例如： <b>, <td>, <a>, <img>
HTML <span> 元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

表单

可以自行选定文本域、单选框、复选框、提交按钮等等

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

框架

在一个页面中展示另一个页面

<iframe src="URL"></iframe>

脚本

<script> 标签用于定义客户端脚本，比如 JavaScript。其中既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
最常用于图片操作、表单验证以及内容动态更新。

5.资源总结

颜色

html颜色：https://www.runoob.com/html/html-colors.html
颜色名：https://www.runoob.com/html/html-colornames.html
颜色值：https://www.runoob.com/html/html-colorvalues.html

HTML速查列表

https://www.runoob.com/html/html-quicklist.html

标签简写及全称

https://www.runoob.com/html/html-tag-name.html

二、CSS：层叠样式表 (Cascading Style Sheets)

1.语法

CSS 规则

构成：HTML元素，以及针对此元素的一条或多条声明：

声明由一个属性和一个值组成，属性和值被冒号“：”分开
每条声明由分号“；”结束
声明总体以大括号 {} 括起来:

为了增强可读性，可以每行只描述一个属性:

p
{color:red;text-align:center;
}

CSS 注释

/*这是一条注释*/

2.class用法

在这里插入图片描述

3.其他属性值可以用到的时候再百度~

三、JS

1.简介

JS是一种轻量级的脚本语言，脚本语言又被称为动态语言，是一种编程语言，通常以文本（如ASCII）保存，只在被调用时进行解释或编译。JS可以对事件进行反应，写入HTML输出流，甚至改变HTML的内容。
知识点：JavaScript 是脚本语言，浏览器逐行地读取执行脚本代码。而传统编程语言（c、python、java）会在执行前对所有代码进行编译。

2.用法

script标签可以放在或中，不限数量，不限位置，也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部脚本不能包含

3.输出

JavaScript 没有任何打印或者输出的函数，但可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。（使用 document.getElementById(id) 方法从 JavaScript 访问某个 HTML 元素）
使用 console.log() 写入到浏览器的控制台。

4.语法

数据类型

在 JavaScript 中有 6 种不同的数据类型：

string：字符串，可以使用单引号或双引号
number：数字，可以是整数（10）或者是小数（3.14），或者是科学计数(123e5)。
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

数组（Array）

定义数组的三种方法：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或

var cars=new Array("Saab","Volvo","BMW");

或

var cars=["Saab","Volvo","BMW"];

对象（Object）

{firstName:“John”, lastName:“Doe”, age:50,eyeColor:“blue”}
对象由花括号分隔。在括号内部，对象的属性用（名称：值）来定义，属性由逗号分隔。该定义方法类似python中的字典：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
注：空格和折行无关紧要。声明可横跨多行：

var person={firstname : "John",lastname  : "Doe",id        :  5566
};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

对象的方法定义了一个函数，并作为对象的属性存储，可以使用以下语法创建对象方法：

methodName : function() {// 代码 
}

函数（Function）

定义一个函数：

 function myFunction(a, b) {return a * b;}

变量（一个名称

使用关键字 var 来定义变量，变量名称对大小写敏感：

var x, length;
x = 5;
length = 6;

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

声明也可横跨多行：

var lastname="Doe",age=30,job="carpenter";

一条语句中声明的多个变量不可以同时赋同一个值:

var x,y,z=1;

x,y 为 undefined（变量不含值，仅声明）， z 为 1。

使用关键词 “new” 可以声明一个变量的类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

语句

语句用“；”分隔
注释为"//"
JavaScript 会忽略多余的空格,可以向脚本添加空格，来提高其可读性
可以在文本字符串中使用反斜杠对代码行进行换行

5.HTML中的window对象和document对象（存疑）

Window — 代表浏览器中一个打开的窗口，在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量
document对象 — 代表整个HTML 文档,可用来访问页面中的所有元素
注：由于 document.all 方法存在支持程度问题，获取元素还是推荐用 W3C DOM 规范中提供的 document.getElementById、document.getElementsByTagName 等标准方法。

6.事件

HTML 事件是发生在 HTML 元素上的事情，当这些事情发生，就可以触发提前设置好的JavaScript语句。
常见的HTML事件有：
在这里插入图片描述
任何一个HTML元素可以通过其id来获取，形成在JS中的一个对象，语句本身是对象“this”。比如：

在以下实例中，按钮元素中添加了 onclick 属性，当点击按钮时，会触发双引号内的JS语句，获取id为‘demo’的html元素，向其中写入当前时间（由data函数获取）；

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

如果想要更改自身，无需获取元素，this即可代指：

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

文章目录

前言

一、HTML

1. 什么是HTML？

一个完整的页面：

<!DOCTYPE> 声明

中文编码

2.HTML基础

①标签

头部元素

标题

-

标签来定义的，1最大，6最小；浏览器会自动地在标题的前后添加空行，搜索引擎使用标题为网页的结构和内容编制索引。

段落

注释

水平线

文本格式化

②属性

3.HTML_CSS

内联样式

内部样式表

外部引用

4.HTML应用

布局

表单

框架

脚本

5.资源总结

颜色

HTML速查列表

标签简写及全称

二、CSS：层叠样式表 (Cascading Style Sheets)

1.语法

CSS 规则

CSS 注释

2.class用法

3.其他属性值可以用到的时候再百度~

三、JS

1.简介

2.用法

3.输出

4.语法

数据类型

数组（Array）

对象（Object）

函数（Function）

变量（一个名称

语句

5.HTML中的window对象和document对象（存疑）

6.事件

相关文章：