前端三件套
HTML
1、概念
HTML是HyperText Markup Language的缩写，即超文本标记语言。由w3c万维网联盟开发，提供了许多功能不同的标签，运行时由浏览器对标签进行解析，呈现出不同标签的样子。
2、基础语法
2.1 注释
<!-- -->注释不会被程序执行，通常用于解释代码
<body>
<!-- html注释 -->
</body>
2.2 标签语法
html标签分为单标签与双标签，都是预定义标签。
单标签：<标签名 属性名=“属性值”/>
双标签：<标签名 属性名="属性值"/>标签内容</标签名>
2.3 HTML文件基本架构
3、常用标签
3.1 文本标签
标题标签 <h1></h1>....<h6></h6>
超链接 <a></a>
段落标签 <p></p>
图片标签 <img src="图片地址"/>
<h1>标题一</h1> <a href="跳转链接">百度一下</a> <p>段落标签</p> <img src="log.jpg"/>
3.2 语义标签
换行 <br/>
标尺线 <hr/>
加粗 <b></b>
空格 　
<br /> <hr /> <b>END</b>
3.3 列表标签
无序列表 <ul></ul>
有序列表 <ol></ol>
列表项 <li></li>
<ul>
<li>无序项1</li>
<li>无序项2</li>
<li>无序项3</li>
</ul>
<ol>
<li>有序项1</li>
<li>有序项2</li>
<li>有序项3</li>
</ol>
3.4 表格标签
表格标签 <table></table> thead表头 tbody表身
表格中的行 <tr></tr>
表格的表头 <th></th>
表格的单元格 <td></td>
<!-- table 表格标签 -->
<!-- cellspacing 设置单元格与单元格之间的距离(外边距) -->
<table border="1" width=400 cellspacing="0">
<!-- tr表格中的行 -->
<tr>
<!-- th 表头单元格 居中加粗-->
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td >张三</td>
<td>84</td>
<td>87</td>
<td>94</td>
</tr>
<tr>
<td>李四</td>
<td>79</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>小王</td>
<td>79</td>
<td>88</td>
<td>92</td>
</tr>
</table>
常见属性
border 边框
height 高度
width 宽度
align 内容水平方向的位置 (left,center,right)
valign 内容垂直方向的位置 (top,middle,bottom)
cellspacing 设置单元格与单元格之间的距离 (外边距)
cellpadding 设置单元格内容到边框的距离 (内边距)
bgcolor 背景颜色
colspan 跨多列合并 (从哪个合并就在哪个单元格添加并删除多余的单元格)
rowspan 跨多行合并 (合并完成后需要删除其他行多余的单元格)
注意：th 表头单元格中的内容是居中加粗的；td 普通单元格没有加粗；绘制表格时必须要添加border边框属性，否则表格不会显示出来
3.5 表单标签
表单区域 <form></form>
单行输入框 <input/>
<input/>标签中提供了type属性，我们可以通过设置type的属性值来改变单行输入框的样式
type = " text " 文本输入框
type = " password " 密码框
type = " radio " 单选框 (多个选项的name必须相同才能互斥)
type = " checkbox " 多选框
<!-- form标签 表示一个表单区域 -->
<form>
账号:<input type="text" placeholder="请输入账号" />
<br />
密码:<input type="password" />
<br />
<!-- 注意:多选框和单选框的多个选项的name必须相同才能互斥 -->
性别:<input type="radio" name="gender" />男
<input type="radio" name="gender" />女
<br />
课程:<input type="checkbox" name="course" />政治
<input type="checkbox" name="course" />语文
<input type="checkbox" name="course" />数学
<input type="checkbox" name="course" />英语
<br />
</form>
下拉选择框<select></select>
选项内容<option></option>
籍贯 <select> <!-- 选择性组件必须要给默认的value --> <option value="101">上海</option> <option value="102">广州</option> <option value="103">苏州</option> <option value="104">武汉</option> </select>
按钮：写在<input>标签中，只不过不同按钮的type属性不同
<!-- 提交按钮，触发表单的提交动作 --> <input type="submit" value="提交"/> <!-- 重置按钮 --> <input type="reset" value="重置"/> <!-- 普通按钮，用来绑定事件 (在JavaScript中会详细介绍) --> <input type="button" value="触发"/>
CSS
1、概述
CSS层叠样式表，是一种样式表语言，提供多种属性来对html标签进行修饰，使我们的页面更加美观。CSS属性决定了网页内容的样子。
2、基础语法
2.1 声明
在head标签中声明即可：
<style></style>
2.2 注释
/* */ 不会被程序执行，用于解释代码
<style>
/* CSS注释 */
</style>
2.3 样式分类
CSS样式表分为：行内样式表、内嵌样式表、外部样式表
简单来说就是css代码写的位置不同而已，如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。
css代码较多时使用外部样式写法，将css代码单独写在一个.css文件中，再在html文件中通过<link/>标签导入即可。
<!-- href=" .css文件位置 " --> <link rel="stylesheet" href="" />
2.4 选择器
选择器是将样式表和标签进行匹配的，常用的选择器有4种
（1）标签选择器：匹配页面中所有的指定标签
（2）id选择器：匹配id值唯一的一个标签
（3）类选择器：匹配class属性相同的一组标签
（4）通配选择器：匹配页面中所有标签
<style>
/* 标签选择器 */
p{ }
/* id选择器 */
#shell{ }
/* 类选择器 */
.content{ }
/* 通配选择器 */
*{ }
</style>
<body>
<p></p>
<div id="shell"></div>
<div class="content"></div>
<div class="content"></div>
<h1></h1>
</body>
3、常用CSS样式
3.1文本样式
3.2 背景样式
3.3 透明度
CSS中opacity属性是用来定义透明度的，并且规定范围是从0.0~1.0(完全透明~完全不透明)
<style>
#photo{
opacity: 0.5; /*完全透明 0.0 ~~ 1.0 完全不透明*/
}
</style>
<body>
<!-- 原图 -->
<img src="log.jpg" />
<!-- 设置半透明 -->
<img src="log.jpg" id="photo"/>
</body>
3.4 伪类
CSS伪类专门用来表示标签的一种的特殊的状态，常用伪类有：
：hover 表示鼠标移入的状态
：active 表示被点击的状态
：focus 向拥有键盘输入焦点(例如输入框)的标签添加样式
<style>
#photo{
opacity: 0.5;
}
#photo:hover{
opacity: 1.0;
}
</style>
<body>
<img src="img/lisa.jpg" id="photo"/>
</body>
当鼠标移入图片时，图片的样式从原本的半透明转变为完全不透明
3.5 盒模型
CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子，只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
一个盒子分为4个部分：内容区、内边距、边框、外边距
标签大小 = 内容区大小 + 内边距大小 + 边框
content：内容区指盒子中放标签内容的区域，子标签都存在于内容区中。width和 height两个属性就是设置内容区大小的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小一致。
padding：内边距指标签内容区到边框以内的区域。内边距会影响整个盒子的大小(涉及计算问题)
border：边框是标签可见框的最外部，也会算在标签大小中。 边框的三要素有：宽度 width、颜色 color、样式 style，三者缺一不可。
margin：外边距指标签边框与周围其他标签相距的区域，外边距不影响盒子的整体大小 ，但是会影响盒子的位置。
3.6 浮动
CSS中的浮动属性可以让标签脱离原来的文档流，浮动后的标签默认是内容的大小，且可以为其设置宽和高。
但是浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局，所以我们通常在浮动的标签后使用清除浮动属性，自动让父级标签撑开
3.7 定位
position属性表示定位方式，用来调整标签元素在网页中的位置。
1. position: static; （默认）
HTML元素默认情况下的定位方式为 static（静态），静态定位的元素不受 top、bottom、left 和 right 属性的影响，不会以任何特殊方式定位，它始终根据页面的正常流进行定位。
2. 固定定位 position: fixed;
固定定位的元素是相对于视口定位的，即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
3. 相对定位 position: relative; (相对定位和绝对定位是我们常用的 )
元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
4. 绝对定位 position: absolute;
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
JavaScript
1、概述
JavaScript简称JS，是给网页添加各种动态功能的一种前端脚本语言，也就是网页的行为。
js与java虽然名字相似，但是毫无关系。
html：决定网页上有什么内容
css：决定网页上内容的样子
js：决定网页的功能
2、基础语法
2.1 JS声明
内部JS: 使用<script></script>标签声明JS脚本，可以声明在head标签中，也可在body标签中。
外部JS: 代码量很多的情况下可以写在外部.js文件中，在html文件中导入外部js文件。
2.2 注释
JavaScript中的注释分为两种,分别是单行注释 // 和多行注释 /* */
<script> // 单行注释 /* 多行注释 */ </script>
单行注释// 快捷键：Ctrl+/ 多行注释/**/快捷键：Ctrl + Shift + /
2.3 变量
通过关键字var生命一个变量
语法：var 变量名=变量值;
var a = 1; //数值类型的变量a var b = "1"; //字符类型的变量b var c = true; //布尔类型的变量c
2.4 数据类型
数据类型用于区分不同类型的数据
数值型 number：整数和浮点数(小数)
字符串型 string ：单引号或双引号都可以表示字符串
布尔型 boolean：返回 true / false
undefined类型 ：声明了变量但没有赋值
var e; //此时e就属于undefined类型 alert(typeof(e)); //type()函数用于获取数据类型
对象型Object类型：JS提供的一些类对象，如日期类Date，封装了获取当前日期和时间的代码
var date = new Date(); //创建Date()类对象，存储到date中 alert(date.getFullYear()); //使用date对象的getFullYear()函数 获取当前年份 alter(date.getMonth() + 1); //获取月 alert(date.getDate); //获取日
2.5 运算符
JS运算符和JAVA运算木几乎没有差别，有部分特殊存在，大致分为：算数、比较、赋值、逻辑
算数运算符
比较运算符
赋值运算符
逻辑运算符
2.6 函数
函数是功能代码的集合，用来封装某块功能代码，使其可以反复使用。
函数的声明和调用：在JS中我们使用关键字 function 来声明一个函数。
语法：function 函数名(参数){ 功能代码 }
注意：函数名可自定义，参数是可选的，功能代码可以有多行，函数需要调用才会被执行。
2.7 事件
事件指的是标签元素在网页上发生的交互动作或状态变化，例如用户点击按钮、输入文本、滚动页面等。通过监听这些事件，可以在特定的情况下执行相应的操作或函数，实现交互和动态效果。
Jacascript中常用的事件有：
2.8 计时器
通过JS我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这种也称之为计时事件。
3、HTML DOM
DOM是document Object Model (文档对象模型) 的缩写，JS认为网页中的每个标签都是一个对象，在js中把这一类标签对象称为html_dom对象，如果要操作网页中的标签，就需要先找到标签对象，网页加载完毕后，在js中生成一个document对象(表示整个html文档)里面提供了一个方法： getElementById();、
//通过标签id获得网页中的标签元素
var t1 = document.getElementById("txt1");
var t2 = document.getElementById("txt2");
找到网页中的标签元素后就可以通过dom对象操作标签的属性了(包括css属性)。
<head>
<style>
#box{
width: 300px;
height: 300px;
}
</style>
<script>
function test(){
var obj = document.getElementById("box");
obj.style.backgroundColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="蓝色"/>
<div id="box"></div>
</body>
除此之外还可以操作标签中的内容：innerText 把标签内部值拿到,获得标签体中的文本内容；innerHtml 获得标签内的所有内容(包括子标签)
4、HTML CSS JS关系
HTML、CSS和JS是构建网页不可或缺的技术组成部分，它们各自扮演不同的角色：
HTML（超文本标记语言）：它是网页内容的骨架，负责创建页面的基本结构和内容布局。HTML元素是构成网页的最基本的块状单位，如段落、标题、图像等。
CSS（层叠样式表）：它负责为HTML元素提供样式描述，包括颜色、字体大小、边距、布局等。CSS使得网页在不同设备和屏幕尺寸下都能保持一致性和美观性。
JS（JavaScript）：它是一种动态脚本语言，允许开发者向用户提供交互式体验，如动画、滑动效果、表单验证等。JavaScript还可以改变和更新网页的内容和样式，使网页具有响应式行为。
浙公网安备 33010602011771号