1、Web基础知识(了解) 1、Web 与 Internet 1.1 Internet 互联网、网络、因特网 ... 服务： Telnet，Email，WWW，BBS，FTP
资源共享 基本实现技术： 1、分组交换原理 2、TCP/IP协议簇 1.2 WEB与Internet 1、WEB 是一种应用在Internet上的一种流行的应用程序-网页应用程序 www(World Wide Web)
W3C-World Wide Web Consortium(万维网联盟)
功能：将信息和服务连接 服务：Telnet,Email,BBS 信息：文字，图片，音频，视频 2、WEB的工作原理 1、基于 浏览器/服务器 模式(B/S) 1、B/S B : Browser 浏览器 S : Server 服务器 通过 浏览器 来访问 服务器信息的一种方式-WEB 2、C/S C : Client 客户端 S : Server 服务器 通过 指定的客户端 来访问 服务器信息的一种方式 QQ 2、组成 由 WEB服务器、浏览器、通信协议 组成 WEB服务器：配置高的电脑 浏览器：客户端工具 通信协议：http(Hyper Text Transfer Protocol)-超文本传输协议 3、WEB的相关技术 1、WEB服务器 1、功能 存储WEB上的内容信息，并且提供管理环境 响应浏览器的请求，执行服务器端程序 安全性功能 2、产品 TOMCAT IIS APACHE(php) ... 3、技术 php jsp(Java Server Page) asp asp.net 2、WEB浏览器 1、功能 1、代理用户提交请求 (User Agent --> UA) 2、作为HTML解释器和内嵌脚本的执行器 3、用图形化的方式显示HTML文档 2、产品 1、IE -> Microsoft Internet Explor 2、Firefox -> Mozilla Firefox 3、Safari -> Apple 4、Chrome -> Google 5、Opera -> 欧鹏 3、技术 1、HTML 2、CSS 3、Javascript 2、HTML快速入门(重点) 1、HTML概述 1、什么是HTML HTML : Hyper Text Markup Language 超文本标记语言 超文本：超级文本 a : 第一个字符 超文本a : 超链接 标记：<a> 语言：表现形式，语法规范
HTML用来设计网页的语言 由HTML所编写的文件，以.html或.htm作为后缀 2、HTML基础语法 1、标记语法 1、什么是标记 HTML中用于描述功能的符号称之为"标记" ex: <p></p> - 段落 <a></a> - 超链接 ... ... 2、语法 标记在使用时必须用尖括号<>括起来 分类： 1、封闭类型标记 也叫作 双标记，必须成对出现 语法 <标记></标记> <p></p> <a></a> <div></div> 2、非封闭类型标记 也叫作 空标记或单标记 语法 <标记>或<标记/> ex: <img> - 图像 <br> - 换行 <hr> - 水平线 2、元素 也称之为 标记 标记：实际上是语法规范 元素：强调的是标记中的内容 <div>这是一个div</div> 3、元素嵌套 元素之间可以实现嵌套，从而表现出更为复杂的页面结构 <div><p>这是一个被嵌套的段落</p></div>
注意： 1、嵌套位置和顺序 <div><p></div></p> 2、被嵌套的内容要通过"代码缩进"来表示层级结构
<div><p>这是一个p</p></div>
<div> <p>这是一个p</p> </div>
<div> <p>这是一个p</p> </div> 4、属性 和 值 1、作用 修饰元素 2、语法 1、属性的声明必须位于开始标记中 2、一个元素可以有多个属性，多个属性之间用空格隔开，并且排名不分先后 3、每个属性都可以有值，值和属性之间用 = 连接。值最好要放在引号中('' 或 "") ex : align 属性 ：控制文本的水平对齐方式， 取值： 1、left ：左对齐 2、center ：居中对齐 3、right：右对齐 问题：控制 一个p标记的文本，是水平居中对齐 <p align='center'>This is a p</p> 在以上的基础上，设置 p元素的id属性值为 p1 <p align='center' id="p1">This is a p</p> 3、标准属性 所有的元素都具备的属性，称之为标准属性或通用属性 id:定义元素在网页中独一无二的标识 title:鼠标移入到元素上的时候，所弹出的文字 class:定义元素所引用的类选择器(CSS中使用) style:定义元素的内联样式(CSS中使用) 5、注释 1、什么是注释 允许出现在网页源码中，但是不会被浏览器所解释的文本，称之为注释。
通常情况下，会将 对代码的解释文本放在注释中，以便让其他的开发者去看。 2、注释的语法 <!-- 注释内容 --> 注意： 1、注释不能嵌套 <!-- <!-- --> --> 2、注释不能出现在<>中 <p <!-- align="center" -->></p> 以上写法是错误的。 6、HTML 和 XHTML 1999年12月24日 W3C推出HTML4.01标准规范 2000年1月26日 W3C推出XHTML1.0标准规范
XHTML1.0 版本 以 HTML4.01几乎相同，但是它是更严格更纯净的HTML版本 比如： 1、要求标记必须要关闭 <p></p> <br/> 2、要求属性值必须用引号引起来 <p align=center></p>(html4.01和html5中都可以) 7、HTML5(H5) h5的目标，为了实现更加简洁的HTML代码 1、空标记有无结束均可 <br> <br/> 2、属性值可以被引号括起来 <p align="center"></p> <p align='center'></p> <p align=center></p> 3、有些属性可以不给值 <input readonly="readonly">(h5之前的写法) <input readlony>(h5写法) 3、文档结构 1、HTML文档结构 由两大部分组成 1、文档类型声明 用于指定网页的版本和风格 2、html页面 要显示在页面给别人去看的内容 2、文档类型声明 <!doctype html> 该段代码要出现在网页的最顶端 3、HTML页面 1、由一对 html 元素表示，位于 文档类型声明之后 2、在 <html>元素中，包含两个直接子元素 1、<head></head> 网页头部 作用：定义页面全局信息 包含： <title></title> 定义网页标题 <script></script> 定义或引入JS文件/代码 <style></style> 定义内部样式表 <link/>:引入外部样式表文件 <meta/>:定义网页元数据 比如： 1、编码格式 设置网页编码格式为utf-8 <meta charset="utf-8"> 2、网页关键字 3、描述 2、<body></body> 网页主体，所有显示给用户去看的东西都写在body中 属性： 1、text 取值：颜色 作用：控制整个页面中所有文本的颜色 2、bgcolor 作用：设置页面的背景颜色 取值：颜色 3、文本(重点) 1、文本标记的作用 会让文本有不同的显示方式 2、特殊字符表示方式 文档中的 空格和回车 最终只会被解释成为一个空格 如果想表示特殊的字符效果，如 空格，<,>, ... 需要进行转义 1、< --> less than 表示 < 2、> --> greater than 表示 > 3、 空格 4、© © 5、¥ ￥ 3、文本标记 1、文本样式 1、作用 对文本进行修饰，比如加粗，斜体，线条样式等... 2、标记 1、<b></b> 加粗 2、<i></i> 斜体 3、<u></u> 下划线 4、<s></s> 删除线 5、<sup></sup> 上标 6、<sub></sub> 下标 2、标题元素 1、作用 以醒目(改变字体大小、加粗方式、垂直空白)的方式显示文本 2、语法 <h#></h#> #:1~6 一级标题(<h1></h1>)字最大 ... 六级标题(<h6></h6>)字最小 3、属性 align ：文本的水平对齐方式 取值： 1、left 2、center 3、right 3、段落元素 1、作用 以特殊的方式来显示文本即段落的上和下都有垂直的空白 2、语法 <p></p> 3、属性 algin 4、换行元素 语法： <br>或<br/> 5、块分区元素 分区：可以对元素进行分组，多数用于页面布局上 语法：<div></div> 作用：独占一行，做布局!!! 6、行内分区元素 语法：<span></span> 作用：包裹文本，灵活的设置文本的样式 7、分割线元素 1、作用 在网页中显示一条水平线 2、语法 <hr>或<hr/> 3、属性 1、size 尺寸，相当于设置 水平线的 高度 取值 以 px 为单位的数值，px可以省略 2、width 宽度，以px为单位的数值，px可以省略 3、color 颜色 4、align 水平线自己的水平对齐方式 8、预格式化 1、作用 保留源文档中的格式，即保留原来的换行和文本中的空格 2、语法 <pre>内容</pre> 9、元素分类 1、行内元素 不会换行，可以和其他的行内元素位于同一行 使用场合：包裹文本，去设置文本的显示效果
display:inline 注意：所有的行内元素都不具备 align属性 2、块级元素 默认的情况下，每个元素独占一行，适用场合，多数都会用于 布局上
display:block; ex: <div></div> <p></p> <h1>~<h6> 注意： 1、不要让行内元素嵌套块级元素 <span> <div></div> </span> 错误的。 2、p标记 p标记是不能嵌套块级元素 <p> <p></p> </p> 4、图像和链接 1、URL 1、目录结构 目录：文件夹名称，保存网页内容的文件夹 2、URL URL(Uniform Resource Locator)统一资源定位器,俗称 路径,用来表示 网络资源的地址 资源：图片，音频，视频，文件等... 路径：从当前位置到目标资源位置所经过的路线。
三种表现形式: 1、绝对路径 1、什么是绝对路径 从文件最高级路径下开始的完整路径。 1、访问网络资源 由 协议名称、主机名(域名/IP地址)、目录路径、文件名 ex ：获取 百度 LOGO 协议名称：https 主机名:www.baidu.com 目录路径：img 文件名：bd_logo1.png
<img src="//www.baidu.com/img/bd_logo1.png" width="270" height="129"> 2、访问本机资源 文件所在的最高级目录路径：？--文件所在的盘符 2、相对路径 1、什么是相对路径 从当前文件所在的位置处开始，去查找资源文件所经过的路径就是相对路径
1、同目录 直接通过 资源文件名称 进行引用即可 2、子目录 先进入，再通过资源名称进行引用 images/1.jpg 3、父目录 先返回，在通过资源文件的名称或路径进行引用 返回:../ 3、根相对路径 特点：永远都是从网站所在的服务器根目录处开始查找 表现方式：/作为开始 2、图像 1、图像格式 1、jpeg 图像图像联合专家组
.jpg 作为后缀来存储的 2、gif 图形接口格式 特点：支持动画
.gif 作为后缀来存储的 3、png 可移植网络图形 采用 无损压缩，有8位，24位，32位三种形式 支持 透明色(PNG24位不支持) .png 作为后缀存储的 2、图像元素 1、语法 <img> 2、属性 1、src 要引用的图像URL(绝对，相对，根相对) 注意：URL 要严格区分大小写,服务器路径 严格区分大小写。本机路径则无所谓 2、width 宽度 3、height 高度
以 px 或 % 为单位的数值，如果省略单位不写，默认为 px <img src="../Images/a.jpg" height="300">
注意：width 和 height 如果只给一个属性的话，那么另外一个属性会跟着等比缩放 <img width="100px" src="a.jpg"> 3、链接 1、作用 链接又叫超链接，允许用户通过点击的操作完成页面的跳转。 2、语法 <a>内容</a> 属性： 1、href 链接URL，只有设置了 href 属性之后，才是真正的超链接。 2、target 目标，打开新页面的方式 取值： _blank : 在新标签页中打开 _self:默认值，在当前页中打开 3、链接的表现形式 1、目标文档为下载资源 href 属性值，指定的文件名称，就是下载操作(rar,zip) 2、电子邮件链接 前提：计算机中必须安装 邮件客户端，并且配置好了 邮件信息。 <a href="mailto:zhaoxu@tedu.cn">联系我们</a> 3、返回页面顶部的空链接 <a href="#">内容</a> 4、链接到Javascript <a href="javascript:">内容</a>
