HTML+CSS+JavaScript
1. HTML
1.1 HTML基础
1.1.1 什么是HTML
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.
超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语⾔:由标签构成的语⾔
HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.
1.1.2 认识HTML标签
HTML代码是由"标签"构成的.
形如
• 标签名(body)放到<>中
• ⼤部分标签成对出现.<h1>为开始标签, </h2>为结束标签.
• 少数标签只有开始标签,称为"单标签".
• 开始标签和结束标签之间,写的是标签的内容.
• 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).
1.1.3 HTML⽂件基本结构
• html标签是整个html⽂件的根标签(最顶层标签)
• head标签中写⻚⾯的属性.
• body标签中写的是⻚⾯上显⽰的内容
• title 标签中写的是⻚⾯的标题.
1.1.4 标签层次结构
• ⽗⼦关系
• 兄弟关系
其中:
• head和body是html的⼦标签(html就是head和body的⽗标签)
• title 是head的⼦标签.head是title的⽗标签.
• head和body之间是兄弟关系.
可以使⽤chrome的开发者⼯具查看⻚⾯的结构.
F12 或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到⻚⾯结构细节.
标签之间的结构关系,构成了⼀个DOM树
DOM 是DocumentObjectMode(⽂档对象模型)的缩写.
1.2 HTML快速⼊⻔
1.2.1 开发⼯具 HTML可以使⽤系统⾃带的记事本来编写,但是⾮常不⽅便,我使⽤前端专业的开发⼯具: Visual Studio Code Visual Studio Code（简称"VSCode"）
1.2.2 快速开发
在VSCode中创建⽂件 xxx.html ,直接输⼊ !,按Enter或tab键，此时能⾃动⽣成代码的主体框架
在<body></body>标签中,任意书写⽂字,按Ctrl+s保持⽂件,通过浏览器访问即可.如:
浏览器运⾏结果如下:
1.3 HTML常⻅标签
1.3.1 标题标签
h1-h6 有六个,从h1-h6.数字越⼤,则字体越⼩.
1.3.2 段落标签:p
在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签
• p标签表⽰⼀个段落.
注意:
• p标签描述的段落,前⾯没有缩进.
• ⾃动根据浏览器宽度来决定排版.
• html内容⾸尾处的换⾏,空格均⽆效.
• 在html中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html中直接输⼊换⾏不会真的换⾏,⽽是相当于⼀个空格.
1.3.3 换⾏标签:br
想要完成换⾏的话,也可以通过标签来实现.
br 是break的缩写.表⽰换⾏.
• br是⼀个单标签(不需要结束标签)
• br标签不像p标签那样带有⼀个很⼤的空隙.
•</br>是规范写法.不建议写成<br>
展⽰结果:
观察<p>标签和<br>标签的区别
1.3.4 图⽚标签:img
img标签必须带有src属性.表⽰图⽚的路径.
此时要把rose.jpg这个图⽚⽂件放到和html中的同级⽬录中.
img标签的其他属性
• width/height: 控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,另外⼀个会等⽐例缩放.否则就会图⽚失 衡.
• border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定
注意:
1. 属性可以有多个,不能写到标签之前
2. 属性之间⽤空格分割,可以是多个空格,也可以是换⾏.
3. 属性之间不分先后顺序
4. 属性使⽤"键值对"的格式来表⽰.
关于⽬录结构:
对于⼀个复杂的⽹站,⻚⾯资源很多,这种情况可以使⽤⽬录把这些⽂件整理好.
1. 相对路径:以html所在位置为基准,找到图⽚的位置
. • 同级路径:直接写⽂件名即可(或者./)
• 下⼀级路径:image/1.jpg
• 上⼀级路径:../image/1.jpg
2 . 绝对路径:⼀个完整的磁盘路径,或者⽹络路径
1.3.5 超链接:a
• href:必须具备,表⽰点击后会跳转到哪个⻚⾯.
• target: 打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开.
链接的⼏种形式:
• 外部链接:href引⽤其他⽹站的地址
• 内部链接:⽹站内部⻚⾯之间的链接.写相对路径即可.
在 ⼀个⽬录中,先创建⼀个1.html,再创建⼀个2.html
• 空链接:使⽤#在href中占位.
1.4 表格标签
• table标签:表⽰整个表格
• tr:表⽰表格的⼀⾏
• td:表⽰⼀个单元格
• thead:表格的头部区域
• tbody:表格的主体区域.
table 包含tr,tr包含td 表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.
这些属性都要放到table标签中.
• align是表格相对于周围元素的对⻬⽅式.
• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
• cellpadding: 内容距离边框的距离,默认1像素
• cellspacing: 单元格之间的距离.默认为2像素
• width/height:设置尺⼨. 注意,这⼏个属性,vscode都提⽰不出来.
1.5 表单标签
表单是让⽤⼾输⼊信息的重要途径. 分成两个部分:
• 表单域:包含表单元素的区域.重点是form标签.
• 表单控件:输⼊框,提交按钮等.重点是input标签
1.5.1 form 标签
描述了要把数据按照什么⽅式,提交到哪个⻚⾯中.
关 于form需要结合后端代码来进⼀步理解.
1.5.2 input 标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.
• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.
• name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.
• value:input中的默认值.
• checked:默认被选中.(⽤于单选按钮和多选按钮
下⾯介绍⼀些常⽤的类型:
1. ⽂本框
2. 密码框
3. 单选框
注 意:单选框之间必须具备相同的name属性,才能实现多选⼀效果.
4. 复选框
5. 普通按钮
6. 提交按钮
提 交按钮必须放到form标签内.点击后就会尝试给服务器发送请求
1.5.3 select 标签
下拉菜单
• option中定义selected="selected"表⽰默认选中
1.5.4 textarea 标签
⽂本域中的内容,就是默认内容,注意,空格也会有影响.
rows和cols也都不会直接使⽤,都是⽤css来改的.
1.6 ⽆语义标签:div&span
div 标签,division 的缩写,含义是分割
span标签,含义是跨度
就是两个盒⼦.⽤于⽹⻚布局
• div是独占⼀⾏的,是⼀个⼤盒⼦.
• span不独占⼀⾏,是⼀个⼩盒⼦.
2. CSS
2.1 CSS介绍
2.1.1 什么是CSS?
CSS(Cascading Style Sheet)，层叠样式表,⽤于控制⻚⾯的样式.
CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离.
CSS可以理解为"东⽅四⼤邪术"之化妆术. 对⻚⾯的展⽰进⾏"化妆"
CSS前->CSS修饰后
2.1.2 基本语法规范
选择器+{⼀条/N条声明}
• 选择器决定针对谁修改(找谁)
• 声明决定修改啥.(⼲啥)
• 声明的属性是键值对.使⽤;区分键值对,使⽤:区分键和值.
2.1.3 引⼊⽅式
CSS有3种引⼊⽅式，语法如下表格所⽰：
3种引⼊⽅式对⽐:
1. 内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤.(课堂上为了⽅便讲解,使⽤该⽅ 式)
2. ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.
3. 外部样式，html和css实现了完全的分离,企业开发常⽤⽅式.
2.1.4 规范
样式⼤⼩写
虽然CSS不区分⼤⼩写,我们开发时统⼀使⽤⼩写字⺟
空格规范
• 冒号后⾯带空格
• 选择器和{之间也有⼀个空格.
2.2 CSS选择器
CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.
就好⽐SC2,War3这样的游戏,需要先选中单位,再指挥该单位⾏动.
CSS选择器主要分以下⼏种:
1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 通配符选择器
我们通过代码来学习CSS选择器的使⽤.
1. 标签选择器
2. 类选择器
• ⼀个类可以被多个标签使⽤,⼀个标签也能使⽤多个类(多个类名要使⽤空格分割,这种做法可以让 代码更好复⽤)
3. ID选择器
• id 是唯⼀的,不能被多个标签使⽤(是和类选择器最⼤的区别)
4. 通配符选择器
5. 复合选择器
1. 以上三个标签选择器 ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签,也可以是"孙⼦"标签
3. 如果需要选择多种标签,可以使⽤ , 分割,如 p, div { } 表⽰同时选中p标签和div标签. 逗号前后可以是以上任意选择器,也可以是选择器的组合.
2.3 常⽤CSS
接下来学习⼀些常⻅的css样式
准备如下html
2.3.1 color color:
设置字体颜⾊
颜⾊有如下⼏种表达⽅式:
• 英⽂单词,如red,blue
• rgb代码的颜⾊如rgb(255,0,0)
• ⼗六进制的颜⾊如#ff00ff
2.3.2 font-size
font-size: 设置字体⼤⼩
2.3.3 border
border: 边框
边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断
3. JavaScript
3.1 初识JavaScript
3.1.1 JavaScript 是什么
JavaScript (简称JS), 是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web⻚⾯的 脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中
JavaScript 和HTML和CSS之间的关系
• HTML:⽹⻚的结构(⻣)
• CSS:⽹⻚的表现(⽪)
• JavaScript: ⽹⻚的⾏为(魂)
3.1.2 JavaScript快速上⼿
1. 在HTML⽂件中,写如下代码
2. 运⾏浏览器
3.1.3 引⼊⽅式
JS有3种引⼊⽅式，语法如下表格所⽰：
3种引⼊⽅式对⽐:
1. 内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤.(课堂上为了⽅便讲解,使⽤该⽅ 式)
2. ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.
3. 外部样式，html和js实现了完全的分离,企业开发常⽤⽅式. 3.2 基础语法 JavaScript 虽然⼀些设计理念和Java相去甚远,但是在基础语法层⾯上还是有⼀些相似之处的. 有了Java的基础很容易理解JavaScript的⼀些基本语法.
3.2.1 变量
创建变量(变量定义/变量声明/变量初始化),JS声明变量有3种⽅式
注意事项:
1. JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态),⽐如:
随着程序的运⾏,变量的类型可能会发⽣改变.(弱类型)
Java是静态强类型语⾔,在变量声明时,需要明确定义变量的类型.如果不强制转换,类型不会发⽣变 化
2. 变量名命名规则: a. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）
b. 数字不能开头
c. 建议使⽤驼峰命名
3. + 表⽰字符串拼接,也就是把两个字符串⾸尾相接变成⼀个字符串.
4. \n 表⽰换⾏
3.2.2 数据类型
虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类 型，具体有如下类型
使⽤typeof函数可以返回变量的数据类型
3.2.3 运算符
JavaScript 中的运算符和Java⽤法基本相同
代码示例
3.3 JavaScript对象
3.3.1 数组
3.3.1.1 数组定义
创建数组有两种⽅式
1. 使⽤new关键字创建
2. 使⽤字⾯量⽅式创建[常⽤]
注意:JS的数组不要求元素是相同类型.
这 ⼀点和C,C++,Java等静态类型的语⾔差别很⼤.但是Python,PHP等动态类型语⾔也是如此.
3.3.1.2 数组操作
1. 读:使⽤下标的⽅式访问数组元素(从0开始)
2. 增:通过下标新增,或者使⽤push进⾏追加元素
3. 改:通过下标修改
4. 删:使⽤splice⽅法删除元素
代码⽰例:
注意:
1. 如果下标超出范围读取元素,则结果为undefined
2. 不要给数组名直接赋值,此时数组中的所有元素都没了. 相当于本来arr是⼀个数组,重新赋值后变成字符串了.
3.3.2 函数
3.3.2.1 语法格式
• 函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.
• 调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.可以借助调试器来观察.
• 函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)
3.3.2.2 关于参数个数
实参和形参之间的个数可以不匹配.但是实际开发⼀般要求形参和实参个数要匹配
1. 如果实参个数⽐形参个数多,则多出的参数不参与函数运算
2. 如果实参个数⽐形参个数少,则此时多出来的形参值为undefined
3.3.2.3 函数表达式
另外⼀种函数的定义⽅式
此时形如 function() { } 这样的写法定义了⼀个匿名函数,然后将这个匿名函数⽤⼀个变量来表示
后⾯就可以通过这个add变量来调⽤函数了.
JS中函数是⼀等公⺠,可以⽤变量保存,也可以作为其他函数的参数或者返回值.
3.3.3 对象
在JS中,字符串,数值,数组,函数都是对象. 每个对象中包含若⼲的属性和⽅法.
• 属性:事物的特征
• ⽅法:事物的⾏为.
JavaScript 的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较⼤.
1. 使⽤字⾯量创建对象[常⽤]
使⽤{}创建对象
• 使⽤{}创建对象
• 属性和⽅法使⽤键值对的形式来组织.
• 键值对之间使⽤,分割.最后⼀个属性后⾯的,可有可⽆
• 键和值之间使⽤:分割.
• ⽅法的值是⼀个匿名函数.
使⽤对象的属性和⽅法:
2. 使⽤newObject创建对象
注意,使⽤{}创建的对象也可以随时使⽤ student.name = " 蔡徐坤 "; 这样的⽅式来新增属性.
3. 使⽤构造函数创建对象
注意:
• 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.
• 构造函数的函数名⾸字⺟⼀般是⼤写的.
• 构造函数的函数名可以是名词.
• 构造函数不需要return
• 创建对象的时候必须使⽤new关键字.
this 相当于"我"
使⽤构造函数重新创建猫咪对象
3.4 JQuery
W3C标准给我们提供了⼀系列的函数,让我们可以操作:
• ⽹⻚内容
• ⽹⻚结构
• ⽹⻚样式
但是原⽣的JavaScript提供的API操作DOM元素时,代码⽐较繁琐,冗⻓.我们学习使⽤JQuery来操作⻚⾯对象.
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常⽤的功能 代码,提供了简洁⽽强⼤的选择器和DOM操作⽅法.使⽤JQuery可以轻松地选择和操作HTML元素，从 ⽽减少了开发⼈员编写的代码量，提⾼了开发效率,它提供的API易于使⽤且兼容众多浏览器，这让诸 如HTML⽂档遍历和操作、事件处理、动画和Ajax操作更加简单.JQuery对于事件的处理也进⾏了简 化,提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.