初始HTML
第一部分 开发前准备：
1，WWW,Internet,W3C,ip,域名
WWW：(world wide web)
万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信息。从技术上讲，万维网是Internet上那些支持WWW协议和超文本传送协议的客户机与服务器的集合，通过它可以访问世界各地的超文本文件，包括文字，图形，声音，动画，资料库以及各种内容。
Internet:
是由计算机连接起来的物理网络，它们依靠标准和固定的规则进行通信。
W3C:(world wide web consortium)
万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）
ip地址：
IP地址是指互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），是IP Address的缩写。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址。例如：192.168.189.1
域名：（万网）
IP地址是Internet主机的作为路由寻址用的数字型标识，人不容易记忆。因而产生了域名（domain name）这一种字符型标识。
com:商业组织公司
edu:教研机构
gov:政府部门
net:网络服务商
org:非盈利组织
cn:中国
jp:日本
uk:英国
2，网站(B/S架构项目)
是构成web的基础，指在万维网上根据一定的规则，使用html,css,java等语言制作的用于展示特定内容的相关网页的集合。
3，网页
是网站中的一个页面，是构成网站的基础，网页是纯文本文件，但是具有一定的格式，也就是HTML语言定义的格式，由于HTML被翻译为超文本标记语言，因此网页也被称为超文本文件，用于展示文本，图片，影音等内容。
4，互联网产业分类
行业服务类：
新闻资讯（网易）
信息搜索（百度，Google）
邮箱 （163）
购票类 （12306）
商务应用类：
电子商务 （天猫，京东）
人才招聘 （赶集网，智联招聘）
网络教育 （极客学院）
第三方支付 （支付宝）
其他类
由于"互联网+"概念的提出，互联网将渗入到医疗，教育，农业等传统行业
5，网站制作流程
需求分析->原型图（Axure）
|
前端设计->效果图（psd） 美工
|
前端开发->静态页面（html）
|
后台开发->接口服务（java）
|
部署运行（将网站部署到服务器上）
注意：在介绍时，尽量从实际开发着手，可以为学生展示我们公司的项目
6，网站的访问方式
通过浏览器来读取网页的内容，浏览器可以将信息的格式进行处理，将内容以一定的方式呈现到屏幕上。我们可以通过URL地址进行网站的访问
每个网页在Internet中都有一个唯一的URL地址，URL是Internet上用来指定一个位置或一个网页的标准方式，URL的语法格式如下：
协议名称://主机名称[:端口号/存放目录/文件名称]
http://127.0.0.1:8888/sg/index.jsp
http://www.baidu.com:80/xin/a.html
协议名称：浏览器默认协议为http协议
主机名称：网站所在的主机地址
端口号： 主机上存放该网站的服务器软件
存放目录：要访问网页的存放目录
文件名称：要访问的网页的名称
第二部分 了解HTML：
1，html概念
超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
分析简单的HTML结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
1) 符号介绍
2) 元素介绍
3) 结构介绍
2，html发展历程
版本 年份
HTML1.0~2.0 1989~1991
概念不明确
HTML3 1995
浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998
浏览器大战结束，万维网协会(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言，一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999
这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来十年中HTML"必备"版本
XHTML1.0 2001
正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。
XHTML承诺，由于它的严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活性更感兴趣，而不是XHTML的严格性。
HTML5
由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。基于一些新特性，如支持类似博客的元素，新的视频和图形功能，以及一大堆用来构建web应用的功能，HTML5注定成为大家公认的标准。
3，基本语法
1）特性
可以使用.html与.htm作为html文件的后缀名（扩展名）
可以使用任意文本编辑器创建HTML，推荐使用
windows操作系统
文件名.扩展名
linux操作系统
文件名
2）注释
<!-- 注释内容 -->
3）基本概念
标签：
标签用来标记内容，也是用标签表名文本的意义。标签使用"<",">"包围。
标签分为成对标签和单标签
元素：
一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：
与元素相关的特性称为属性，属性由键值对组成。
<元素名 属性1=值1 属性2=值2></元素名>
coreattrs属性
大多数元素都可以使用的属性。
id 唯一标识
class 标识一类元素
style 样式
title 描述信息
规范：
元素名和属性都不区分大小写。
4）文档结构
文档类型声明:
版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定
XML
1）严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3）frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3）H5文档类型
<!DOCTYPE html>
html：
标识HTML文档
head
标识HTML文档的头部
可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body
标识HTML文档的体部
body中的内容可以显示到浏览器中。
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
5）meta元素
定义文档元数据
1，定义元数据关键字
<meta name="Author" content="licy">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
2，报头规范
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
将会创建如下的消息头：
Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
4. 颜色与大小
1）颜色
颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。
3位十六进制 6位16进制 rgb 颜色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 红色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小
px 像素
HTML 页面结构 没穿衣服（素颜）
CSS 页面表现 化妆
JS 页面动作 跳舞
5. 标签介绍
1)块级(block)标签
<div></div>
特点：
独占一行
h1~h6 标题
特点:
1)有字体大小的设置
2)文本有加粗强调设置
3)上下文之间有较大间距
p 段落
特点：
1)独占一行
2)上下文之间具有距离
ul li 列表 无序列表
特点：
1) 配合使用
2) ul li都独占一行空间
3) ul 上下文之间有很大空间
4) li与列表的样式显示(默认点状)，并且由文本缩进
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
dl dt dd（definition list）自定义列表
特点：
1)dl dt dd独占一行空间
2)dl上下文之间有很大欧诺关键
3)dd有文本缩进
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
img
src="图片地址"
绝对路径
相对路径
2)行内（内联inline）标签
hao123
span
特点：
1)最干净的内联标签（没有任何修饰）
2)不独占一行
a 超链接
特点:
1)不独占一行
2)点击可以发生跳转（或进行对应操作），语法颜色为绿色
3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示
装饰标签 decoration 文本修饰标签（行内）
<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
img
src="图片地址"
绝对路径 http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
相对路径 one.html ../a.jpg
************************************练习题***************************************************
第一部分 开发前准备：
1，WWW,Internet,W3C,ip,域名
WWW：(world wide web)
万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信息。从技术上讲，万维网是Internet上那些支持WWW协议和超文本传送协议的客户机与服务器的集合，通过它可以访问世界各地的超文本文件，包括文字，图形，声音，动画，资料库以及各种内容。
Internet:
是由计算机连接起来的物理网络，它们依靠标准和固定的规则进行通信。
W3C:(world wide web consortium)
万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）
ip地址：
IP地址是指互联网协议地址（英语：Internet Protocol Address，又译为网际协议地址），是IP Address的缩写。IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址。例如：192.168.189.1
域名：（万网）
IP地址是Internet主机的作为路由寻址用的数字型标识，人不容易记忆。因而产生了域名（domain name）这一种字符型标识。
com:商业组织公司
edu:教研机构
gov:政府部门
net:网络服务商
org:非盈利组织
cn:中国
jp:日本
uk:英国
2，网站(B/S架构项目)
是构成web的基础，指在万维网上根据一定的规则，使用html,css,java等语言制作的用于展示特定内容的相关网页的集合。
3，网页
是网站中的一个页面，是构成网站的基础，网页是纯文本文件，但是具有一定的格式，也就是HTML语言定义的格式，由于HTML被翻译为超文本标记语言，因此网页也被称为超文本文件，用于展示文本，图片，影音等内容。
4，互联网产业分类
行业服务类：
新闻资讯（网易）
信息搜索（百度，Google）
邮箱 （163）
购票类 （12306）
商务应用类：
电子商务 （天猫，京东）
人才招聘 （赶集网，智联招聘）
网络教育 （极客学院）
第三方支付 （支付宝）
其他类
由于"互联网+"概念的提出，互联网将渗入到医疗，教育，农业等传统行业
5，网站制作流程
需求分析->原型图（Axure）
|
前端设计->效果图（psd） 美工
|
前端开发->静态页面（html）
|
后台开发->接口服务（java）
|
部署运行（将网站部署到服务器上）
注意：在介绍时，尽量从实际开发着手，可以为学生展示我们公司的项目
6，网站的访问方式
通过浏览器来读取网页的内容，浏览器可以将信息的格式进行处理，将内容以一定的方式呈现到屏幕上。我们可以通过URL地址进行网站的访问
每个网页在Internet中都有一个唯一的URL地址，URL是Internet上用来指定一个位置或一个网页的标准方式，URL的语法格式如下：
协议名称://主机名称[:端口号/存放目录/文件名称]
http://127.0.0.1:8888/sg/index.jsp
http://www.baidu.com:80/xin/a.html
协议名称：浏览器默认协议为http协议
主机名称：网站所在的主机地址
端口号： 主机上存放该网站的服务器软件
存放目录：要访问网页的存放目录
文件名称：要访问的网页的名称
第二部分 了解HTML：
1，html概念
超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。
分析简单的HTML结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
1) 符号介绍
2) 元素介绍
3) 结构介绍
2，html发展历程
版本 年份
HTML1.0~2.0 1989~1991
概念不明确
HTML3 1995
浏览器战争年代，Netscape和Microsoft都在试图争霸世界
HTML4 1998
浏览器大战结束，万维网协会(W3C)解救我们，他们的计划是创建一个唯一的HTML标准。计划的关键是将HTML的结构和表现分解为两种语言，一种语言用于实现结构（HTML）一种语言用于表现（CSS）.
HTML4.01 1999
这段日子过得很惬意，HTML4.01在1999年闪亮登场，称为接下来十年中HTML"必备"版本
XHTML1.0 2001
正当我们感觉安逸的时候一个新兴事物引起所有人注意，即XML。它让HTML开始心烦意乱，最终两者结合，XHTML1.0诞生。
XHTML承诺，由于它的严格，再加上它提供的一些新方法，只要遵循这个标准，WEB的所有争端将就此平息。但是，大多数人都很讨厌XHTML，Web开发人员对HTML的灵活性更感兴趣，而不是XHTML的严格性。
HTML5
由于没有得到大家的祝福，这场婚姻的结局并不好，很快被HTML的新版本取代，即HTML5.它支持HTML4.01标准的大部分特性，还提供一些新特性。基于一些新特性，如支持类似博客的元素，新的视频和图形功能，以及一大堆用来构建web应用的功能，HTML5注定成为大家公认的标准。
3，基本语法
1）特性
可以使用.html与.htm作为html文件的后缀名（扩展名）
可以使用任意文本编辑器创建HTML，推荐使用
windows操作系统
文件名.扩展名
linux操作系统
文件名
2）注释
<!-- 注释内容 -->
3）基本概念
标签：
标签用来标记内容，也是用标签表名文本的意义。标签使用"<",">"包围。
标签分为成对标签和单标签
元素：
一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的
属性：
与元素相关的特性称为属性，属性由键值对组成。
<元素名 属性1=值1 属性2=值2></元素名>
coreattrs属性
大多数元素都可以使用的属性。
id 唯一标识
class 标识一类元素
style 样式
title 描述信息
规范：
元素名和属性都不区分大小写。
4）文档结构
文档类型声明:
版本和文档类型声明，版本和文档类型声明是对应的，文档类型使用DTD来指定
XML
1）严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2）宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3）frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3）H5文档类型
<!DOCTYPE html>
html：
标识HTML文档
head
标识HTML文档的头部
可以包含该文档的标题，文档使用的脚本，样式定义，元数据等信息
body
标识HTML文档的体部
body中的内容可以显示到浏览器中。
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
5）meta元素
定义文档元数据
1，定义元数据关键字
<meta name="Author" content="licy">
<meta name="Copyright" content="版权信息">
<meta name="Description" content="描述信息">
<meta name="keywords" lang="zh-cn" content="精品图书">
<meta name="keywords" lang="en-us" content="good book">
2，报头规范
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
将会创建如下的消息头
Content-Type:text/html;charset=utf-8
<meta http-equiv="Content-Languaga" content="zh-CN">
将会创建如下的消息头
Content-Language:zh-CN
<meta http-equiv="Refresh" content="n;url=http://yourlink">
定时让网页在指定的时间n内跳转到页面http://yourlink
<meta http-equiv="Pragma" content="no-cache">
设置网页禁用浏览器缓存
将会创建如下的消息头：
Pragma:no-cache
<meta http-equiv="Cache-Control" content="no-cache">
设置网页禁用浏览器缓存
4. 颜色与大小
1）颜色
颜色由红(R)、绿(G)、蓝(B)组成，每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。
3位十六进制 6位16进制 rgb 颜色
#000 #000000 rgb(0,0,0) 黑色 black
#F00 #FF0000 rgb(255,0,0) 红色 red
#FFF #FFFFFF rgb(255,255,255) 白色 white
2）大小
px 像素
HTML 页面结构 没穿衣服（素颜）
CSS 页面表现 化妆
JS 页面动作 跳舞
5. 标签介绍
1)块级(block)标签
<div></div>
特点：
独占一行
h1~h6 标题
特点:
1)有字体大小的设置
2)文本有加粗强调设置
3)上下文之间有较大间距
p 段落
特点：
1)独占一行
2)上下文之间具有距离
ul li 列表 无序列表
特点：
1) 配合使用
2) ul li都独占一行空间
3) ul 上下文之间有很大空间
4) li与列表的样式显示(默认点状)，并且由文本缩进
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
dl dt dd（definition list）自定义列表
特点：
1)dl dt dd独占一行空间
2)dl上下文之间有很大欧诺关键
3)dd有文本缩进
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
img
src="图片地址"
绝对路径
相对路径
2)行内（内联inline）标签
hao123
span
特点：
1)最干净的内联标签（没有任何修饰）
2)不独占一行
a 超链接
特点:
1)不独占一行
2)点击可以发生跳转（或进行对应操作），语法颜色为绿色
3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示
装饰标签 decoration 文本修饰标签（行内）
<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
img
src="图片地址"
绝对路径 http://www.baidu.com/car.jpg
http://www.briup.com/demo/one.html
相对路径 one.html ../a.jpg
************************************练习题***************************************************
1、HTML的注释格式是？注释的作用有哪些？
<!-- -->
1、写过的代码不要删
2、注释调试法
3、注释文档
2、<!-- -->中还可以加<!-- -->吗？
不可以相互嵌套
3、颜色值有哪两种表示方式？
1、英文单词（关键字） red green ...
2、RGB格式的数字 每个颜色的范围是：0~255
R red 00-FF
G green 00-FF
B blue 00-FF #FF0000
4、标签的属性值有哪三种书写方式？标准方式是哪种？
双引号 单引号 没有引号
5、HTML标签的通用属性有哪些？ 4个
通用属性：所有的标签都可以使用的属性
id class name style
<br> 没有自己单独的属性
6、html中，表示大小的单位是像素，px。
***************************************************************************************
4440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
