web前端
什么是web
使用浏览器去访问的程序 web程序：习惯性叫他程序 细分：电商网站、门户网站、应用网站
什么是web前端
web程序的代码存储在服务器端
代码分两种：一种运行在客户端，一种运行在服务器端
运行在服务器端的代码：后台代码
运行在客户端（浏览器）：前端代码 （web前端）
完整的（优秀的）web程序：前端+后台
学什么
1.静态页面编写：按照产品设计完成网页的编写（.html文件），可以在浏览器里运行 技术：html(5)+css3
2.添加页面功能：动态特效，页面交互技术：javascript,jQuery,DOM
3.和服务器的交互技术：sever，php，ajax
4.复杂开发：HTML5，框架技术（bootstrap，node，js，angular.js），移动端开发，微信开发
web基础知识⭐
1.web与internet
1.internet 一个全球性的计算机互联网络，因特网，互联网，交互网
2.Internet所提供的服务
1.email邮件服务 2.Telnet 远程登录 3.www服务 （world wide web）万维网 4.bbs 电子公告板，俗称论坛 5.FTP 文件的上传下载
3.基本实现技术
1.分组交换原理（先拆分后重组） 2.tcp/ip协议
4.web
1.指的是网络环境下的一种应用程序---网页程序，简称网页 作用：将各类信息和服务进行无缝连接，并且提供生动的图形用户界面。信息共享
5.工作原理
1.由服务器，浏览器，通信协议组成
通信协议：http（hyper text transfer protocol）超文本传输协议
浏览器：IE，Firefox火狐，chrome谷歌，Safari苹果，opera欧朋
功能：
1.提交请求
2.作为HTML和js的解释器
3.以图形化的方式显示文本
服务器：
功能：
1.存储web上的信息
2.响应浏览器请求并且执行服务器端程序
3.具备基本的安全性功能
服务器产品：
tomcat
iis
Apache
服务器端技术：
python
Java
PHP
.net
都有数据库访问能力
前端技术：
HTML
css
js
运行在客户端，由浏览器解析执行
HTML概述⭐
1.什么是HTML？
hyper text markup language
超级 文本 标记 语言
普通文本a：无特殊意义
超级文本<a>:超链接功能
超文本：文本具备特殊功能
标记：超文本的组成形式<a>
语言：拥有自己的语法结构
由HTML编写的web文件，以.HTML或.htm作为后缀。
2.特点
1.以.HTML或.htm作为后缀
2.由浏览器解析执行
3.可以嵌套脚本语言（JavaScript，VBScript）
4.用带有尖括号的“标记”来标识
3.HTML基础语法
1.标记
什么是标记？
在HTML中，用于描述功能的符号，称之为标记
2.语法
标记在使用时，必须用尖括号（<>）括起来
标记的分类：
1.封闭类型标记
也称为双标记，必须成对出现
<标记>内容</标记>
例如：<a>网页</a>
注意：封闭类型标记必须成对出现，如果没有被封闭，会产生意想不到的效果。
例如：
<p>段落一</p>
<h1>标题元素
<p>段落二</p>
2.非封闭类型
也称为单标记或空标记
语法：<标记>或<标记/>
单标记不能包含内容
例如：
<br>或<br/>表示换行
<hr>或<hr/>表示横线
<img>
3.元素
元素即标记（标签）
4.元素的嵌套
元素之间可以相互嵌套，形成更为复杂的页面结构
元素嵌套：在一个元素中，又出现另一个元素
<p>
<a>
<img>
</a>
</p>
注意：成对出现，成对缩进
5.属性和值
1.什么是属性
属性用来修饰元素的
2.语法
属性的声明必须位于开始标记里
<标记 属性=“值” 属性=“值”...></标记>
<p align="center" id="p1">段落一</p>
3.标准属性（只有以下4个）
1.id 用来定义元素在页面中的唯一标识
2.title 鼠标移入到元素上时，所提示的文本内容
3.class CSS中引入类选择器
4.style CSS中定义元素的行内样式
6.注释
在页面中编写完成后，不会被浏览器解析运行
可以将代码的解释说明写在注释中，便于其他程序员查看。
语法: <!--注释内容-->
注意:
1.本身不能嵌套
<!--<!---->--> 错误的写法
2.不能嵌套在<>中
3.HTML和XHTML和HTML5
w3c负责定制和推广HTML
w3c：万维网联盟
1999年12月24日html 4.01标准
2000年1月26日w3c推出XHTML1.0标准
XHTML与html4.01几乎相同
XHTML是一个更纯净的版本
如：<br>早XHTML中必须要求结束<br/>
2014年9月。HTML5目标：实现更简洁的html代码
能不写就不写，能少写就少写
例如：<br>或<br/>
<p align="center"></p>正确
<p align=center></p>正确
<input readonly="readonly">正确
<input readonly=readonly>正确
4.HTML文档结构
1.文本类型的声明
<!doctype html>
作用：指定HTML的版本和风格
2.HTML页面
语法：<html></html>
位于<doctype html>之下
练习：创建一个网页，名称为01.html，并且搭建网页结构（docype html）
3.html页面内容
1.页面头部内容
作用：用来定义页面的全局信息
2.语法
<head></head>
紧跟在html之后，是html中首个子元素
3.头部所包含的内容
1.定义网页的标题
<title>标题内容</title>在网页的标签页显示
2.定义网页的编码格式,关键字，描述等
<meta charset="utf-8">
<meta name="keywords" content="关键字">搜索栏里搜索的关键字
<meta name="description" content="描述内容">搜索完显示的具体内容
3.<script></script>定义或引用javascript
4.<style></style>定义内部样式
5.<link>引用外部样式
4.页面主体内容
语法：<body></body>
属性：(写在<body>中)
text：表示文本颜色
bgcolor：表示网页的背景颜色
练习：
在已有网页基础上，完善网页的头元素和主体内容布局，在body中添加一行文本，设置文字颜色为红色，背景颜色为黑色
文本标记⭐
1.特殊字符
1. 空格
2.>>
3.<<
4.©圈C，版权免责声明字符
5.¥人民币字符
2.文本样式
1.<i></i>斜体
<u></u>下划线
<s></s>删除线
<b></b>加粗
<sup></sup>上标
<sub></sub>下标
3.标题元素
以标题形式来显示文本内容
语法：<hn></hn> n代表1-6数字
<h1></h1>一级标题，加粗，字号最大
...
<h6></h6>六级标题，加粗，字号最小
特点：
1.字体加粗
2.改变字体大小
3.上下文之间有空白间距
4.独自成行
4.段落元素
语法：<p></p>
以段落的形式显示文本
形式：字体大小为默认大小，段落独自成行，并且上下文有垂直空白间距
5.换行元素
语法：<br>或<br/>
6.分割线元素
语法<hr>或<hr/>
属性：
size：取值px为单位的数值
color：颜色
width：宽度
align：线条的水平对齐方式
7.预格式化
保留源文件中的格式，即源文件中的换行和空格的效果
语法：<pre></pre>
8.分区元素
1.块分区
语法：<div></div>
形式：
1.独自成行
2.无任何明显效果
作用：布局
2.行分区
语法：<span></span>
形式：
1.多个span在一行内显示
2.无任何特殊效果
作用：用来处理一行文字的不同样式
标签元素分类⭐
1.行内元素与块级元素
1.行内元素
多个元素在一行内显示
ex：
span，i，b,s,u,sub,sup,（img,a）
作用：大部分行内元素为了处理文本的显示效果
2.块级元素
每个块级元素会独占一行，即前后都有换行
ex：div，h1~h6,p,(结构标记)
作用：用来做布局
2.嵌套问题
1.尽量不要让行内元素嵌套块级元素
<span>
<div>
</div>
</span>
以上结构不推荐
2.段落元素<p></p>是不允许嵌套其他块级元素（p也不能嵌套p）
图像和链接
url⭐
1.目录结构
目录：web站点中文件夹的名称
2.url
统一资源定位器，俗称：路径
作用：标识资源的位置
3.表现形式
1.绝对路径
完整的路径
1.网络资源
通过以下四部分来获取网络资源的路径
1.协议名:ex:http
2.主机名（域名/IP）ex:www.jd.com
3.目录结构：ex:da/index/img
4.资源文件名：ex:logo.jpg
http://www.jd.com/da/index/img/logo.jpg
2.本机资源
从最高盘符处开始找，一直找到资源所在的目录
ex:D:\yang\练习\img\flower.jpg
2.相对路径
从当前文件位置处开始，一直到资源文件所在的位置，所经过的路径就是相对路径
1.同目录
直接通过资源文件名称进行引用
ex:a.jpg
2.子目录
先进入到子目录中，然后再对资源文件进行引用
ex:子目录1/子目录2/资源文件名称
ex:index/img/b.jpg
3.父目录
先返回到父级目录再对资源文件进行引用
ex:../表示返回到上一级
ex:../c.jpg
3.根相对路径
永远都从web站点的根目录开始找的
由/作为开始，表示web站点的根目录
/index/img/d.jpg
图像⭐
1.图像格式
jpg(jpeg):有损压缩
png：背景是透明
gif：动画
2.图像
语法：<img>
属性：
src:(源)要显示的图像的路径，url
width:宽度
height:高度
注意：
取值：数值px单位
width和height如果只指定其中一个属性，那么另外一个也会跟着等比缩放。
title:鼠标移入停留时显示的文字
alt:图片出错时，显示的文字
练习：显示三张图片，要求图片路径位于同级，子级，父级目录
3.链接
1.作用：链接，又称超链接，设置页面中允许 被点击的内容。在网页中，链接允许完成页 面间的跳转动作。
2.语法
标记：<a>内容</a>
属性：
href:链接的URL（要跳转到的页面的地址）
target:目标，指定打开新网页的方式
取值：
_self:（默认值）在自身的标签页中打开
_blank:在新的标签页中打开
title:鼠标放到链接上的提示
3.链接的表现形式
1.目标为下载资源
<a href="*.zip/*.rar"></a>
如果链接地址是压缩文件，就是下载操作
2.电子邮件链接
<a href="mailto:932023756@qq.com">打开邮件</a>
注意:电脑必须装有邮箱客户端，不然是不能使用的！
3.返回页面顶部的空链接
<a href="#">返回页面顶部</a>
4.链接到JS
<a href="javascript:JS代码">执行JS功能</a>
4.锚点
1.作用
在页面中的某行位置处，做一个记号
方便页面能够随时跳转到记号位置处
2.使用方式
1.定义锚点
1.通过a标记的name属性定义锚点
<a name="自定义锚点名称">内容</a>
2.通过任意标记的ID属性定义锚点
<ANY id="自定义锚点名称"></ANY>
ANY任意的意思
2.链接到锚点
跳转到本页的锚点处
<a href="#锚点名称">内容</a>
跳转到其他页面锚点处
<a href="页面的url#锚点名称">内容</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片</title> </head> <body> <img src="https://mmbiz.qpic.cn/mmbiz_jpg/9ic3KXmZicj8Kic9Pt8icf1iauibKwibKpODcibtUhmC2m8icdH7Lq8GUSbeq1cdLqpicjf8kUYVJXUEOqyzm7NmVfkjpR3w/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1" alt="页面加在不出来了" title="这是一个图片啊" style="width: 800px;"> <!-- title是我们将鼠标放在图片时有提示的文字 --> <!-- alt 是当我们的图片加载不出来的时候有显示 --> <!-- style 是每个标签中都有的一个属性 这是一个内嵌的css样式 --> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> div{ height: 800px; width: auto; } </style> </head> <body> <!-- 超链接 --> <a href="http://www.baidu.com" title="这是超链接" target="_self">点一下</a> <!-- 在当前窗口中打开内容 --> <a href="http://www.baidu.com" title="这是超链接" target="_blank">轻点点</a> <!-- 在新窗口中打开内容 --> <!-- 通过a标签可以实现文件下载 --> <a href="路径是一个压缩包的路径点击的时候就是下载">下载文件</a> <!-- 通过a标签可以实现邮件发送 --> <a href="mailto:932023756@qq.com">发送邮件给自己</a> <!-- 返回顶部 --> <a href="#">返回顶部</a> <!-- 锚点 --> <!-- a标签定义锚点 --> <a name="a1"></a> <!-- 其它标签定义锚点 --> <p id="p1" ></p> <!-- 跳转锚点 --> <a href="#NOM2">跳转到目录二</a> <div id="NOM1">目录一</div> <p>内容</p> <div id="NOM2">目录二</div> <p>内容</p> <a href="#NOM1">跳转到目录一</a> <div id="NOM3">目录三</div> <p>内容</p> </body> </html>
表格⭐
1.表格的作用
按照一定的格式（结构）来显示数据
表格是由单元格，按照从左往右，从上往下的顺序排列的
表格中的数据最终保存在单元格中
2.使用表格
1.创建表格
1.定义表格：<table></table>
2.创建表行：<tr></tr>
3.创建列：<td></td>
注意：传统的表格，默认每行的列数都是统一化的。
练习：
创建一个3行4列的表格
步骤：
1.创建一对：table
2.在table中创建3对tr
3.在tr中创建4对td
2.表格属性
table属性
1.width
设置表格的宽度
2.height
设置表格的高度
3.align
设置表格的水平对齐方式
取值：left/center/right
4.border
边框，指定边框的宽度
5.bgcolor
设置表格的背景颜色
6.cellspacing
设置单元格的外边距（单元格与单元格之间的距离）
7.cellpadding
设置单元格内边距（单元格边框与内容之间的距离）
3.tr属性
1.align
设置该行内容水平对齐方式
取值：left/center/right
2.valign
设置该行内容的垂直对齐方式
取值：top/center/bottom
3.bgcolor
设置该行的背景颜色
4.td属性
1.align 水平对齐
2.valign 垂直对齐
3.width 列宽度
4.hegiht 列高度
5.colspan 设置单元格跨列
6.rowspan 设置单元格跨行
注意：
1.每行中的指定列的宽度，都是一致的，默认以最宽的为主
3.表格的标题
标记：<caption></caption>
注意：
1.caption紧跟在table之后
2.一个表格只能有一个标题
4.th 行标题或列标题，字体有加粗的效果，放在tr中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" align="center" cellspacing="0" bgcolor="#ff7f50" width="800" height="600" cellpadding="60"> <tr> <th>ID</th> <th>班级</th> <th>名称</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>9</td> <td>张山</td> <td>16</td> </tr> <tr> <td>2</td> <td>9</td> <td>李思</td> <td>18</td> </tr> <tr> <td>3</td> <td>9</td> <td>王武</td> <td>20</td> </tr> </table> <table border="1" cellspacing="0" width="300" height="300x"> <tr align="center" valign="center" bgcolor="red"> <th>1</th> <th>2</th> <th>3</th> </tr> <tr align="center" valign="center" bgcolor="green"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr align="center" valign="center" bgcolor="blue"> <td >11</td> <td>12</td> <td colspan="2">13</td> </tr> <tr align="center" valign="center" bgcolor="#8a2be2"> <td>01</td> <td>02</td> <td>03</td> </tr> </table> </body> </html>
表格复杂使用⭐⭐
1.行分组 可以将表格分成3个部分 1.表头：<thead></thead> 2.表主体：<tbody></tbody> 3.表尾：<tfoot></tfoot> 2.不规则表格 通过td的colspan（跨列）和rowspan（跨行）属性设置 1.跨列 从指定的单元格位置处，横向向右合并几个单元（包含自己） 注意：被合并掉的单元格需要删除 属性：colspan 取值：数字（合并单元格的个数） 2.跨行 从指定的单元格位置处，纵向向下合并几个单元格（包含自己） 注意：被合并掉的单元格要删除 属性：rowspan 取值：数字（合并单元格的个数） 3.表格嵌套 在单元格中去嵌套另一个表格 <table> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> </tr> </table>
结构标记⭐
1.什么是结构标记 在HTML5中，专门提出一组标记用来表示网页的结构，即制作布局 目的：取代div布局，提升布局代码的语义性和可读性 ex：<div></div>-----><header></header> 2.常用的结构标记 1.header元素 作用：用来定义网页或者其他部分内容的页眉（靠顶部的内容） 语法：<header>内容</header> 2.nav元素 作用：用来表示网页的导航链接部分 语法:<nav></nav> 3.section元素 语义：小节 作用：定义页面中的节，表示页面的主体内容 语法：<section></section> 4.footer元素 作用：定义页面的底部信息，用户不太注意的内容：网站备案号，解释说明... 语法：<footer></footer> 5.aside元素 作用：用来定义页面中的边栏信息 语法：<asdie></aside> 6.article元素 语义：文章，艺术 作用：定义一些简短的内容，章，节。比如像论坛的帖子，用户的评论，微博条目 语法：<article></article> 注意：如果以后出现无法被结构标记取代的模块，那么继续用div布局
表单⭐⭐⭐
表单的作用
用于显示，收集数据，并提交信息给服务器
完整的表单处理包含两部分：
1.实现数据交互的可见界面元素（前端）
ex：文本框，密码框，按钮
2.提交后的表单的数据处理（服务器端）
表单元素
标记：<form></form>
属性：
1.action
定义表单提交时发生的动作
具体取值要与后端服务器人员协同完成（后端人员给一个url路径）
如果省略不写，默认提交给本页
2.method
定义表单提交数据的方式
取值：
1.get（默认值）
1.明文提交，提交的数据会显示在浏览器的地址栏上
2.安全性不高
3.提交的数据大小有限制 小于2kb
4.场合：用于向服务器要数据的时候使用，搜索关键字提交
2.post
1.隐式提交，不会将提交的信息显示在浏览器的任何位置
2.安全性高
3.无大小限制
4.场合：要传递数据给服务器进行处理的时候，登录，注册，上传文件...
3.delete，put...等
3.enctype
作用：指定数据进行编码的方式
取值：
1.application/x-www-form-urlencoded
默认值，可以将表单中的普通文本，特殊字符，标点符号都可以进行二进制编码，然后提交给服务器
（无法对文件进行提交）
2.multipart/form-data
将表单中的文件进行二进制编码再提交（字符、标点符号无法编码提交）
3.text/plain
将表单中的普通字符进行二进制编码提交，其余无法提交
4.name
定义表单名称，js用到的比较多
5.id 独一无二的标识
表单控件
1.作用 用于接收用户数据并依托于表单提交给服务 2.表单控件的分类 1.input元素：文本输入框（用户名，密码），按钮，单选按钮，复选框 标记：<input> 2.textarea 多行文本域 标记：<textarea></textarea> 3.select 和 option 选项框 标记：<select> <option></option> </select> 4.其他元素
input元素
1.作用： 用于收集用户信息 2.语法： 标记<input> 主要属性：（同有的属性，指所有input都具有的属性） 1.type 根据type的值，来创建各种类型的输入控件，比如：文本框、密码框、按钮 2.name 定义控件名称，提供给服务器使用 注意：如果不给控件设置名称，则数据无法提交 匈牙利命名法：控件的缩写+功能名称 ex：txtName txtPassword 3.value 设置控件的值，也是最终提交给服务器的值 4.disabled 禁用控件 表示控件不可用（不能获取他的值，也不能被提交） 注意：该属性没有值 <input type="" name="" value="" disabled>
input元素详解
input元素详解 1.文本框与密码框 文本框：<input type="text"> 密码框：<input type="password"> 专有属性： 1.maxlength 限制输入字符数的数量 取值：数字 2.readonly 只读 注意：readonly只读，允许被提交 disabled禁用，不能被提交 3.name 文本框和密码框缩写：txt ex：txtName txtPassword <input type="text" name="txtName" > <input type="password" name="txtPwd"> 注意：txt后面单词首字母大写，多个单词每个首字母都要大写 4.placeholder 占位符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义列表</title> </head> <body> <!--input框 禁用--> <input type="text" disabled> <!--input框 最大限制数量--> <input type="text" maxlength="6"> <!--input框 只可以读--> <input type="text" readonly> <!--input框 隐藏域--> <input type="hidden"> <!--input框 文件框--> <input type="file"> <!--input框 密码框--> <input type="password"> <!--input框 电话号--> <input type="tel"> <!--范围--> <input type="range"> <!--url--> <input type="url"> <!--数字--> <input type="number"> <!--日期--> <input type="date"> <!--周--> <input type="week"> <!--月--> <input type="month"> <!--搜索--> <input type="search"> <!--非空限制--> <input type="text" required> </body> </html>
单选按钮和复选框
单选按钮：<input type="radio"> 复选框：<input type="checkbox"> 属性： 1.name 名称，同时具备分组的作用 单选按钮：一组中只能有一个按钮被提交 复选框：一组数据后台获取时名称是相同的 2.value 值，被选中后提交的值 3.checked 设置默认被选中 该属性无值
按钮
1.提交按钮
<input type="submit">
作用：提交表单数据给服务器
2.重置按钮
<input type="reset">
将表单恢复到初始化的状态
3.普通按钮
<input type="button">
作用：由用户自定义功能（js）
属性：
1.name
定义按钮名称，缩写：btn
2.value
按钮上面的文字内容
4.其他按钮
1.图片按钮（提交）
<input type="image">
属性：src
2.按钮(提交按钮)
<button>内容</button>
4.隐藏域和文件选择框
1.隐藏域
<input type="hidden">
作用：要提交给服务器，但是又不想给用户看到的数据，放到隐藏域中
2.文件选择框
<input type="file">
作用：允许打开文件的选择框，选择文件进行上传
属性：
1.name
缩写：txt
2.value
值
注意：
使用文件选择框上传文件时候，有以下两点要求：
1.<form>的method属性必须是post
2.<form>的enctype属性必须是multipart/form-data
textarea元素
1.完成多行文本的录入功能
2.语法
标记：<textarea>内容（默认值）</textarea>
属性：
1.name
名称，缩写为txt
2.cols
去指定文本区域的列数
变相的去设计控件的宽度
3.rows
指定文本区域的行数
变相的去设置控件的高度
4.readonly 只读
选项框
分两种形式：
下拉选项框
滚动列表
语法：
1.<select></select>
作用：创建选项框
属性：
name：名称，sel
size：指定选项框默认能显示几项内容
默认值是1，如果大于1，则为滚动列表
multiple：设置允许多选
该属性没有值
2.<option></option>
作用：定义选项框中子选项
属性：
value：选项的值
selected：预选中，设置默认被选中的选项
该属性无值。
其他元素
1.lable元素 作用：关联文字与表单控件，点击文字时候如同点击表单一样 语法： <lable>内容</lable> 属性：for 表示该元素相关联的表单控件的ID属性值 2.为控件分组 <fieldset></fieldset> 子元素：<legend></legend> 来指定分组的标题 ex： <fieldset> <legend>标题内容</legend> </fieldset>