二,HTML概述
2.1网页、网站、应用程序
网站(Website [ˈwebsaɪt])是指在因特网上根据一定的规则,使用HTML(标准通用标记语言下的一个应
用)等工具制作的用于展示特定内容相关网页的集合。简单地说,网站是一种沟通工具,人们可以通过
网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访
问网站,获取自己需要的资讯或者享受网络服务。
注:因特网(Internet)是一组全球信息资源的总汇。有一种粗略的说法,认为INTERNET是由于许多小的
网络(子网)互联而成的一个逻辑网,每个子 网中连接着若干台计算机(主机)。Internet以相互交流
信息资源为目的,基于一些共同的协议,并通过许多路由器和公共互联网而成,它是一个信息资源 和资
源共享的集合。
网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的。
网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是超文本标记
语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图
画。网页要通过网页浏览器来阅读。
**应用程序是指为了完成某项或某几项特定任务而被开发运行于操作系统之上的计算机程序。**应用程序与
应用软件的概念不同,但常常因为概念相似而被混淆。软件指程序与其相关文档或其他从属物的集合。
一般我们视程序为软件的一个组成部分。
例如,一个游戏软件包括程序(exe)、其他图片(*bmp等)、音效(wav等)等附件,那么这个程序(“exe)称作
应用程序,而它与其他文件(图片、音效等)在起合称软件。
应用程序(Application)运行在用户模式,它可以和用户进行交互,具有可视的用户界面
2.2HTML是什么
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准
标记语言。超文本就是指页面内可以包含图片、链接,甚至音乐、视频等非文字元素。
网页的本质就是超文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说****万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
-
HTML 不是一种编程语言,而是一种标记语言。
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
-
HTML 文档包含了HTML 标签及文本内容
-
HTML文档也叫做web 页面,使用 HTML 来建立自己的 WEB **站点,**HTML运行在浏览器上,由浏览器来解析。
2.3HTML5是什么
万维网的核心语言、超文本标记语言(HTML)的第五次重大修改。
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。而且大部分
现代浏览器已经具备了HTML5支持。HTML5是web时代最前沿的技术,它特有canvas标签和多种选择的
游戏开发引擎,让游戏开发更便捷。如果说苹果重新发明了手机,那么HTML5则重新定义了网络。
2.4HTML的发展历程
现在我们常常习惯于用数字来描述HTML的版本(如:HTML5),但是最初的时候我们并没有HTML1,
而是 1993年IETF团队的一个草案,并不是成型的标准。
两年之后,在1995年HTML有了第二版,即HTML2.0,当时是作为RFC1866发布的。有了以上的两个历
史版本,HTML的发展可谓突飞猛进。
1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年,作为升级版本的4.0和4.01也相继成为
W3C的推荐标准。
在2000年基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至
今,这期间虽然有点小的改动但大方向上终归没有什么变化。
从1993-2000之间短短的7年时间,HTML语言有着很大的发展,基于诸多人的努力,终于产生了我们现
在用的HTML语言。
HTML 5 的第一份正式草案已于2008年1月22日公布,仍继续完善
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
2.5HTML的发展背景
HTML5是WEB的未来,不仅在电脑端,而且在移动端也一定会得到广泛的应用。 据统计2013年全球将
有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万。
毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的主宰者。 据IDC的调查报告统计,截至2012
年5月,有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。
WEB技术发展越来越迅速,HTML5的到来更是把WEB技术推向了巅峰,目前HTML5技术已经日趋成熟,
HTML5的未来十分光明,值得我们去学习。
三,HTML文档结构
3.1HTML文件,文档定义
.html或.htm
3.2HTML的结构
头 标题title 主体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
</body>
</html>
3.2.1HTML文档声明
HTML5文档声明
3.3HTML5的语法变化
-
标签不再区分大小写
-
元素可以省略结束标签
-
允许省略属性值的属性(不是所有属性)
-
允许属性值不使用引号
3.4HTML5的特点及优势
优点:
- 网络标准统一、HTML5本身是由W3C推荐出来的。
- 多设备、跨平台
- 即时更新。
- 提高可用性和改进用户的友好体验;
- 有几个新的标签,这将有助于开发人员定义重要的内容;
- 可以给站点带来更多的多媒体元素(视频和音频);
- 可以很好的替代Flash和Silverlight;
- 涉及到网站的抓取和索引的时候,对于SEO很友好;
- 被大量应用于移动应用程序和游戏。
缺点:
- 安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、
web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
- 完善性:许多特性各浏览器的支持程度也不一样。
- 性能:某些平台上的引擎问题导致HTML5性能低下。
- 浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。
3.5HTML5的新特性
-
用以绘画的 canvas 元素
-
用以媒介播放的 video 和 audio 元素
-
对本地离线存储的更好的支持
新的语义化标签 例如:article footer header nav section
3.6HTML标签分类
块级标签,行内块标签,行内元素
3.6.1块级标签
块级元素的特点:(独占一行,可以设置宽高)。
-
独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
-
可以直接控制宽度、高度以及盒子模型的相关css属性
-
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
-
在不设置高度的情况下,块级元素的高度是它本身内容的高度
3.6.1.1块级元素:
标签 | 描述 |
---|---|
div | 常用块级容器,也是css layout的主要标签 |
h1~h6 | 标题标签 |
hr | 水平分隔线 |
ol | 有序列表 |
ul | 无序列表 |
li | 列表项 |
dl | 自定义列表 |
dt | 自定义列表项 |
dd | 定义描述 |
table | 表格 |
p | 段落 |
form | 交换表格 |
3.6.2行内元素
行内元素的特点:(有多大占多大,不可以设置宽高)
1.和其他内联元素从左到右在一行显示标签
2.不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
3.内联元素的宽高是由本身内容的大小决定(文字、图片等)
4.内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
- 常用的行内元素
标签 | 描述 |
---|---|
span | 常用内联容器,定义文本内区块 |
a | 锚点,超链接 |
b | 加粗 |
strong | 加粗强调 |
i | 斜体 |
em | 斜体强调 |
del | 文档中已被删除的文本 |
br | 强制换行 |
u | 下划线 |
textarea | 多行文本输入框 |
input | 输入框 |
select | 下拉列表 |
sub | 下标 |
sup | 上标 |
small | 小字体文本 |
3.6.3行内块元素
行内块元素是指本身属性为display:inline-block;的元素。
行内块元素的特点(有多大占多大,可以设置宽高)。
1.元素排列在一行
2.宽度默认由内容决定
3.元素间默认有间距
4.支持宽高、外边距、内边距的所有样式的设置
常用的行内块元素
img | 图片标签 |
---|
3.7长度单位
绝对长度单位 | 相对字体长度 | 可视区百分比长度单位 | 离奇的长度单位 |
---|---|---|---|
px | em | vw | 百分比% |
in | rem | vh | |
cm | points | vmax | |
mm | pica | vmin | |
ex | |||
ch |
3.8HTML注释+3.9文档快捷语法
ctrl+? 注释
ctrl+z 撤回
ctrl+shift+f 文本格式化
alt 多选
ctrl+c ctrl+v 粘贴+复制
ctrl+shift+} 无序列表点
ctrl+shift+{} 有序列表数字
<!-- 这是一个注释 -->
3.10标签及属性语法
3.10.1标签语法规则
-
HTML 元素以开始标签起始
-
HTML 元素以结束标签终止
-
元素的内容是开始标签与结束标签之间的内容
-
某些 HTML 元素具有空内容empty content
-
空元素在开始标签中进行关闭(以开始标签的结束而结束)
-
大多数 HTML 元素可拥有属性
-
点标签
-
双标签
3.10.2属性语法法则
-
属性是 HTML 元素提供的附加信息。
-
HTML 元素可以设置属性
-
属性可以在元素中添加附加信息
-
属性一般描述于开始标签
-
属性总是以名称/值对的形式出现比如:name=value