HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。
<html>
<head>
<title>title>
head>
<body>
body>
html>
标签是有层次关系的 ------ 父子关系 / 兄弟关系。比如head和body是html的子标签,head和body是兄弟关系。这种关系构成了一个DOM树
每一个标签都相当于是一个对象,可以对对象进行增删查改操作
可以通过!+ 回车的方式快速生成代码框架
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
(1) 注释标签
ctrl + / 快捷键可以快速进行注释/取消注释
(2)标题标签: h1-h6
有六个,从h1到h6,数字越大,字体越小,也越细。会换行且每个标题之间是有空格,这两个样式是自带的。
<h1>helloh1>
<h2>helloh2>
<h3>helloh3>
<h4>helloh4>
<h5>helloh5>
<h6>helloh6>
(3)段落标签: p
<p>这是一个段落p>
(4)换行标签: br
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>
(5)格式化标签
前者有强调的作用,可以方便爬虫的获取
<strong>strong 加粗strong>
<b>b 加粗b>
<em>倾斜em>
<i>倾斜i>
<del>删除线del>
<s>删除线s>
<ins>下划线ins>
<u>下划线u>
(6)图片标签: img
<img src="rose.jpg">
路径
img 标签的其他属性
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"border="5px">
注意
- 属性可以有多个, 不能写到标签之前
- 属性之间用空格分割, 可以是多个空格, 也可以是换行
- 属性之间不分先后顺序
- 属性使用 “键值对” 的格式来表示.
(7)超链接标签: a
链接的几种形式
<a href="http://www.baidu.com">百度a>
<a href="1.html">点我跳转到 1.htmla>
<a href="#">空链接a>
<a href="test.zip">下载文件a>
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
a>
禁止 a 标签跳转: 或者
<a href="#one">第一集a>
<a href="#two">第二集a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
p>
(8)表格标签
1. 基本使用
2. 其他属性
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<td>姓名td>
<td>性别td>
<td>年龄td>
tr>
<tr>
<td>张三td>
<td>男td>
<td>10td>
tr>
<tr>
<td>李四td>
<td>女td>
<td>11td>
tr>
table>
(9)列表标签
(1)无序列表[重要] ul li , .
(2)有序列表[用的不多] ol li
(3)自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明)
(4)快速生成列表的快捷键:eg.ul>li*3
(10)表单标签
表单是让用户输入信息的重要途径
分类:
input标签
<input type="text">
<input type="password">
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏
<input type="button" value="我是个按钮">
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
form>
<input type="file">
(11)无语义标签: div(分割) & span(跨度)
无语义没有固定的用途,干什么都行,像是两个盒子,用于网页布局
(12)textarea 标签
<textarea rows="3" cols="50">
textarea>
(13)select标签:下拉菜单
<select>
<option>北京option>
<option selected="selected">上海option>
select>
(14)label 标签
(15)HTML 特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如:
前言:CSS可以控制页面的展示效果,HTML决定页面结构
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换)
规范
【1】内部样式表
概念:写在 style 标签中. 嵌入到 html 内部,虽然从理论上来说,style 放到 html 的哪里都行,但是一般都是放到 head 标签中
优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候
【2】行内样式表
<style>
div {
color: red;
}
style>
<div style="color:green">绿色div>
【3】外部样式
实际开发中最常用的方式
<link rel="stylesheet" href="[CSS文件路径]">
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效
关于缓存:
这是计算机中一种常见的提升性能的技术手段.
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站,那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件
【1】标签选择器
<style>
p {
color: red;
}
div {
color: green;
}
style>
<p>猫猫p>
<div>狗狗div>
【2】类选择器
<style>
.blue {
color: blue;
}
.box {
width: 200px;
height: 150px;
}
.green {
background-color: green;
}
style>
<div class="blue">猫猫1div>
<div>猫猫2div、
class="box green">div>
【3】id 选择器
<style>
#ha {
color: red;
}
style>
<div id="ha">蛤蛤蛤div>
【4】通配符选择器
使用 * 的定义, 选取所有的标签,页面的所有内容都会被改成 红色,不需要被页面结构调用,主要用来消除边距
* {
color: red;
}
【5】复合选择器(选学)
(1) 后代选择器 / 包含选择器.
元素1 元素2 {样式声明}
<ul>
<li>aaali>
<li>bbbli>
<li>cccli>
ul>
<ol>
<li>dddli>
<li>eeeli>
<li>fffli>
ol>
ol li {
color: red;
}
<ul>
<li>aaali>
<li>bbbli>
<li><a href="#">ccca>li>
ul>
ul li a {
color: yellow;
}
或者
ul a {
color: yellow;
}
(3)伪类选择器
I. 链接伪类选择器
<a href="#">小猫a>
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
注意事项
(1)按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 “绿化”
(2)浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.
(3)实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多
a {
color: black;
}
a:hover {
color: red;
}
II. :focuse 伪类选择器
【1】字体属性
设置字体
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
style>
<div class="font-family">
<div class="one">
这是微软雅黑
div>
<div class="two">
这是宋体
div>
div>
大小
p {
font-size: 20px;
}
粗细
p {
font-weight: bold;
font-weight: 700;
}
文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
【2】文本属性
(1) 文本颜色
设置文本颜色
color: red;
color: #ff0000; ------ 十六进制形式,全部两两相同,可以简写
color: rgb(255, 0, 0); ------ 红、绿、蓝,数值越大,饱和度越高
<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
style>
<div class="color">这是一段话div>
(2) 文本对齐
控制文字水平方向的对齐,不光能控制文本对齐, 也能控制图片等元素居中或者靠右
text-align: [值];
取值
(3)文本装饰
text-decoration: [值];
常用取值:
(4)文本缩进
text-indent: [值];
控制段落的 首行 缩进 (其他行不影响)
(5)行高
line-height: [值];
【3】背景属性
(1)背景颜色
background-color: [指定颜色]
<style>
body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
style>
<div class="bgc">
<div class="one">红色背景div>
<div class="two">绿色背景div>
<div class="three">透明背景div>
div>
(2)背景图片
比 image 更方便控制位置(图片在盒子中的位置)
background-image: url(…);
注意:
<style>
.bgi .one {
background-image: url(rose.jpg);
height: 300px;
}
style>
<div class="bgi">
<div class="one">背景图片div>
div>
(3)背景平铺
background-repeat: [平铺方式]
- 默认是 repeat.
- 背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
重要取值:
<style>
.bgr .one {
background-image: url(rose.jpg);
height: 300px;
background-repeat: no-repeat;
}
.bgr .two {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-x;
}
.bgr .three {
background-image: url(rose.jpg);
height: 300px;
background-repeat: repeat-y;
}
style>
<div class="bgr">
<div class="one">不平铺div>
<div class="two">水平平铺div>
<div class="three">垂直平铺div>
div>
(4)背景位置
background-position: x y;
修改图片的位置
参数有三种风格:
<style>
.bgp .one {
background-image: url(rose.jpg);
height: 500px;
background-repeat: no-repeat;
background-color: purple;
background-position: center;
}
style>
<div class="bgp">
<div class="one">背景居中div>
div>
注意:
(5)背景大小
background-size: length|percentage|cover|contain;
<style>
.bgs .one {
width: 500px;
height: 300px;
background-image: url(rose.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
style>
<div class="bgs">
<div class="one">背景尺寸div>
div>
【5】圆角矩形
通过 border-radius 使边框带圆角效果
基本用法
border-radius: length;
length 是内切圆的半径. 数值越大, 弧线越强烈
生成圆形
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}
生成圆角矩形
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}
展开写法
border-radius 是一个复合写法. 实际上可以针对四个角分别设置
border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
【1】块级元素
常见的元素:h1 - h6、p、div、ul、ol、li …
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
style>
<div class="demo1">
<div class="parent">
<div class="child">
child1
div>
<div class="child">
child2
div>
div>
div>
【2】行内元素/内联元素
常见的元素:a、strong、b、em、i、del、s、ins、u、span …
特点:
注意:
【3】行内元素和块级元素的区别
(1)块级元素独占一行, 行内元素不独占一行
(2)块级元素可以设置宽高, 行内元素不能设置宽高.
(3)块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置
【4】改变显示模式
使用 display 属性可以修改元素的显示模式,可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素
(1)display: block 改成块级元素 [常用]
(2)display: inline 改成行内元素 [很少用]
(3)display: inline-block 改成行内块元素
【1】概述
每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成:边框 border、内容 content、内边距 padding、外边距 margin
【2】边框
1. 基础属性
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
border: 1px solid red;
border-top/bottom/left/right
2. 边框会撑大盒子
相当于使用面积,套用面积的区别
* {
box-sizing: border-box;
}
【3】内边距
padding 设置内容和边框之间的距离
基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离可以给四个方向都加上边距
注意:
复合写法
可以把多个方向的 padding 合并到一起
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
【4】外边距
1. 基础写法
控制盒子和盒子之间的距离,可以给四个方向都加上边距
2. 复合写法
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
3. 块级元素水平居中
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
【5】去除浏览器默认样式
* {
marign: 0;
padding: 0;
}
【1】JavaScript 是什么
JavaScript (简称 JS), 是⼀个脚本语言, 解释型或即时编译型的编程语言. 虽然它是作为开发Web页面的脚本语言而出名,但是它也被⽤到了很多非浏览器环境中
虽然 Java 和 JavaScript 名字很像,但其实他们之间的语法风格相差许多
【2】HTML-CSS-JS
HTML:网页的结构(骨)
CSS:网页的表现(皮)
JavaScript:网页的行为(魂)
【1】引入方式
引入方式 | 语法描述 | 示例 |
---|---|---|
行内样式 | 直接嵌入到html元素内部 | < input type="button" value="点我⼀下" οnclick="alert('haha')"> |
内部样式 | 定义< scrip> 标签,写到scrip标签中 | < script> alert("haha"); < /script> |
外部样式 | 定义< scrip> 标签,通过src属性引到外部 js 文件 | < script src="hello.js">< /script> |
对比:
(1)内部样式会出现大量的代码冗余, 不方便后期的维护,所以不常用
(2)行内样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的jS
(3)外部样式,html和js实现了完全的分离, 企业开发常用方式
【2】基础语法
1. 变量
变量有三种声明方式
关键词 | 解释 | 示例 |
---|---|---|
var | 早期JS中声明变量的关键字, 作用域在该语句的函数内 | var name = 'zhangsan'; |
les | ES6 中新增的声明变量的关键字, 作用域为该语句所在的代码块 内 | les name = 'zhangsan'; |
const | 声明常量的,声明后不能修改 | const name = 'zhangsan'; |
注意
(1)JavaScript 是⼀门动态弱类型语言,变量可以存放不同类型的值(动态),随着程序的运⾏, 变量的类型可能会发生改变
var name = 'zhangsan';
var age = 20;
var a = 10; // 数字
a = "hehe"; // 字符串
Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发生变化
变量名命名规则
(1)组成字符可以是任何字⺟、数字、下划线(_)或美元符号($)
(2)数字不能开头
(3)建议使用驼峰命名
2. 数据类型
虽然js是弱数据类型的语⾔,但是js中也存在数据类型,js中的数据类型分为 原始类型和引用类型
数据类型 | 描述 |
---|---|
number | 数字. 不区分整数和小数 |
string | 字符串字面值需要使用引号引起来, 单引号双引号均可 |
boolean | 布尔类型. true 真, false 假 |
undefined | 表示变量未初始化,只有唯⼀的值 undefined |
3. 运算符
JavaScript 中的运算符和 Java ⽤法基本相同
【3】JS对象
在 JS 中, 字符串, 数值, 数组, 函数都是对象
每个对象中包含若干的属性和方法
• 属性: 事物的特征
• 方法: 事物的行为
1. 数组
注意: JS 的数组不要求元素是相同类型
创建数组
// Array 的 A 要⼤写
var arr = new Array();
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为“元素”
数组操作
读: 使用下标的方式访问数组元素(从 0 开始)
增: 通过下标新增, 或者使用 push 进行追加元素
改: 通过下标修改
删: 使用 splice 方法删除元素
注意:
(1)如果下标超出范围读取元素, 则结果为 undefined
(2)不要给数组名直接赋值, 此时数组中的所有元素都没了,相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了
2. 函数
语法格式
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值
关于参数个数
实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配
sum(10, 20, 30); // 30
sum(10); // NaN, 相当于 num2 为 undefined
函数表达式
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add); // function
3. 对象
创建对象
//属性和⽅法使⽤键值对的形式来组织
//键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆
//键和值之间使⽤ : 分割
//⽅法的值是⼀个匿名函数
var a = {}; // 创建了⼀个空的对象
var student = {
name: '小红',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};
var student = new Object(); // 和创建数组类似
student.name = "小红";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();
//构造函数的函数名⾸字⺟⼀般是⼤写的
//构造函数不需要 return
function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function...
}
var obj = new 构造函数名(实参);
使用对象的属性和方法
// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()
student.sayHello();
【4】JQuery
虽然原生的JavaScript提供的API可以操作页面,但是代码十分复杂,所以我们使用jQuery。
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,它封装了JavaScript常用的功能代码, 提供了简洁而强大的选择器和DOM操作方法
1. 引入依赖
使用JQuery需要先引⼊对应的库
在使用jQuery CDN时,只需要在HTML⽂档中加入如下代码
< script src=“https://code.jquery.com/jquery-3.7.1.min.js”>
这个URL是CDN(内容分发网络)服务提供商为jQuery库提供的⼀个统一资源定位符,也可以使⽤其他公司提供的CDN地址
2. JQuery 语法
jQuery 语法是选取 HTML 元素后对其操作
基础语法
$(selector).action()
JQuery 的代码通常都写在 document ready 函数中.
document:整个文档对象, ⼀个页面就是⼀个文档对象, 使用document表示
这是为了防止文档在完全加载(就绪)之前运行jQuery 代码,即在文档加载完成后才可以对 页面进行操作。如果在文档没有完全加载之前就运⾏函数,操作可能失败
$(document).ready(function(){
// jQuery functions go here
});
3. JQuery 选择器
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p") | 所有 < p> 元素 |
$("p:first") | 选取第⼀个 元素 |
$("p:last") | 最后⼀个 < p> 元素 |
$(".box") | 所有 class="box" 的元素 |
$("#box") | id="box" 的元素 |
$(".intro .demo") | 所有 class="intro" 且 class="demo" 的元素 |
$("p.intro") | 选取 class 为 intro 的 < p> 元素 |
$("ul li:first") | 选取第⼀个 < ul> 元素的第⼀个 < li> 元素 |
$(":input") | 所有 元素 |
$(":text") | 所有 type="text" 的 元素 |
$(":checkbox") | 所有 type="checkbox" 的 元素 |
4. JQuery 事件
概念
JS 要构建动态页面, 就需要感知到用户的行为,
用户对于页面的⼀些操作(点击, 选择, 修改等) 操作都会在浏览器中产生⼀个个事件, 被 JS 获取到, 从而进行更复杂的交互操作
事件由三部分组成
常见的事件
事件 | 代码 |
---|---|
文档就绪事件(完成加载) | $(document).ready(function) |
点击事件 | $(selector).click(function) |
$双击事件 | $(selector).dblclick(function) |
元素的值发生改变 | $(selector).change(function) |
鼠标悬停事件 | $(selector).mouseover(function) |
5. 操作元素
获取/设置元素内容
有参数时, 就进⾏元素的值设置, 没有参数时, 就进行元素内容的获取
JQuery方法 | 说明 |
---|---|
text() | 设置或返回所选元素的文本内容 |
html() | 设置或返回所选元素的内容(包括 HTML 标签) |
val() | 设置或返回表单字段的值 |
获取/设置元素属性
JQuery attr() 方法用于获取属性值
获取/返回css属性
css() 方法设置或返回被选元素的⼀个或多个样式属性
添加元素
删除元素
删除元素和内容,⼀般使用以下两个 jQuery 方法: