HTML + CSS + JavaScript总结
注:(因为这个文档主要是HTML,CSS,JS的主体格式,内容多的话会用链接展示)
HTML
1. 文档基本格式
<!DOCTYPE! html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="" name="">
<title>这是第一个博客哦</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>听歌 健身 睡觉 写文档 看书 吃饭 </p>
</body>
<script src="demo.js"></script>
</html>
2.文档各部分解析
因为各部分的功能比较多而且比较钟重要,链接如下(谢谢,谢谢~~)
https://blog.csdn.net/qq_40860137/article/details/83990730
3.标签类型
因为html文档都是由各种各样的标签组成的,在这里介绍标签,按照我对标签的理解,标签分为行级元素(内联元素)标签,块级元素标签还有行级块元素,下面分开介绍她们所包含的各种细标签。
老样子,下面链接:
https://blog.csdn.net/qq_40860137/article/details/83990788
4.HTML编码
基本格式是&;组合,重要的编码有<(读小于号)的编码为<(lt是less than的缩写,有意思吧) , >(大于号)编码为>(gt是greet than的缩写),
还有一个编码是 (展示在文档中是空格),如果你的代码是这样写的,
<span>哈哈哈</span> <span>嘿嘿嘿</span>
这两个标签中间有3个空格,当浏览器解析时,只会把三个空格当成一个空格,此时的空格是文字分隔符,如果你想让他两中间在浏览器解析时有三个空格,可以这样写
<span>哈哈哈</span> <span>嘿嘿嘿</span>
CSS
css全称为cascading style sheet,寓意是层叠样式表,下面介绍css是如何引入到html文档中的
1.css文件引入
1.1行间样式
example: <div style="width:100px;height:100px;border:1px solid black;">
style的作用是给这个div添加宽高和边界线(宽度为1,且为实线,颜色为黑色)
1.2页面级css
页面级css插入的位置第一种是位于title标签的之下且在</head>之前,第二种位置是位于<body>与</body>之间
1.3外部css文件(最常用,可以减少页面代码，加快访问速度)
格式:<link href="" rel="stylesheet">
外部css文件放在meta标签之下且在</head>之前
注意:我们主张HTML(结构) + CSS(样式) +javascript(行为)相分离,所以引入css文件时,用外部css文件引入
2.选择器
选择器对于css是特别重要的,选择器是用来选择html标签的,从而给html增加一些属性,好让html样式变得好看
选择器类型如下链接
https://blog.csdn.net/qq_40860137/article/details/84060715
3.CSS属性
css属性主要是针对html标签的内容,对其进行修改,包括修改他的字体,行高,背景颜色,行距,等等
链接如下:
https://blog.csdn.net/qq_40860137/article/details/84094510
JavaScript
前言:
javascript诞生于1995年,当时他的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作,在javaScript问世之前.必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域是否输入了无效的值,Netscape Navigator希望通过javaScript来解决这个问题.自此以后,javaScript逐渐成为市面上常见浏览器必备的一箱特殊功能,如今,javaScript的用途早已不再局限与简单的数据验证,问世具备了与浏览器窗口及其内容等几乎所有方面交互的能力
发展史:
当时就职于Netscape公司的布兰登·艾奇,开始着手于计划1995年2月发布的Netscape Navigator 2开发的一种名为LiveScript的脚本语言-该语言将同时在浏览器和服务器中使用(他在服务器上的名字是LiveScript),为了赶在发布日期前完成LiveScript的开发,NetScript与Sun公司建立了一个开发联盟,在NetScript Navigator 2正式发布前夕,Netscape为了搭上媒体热炒Java的顺风车,临时把LiveScript该为了JavaScript; 由于JavaScript1.0获得了巨大成功,Netscape 随即在Netscape Navigator 3中发布了JavaScript1.1,之后不久微软决定向与Netscape竞争的自家产品Internet Explorer(此时是3版)浏览器加入了JScript的javaScript实现(命名为JScript是为了避开与javaScript有关的授权问题),以现在的目光看,微软1996年8月为进入微博浏览器领域而实施的这个重大举措,是导致Netscape日后蒙羞的一个标志性事件,然而,这个重大举措同时标志着javaScript作为一门语言,其开发又向前迈进了一大步
后来由于Netscape的javaScript和微软的JScript并存,没有一个规定的js标准的语法和特性,所以1997年,以javaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA, European Computer Manufacturers Association),该协会制定39号技术委员会(TC39,Technical Committee #39)负责"标准化一种通用的丶跨平台丶供应商中立的脚本语言的语法和语义"(http://www.ecma international.org/,memento/TC39.htm),TC39由来自Netscape丶Sun丶微软丶Borland以及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了ECMA-262-------定义一种名为ECMAScript(发音为"ek-ma-script")的新脚本语言的标准
第二年(1998年),ISO/IEC(Internet Organization for Standardization and Internation Electrotechnical Commission,国际标准化组织和国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)
自此以后,浏览器开发商就开始致力于将ECMAScript作为各自JavaScript实现的基础,也在不同程度上取得了成功
JS(JavaScript的)实现:
虽然JavaScript和ECMAScript通常被人们用来表达相同的含义,单JavaScript的含义却比ECMA-262中规定的要多得多,没错一个完整的JavaScript应该包括下列三个不同的部分组成:
核心.ECMAScript
文档对象模型(DOM)
浏览器对象模型(BOM)
1.JavaScript的逼格
逼格一:JavaScript是一门解释性的语言,
下面讲解一下语言的翻译方式,我们写的代码计算机是看不懂的,计算机只认识1和0,但是只要我们的代码经过不同的翻译方式计算机就可以识别:
a: 编译性语言
feature: 通篇编译------>形成一个.obj文件---->计算机执行该文件
b: 解释性语言
feature: 一行行翻译,一行行执行
编译性语言的优点是 快,缺点是 移植性不好(不可跨平台);
解释性语言的优点是 跨平台,缺点是较慢(下载计算机运行,处理数据的能力都不错,相对于编译性语言较慢而已);
拓展:java既不是编译性语言,也不是解释性语言,java是oak语言,他处理代码是这样的:
.java文件经过javac编译------>形成.class文件--->再经过jvm解释执行
逼格二:单线程
单线程:指一个人只能在同一时间干一件事,在这里讲一下计算机里的同步和异步,计算机中的同步和异步刚好与日常生活中的相反,
比如我们边吃饭,边看手机在计算机中是异步,再比如我们访问网页,浏览器加载页面时,会下载html,在html中遇到<link src="#" >,留言器会同时下载css文件,此时我们叫异步加载,当遇到<script href="">,浏览器会暂停对html和css文档的解析,此时浏览器的行为是同步
2.JS执行队列
轮转时间片:类似吃饭,把每一个任务按照一定的毫秒分分解成片段,再把每个片段排成序列,网JS序列中送
3.".js"文件的引入
js引入有两种方式,引入的script位置也有讲究,链接如下:
https://blog.csdn.net/qq_40860137/article/details/84319697
4.基本概念
4.1 语法
https://blog.csdn.net/qq_40860137/article/details/84339079
4.2变量
ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存至的占位符而已。定义变量时要使用var操作符（var是一个关键字），后跟变量名（即一个标识符），如下所示：
var message；
这行代码定义了一个message的变量，该变量可以用来保存任何值（像这样未经过初始化的变量，会保存一个特殊的值----undefined）。ECMAScript也支持直接初始化变量，因此在定义变量的时候就可以设置变量的值，如下所示：
var message = “hi”；
在此，变量message中保存了一个字符串值“hi” ，像这样初始化变量并不会把它标记为字符串类型；初始化的过程就是给变量附一个值这么简单。因此，可以在修改变量值的同时修改变量的类型，如下所示：
var message = “hi”；
message = 100；
虽然不建议修改变量所保存值的类型，但这种操作在ECMAScript中完全有效。
注意：
用var操作符定义的变量将成为定义该变量的作用域中的局部变量，也就是说，如果在函数中使用var定义一个变量，那么这个变量在函数退出后就会被销毁。如果在函数中变量赋值没用var，那么这个变量就成为了全局变量，但是这样的全局变量很难维护，而且在严格模式中，未声明的变量赋值会导致跑出ReferenceError的错误
这里我们可以使用一条语句定义多个变量，只要像下面这样把每个变量（初始化或不初始化都可以）用逗号分隔开就OK了：
var message = “hi”，
found = false，
age = 22；
虽然代码里的换行和变量缩进不是不需的，但这样做可以提高可读性，以便其他同事浏览，理解。
在严格模式下，不能定义为eval 或 arguments 的变量，否则会导致语法出错。
4.3 数据类型
ECMAScript中有5种简单数据类型（也称基本数据类型）：Number 、String、Boolean、Undefined、Null。还有一种复杂数据类型-------object，object本质上是由一组无需的名值对组成。所有值最终都将是上述六种值之一。乍一看，好像只有6种数据类型不足以表示所有数据；但是由于ECMAScript数据类型具有动态性，因此的确没有再定义其他数据类型的必要了。
4.3.1 typeof操作符
鉴于ECMAScript是松散类型，因此需要一种手段来检测给定变量的数据类型---typeof就是负责这方面的操作符。对一个值使用typeof操作符返回下列某个字符串：
“number”--------如果这个值是数值；
“string”--------如果这个值是字符串；
“”boolean”--------如果这个值是布尔值（true、false）；
“undefined” --------如果这个值未定义；（未经初始化的变量，会默认取得“undefined”的值）
“object”--------如果这个值是对象或null；
“function”--------如果这个值是函数。
注意：typeof操作符的操作数可以是变量，也可以是数值字面量（如（typeof 95）或 typeof（95）），typeof是一个操作符而不是函数，因此typeof后面的括号尽可能使用，但不是必需的。因为特殊值null被认为是一个空对象引用，Safari5及之前版本、Chrome7及之前版本在对正则表达式调用typeof时会返回“function”，而其他浏览器在这种情况下会返回“object”。从技术角度上讲，函数在ECMAScript中是对象，不是一种数据类型，然而函数也确实有一些特殊属性，因此通过typeof操作符来区分函数和对象是有必要的。
9490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
