HTML+CSS+JavaScript学习笔记~ 从入门到精通!
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、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+CSS+JavaScript学习笔记~ 从入门到精通!
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、HTML1. 什么是HTML?一个完整的页面:<!DOCTYPE> 声明中文编码2.HTML基础①标签头部元素标题段落注释水平线文本格式化②属性3.H…...
LeetCode 430. 扁平化多级双向链表
原题链接 难度:middle\color{orange}{middle}middle 题目描述 你会得到一个双链表,其中包含的节点有一个下一个指针、一个前一个指针和一个额外的 子指针 。这个子指针可能指向一个单独的双向链表,也包含这些特殊的节点。这些子列表可以有一…...
2.5|iot|第1章嵌入式系统概论|操作系统概述|嵌入式操作系统
目录 第1章: 嵌入式系统概论 1.嵌入式系统发展史 2.嵌入式系统定义* 3.嵌入式系统特点* 4.嵌入式处理器的特点 5.嵌入式处理分类 6.嵌入式系统的应用领域及嵌入式系统的发展趋势 第8章:Linux内核配置 1.内核概述 2.内核代码结构 第1章…...
一文教会你使用ChatGPT画图
引言 当今,ChatGPT在各行各业都有着广泛的应用,其自然语言处理技术也日益成熟。ChatGPT是一种被广泛使用的技术,除了能够生成文本,ChatGPT还可以用于绘图,这为绘图技术的学习和应用带来了新的可能性。本文将介绍如何利用ChatGPT轻松绘制各种形状,为对绘图技术感兴趣的读…...
Java资料分享
随着Java开发的薪资越来越高,越来越多人开始学习 Java 。在众多编程语言中,Java学习难度还是偏高的,逻辑性也比较强,但是为什么还有那么多人要学Java呢?Java语言是目前流行的互联网等企业的开发语言,是市面…...
yum/vim工具的使用
yum 我们生活在互联网发达的时代,手机电脑也成为了我们生活的必须品,在你的脑海中是否有着这样的记忆碎片,在一个明媚的早上你下定决心准备发奋学习,“卸载”了你手机上的所有娱乐软件,一心向学!可是到了下…...
内网渗透(三十九)之横向移动篇-pass the ticket 票据传递攻击(PTT)横向攻击
系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…...
Unity性能优化之纹理格式终极篇
知识早班车:1、当n大于1时,2的n次幂一定能被4整除;证明:2^n 2^2*2^(n-1) 4*2^(n-1)2、4的倍数不一定都是2的次幂;证明:4*3 12;12不是2的次幂3、Pixel(像素)是组成图片…...
【Spark分布式内存计算框架——Spark SQL】9. Dataset(下)RDD、DF与DS转换与面试题
5.3 RDD、DF与DS转换 实际项目开发中,常常需要对RDD、DataFrame及Dataset之间相互转换,其中要点就是Schema约束结构信息。 1)、RDD转换DataFrame或者Dataset 转换DataFrame时,定义Schema信息,两种方式转换为Dataset时…...
Windows 环境下,cmake工程导入OpenCV库
目录 1、下载 OpenCV 库 2、配置环境变量 3、CmakeLists.txt 配置 1、下载 OpenCV 库 OpenCV官方下载地址:download | OpenCV 4.6.0 下载完毕后解压,便可以得到下面的文件 2、配置环境变量 我们需要添加两个环境变量,一个是 OpenCVConfi…...
微服务架构设计模式-(16)重构
绞杀者应用程序 由微服务组成的应用程序,将新功能作为服务,并逐步从单体应用中提取服务来实现。好处 尽早并频繁的体现价值 快速开发交付,使用 与之相对的是“一步到位”重构,这时间长,且期间有新的功能加入ÿ…...
数据结构:归并排序和堆排序
归并排序 归并排序(merge sort)是利用“归并”操作的一种排序方法。从有序表的讨论中得知,将两个有序表“归并”为一个有序表,无论是顺序表还是链表,归并操作都可以在线性时间复杂度内实现。归并排序的基本操作是将两个位置相邻的有序记录子序列R[i…m]R[m1…n]归并为一个有序…...
基于easyexcel的MySQL百万级别数据的excel导出功能
前言最近我做过一个MySQL百万级别数据的excel导出功能,已经正常上线使用了。这个功能挺有意思的,里面需要注意的细节还真不少,现在拿出来跟大家分享一下,希望对你会有所帮助。原始需求:用户在UI界面上点击全部导出按钮…...
js-DOM02
1.DOM查询 - 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素 - 元素.childNodes - 获取当前元素的所有子节点 - 会获取到空白的文本子节点 …...
作为一名开发工程师,我对 ChatGPT 的一些看法
ChatGPT 又又火了。 ChatGPT 第一次爆火是2022年12月的时候,我从一些球友的讨论中知道了这个 AI 程序。 今年2月,ChatGPT 的热火更加猛烈,这时我才意识到,原来上次的热火只是我们互联网圈子内部火了,这次是真真正正的破圈了,为大众所熟悉了。 这个 AI 程序是一个智能问…...
Flask中基于Token的身份认证
Flask提供了多种身份认证方式,其中基于Token的身份认证是其中一种常用方式。基于Token的身份认证通常是在用户登录之后,为用户生成一个Token,然后在每次请求时用户将该Token作为请求头部中的一个参数进行传递,服务器端在接收到请求…...
波奇学数据结构:时间复杂度和空间复杂度
数据结构:计算机存储,组织数据方式。数据之间存在多种特定关系。时间复杂度:程序基本操作(循环等)执行的次数大O渐进法表示法用最高阶的项来表示,且常数变为1。F(n)3*n^22n1//F(n)为…...
移动OA办公系统为企业带来便捷办公
移动OA系统是指企业员工同手机等移动设备来使用OA办公系统,在外出差的员工只需要通过OA系统的手机APP就可以接收相关的新信息。PC办公与移动OA办公的相结合,构建用户单位随时随地办公的一体化环境。 相比PC办公,移动OA办公给企业带来更多的便…...
什么是Type-c口?Type-c口有什么优势?
什么是Type-C接口 Type-C接口有哪些好处坏处 说起“Type-C”,相信大家都不会陌生,因为最近拿它大做文章的厂商着实不少,但要具体说清楚Type-C是什么,估计不少人只能说出“可以正反插”“USB的一种”之类的大概。其实,T…...
Go开发者常犯的错误,及使用技巧 (1)
代码规范 命名不规范 变量名要有意义,不能随便取a,b,c 如果只是纯粹的算法题,这样问题不大。但工程上的代码可读性要求较高,不能随意命名变量名,例如: for _, v : range userList {// ... }如果for语句块简短还好&…...
Servlet 作业
一、填空题1. Servlet 中使用Session 对象的步骤为:调用HttpServletRequest.getSession()的得到Session对象,查看Session对象,在会话中保存数据。2. http 全称是_HyperText Transfer Protocol3. 用户可以有多种方式请求Servlet,如…...
Hive高阶函数:explode函数、Lateral View侧视图、聚合函数、增强聚合
Hive高阶函数 文章目录Hive高阶函数explode函数Lateral View侧视图原理语法聚合函数增强聚合grouping setsCUBEROLL UPexplode函数 explode接收map、array类型的数据作为输入,然后把输入数据中的每个元素拆开变成一行数据,一个元素一行。explode执行效果…...
信息系统服务管理
一、信息系统服务业及发展二、信息系统工程监理的概念及发展三、信息系统运行维护的概念和发展 IT服务管理(ITSM) 四、信息技术服务管理的标准和框架 IT服务标准体系(ITSS) 一、信息系统服务业及发展 总结:前景很好 二、信息系…...
Windows10 安装ElasticStack8.6.1
一、安装ElasticSearch8.6.1 1.官网下载ElasticSearch8.6.1压缩包后解压 2.安装为服务 elasticsearch-service.bat install 3.运行 elasticsearch-service.bat start 4.通过浏览器访问 http://localhost:9200/ 提示需要登录,但不知密码是啥。 5.重置密码 ela…...
gRPC 非官方教程
一、 简介 gRPC的定义: 一个高性能、通用的开源RPC框架主要面向移动应用开发: gRPC提供了一种简单的方法来精确地定义服务和为iOS、Android和后台支持服务自动生成可靠性很强的客户端功能库。基于HTTP/2协议标准而设计,基于ProtoBuf(Protoc…...
6.2【人工智能与深度学习】RNN、GRU、远程服务管理、注意力、Seq2 搜索引擎和内存网络
【人工智能与深度学习】RNN、GRU、远程服务管理、注意力、Seq2 搜索引擎和内存网络底层原理介绍 深度学习架构循环神经网络(RNN)循环网络:摊开循环的网络的循环循环神经网络的技巧乘法模组注意模组门控循环单元(GRU)长期短期记忆(Long Short-Term Memory,简称LSTM)序列到序列…...
软件工程复习
软件工程简介 软件: -在执行时提供所需的功能和性能的指令; -使程序能够充分操作信息的数据结构; -描述这些程序的操作和使用情况的文档。 软件定义:计算机程序和相关文档。 软件特点:软件没有质量;它并不…...
将Nginx 核心知识点扒了个底朝天(二)
Nginx 是如何实现高并发的? 如果一个 server 采用一个进程(或者线程)负责一个request的方式,那么进程数就是并发数。那么显而易见的,就是会有很多进程在等待中。等什么?最多的应该是等待网络传输。 而 Nginx 的异步非阻塞工作方…...
【PowerQuery】PowerBI 的PowerQuery支持的数据集成
PowerBI中的各个Power组件已经被深度集成到PowerBI中,不再作为像Excel一样的独立组件而存在。在PowerBI的界面中为了快速导入这些常用的数据,也有相应的快速导入界面。PowerBI的快速导入界面位于主页面中,下图就是PowerBI的快速导入界面。 在PowerBI中的数据导入界面相比Exc…...
scipy spatial transform Rotation库的源代码
前几日研究scipy的旋转,不知道具体里面怎么实现的,因此搜索一番。 发现Rotation在scipy的表达是用四元数的 https://github.com/jgagneastro/coffeegrindsize/edit/master/App/dist/coffeegrindsize.app/Contents/Resources/lib/python3.7/scipy/spatia…...
哪家网站雅虎全球购做的好/windows优化大师有毒吗
演讲前,AsyncTask文章。我们在最后谈到。AsyncTask它是利用Handler异步消息处理机制,操作结果。使用Message回到主线程,从而执行UI更新线程。 而在我们的日常开发工作,Handler一类是经常使用在我们中间,然后Handler的主…...
wordpress主题修改软件/b站推广网站入口mmm
以太网转串口是工控领域最常见的智能通信模块,有的是一网口转1串口,有的是一网口转4串口,最多的可以达到一转16串口(好像有的最多可以支持32串口)。如果该类模块做的足够完善,可以提供一个windows系统的设备…...
自己做物流网站/域名买卖交易平台
在本文中,我将向你展示如何使用ASP.NET AJAX框架对添加可点击的热点的HTML Map控件进行扩展。经扩展后,当我们的鼠标移动到这些热点上后,即弹出关于这些热点的详细信息;但是,这些详细信息都是通过AJAX异步方式从远程服务中取得的。…...
怎么在百度上做公司网站/2022年最新热点素材
ubuntu16.04 Intel D435i 开发背景intel Realsense D435i 环境配置安装realsense D435i SDK以及realsense-ros安装librealsense-sdk([参考了官方文档](https://dev.intelrealsense.com/docs/compiling-librealsense-for-linux-ubuntu-guide))源码编译 re…...
单页网站如何优化/保定百度推广优化排名
这篇文章主要介绍了如何用phpExcel将Excel导入到Mysql数据库 ,有一定的参考价值,感兴趣的朋友可以看看。1、http://phpexcel.codeplex.com/下载phpExcel2、代码如下:<?require_once PHPExcel.php;require_once PHPExcel/IOFactory.php;re…...
wordpress 编辑器推荐/成人大学报名官网入口
弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器,帮助用户打造可靠、安全、灵活、高效的应用环境,确保服务持久稳定运行,提升运维效率三年低至5折,多种配置可选了解详情终端节点|…...