HTML+CSS+JS
一、Web阶段
1、客户端：客户使用的一端
PC端：
需要安装 C/S
浏览器 B/S
移动端
需要安装
微信小程序
智能家居设备
智能音箱
2、服务器端：为客户端提供服务
硬件：电脑+(Linux)
软件：服务器软件(tomcat)
二、业务介绍
请求：客户端给服务器端发送的数据
响应：服务器端给客户端发送的数据
三、网页技术
1、HTML---网页的骨架 ☆
1）超文本标记语言
（1）超文本：图片、音频、视频、普通文本
（2）标记语言
语法：通过标签的形式展示
a.双标签
<html>内容</html>
b.单标签
<html/>
2）动手实验：HelloWorld
（1）记事本实现：
新建网页文件(后缀为.html的文件)，创建网页的基本结构：
<html>
<head></head>
<body>
网页上的内容
</body>
</html>
（2）IDEA实现：
①新建一个模块 static web
②新建一个目录(可以省略)
③new html file
<!DOCTYPE html> 版本的标识
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
要展示在页面的内容
</body>
</html>
html文件打开方式：在文件系统内找到源文件或IDEA提供的。
3）head中的内容
（1）meta单标签
<meta charset="UTF-8">
charset="UTF-8" 属性
设置网页的编码格式为UTF-8
（2）title 双标签
<title>网页的标题</title>
（3）style
（4）base
（5）script
（6）link
...
4） body中的内容
（1）标题标签 字体大小、加粗、换行
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
（2）段落标签 标记为一个段落，换行功能
<p></p>
（3）换行标签
<br/>
（4）列表
无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
...
</ul>
有序列表
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
...
</ol>
默认是阿拉伯数字
修改成 字母、罗马数字
通过属性进行修改：type="i"
（5）超链接
<a></a>
跳转的目的地：
href=""
其他服务器上的资源
<a href="http://baidu.com">点击跳转至百度</a>
<a href="http://taobao.com">点击跳转至淘宝</a>
本服务器的资源
相对路径:
./ 当前文件所在的目录 (可以省略)
../ 当前文件所在目录的上一级
绝对路径：从根目录开始的路径
<a href="D:\workspace\atguigu\bj0106\day01_HTML_CSS\01_HTML\Hello.html">点击跳转至Hello.html</a>
注意：需要从文件系统中打开此网页
设置新窗口的打开方式
target=""
_self 本窗口(默认)
_blank 新开窗口
（6）图片标签
<img/>
设置图片的路径：
src="" 还是通过相对路径去找图片文件
设置大小：
宽度：width=""
高度: height=""
（7）块标签
a. div div+css 主流布局方式
盒子模型 换行
style="border: 1px red solid;width: 300px;height: 300px"
b. span
没任何效果的双标签
（8）实体
< <
> >
空格
版权符 ©
5）HTML的语法规则
（1）注释
<!-- 注释内容 -->
（2）规则
根标签(html)有且只能有一个
无论是双标签还是单标签都必须正确关闭
标签可以嵌套但不能交叉嵌套
注释不能嵌套
属性必须有值，值必须加引号，单引号或双引号均可(H4之前的规定，H5有新规：有一些属性是可以没有属性值值)
<meta charset="utf-8">
标签名不区分大小写但建议使用小写
6）表格
标签名：
<table>
<tr>
<td></td> 或 <th></th> 加粗和居中的效果
...
</tr>
...
</table>
属性：
table中的属性
border="1"
width="300px"
height="300px"
align="center" 设置表格的位置
tr中也有属性
height="300px"
align="right" 设置内容的对齐方式
td中也有属性
width="300px"
height="300px"
align="right" 设置内容的对齐方式
单元格的合并：
跨列：colspan="2"
跨行：rowspan="2"
7）表单
用户名、密码、验证码、手机号、邮箱、性别、生日、地址、户籍、爱好、政治面貌、上头像...
<form action="数据提交的位置" method="请求方式get/post">
表单项：
name="" 自定义名字
是作为传到后台数据的key值
value="" 用户输入的数据
是作为传到后台数据的value值
（1）文本框 <input />
type="text"
（2）密码 <input />
type="password"
（3）单选按钮 <input/>
type="radio"
设置单选效果：
在n个单选按钮上添加name属性，并起相同属性值
默认选中
在需要设置默认选中的按钮上添加属性checked="checked"
属性名和属性值一样的属性，可以没有属性值
案例：
<input type="radio" name="gender" value="0"/> 男
<input type="radio" name="gender" value="1" checked/> 女
（4）日期 <input />
type="date"
（5）下拉表单
<select name="">
<option value=""></option>
<option></option>
<option></option>
<option></option>
...
</select>
默认选中
在需要被设置默认选中的option标签上添加属性selected="selected"
（6）复选框 <input/>
type="checkbox"
（7）文件表单 <input/>
type="file"
（8）多行文本域
<textarea name=""></textarea>
（9）隐藏域 <input/>
type="hidden"
（10）三种类型的按钮
普通按钮
<input type="button"/>
<button type="button"></button>
提交按钮
<input type="submit"/>
<button type="submit"></button>
重置按钮
<input type="reset"/>
<button type="reset"></button>
</form>
2、CSS---美化网页
1）样式如何添加
（1）行内样式
通过在标签上添加style属性的形式设置样式
style="color:red "
style="color:red;font-size: 50px;"
（2）内部样式
在head标签内添加style标签，设置样式
选择器：选择我需要设置样式的标签
a. 标签选择器 通过标签名进行选择
标签名{样式名:样式值;样式名:样式值...}
p{
color: red;
font-size: 40px;
}
b. id选择器 通过标签的id属性值进行选择
#id属性值{}
#p01{
color: red;
font-size: 40px;
}
c. class选择器 通过标签的class属性值进行选择
.class属性值{}
.p00{
color: blue;
font-size: 40px;
}
（3）外部引入
将内部样式的代码，提取到一个css文件内(后缀为.css的文件)
在html页面内做一个引入即可
<link rel="stylesheet" href="css文件的路径">
3、JavaScript---行为
1）JavaScript
JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)
2）js的特性
① 脚本语言 运行在客户端
② 基于对象
③ 弱类型
④ 事件驱动
⑤ 跨平台性
3）js的HelloWorld
需求：在网页上创建一个按钮，当用户单击这个按钮的时候，给出一个警示框
① HTML代码
<input type="button" value="点我" id="btn01"/>
② js代码
位置：head标签内
<script>
window.οnlοad=function () {
var btn01=document.getElementById("btn01");
btn01.οnclick=function () {
alert("你点到我了...");
}
}
</script>
4）js的引入方式
（1）内部js
script标签可以在html代码的任意位置
代码解释：
window.οnlοad=function () {} 网页加载完后执行的函数
var btn01=document.getElementById("btn01"); 从文档对象中根据id属性值获得一个Element(元素)
btn01.οnclick=function () {} 为btn01这个元素绑定单击事件，当用户单击元素的时候，执行后面的函数
alert("你点到我了1234567890001111..."); 警示框
（2）外部js
新建一个js文件(后缀名为.js的文件)，将js代码写在js文件内，在html文件内引入js即可
<script src="js文件的路径"></script>
注意：此时script标签已经引入一个js文件，那么该标签内的js代码将失效
5）js的数据类型
（1）基本数据类型
数值型： number 10 20 1.5 1.34 ...
字符串： string "10" "abc" "尚硅谷"...
布尔型： boolean true false
js中其他数据类型都可以和布尔型自动转化
空串/0/undefined/null/NaN 都是false,其他都是true
特殊的值：undefined/null/NaN
（2）引用数据类型
对象
数组
6）变量的声明
var 变量名;
变量名=值;
var 变量名=值;
alert(typeof 变量)