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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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中
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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
占位符
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>