初始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。
***************************************************************************************