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） ??????3.Editplus操作1.指定创建文件（.html）1.创建模板页Tools->preference->file->Templates->HTML->file name 重新选定模板 ??????????2.快速查看网页的效果快捷键：Ctrl+B设置路径：tools->preference->tools->Browser1 ?指定浏览器 ??????????3.代码折叠效果view->Code Folding->user codefolding ??????????4.代码缩进线条view->Indent Guide ??????????5.代码行号显示view->line number ?ctrl+shift+L ???????????6.取消bak文件Tools->Preferences->File->取消 Create backup file when saving ??????????7.修改文件编码格式Tools->Preferences->File->将Defaule Encoding 设置为UTF-8
图像和链接
url
1.目录结构 ?目录：web站点中文件夹的名称2.url ?统一资源定位器，俗称：路径作用：标识资源的位置3.表现形式 ?1.绝对路径 ?完整的路径1.网络资源 ?通过以下四部分来获取网络资源的路径1.协议名:ex:http2.主机名（域名/IP）ex:www.jd.com3.目录结构：ex:da/index/img4.资源文件名：ex:logo.jpg ????http://www.jd.com/da/index/img/logo.jpg2.本机资源 ??从最高盘符处开始找，一直找到资源所在的目录 ex:D:\yang\练习\img\flower.jpg ?2.相对路径 ?从当前文件位置处开始，一直到资源文件所在的位置，所经过的路径就是相对路径 ?1.同目录 ?直接通过资源文件名称进行引用ex:a.jpg2.子目录 ?先进入到子目录中，然后再对资源文件进行引用ex:子目录1/子目录2/资源文件名称ex:index/img/b.jpg3.父目录 ?先返回到父级目录再对资源文件进行引用ex:../表示返回到上一级ex:../c.jpg ?3.根相对路径 ?永远都从web站点的根目录开始找的由/作为开始，表示web站点的根目录/index/img/d.jpg
图像
1.图像格式 ?jpg(jpeg):有损压缩png：背景是透明gif：动画2.图像 ?语法：<img>属性： ???src:(源)要显示的图像的路径，urlwidth:宽度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:g-yangyan@tedu.cn">打开邮件</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> ?????2.链接到锚点 ?跳转到本页的锚点处<a href="#锚点名称">内容</a>跳转到其他页面锚点处<a href="页面的url#锚点名称">内容</a>
表格
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/right2.valign ?设置该行内容的垂直对齐方式取值：top/center/bottom3.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中
表格复杂使用
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.表单的作用 ?用于显示，收集数据，并提交信息给服务器完整的表单处理包含两部分： ?1.实现数据交互的可见界面元素（前端）ex：文本框，密码框，按钮 ???2.提交后的表单的数据处理（服务器端） ?1.表单元素 ?标记：<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 独一无二的标识 ?2.表单控件 ?1.作用 ?用于接收用户数据并依托于表单提交给服务 ???2.表单控件的分类 ?1.input元素：文本输入框（用户名，密码），按钮，单选按钮，复选框 ?标记：<input> ?????2.textarea ?多行文本域标记：<textarea></textarea>3.select 和 option ?选项框 ?标记：<select><option></option> ?????</select> ?????4.其他元素3.input元素 ?1.作用： ?用于收集用户信息 ???2.语法： ?标记<input>主要属性：（同有的属性，指所有input都具有的属性） ?1.type ?根据type的值，来创建各种类型的输入控件，比如：文本框、密码框、按钮2.name ?定义控件名称，提供给服务器使用注意：如果不给控件设置名称，则数据无法提交匈牙利命名法：控件的缩写+功能名称ex：txtName txtPassword ???????3.value ?设置控件的值，也是最终提交给服务器的值4.disabled ?禁用控件 表示控件不可用（不能获取他的值，也不能被提交） 注意：该属性没有值 <input type="" name="" value="" disabled>3.input元素详解 ?1.文本框与密码框 ?文本框：<input type="text">密码框：<input type="password"> ?专有属性： ??1.maxlength 限制输入字符数的数量 取值：数字2.readonly ?只读注意：readonly只读，允许被提交 ?????disabled禁用，不能被提交3.name ?文本框和密码框缩写：txtex：txtName txtPassword<input type="text" name="txtName" ><input type="password" name="txtPwd">注意：txt后面单词首字母大写，多个单词每个首字母都要大写4.placeholder ?占位符 ?????2.单选按钮和复选框 ?单选按钮：<input type="radio">复选框：<input type="checkbox"> ?属性： ?1.name ?名称，同时具备分组的作用单选按钮：一组中只能有一个按钮被提交复选框：一组数据后台获取时名称是相同的2.value ?值，被选中后提交的值3.checked ?设置默认被选中该属性无值3.按钮 ?1.提交按钮 ?<input type="submit">作用：提交表单数据给服务器2.重置按钮 ?<input type="reset">将表单恢复到初始化的状态3.普通按钮 ?<input type="button">作用：由用户自定义功能（js）属性： ?1.name ?定义按钮名称，缩写：btn2.value ?按钮上面的文字内容4.其他按钮 ?1.图片按钮（提交） ?<input type="image"> 属性：src2.按钮(提交按钮) ?<button>内容</button> ?????4.隐藏域和文件选择框 ?1.隐藏域 ?<input type="hidden">作用：要提交给服务器，但是又不想给用户看到的数据，放到隐藏域中2.文件选择框 ?<input type="file">作用：允许打开文件的选择框，选择文件进行上传属性： ?1.name ?缩写：txt2.value ?值注意： ?使用文件选择框上传文件时候，有以下两点要求： ?1.<form>的method属性必须是post2.<form>的enctype属性必须是multipart/form-data ?4.textarea元素 ?1.完成多行文本的录入功能2.语法 ?标记：<textarea>内容（默认值）</textarea> ?????属性： ?1.name ?名称，缩写为txt ???????2.cols ?去指定文本区域的列数变相的去设计控件的宽度3.rows ?指定文本区域的行数 ?????????变相的去设置控件的高度 ???????4.readonly ?只读 ?5.选项框 ?分两种形式： ?下拉选项框滚动列表语法： 1.<select></select>作用：创建选项框属性： ?name：名称，selsize：指定选项框默认能显示几项内容 ?????默认值是1，如果大于1，则为滚动列表multiple：设置允许多选 ?????????该属性没有值 ????2.<option></option> ???作用：定义选项框中子选项属性： ?value：选项的值selected：预选中，设置默认被选中的选项 ?????????该属性无值。 ?6.其他元素 ?1.lable元素 ?作用：关联文字与表单控件，点击文字时候如同点击表单一样语法： ?<lable>内容</lable>属性：for ?表示该元素相关联的表单控件的ID属性值2.为控件分组 ?<fieldset></fieldset>子元素：<legend></legend> 来指定分组的标题 ?ex： <fieldset><legend>标题内容</legend> </fieldset>
HTML
原文地址：https://www.cnblogs.com/guobaoyuan/p/8531168.html