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、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
2、资源文件 在 当前文件的 相当于是子目录中
想进入到目录中，再查找
3、资源文件 在 当前文件的 父层结构下
通过 ../ 向上返回，再引用文件
2、表格
3、列表
1、HTML语法
1、标记
<> 组成
双标记：<标记></标记>
单标记：<标记>或<标记/>
2、元素
即标记
1、嵌套
<元素>
<元素></元素>
</元素>
1、必须完整嵌套
2、被嵌套要加缩进
注意：
1、行内元素不要嵌套块级元素
<b>
<div></div>
</b>
2、p标记中不允许嵌套其他块级元素
<p>
<div></div>
</p>
<p>
<h1></h1>
</p>
<p>
<p></p>
</p>
2、属性
<元素 属性="值" 属性="值"></元素>
3、注释
<!-- 注释内容 -->
2、HTML文档结构
1、文档类型声明
<!doctype html>
2、HTML页面
<html></html>
1、头部内容
<head></head>
1、<title></title>
2、<meta charset="utf-8">
charset:编码，字符集
2、页面主体内容
<body></body>
属性：
1、text
设置 页面 文本的颜色
2、bgcolor
摄者 页面 背景颜色
bgcolor(html元素属性)
和
background-color(css样式属性)
3、文本标记
1、特殊字符
空格：
< : <
> : >
<=: <=
? : ©
￥: ¥
2、文本标记
1、文本样式
加粗：<b></b>
倾斜：<i></i>
下划线：<u></u>
删除线：<s></s>
上标：<sup></sup>
下标：<sub></sub>
以上六个元素 全部都是 行内元素，不具备 align 属性
2、标题元素
<h#></h#>
<h1></h1>
...
<h6></h6>
块级元素， 允许使用 align 属性
3、段落元素
<p></p>
4、块分区-div
<div></div>
作用：布局
5、行内分区-span
作用：包裹文本，施加样式
6、换行
<br>
7、水平线
<hr>
size
width
color
align
8、预格式化
<pre></pre>
9、块级元素 和 行内元素
1、块级元素
独占一行
作用：布局
display:block;
2、行内元素
一行内允许显示多个元素
作用：处理文本
display:inline;
1、图像和链接
1、URL
地址
1、分类
1、绝对路径
1、引用互联网资源
协议名
主机名(IP地址，域名)
目录路径
文件名
2、本机文件
从文件所在的最高目录处(盘符)开始
2、相对路径
通过 文件间的位置关系 找到资源文件
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回(../)
3、根相对路径
永远都是从WEB站点所在的根目录处开始查找
语法：/
2、图像
1、语法
<img>
<img/>
2、属性
1、src
指定要显示的图像的URL
2、width
3、height
注意：等比缩放
3、链接
1、语法
<a>内容</a>
2、属性
1、href
链接文件URL
2、target
目标，打开新网页的方式
取值：
1、_self
默认值
2、_blank
新标签页打开
3、链接4种表现形式
1、目标文档为下载资源
<a href="xxx.rar/zip">xxx</a>
2、电子邮件链接
<a href="mailto:xxx@xxx.com">xxxx</a>
3、返回页面顶部空链接
<a href="#">xxx</a>
4、链接到JS
<a href="javascript:js代码">xxx</a>
4、锚点
1、定义锚点
1、通过任何标记的 id 属性
2、通过a标记的 name 属性
2、链接到锚点
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
2、表格
1、作用
将数据 按照 从左到右，从上到下的顺序进行显示
2、语法
1、标记
1、创建表格
<table></table>
2、创建表行
<tr></tr> -- table row
3、创建列(单元格)
<td></td> -- table data
2、属性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他标记
1、标题
<caption></caption>
2、行标题或列标题
<th></th>
4、表格复杂应用
1、行分组
表头：<thead></thead>
表主体：<tbody></tbody>
表尾:<tfoot></tfoot>
2、不规则表格
通过 td 的 colspan和rowspan 属性来设置
colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除
3、表格嵌套
一个表格中又出现一个表格
表格中的所有内容，只能出现在td中
***********************************
1、列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由 列表类型 和 列表项 来组成
3、语法
1、有序列表
标记:<ol></ol> -- Order List
列表项：<li></li>
<ol>
<li>内容</li>
<li>内容</li>
... ...
</ol>
属性：
1、type
作用：列表项前的标识
取值：
1、1 数字，默认值
2、a 小写字母
3、A 大写字母
4、i 小写罗马数字
5、I 大写罗马数字
2、start
指定 列表项 从第几个字符开始显示
2、无序列表
标记：<ul></ul> -- Unorder List
列表项：<li></li>
属性：
1、type
1、disc，实心圆（默认值）
2、circle，空心圆
3、square，实心方块
4、none，没有
3、列表的嵌套
通过列表嵌套，可以实现多层列表
被嵌套的内容，必须放在li中
4、定义列表
1、作用
定义列表用于给出一类事物的定义情形
掩耳盗铃
xxxxxxxxxxxx
2、语法
<dl></dl>:定义一个定义列表
<dt></dt>:定义列表中要解释的名词或术语
<dd></dd>:定义列表中对名词或术语的解释
3、使用场合
图文混排 时
2、结构标记
1、作用
用于表示页面中的布局，目的是为了提升标记的语义化
2、结构标记
1、<header>元素
1、语法
<header></header>
2、作用
定义文档的页眉
用于取代：<div id="header"></div>
2、<nav>元素
1、语法
<nav></nav>
2、作用
用于表示页面中的导航部分
3、<section>元素
1、语法
<section></section>
2、作用
用于表示 页面中的 主体部分
4、<article>元素
1、语法
<article></article>
2、作用
用于表示独立于文档的其他部分的内容
比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等... ...
5、<footer>元素
1、语法
<footer></footer>
2、作用
用于表示 网页 底部信息
6、<aside>元素
1、语法
<aside></aside>
2、作用
表示网页 内容 中的边栏信息
3、表单(重难点)
1、表单作用
用于显示、收集用户信息，并将信息提交给服务器
表单组成：
1、表单元素-负责将用户数据提交给服务器
2、表单控件-负责接收用户的数据(与用户进行数据交互)
2、表单元素
1、标记
<form></form>
2、属性
1、action
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
默认 是提交给本页
2、method
指定表单数据提交的方式
取值：
1、get(默认值)
向服务器端要数据时使用
特点：
1、显示提交：用户数据是可以显示在地址栏上的
2、提交数据长度限制：2KB
2、post
向服务器传递数据时使用
特点：
1、隐式提交：所提交的数据是看不见的-安全性较高
2、无数据大小限制
3、enctype(非重点)
表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded(默认值)
2、multipart/form-data
使用场合：上传文件时使用
3、text/plain
3、表单控件
1、作用
提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据
2、表单控件分类
input组元素，textarea，选项框(select和option)，其他元素
1、input 元素
1、语法
<input>或<input/>
属性：
1、type
根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等... ...
2、value
值，要提交给服务器的值
3、name
控件的名称，服务器端使用，没有名字，无法提交
4、disabled
禁用控件，该属性无值，只要出现在控件中就表示禁用
<input disabled>
2、分类
1、文本框与密码框
文本框：type="text"
密码框：type="password
属性：
1、maxlength
限制输入的字符数
2、readonly
只读
3、name
以控件的缩写+功能名称组成
文本框和密码框的缩写：txt
ex:
用户名称:txtUsername
用户昵称:txtNickname
4、value
2、单选按钮 和 复选框
单选按钮：type="radio"
复选框：type="checkbox"
属性：
1、name
名称以及分组，一组单选按钮或复选框的话，名称必须一致
单选按钮:rdo
复选框：chk
2、value
值
3、checked
设置默认被选中
3、按钮
提交按钮：type="submit"
负责提交数据到服务器
重置按钮：type="reset"
将表单元素恢复到默认值
普通按钮：type="button"
执行客户端脚本(JS)
属性：
1、name
缩写：btn
2、value
按钮上的显示文本
4、隐藏域和文件选择框
1、隐藏域
不想给用户看，但是要提交给服务器的数据
<input type="hidden">
属性：
1、name 名称,缩写 txt
2、value 值
2、文件选择框
提交(上传)文件时使用
<input type="file">
属性：
1、name
缩写 ：txt
注意：
1、保证 form 的 method 属性 必须为 post
2、保证 form 的 enctype 属性 必须为 multipart/form-data
2、textarea 元素
多行文本框
1、语法
<textarea>文本</textarea>
2、属性
1、name
控件的名称，缩写 txt
2、readonly
只读
3、cols
指定文本域的列数
变相设置宽度
4、rows
指定文本域的行数
变相设置高度
3、选项框
两种：
1、下拉选项框
2、滚动列表
语法
1、<select></select>
功能：创建选项框(滚动列表)
属性：
1、name
缩写：sel
2、size
默认显示的选项数量，如果取值大于1的话，则为滚动列表
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
值
2、selected
预选中
4、其他元素
1、label 元素
1、作用
关联 文本 与表单控件。
2、语法
<label>文本</label>
属性：
for ：表示与该元素相关联的表单控件的ID值
2、fieldset 元素
1、作用
为控件分组
2、语法
1、<fieldset></fieldset>
为控件分组
2、<legend></legend>
为分组指定标题
3、button 元素
语法:
<button>内容</button>
注意：
<button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)
4、其他标记
1、浮动框架
1、作用
可以在一个浏览器窗口中同时显示多个页面文档
2、语法
<iframe>内容</iframe>
注意：
1、必须是成对标记
2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容
属性
1、src
浮动框架中的网页URL
2、width
3、height
4、frameborder
浮动框架的边框，设置为0，则取消边框
2、摘要与细节
1、作用
允许将页面某部分内容进行展开或收缩
2、语法
<details>
<summary>标题</summary>
</details>
3、度量元素
1、作用
用于显示静态比例的信息
2、语法
<meter>文本</meter>
属性：
1、min
度量范围的最小值，默认为0
2、max
度量范围的最大值，默认为1
3、value
当前显示的度量值，默认为0
4、时间元素
1、作用
用于关联时间的不同表现形式
2、语法
<time>时间文本</time>
属性：
datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
5、高亮文本显示
1、作用
将页面中的某部分文本，以特殊的背景颜色显示出来
2、语法
<mark>高亮文本显示</mark>
