1、01_HTMLBASICDay01第一个 html文档赵旭WEB 前端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 与 Internet1、I
2、nternetInternet是一个全球性的计算机互联网络 ，中文名“因特网“,“网“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.NE
4、T以上技术都具备访问数据库的能力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中，用于描述功能的符号，称为“标记“,标记在使用时，必须用中错误4、文档结构1、HTML文档结构任何网页都是由1、文档类型声明2、html页面两部分组成2、html 元素包含两个子元素1、用于表示网页头部信息,用于定义页面全局信息或
6、页面的元数据2、显示给用户去看的内容3、head元素允许包含的子元素:1、网页标题2、告诉浏览器用什么样的编码解析网页内容注意：保证网页文件的 编码格式 也是 utf-8练习：1、创建一个超文本文档，名称为 01.html2、指定文档类型声明3、搭建网页结构设置 标题 ：我的第一个html练习文件设置 编码 ：utf-8网页文件编码 ：utf-84、编辑网页内容我的第一个html练习内容尝试用一对b标记将以上内容括起来，观察效果3、文本标记1、特殊文本任意多的回车和空格，最终只会被解析成一个空格在页面输出：这是一个p标记在页面中，要通过“转义字符“来表示 空格， 等一些字符1、表示一个空格2、
7、表示一个 3、表示一个 : 加粗: 斜体: 下划线: 删除线: 上标: 下标2、标题元素语法：#:16显示效果：1、独占一行2、文本以加粗方式出现3、改变字号(1级最大，6级最小)4、具备垂直空白距离属性：1、align作用：控制当前文本的水平排列方式取值：left/center/right3、段落元素语法：效果：1、独占一行2、具备垂直空白属性：1、align取值：left/center/right4、换行元素语法：或5、分割线元素作用：在页面中绘制一条水平线语法： 或 效果：独占一行属性：1、size大小，以px(像素)作为单位2、width宽度，以px 或 % 作为单位3、align水平
8、排列方式4、color6、预格式化元素作用：保留源文档中的格式，即保留源文档中所有的回车和空格的效果语法：7、块分区元素-div作用：做布局语法：内容 效果：1、独占一行属性：1、align8、行内分区元素-span作用：设置同一行文字内的不同格式ex:既有 加粗，斜体，下划线的文本一段文本一段文本9、行内元素 与 块级元素行内元素 与 块级元素在页面中的位置效果是不一样的。块级元素：默认情况下，块级元素会独占一行，如：div,p,h1h6。所有的块级元素，都可以做布局。行内元素：默认情况下，元素是不会换行的.行内元素在页面中主要负责修改文本的样式。ex:span,i,b,s,u,sup,su
9、bDay02链接 描点 链接元素 图像元素 表格扩展：1、嵌套问题1、p 标记 不能嵌套块级元素错误!2、尽量不要让行内元素嵌套块级元素尽量不要出现2、meta1、定义关键字面向搜索引擎2、定义网页描述信息面向搜索引擎=1、图像和链接2、表格3、列表=1、图像和链接1、URL1、目录 & 目录结构目录 ：文件夹资源文件：网页中要用到的资源可以称之为资源文件2、URLURL(Uniform Resource Locator)，统一资源定位器，主要用来表示网页中任何资源的“位置“URL，即路径，在页面中主要有以下3中表现：1、绝对路径从文件所在的最高目录查找资源文件所经过的路径1、网络资源四部分组
10、成：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、根相对路径从网站所在的根目录出开始查找资源文件的位置/ ：表示网站所在的根目录ex:/images/front/logo.jpg
11、2、图像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目标,指定新网页的打开形式取值：1、_self在自身标签页中打开新网页,默认值2、_blank在新标签
12、页中打开新网页2、链接的表现形式1、目标为文档下载内容2、电子邮件链接联系我们3、返回页面顶部的空链接返回顶部4、链接到Javascript执行JS3、锚点锚点：在文档中的某行位置处做记号使用方式：1、定义锚点1、通过 a 标记的 name 属性内容2、任意标记的 id 属性2、链接到锚点1、链接到本页锚点处2、链接到其它页锚点处2、表格1、表格的作用表格会按照一种特殊的结构来摆放页面数据表格是由一些“单元格“，按照从左到右，从上到下的顺序排列到一起组合而成的。主要作用：实现页面元素的布局 2、使用表格1、创建表格1、定义表格 ：2、创建表行 ：3、创建列(单元格) ：2、表格属性1、tabl
13、e的属性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、height3、align4、valign5、bgcolor6、colspan设置单元格跨列7、rowspan设置单元格跨行3、表格标题语法：标题内容注意：1、最多只能有一个2、必须是下的第一行代码3、表格的复杂应用1、行分组为表行(tr)进行分组1、表头行分组表格中第一行分组的话，可以放在表头行分组2、表尾行分组表格中最后一行要分组的话，可以放在表尾行分组中3、表主体行分组表格中，除第一行和最后一行外其他的行，可以放在表主体行分组中
