HTML
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://images.cnblogs.com/OutliningIndicators/ContractedBlock.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://images.cnblogs.com/OutliningIndicators/ContractedBlock.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://images.cnblogs.com/OutliningIndicators/ContractedBlock.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://images.cnblogs.com/OutliningIndicators/ContractedBlock.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>