1、课程内容
1、HTML5基础
2、CSS3基础
3、PROJECT01-京东首页
4、CSS3高级
5、PROJECT02-京东详情页(切图)
6、JAVASCRIPT基础
==============================
1、WEB基础知识(了解)
1、WEB与Internet
1、Internet
全球性计算机互联网络
因特网、国际互联网、网际网
2、Intenet提供的服务
Email:电子邮件
WWW:万维网
www.baidu.com
BBS:电子公告板(论坛)
Telnet:
FTP:
3、实现技术
1、分组交换原理
将信息拆分成若干小数据包
2、TCP/IP 协议簇
4、WEB程序
1、什么是WEB
WEB就是Internet上的应用之一-网页应用
WEB所谓的WWW(World Wide Web)
W3C:World Wide Web Consortium(万维网联盟)
WEB : 应用程序，将信息和各项服务实现无缝连接
2、WEB的工作原理
1、基于B/S模式的程序(Web)
B/S :
B : Browser 浏览器
S : Server 服务器
2、基于C/S模式的程序
C/S :
C : Client 客户端
S : Server 服务器
ex:
2、由 WEB服务器、浏览器和通信协议组成
WEB服务器：
PC：Personal Computer
Server：服务器
通信协议：http(Hyper Text Transfer Protocal)超文本传输协议，规范了 互联网上的数据 是如何打包以及如何传递
3、服务器与浏览器
1、服务器
1、主要功能
1、存储 WEB 信息，提供管理环境
2、响应浏览器的请求，执行服务器端程序
3、安全功能
2、主要产品
TOMCAT
IIS
APACHE
3、实现技术
JSP
PHP
ASP.NET
ASP
2、浏览器
1、主要功能
1、提交请求
User Agent(UA) :用户代理
2、作为 HTML 和 脚本的解释器
3、以图形化方式显示HTML文档
2、主要产品
1、Microsoft IE
2、Mozilla Firefox 火狐
3、Google Chrome
4、Apple Safari
5、Opera 欧朋
3、实现技术
1、HTML
2、CSS
3、Javascript
2、HTML快速入门(重点)
1、HTML概述
1、什么是HTML
Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件
WEB页是由HTML编写而成
HTML：(Hyper Text Markup Language),超文本标记语言
a : 26个字符中的首字符
超文本a:超链接的功能
b : 26个字符中的第二个字符
超文本b:给文字加粗
Markup :标记，规定了超文本的组成形式，是由标记组成
超文本a:<a>
练习：创建一个网页文件，名字 01.html
1、硬盘邮件 新建-》文本文件
2、为文件重命名为 01.html
2、HTML基础语法(重点)
1、标记语法(Markup)
1、作用
HTML用于描述功能的符号称之为"标记"
2、语法
标记 必须用 尖括号"<>" 括起来
<a></a>：超链接
<b></b>: 加粗文本显示
<p></p>: 段落
标记分类：
1、封闭类型标记-双标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记，有开始，必须有结束，否则会有意想不到的效果
2、非封闭类型标记-单标记
也称之为 空标记
<标记>
或
<标记/>
<br>:换行
<hr>:一条横线
<img>:图像
2、元素
元素即标记
<a>测试文本</a>
1、元素嵌套
元素(标记)中又嵌套元素(标记)，形成更复杂的语法结构
编写嵌套代码时，一定要注意嵌套顺序和格式
ex：a标记，嵌套b标记
<a>
<b>
<br/>
</b>
</a>
2、属性 和 值
1、作用
用来修饰元素
ex:让 p 标记的文本水平居中对齐
<p>Hello World</p>
2、语法
1、属性的声明必须位于开始标记里
<标记 属性></标记>
2、属性都可以有值，属性和值得表现方式 属性="值"
<标记 属性="值"></标记>
3、一个元素中允许出现多属性和值，中间用 空格 隔开，并且排名不分先后
<标记 属性="值" 属性="值"></标记>
ex:给 一对 p 标记 设置 align属性，值为 center
<p align="center"></p>
3、标准属性
每个元素都有自己的特有属性
有些属性是所有元素都支持的，称为标准属性
1、id:元素在页面中的唯一标识
2、title:鼠标移入到元素时所提示的文本内容
3、class：元素引用的类选择器(与样式相关)
4、style:元素定义的内联样式(与样式相关)
3、注释
1、作用
在编辑文档下可见，在浏览器展示页面时并不显示的内容
2、语法
<!-- 注释内容 -->
3、注意
1、注释不能嵌套
<!--
<!-- 这是注释 -->
-->
以上结构-错误
2、注释不能位于<>中
<p<!-- 注释内容 -->>
以上结构-错误
4、HTML 和 XHTML
3、文档结构
1、HTML文档结构
1、文档类型声明
作用：指定使用的HTML版本和风格
<!doctype html>
2、html页面
<html></html>
位置 位于 doctype 之下
包含以下两对子元素
1、<head></head>
网页头部内容
2、<body></body>
网页主体
3、html页面-<head>
1、作用
定义页面全局信息
2、包含以下子元素
1、<title>标题</title>
网页标题
2、<meta>
定义页面元数据
<meta charset="utf-8">
注意：设置网页编码的同时，保证网页文件的编码也为utf-8
4、html页面-<body>
网页显示的主体内容
属性：
1、text
控制网页文本的颜色
2、bgcolor
控制网页的背景颜色
3、文本标记(重点)
1、概述
1、作用
通过文本标记，改变文本的默认样式
2、特殊字符
< 表示 <
> 表示 >
表示 一个空格
© 表示 ?
¥ 表示 ￥
2、文本标记
1、文本样式
<b>...</b> : 加粗
<i>...</i> : 斜体
<u>...</u> : 下划线
<s>...</s : 删除线
<sup></sup>:上标
<sub></sub>:下标
2、标题元素
作用：在页面中完成标题效果的显示(突出显示大小和加粗效果)
<h#></h#>
#:1~6
一级标题(最大)~六级标题(最小)
特点：
1、每个标题 独占一行
2、每个标题 都具备上下垂直空白
属性：
align：文本水平对齐方式
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
3、段落元素
特点：
1、独占一行
2、上下垂直空白
语法：<p></p>
4、换行
语法：<br/>
5、分割线元素
语法：<hr/>
属性：
1、size:尺寸,取值是一个以px(像素)为单位的数字,单位可以省略
2、width：宽度，取值数字，同上
3、align ：分割线的水平对齐方式left,center,right
4、color ：颜色
6、块分区元素-div
语法:<div></div>
特点：
独占一行
作用：布局
7、行分区元素-span
语法：<span></span>
注意：多个span会在一行内显示
作用：包裹文本，并设置文本样式
8、块级元素与行内元素
1、块级元素
默认情况下，会独占一行的元素就是块级
<h#>,<p>,<div>
作用：布局
2、行内元素
不换行，多个行内元素都在一行内显示
i,b,s,u,sub,sup,span
作用：处理文本显示效果
9、预格式化
作用：保留原文档中的格式，即保留文档中的回车和换行
语法：<pre></pre>
使用 Editplus 工具 开发网页
编写代码注意：Ctrl + s 保存
练习：
1、创建网页并完成以下操作
1、创建网页并搭建网页结构
文档类型声明，html页面，head，body 等
2、设置网页标题为 "我的第一个html文档",并且设置编码为utf-8(内容和文件)
3、设置网页内容为 我的第一个html页面内容，文本颜色(text)为 red 色，背景颜色(bgcolor)为 yellow 色
1、图像和链接
1、URL
1、目录 & 目录结构
目录：WEB站点中文件夹的名称
目录结构：由目录以及子目录形成复杂结构
2、URL
URL(Uniform Resource Locator)
统一资源定位符
作用：用来标识网络中资源的位置
资源：图片，网页，音视频...
俗称：路径(地址)
URL在WEB页面上有三种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
3、路径详解(重点)
1、绝对路径
1、什么是绝对路径
文件从最高级目录下开始的完整路径
1、访问网络资源
1、由以下四个部分组成
1、协议名称
2、主机名(IP地址，域名)
3、目录路径
4、文件名
ex:
1、协议名
https
2、主机名(域名)
www.baidu.com
3、目录路径
img
4、文件名
bd_logo1.png
https://www.baidu.com/img/bd_logo1.png
//www.baidu.com/img/bd_logo1.png
2、访问本机资源
从盘符位置处一层一层查找，直到找到文件名为止
E:\HTML5BASIC\Images\login.png
2、相对路径
1、什么是相对路径
资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。
相对路径是通过 文件之间的 位置关系 来查找文件
2、具体表现形式
1、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
&