web前端学习笔记.docx

《web前端学习笔记.docx》由会员分享，可在线阅读，更多相关《web前端学习笔记.docx（494页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、01_HTMLBASICDay01第一个html文档赵旭zhaoxuWEB 前端WEB-网页1、要求1、打字速度2、复习和预习工作3、英文4、练2、课程体系1、阶段一 - 基础1、HTML5Basic2、CSS3Basic3、PROJECT1-京东首页4、CSS3Core(核心)5、PROJECT2-京东详情页6、JAVASCRIPTBASIC2、阶段二 - JS1、JAVASCRIPTCORE2、jQuery3、阶段三1、服务器端2、HTML5CORE3、AJAX4、Bootstrap4、阶段四1、AngularJS2、React3、IOnic=1、WEB基础知识1、web 与 Intern

2、et1、InternetInternet是一个全球性的计算机互联网络 ，中文名因特网,网Internet 提供的服务：Telnet,Email,WWW,BBS,FTP基本实现技术：1、分组交换原理2、TCP/IP协议簇2、Web Web 是运行在 Internet 上的一种应用(网页应用)Web 所谓的WWWWeb的规范是由W3C负责定制和推广W3C : World Wide Web Consortium(万维网联盟)Web能够将服务和信息关联到一起服务：Email,BBS,.信息：文字，图片，音视频，文件等3、Web的工作原理基于 B/S 结构模式的程序B : Browser(浏览器)S :

3、 Server(服务器)C/S : C : Client(客户端)S : Server由Web服务器，浏览器，通信协议 三部分组成Web服务器：允许为其他用户提供服务的机器通信协议：web 采用的是 http 协议HTTP : Hyper Text Transfer Protocol超文本传输协议规范了数据是如何打包以及如何传递的。4、Web服务器1、主要功能1、存储信息2、响应浏览器的请求，执行服务器端程序3、具备基本的安全功能2、主要Web服务器产品1、TOMCAT2、IIS3、APACHE3、服务器端相关技术1、php2、JSP(Java Server Page)3、ASP4、ASP.N

4、ET以上技术都具备访问数据库的能力5、浏览器1、主要功能1、代理用户 提交请求(User Agent,UA)2、作为HTML/CSS/JS解释器3、以图形化方式显示页面2、主流的浏览器产品1、Microsoft IE2、Mozilla Firefox3、Google Chrome4、Apple Safari5、Opera3、客户端技术运行于浏览器1、HTML2、CSS3、JavaScript(JS)2、HTML快速入门(重点)1、超文本Web 是一个超文本文件的集合2、什么是HTMLHTML：Hyper Text Markup Language(超文本标签语言)超文本：具备一些特殊功能的文本a

5、 : 英文字符的第一个超文本 a : 在页面中具备超链接作用b : 英文字符的第二个超文本 b : 在页面中会加粗显示文本标签：超文本的组成形式超文本 a:超文本 b:语言：具备一定的语法结构用HTML编写的网页文件，以.htm或.html作为文件的后缀(超文本文件)运行环境：任何一款浏览器开发工具：任意一款文本编辑工具都可以3、HTML基础语法1、标记语法在html中，用于描述功能的符号，称为标记,标记在使用时，必须用括起来标记分为1、封闭类型的标记也成为双标记，标记必须成对出现语法：内容如果一对双标记中没有结束标记的话，网页中会产生意想不到的效果ex:百度加粗显示段落文本2、非封闭类型的标

6、记也称为单标记或空标记语法：或ex: : 换行: 图片2、元素元素即标记百度1、元素的嵌套HTML中通过嵌套的元素来形成更为复杂的页面结构注意：1、嵌套顺序 正确 错误2、格式问题被嵌套的东西要用 缩进来表示(Tab)ex:控制的内容控制的内容。加粗的文本2、属性 和 值属性：是用来修饰元素的。ex：想控制 p 标记里文本的 水平排列方式 为 右对齐语法：1、属性的声明必须位于开始标记里2、属性与标记之间要用一个空格隔开3、一个元素允许有多个属性，多属性之间用 空格 隔开， 并且排名不分先后4、属性 和 值之间用 = 连接ex:文本水平排列方式：align取值：left/center/righ

7、t这是一段文本设置 id 属性值为 p1标准属性：html中所有元素都具备的属性称之为标准属性1、id ：元素在页面中的独一无二的标识2、title ：鼠标移入到元素上时所提示的文本3、class ：指定元素引用的类选择器(样式中使用)4、style ：定义元素的内联样式(样式中使用)3、注释不会被浏览器所编译的内容，称为注释语法：注意：1、注释不能嵌套2、注释不能写在中div 错误4、文档结构1、HTML文档结构任何网页都是由1、文档类型声明2、html页面两部分组成2、html 元素包含两个子元素1、用于表示网页头部信息,用于定义页面全局信息或页面的元数据2、显示给用户去看的内容3、hea

8、d元素允许包含的子元素:1、网页标题2、告诉浏览器用什么样的编码解析网页内容注意：保证网页文件的 编码格式 也是 utf-8练习：1、创建一个超文本文档，名称为 01.html2、指定文档类型声明3、搭建网页结构设置 标题 ：我的第一个html练习文件设置 编码 ：utf-8网页文件编码 ：utf-84、编辑网页内容我的第一个html练习内容尝试用一对b标记将以上内容括起来，观察效果3、文本标记1、特殊文本任意多的回车和空格，最终只会被解析成一个空格在页面输出：这是一个p标记在页面中，要通过转义字符来表示 空格， 等一些字符1、 表示一个空格2、>表示一个 3、<表示一个

9、 4、©表示一个 5、¥表示一个 ￥2、文本标记1、文本样式 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标2、标题元素语法：#:16显示效果：1、独占一行2、文本以加粗方式出现3、改变字号(1级最大，6级最小)4、具备垂直空白距离属性：1、align作用：控制当前文本的水平排列方式取值：left/center/right3、段落元素语法：效果：1、独占一行2、具备垂直空白属性：1、align取值：left/center/right4、换行元素语法：或5、分割线元素作用：在页面中绘制一条水平线语法： 或 效果：独占一行属性：1、size大小，以px(像素)作为

10、单位2、width宽度，以px 或 % 作为单位3、align水平排列方式4、color6、预格式化元素作用：保留源文档中的格式，即保留源文档中所有的回车和空格的效果语法：7、块分区元素-div作用：做布局语法：内容 效果：1、独占一行属性：1、align8、行内分区元素-span作用：设置同一行文字内的不同格式ex:既有 加粗，斜体，下划线的文本一段文本一段文本9、行内元素 与 块级元素行内元素 与 块级元素在页面中的位置效果是不一样的。块级元素：默认情况下，块级元素会独占一行，如：div,p,h1h6。所有的块级元素，都可以做布局。行内元素：默认情况下，元素是不会换行的.行内元素在页面中主

11、要负责修改文本的样式。ex:span,i,b,s,u,sup,subDay02链接 描点 链接元素 图像元素 表格扩展：1、嵌套问题1、p 标记 不能嵌套块级元素 错误!2、尽量不要让行内元素嵌套块级元素 尽量不要出现2、meta1、定义关键字面向搜索引擎2、定义网页描述信息面向搜索引擎=1、图像和链接2、表格3、列表=1、图像和链接1、URL1、目录 & 目录结构目录 ：文件夹资源文件：网页中要用到的资源可以称之为资源文件2、URLURL(Uniform Resource Locator)，统一资源定位器，主要用来表示网页中任何资源的位置URL，即路径，在页面中主要有以下3中表现：1、绝对路

12、径从文件所在的最高目录查找资源文件所经过的路径1、网络资源四部分组成：1、协议名 : http / https2、主机名(IP地址/域名) : 3、目录路径 :4、文件名 ：2、本机资源从盘符位置处开始E:testjd_logo.png2、相对路径从当前文件位置处开始查找资源文件所经过的路径1、同目录，直接用在同一目录下， 可以直接通过文件名称来引用资源文件2、子目录，先进入images/a.jpgimages/top/left/a.jpg3、父目录，先返回./ 返回上一级目录中./logo.jpg./images/logo.jpg3、根相对路径从网站所在的根目录出开始查找资源文件的位置/ ：

13、表示网站所在的根目录ex:/images/front/logo.jpg2、图像1、图像格式1、jpeg图形图像联合专家组表现：*.jpg2、gif图形接口格式表现：*.gif特点：动态效果3、png可移植网络图形表现：*.png特点：支持透明2、图像元素语法： 或 属性：1、src 源,即要显示的图像路径2、width宽度，以 px 或 % 为单位3、height高度，以 px 或 % 为单位注意：如果 width 和 height 只给其中一个属性赋值的话，那么另外一个属性会跟着等比缩放3、链接1、链接元素语法：内容语法：1、href链接URL2、target目标,指定新网页的打开形式取值：

14、1、_self在自身标签页中打开新网页,默认值2、_blank在新标签页中打开新网页2、链接的表现形式1、目标为文档下载内容2、电子邮件链接联系我们3、返回页面顶部的空链接返回顶部4、链接到Javascript执行JS3、锚点锚点：在文档中的某行位置处做记号使用方式：1、定义锚点1、通过 a 标记的 name 属性内容2、任意标记的 id 属性2、链接到锚点1、链接到本页锚点处2、链接到其它页锚点处2、表格1、表格的作用表格会按照一种特殊的结构来摆放页面数据表格是由一些单元格，按照从左到右，从上到下的顺序排列到一起组合而成的。主要作用：实现页面元素的布局 2、使用表格1、创建表格1、定义表格

15、：2、创建表行 ：3、创建列(单元格) ：2、表格属性1、table的属性1、width ：设置表格的宽度2、height：设置表格的高度3、align ：表格的水平对齐方式4、border：边框尺寸，以px为单位5、bgcolor：背景颜色6、cellpadding：设置单元格内边距(单元格边框与内容的距离)7、cellspacing：设置单元格外边距(单元格与单元格之间的距离)2、tr的属性1、align设置当前行内容的水平对齐方式2、valign设置当前行内容的垂直对齐方式取值：top/middle/bottom3、bgcolor设置当前行的背景颜色3、td的属性1、width2、hei

16、ght3、align4、valign5、bgcolor6、colspan设置单元格跨列7、rowspan设置单元格跨行3、表格标题语法：标题内容注意：1、最多只能有一个2、必须是下的第一行代码3、表格的复杂应用1、行分组为表行(tr)进行分组1、表头行分组表格中第一行分组的话，可以放在表头行分组2、表尾行分组表格中最后一行要分组的话，可以放在表尾行分组中3、表主体行分组表格中，除第一行和最后一行外其他的行，可以放在表主体行分组中2、不规则表格通过 td 的跨行或跨列属性，实现不规则表格的创建1、跨列又称为：合并列从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除

17、出去。属性：colspan=列数2、跨行又称为：合并行从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除出去。属性：rowspan=列数3、表格嵌套被嵌套的表格，必须放在td中协议名：https域名：目录路径：5aV1bjqh_Q23odCf/static/superman/img/logo文件名：bd_logo1_31bdc765.pngDay03列表 结构标记 表单 浮动框架1、列表1、作用按照一定的结构来显示数据按照从上到下的顺序来显示数据所有的列表都由两部分组成1、列表类型(有序或无序)2、列表项2、使用列表1、有序列表1、语法列表类型： - Order

18、 List列表项： - List Item2、属性列表类型属性1、type取值：1、1 ：默认值，数字2、a ：小写字符显示3、A ：大小字符显示4、i ：小写罗马字符5、I ：大写罗马字符2、start类型的起始编号2、无序列表1、语法列表类型： - Unorder List列表项：2、属性1、type取值：1、disc ：默认值，实心圆2、circle ：空心圆3、square ：实心矩形4、none ：没有3、定义列表1、作用定义列表往往用于要给出一类事物的定义的情形，如名词解释等.2、语法 : 定义一个定义列表 : 定义 列表中的一个术语 : 定义 列表中对术语的解释3、使用场合图文混

19、排2、结构标记1、作用专门搭建网页结构，用于提升标记的可读性以后可以通过结构标记来取代做布局的div2、详解1、元素作用：定义网页文档的页眉(顶部信息)语法：取代：2、元素作用：定义页面中的导航链接部分语法：取代：3、元素作用：定义文档中的小节，在页面中可以表示主体内容部分语法：取代：4、元素作用：通常用于描述 论坛帖子，报纸的文章，博客信息或微博条目语法：取代：5、元素作用：描述页面中的边栏信息语法：取代：6、元素作用：定义页面中底部的信息语法：取代：3、表单(重难点)1、表单的作用用于收集信息并将信息提交给服务器表单的两个基本部分1、实现数据交互的可见界面元素-表单控件2、表单提交后的处理

20、2、表单元素表单：收集用户数据，并且提交给服务器语法：1、标记注意：只有放在form中的表单控件才能被提交2、属性1、action要提交给服务器处理程序的地址默认提交给本页2、method提交方式,默认值是 get取值：1、get1、以明文方式提交数据2、安全性较低3、大小限制为2KB4、向服务器要数据时，使用get2、post1、隐式提交2、安全性较高3、无大小限制4、传递数据给服务器进行处理时，使用post3、. .3、enctype指定表单数据的编码方式即指定什么样的数据可以提交给服务器1、application/x-www-form-urlencoded默认值，允许将普通字符，特殊字符

21、提交给服务器2、multipart/form-data允许将 文件 提交给服务器3、text/plain允许将普通字符提交给服务器。特殊字符，文件则不可以 3、表单控件能与用户交互，并且提供可视化外观的HTML元素表单控件，只有放在表单中，数据才可以被提交表单控件分类：1、input元素2、textarea元素-多行文本域3、select 和 option 元素 - 选项框4、其他元素表单控件详解：1、input元素1、作用 ：用于收集用户的信息2、语法 ：3、属性 ：1、type根据type属性值，创建各种不同的输入控件2、name指定控件的名称，一般提交给服务器时使用采用的是匈牙利命名法(

22、控件缩写+作用)3、value控件的值，提交给服务器使用4、disabled禁用控件。该属性无值4、input 详解1、文本框与密码框文本框：秘密框：特有属性：1、name缩写：txtex:txtUsername : 用户名称的文本框txtUserpwd : 用户密码2、maxlength限制输入的字符数ex:3、readonly只读，只能看不能写无值2、单选按钮和复选框单选按钮：复选框：属性：1、name单选按钮缩写：rdo复选框缩写：chk注意：name属性除定义名称外，还能分组，如果属于一组的单选按钮或复选框，名称必须相同2、value3、checked设置默认被选中3、按钮1、提交按钮

23、作用：功能预定义，负责将当前表单中的数据提交给服务器2、重置按钮作用：功能预定义，将表单中的数据恢复成初始化的状态3、普通按钮作用：无功能，可以由用户自定义的编写功能属性：value ：定义按钮上的文本name ：缩写 btn4、隐藏域 和 文件选择框1、隐藏域：作用：想提交给服务器，但不想让用户看到的数据，可以保存在 隐藏域中。缩写：txt2、文件选择框缩写：txt注意：1、method 必须设置为 post2、enctype 必须为 multipart/form-data2、textarea元素称为：多行文本域语法：1、标记2、属性1、name定义名称，缩写 txt2、cols 指定文本域

24、显示的列数，变相的指定宽度 ex:cols=50英文字符：显示50个中文字符：显示25个3、rows 指定文本域显示的行数，变相的指定高度4、readonly只读3、select 和 option 元素称为：选项框1、语法1、作用：创建选项框(下拉，滚动)属性：1、name控件名称，缩写 sel2、size指定选项框，默认显示选项的数量。大于1的话，则为滚动列表，否则就是下拉选项框3、multiple设置多选无值2、显示的数据选项属性：1、value提交给服务器的数据2、selected预选中4、其他元素1、label元素作用：关联 文本 和 表单控件的。关联之后，单击文本，就如同单击 表单控

25、件 一样语法文本属性for : 表示要与该文本关联的控件的ID值2、为控件分组 : 为控件分组 : 为分组指定标题4、其他标记1、浮动框架1、什么是浮动框架可以在一个浏览器窗口中能够同时显示多个HTML文档内容2、语法文本内容属性：1、src浮动框架中引入的页面url2、width宽度3、height高度4、frameborder边框，如果不想要边框，则将frameborder改为02、摘要与细节1、作用可以通过用户的点击操作，来显示/隐藏某一部分内容2、语法 : 定义摘要和细节 : 定义允许被用户点击的标题文本注意：summary 必须是 details 中的第一对子元素3、度量元素1、语法

26、作用：表示度量元素，比如：投票的比例，电池的电量. .2、属性1、min ：定义度量范围的最小值，默认为02、max ：定义度量范围的最大值，默认为1，通常情况会将其改为 1003、value ：当前显示在度量元素上的值4、时间元素1、作用关联时间的不同表现形式2、语法文本属性：datetime : 表示关联的日期和时间,如果同时关联日期和时间的话，中间用 T 分隔5、高亮文本显示1、作用以突出的背景色显示文本2、语法文本file:/E:/%E8%B5%B5%E6%97%AD/CLASS/01_HTML5BASIC/Day03/03-表单.html?txtUsername=sanfeng.zh

27、ang&txtUserpwd=yinsusu&rdoGender=female&chkHobby=drink&chkHobby=happyhtml?txtUsername=sanfeng.zhang&txtUserpwd=123456&rdoGender=male&chkHobby=drink&chkHobby=play&txtUserID=U1234567890您的名称&txtUserpwd=&rdoGender=male&txtUserID=U1234567890&txtImage=&txtIntro=fksafjkldsajfklsajflkdjalkfjdslkjflkdsajfldksajflkdsjlakfjdslkafjdlksajfkldsjafklsjafkldsajfklsjalkdjsalkfdjsaklfjdskalfjdksalf