HTML简介 ppt课件
合集下载
第1章 HTML简介.ppt
上一页 下一页 目录 本节 结束
1.4 网页技术概况
以目前的网页技术来说，大致可分为三个方面来加以说明。 ⑴ 静态网页（HTML、CSS） ⑵ 网页美工（Flash、Fireworks） ⑶ 动态网页（JavaScript/VBScript、ASP） 动态网页是让网页能够依照用户的需求做出动态响应的技术。 所谓的静态网页，是指这个网页不论在何时从何地浏览，都 将显示相同的画面与内容，且用户仅能浏览，无法提供信息给 网站，让网站响应用户的需求。 静态网页是用HTML编写，保存时扩展名需使用.htm或.html。 静态网页只能单纯地在网页中展示文字与图片，它是所有网页 的基础技术。整个网页的主要内容与网页的显示控制，都必须 利用HTML实现。
资源，如另外一个网页、一个声音文件、网页的另一个段落 或者是万维网中的任何资源等等，而且这些资源均可以存放 在任何一个服务器上。在浏览网页时，如果你用鼠标单击超 链接，那么就会跳转到超链接所指向的资源，就可从Web上 下载新的信息。在网页中，一个超链接可以是一些文字也可 以是一幅图画。而且这些文字在浏览器中显示出来时一般是 带有下划线的彩色文字。判断网页中的某个对象是否是超链 接有个简单的方法，即当鼠标光标箭头移动到这个文字或图 像时，如果是超链接，浏览器便会改变光标为一只手的形状。
除了URL的这种寻址作用外，在使用超文本链接 时，即将一个文件链接到另一个文件时，也必须 使用URL。
上一页 下一页 目录 本节 结束
3．网站（Web site） 网站是一个存放在网络服务器上的完整信息的
集合体。它包含一个或多个网页，这些网页以一 定的方式链接在一起，成为一个整体，用来描述 一组完整的信息或达到某种期望的宣传效果。
5．主页（Home page） 主页，也可以称之为首页，它既是一个单独的网页，
《HTML基础》PPT课件
• <title>欢迎访问我的主页</title>
• <style type="text/css">
• .STYLE11 {FONT-SIZE: 12px; color: #666666; }
• </style>
• <script type="text/JavaScript">
• <!--
• function MM_jumpMenu(targ, selObj, restore){ //v3.0
3. 开头部分用以存载重要信息，而只有本文部分会被显示。所以 大部分标记会运用于本文部分。
4. <TITLE>所标示的是文件的标题。会出现于浏览器顶部及为 别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
h
9
实例 • <HTML>
• <head>
• <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
HTML就没有WWW“世界” 。
• HTML 不是程序设计语言，而是一种结构
语言。
h
4
2.1 HTML概述
• HTML有许多元素，文档通过元素置标就 形成了所谓的HTML文档。
• HTML 也是文本文件，所以可以用纯文本 编辑器来编辑（如Windows 的记事本、 写字板)
• 其后缀名必须是 .html 或 .htm
h
1
第2章 HTML语言基础
• 2.1 HTML概述 • 2.2 文本的编辑 • 2.3 图像编辑 • 2.4 建立超链接 • 2.5 表格与框架 • 本章小结
HTML语言简介ppt课件
• 标记是HTML文档中一些有特定意义 的符号，使用 ”<“ 和 ”>”括起来。
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• MIME类型和子类型一般以类型/子类型
的形式列出。
• 例如，一个MPEG视频文件将会以 "video/mpeg"的形式列出。
;
27
MIME多目的Internet邮件扩展
常见的MIME类型 超文本标记语言文本 .html,.html 普通文本 .txt RTF文本 .rtf GIF图形 .gif JPEG图形 .jpeg,.jpg au声音文件 .au MIDI音乐文件 mid,.midi RealAudio音乐文件 .ra, .ram MPEG文件 .mpg,.mpeg AVI文件 .avi GZIP文件 .gz TAR文件 .tar
9. 一个一般的URI会包括哪几个部分？
10. 什么是相对的URI？
11. HTTP协议工作在一个什么模型上？
12. HTTP协议中，Web服务器如何把网页发回给浏览器？
;
1
HTML
• HyperText Markup Language
• RFC 2616 - Hypertext Transfer Protocol -- HTTP1.1
• HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是 以<html>开始，以</html>结束。
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• MIME类型和子类型一般以类型/子类型
的形式列出。
• 例如，一个MPEG视频文件将会以 "video/mpeg"的形式列出。
;
27
MIME多目的Internet邮件扩展
常见的MIME类型 超文本标记语言文本 .html,.html 普通文本 .txt RTF文本 .rtf GIF图形 .gif JPEG图形 .jpeg,.jpg au声音文件 .au MIDI音乐文件 mid,.midi RealAudio音乐文件 .ra, .ram MPEG文件 .mpg,.mpeg AVI文件 .avi GZIP文件 .gz TAR文件 .tar
9. 一个一般的URI会包括哪几个部分？
10. 什么是相对的URI？
11. HTTP协议工作在一个什么模型上？
12. HTTP协议中，Web服务器如何把网页发回给浏览器？
;
1
HTML
• HyperText Markup Language
• RFC 2616 - Hypertext Transfer Protocol -- HTTP1.1
• HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是 以<html>开始，以</html>结束。
html讲解ppt
<html>
<head> <title>标题</title>
</head>
<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
</body>
</html>
实例
<html> <head> <title>设置页面背景</title> </head> <body bgcolor="blue"> </body>
</html>
text属性
• 设置页面中文字显示的颜色 • 可以使用颜色单词，也可以使用十六进制 颜色值
实例
<html> <head>
<title>设置页面背景</title> </head> <body bgcolor="blue" text="white"> 页面文字颜色 </body> </html>
属性
属性
• 在标记和属性之间有个空格（如果有一个 或多个已存在的属性，就与前一个属性之 间有一个空格） • 属性后面紧跟着一个“=”符号. •有一个属性值，由一对双引号“ ”括起来
《html教程讲义》课件
一、HTML简介1.1 HTML的定义HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。
1.2 HTML的作用HTML用于描述网页的结构和内容，使得浏览器能够展示具有特定格式的文本、、图片等。
1.3 HTML的发展历程HTML 1.0（1993年）HTML 2.0（1995年）HTML 4.01（1997年）XHTML 1.0（2000年）HTML5（2014年）二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签：`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签：`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`～`<h6>`：依次表示一级到六级3.2 段落标签`<p>`：表示一个段落3.3 换行与清除浮动`<br>`：表示换行`<wbr>`：表示单词换行`<clear>`：清除浮动3.4 字符实体`<>&"`：分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`：表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`：表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`：表示锚点`<a href="锚点名称">`：到锚点五、列表与表格5.1 无序列表`<ul>`：无序列表`<li>`：列表项5.2 有序列表`<ol>`：有序列表`<li>`：列表项5.3 定义列表`<dl>`：定义列表`<dt>`：定义`<dd>`：定义描述5.4 表格`<table>`：表格`<tr>`：表格行`<td>`：单元格`<th>`：表头单元格六、表单与数据验证6.1 表单标签`<form>`：表单`<input>`：输入框`<textarea>`：文本域`<select>`：下拉菜单`<option>`：下拉菜单选项6.2 数据验证`required`：必填字段`pattern`：正则表达式验证`minlength`、`maxlength`：字符长度限制`type="e"、type="number"、type=""：输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表，通过`<link>`标签引入7.4 CSS选择器标签选择器：`h1 { }`类选择器：`.classname { }`ID选择器：`idname { }`属性选择器：`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`：外边距`border`：边框`padding`：内边距`width`、`height`：宽度和高度8.2 布局方式标准流布局浮动布局：`float`属性定位布局：`position`属性弹性盒模型（Flexbox）：`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位（vw、vh）、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`：视频`<audio>`：音频10.2 画布（Canvas）`<canvas>`：绘制图形、动画等10.3 Web存储`localStorage`：本地存储`sessionStorage`：会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`：对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版，如、段落、换行等图片与的使用，包括图片标签和锚点列表与表格的创建和应用表单与数据验证，如必填字段、正则表达式验证等CSS样式的基础知识，包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性，如视频与音频、画布、Web存储等HTML5的新特性，如离线应用、Web存储等，这些内容需要一定的实践和理解CSS的高级应用，如伪类、过渡、动画等，这些内容需要对CSS 有深入的了解表单的数据验证，如何使用JavaScript进行复杂的验证，需要对JavaScript有一定的了解。
HTML基础ppt课件
表示链接一个外部CSS文件default.css如下: <link href="default.css" rel="stylesheet" type="text/css“ />
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
HTML代码简介 PPT课件
• <a href=“” target=_blank title="新浪站点链接"> 新浪站点链接</a>
• </body>
• </html>
显示结果
1.25
© 2009
HTML代码简介
• 链接到email地址 • 在网站中，你经常会看到“联系我们”
的链接，一点击这个链接，就会触发你 的邮件客户端，比如Outlook Express， 然后显示一个新建mail的窗口。用<a>可 以实现这样的功能。
பைடு நூலகம்
1.26
© 2009
HTML代码简介
• <html>
• <body>
• <a href="biaoti.htm">这是一个链接 </a><br>
• <a href="" target=_blank title="新浪站点链接">新浪站 点链接</a>
• <a href = "mailto:info@">联系新 浪</a>
HTML代码简介
HTML注释
• 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。
• 注释可以写在<!--和-->之间。浏览器是 忽略注释的，你不会在HTML正文中看到 你的注释。
• <!-- This is a comment -->
1.15
HTML绝对路径(Absolute Path)
html教程全PPT课件
2021/3/7
CHENLI
26
文字布局
• 行的控制
– 段(Paragraph) (可以看作是空行) <p> – 空白占位符 – 例：013.htm
2021/3/7
CHENLI
27
文字布局
• 行的控制
• HTML的段落与段落之间有一定的空隔。如果不希望 出现空隔而只想换行的话，就要用到另一个元素，即 <br>元素。<br>元素可以使所在的位置出现换行。这 种换行和浏览器的自动换行的效果类似。<br>元素不 是成对出现的。
2021/3/7
CHENLI
6
HTML 文件结构 (Document Structures)
– <HTML>
• <HEAD>
– <title></title> – <meta>
• </HEAD> • <BODY>
– HTML 文件的正文
• </BODY>
– </HTML>
2021/3/7
CHENLI
– 是一种用来制作超文本文档的简单标记语言。 – 用HTML编写的超文本文件称为HTML文件，也称
Web文件。
2021/3/7
CHENLI
3
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
2. 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
2021/3/7
CHENLI
19
常见颜色的代码
html简介PPT课件
2020/10/13
8
2.6 位置控制
通过ALIGN属性可以选择文字或图片的对齐 方式，LEFT表示向左对齐，RIGHT表示向 右对齐，CENTER表示居中。基本语法如 下：
<DIV ALIGN=#> 例 2.6
#＝left／right／center
2020/10/13
9
三、列表
3.1 无序号列表
例 3.2
<OL> <LI>第一项 <LI>第二项 <LI>第三项
</OL>
2020/10/13
11
3.3 定义性列表
定义性列表可以用来给每一个列表项再加上一段 说明性文字，说明独立于列表项另起一行显示。 在应用中，列表项使用标签<DT>标明，说明性 文字使用<DD>表示。在定义性列表中，还有一 个属性是COMPACT,使用这个属性后，说明文字 和列表项将显示在同一行。其结构如下所示：
HTML
Hypertext Marked Language 超文本标记语言
2020/10/13
1
一、HTML的基本结构
<HTML>
<HEAD> 头部信息
</HEAD> <BODY>
文 档 主 体， 正 文 部 分 </BODY> </HTML> 例1.1
2020/10/13
ቤተ መጻሕፍቲ ባይዱ
2
超文本中的标签
单标签 < 标签名称>
例 4.1
2020/10/13
13
4.2 表格的标题
表格标题的位置，可由ALIGN属性来设置， 其位置分别由表格上方和表格下方。下面 为表格标题位置的设置格式。 设置标题位于表格上方：
html课件
块级元素从上到下、行内元素从左到右依次排列的布局方式。
文档流布局
通过设置元素的float属性，使元素脱离文档流并向左或向右浮动，常用于实现文字环绕效果。
浮动布局
通过设置元素的position属性，可以精确控制元素在页面上的位置，包括相对定位、绝对定位和固定定位等。
定位布局
掌握CSS的基本语法，包括选择器、属性和值的写法，以及样式的优先级规则。
使用浏览器前缀
针对不同浏览器使用特定的CSS前缀，确保样式在不同浏览器中的兼容性。
渐进增强与优雅降级
根据浏览器支持情况，提供基本的功能和样式，逐步增强用户体验。
使用Polyfill
针对某些浏览器不支持的HTML5、CSS3特性，引入Polyfill库进行兼容处理。
测试与调试
使用多种浏览器进行测试，及时发现问题并进行修复。
图像处理
06
HTML页面优化与兼容性处理
压缩HTML、CSS和JavaScript文件：通过压缩代码，减少文件大小，提高页面加载速度。
使用CDN加速：通过CDN服务分发资源，减轻服务器压力，提高用户访问速度。
优化图片：压缩图片、使用WebP格式、设置合适的图片尺寸等，降低图片加载时间。
减少HTTP请求：合并多个CSS和JavaScript文件，减少浏览器发起的HTTP请求数量。
CSS语法
颜色与背景
字体与文本
学习如何设置元素的颜色、背景色、背景图片等样式，以及渐变、阴影等高级效果。
学习如何设置文本的字体、大小、颜色、行高等样式，以及文本装饰、对齐等效果。
03
02
01
选择器优先级
了解选择器优先级的规则，包括内联样式、ID选择器、类选择器、元素选择器等之间的优先级关系。
03HTML基础.ppt
<html>…</html>：设置HTML文件的开始和结束。 <head>…</head>：设置HTML文件的头信息， 如主题、层叠样式表单、脚本程序等。 <title>…</tit口标题栏显示。 <body>…</body>：设置HTML文件的主体内容。
HTML是纯文本类型的语言，使用HTML编写的网页文 件也是标准的纯文本文件。您可以用任何文本编辑器，例如 Windows的“记事本”程序打开它，查看其中的HTML源 代码，也可以在用浏览器打开网页时，通过相应的“查看源 文件”命令查看网页中的HTML代码。
为什么要学习HTML
学会HTML语言，可以知道哪些是垃圾代码， 这样，我们就可以利用图形化网页开发工具快速 地做出网页，利用所学的HTML知识添加很多效果， 并且可以消除无用的代码，或者修改其他网页中 的一些代码来达到我们需要的效果，从而达到快 速制作高质量网页的目的。
<html> <head>
<meta …./> <title>HTML文件主题</title> </head> <body> HTML文件内容 </body> </html>
在html之前一般先声明版本信息，即文档类型说明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
HTML是纯文本类型的语言，使用HTML编写的网页文 件也是标准的纯文本文件。您可以用任何文本编辑器，例如 Windows的“记事本”程序打开它，查看其中的HTML源 代码，也可以在用浏览器打开网页时，通过相应的“查看源 文件”命令查看网页中的HTML代码。
为什么要学习HTML
学会HTML语言，可以知道哪些是垃圾代码， 这样，我们就可以利用图形化网页开发工具快速 地做出网页，利用所学的HTML知识添加很多效果， 并且可以消除无用的代码，或者修改其他网页中 的一些代码来达到我们需要的效果，从而达到快 速制作高质量网页的目的。
<html> <head>
<meta …./> <title>HTML文件主题</title> </head> <body> HTML文件内容 </body> </html>
在html之前一般先声明版本信息，即文档类型说明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
html课件(全)
MVC模式
• MVC是一种目前广泛流行的软件设计模式，早 在70年代，IBM就推出了Sanfronscisico项目 计划，其实就是MVC设计模式的研究。近来， 随着J2EE的成熟，它正在成为在J2EE平台上 推荐的一种设计模型，也是广大Java开发者非 常感兴趣的设计模型。
• MVC英文即Model-View-Controller，即把一个 应用的输入、处理、输出流程按照Model、 View、Controller的方式进行分离，这样一个 应用被分成三个层——模型层、视图层、控制 层。
• <br> • <hr> • <link> • <img> • <frame> • <input> • <bgsound> • <meta> • <base>
HTML
全部内容
• 基本概念 • HTML基本标识符 • CSS－－样式表 • Javascript
基本目标
• 学会基本的标记的功能及属性设置 • 学会对样式表的设置 • 学会基本的js方法及自定义函数 • 自己设计并实现简单的个人网站(静态)
基本英语单词
• Client： 客户机程序，顾客, 客户, 委托人 • www：world wide web 万维网 • element：元素 • value：值，价值 • request：请求 • response：回答, 响应 • standard：标准 • document：文件 • attribute：属性
基本英语单词
• form： 表单 • frame： 框架 • able：表格 • background：背景 • color：颜色 • title：标题 • embed：嵌入 • head：头，头部 • body：身体 • Image:图片
HTML基础知识PPT
h
29
HTML
例4.6： 课表代码清单 ：
例4.6
<html> <head><title>表格标记应用案例</title>
</head>
<body>
<table border=2> <caption>0705331课表</caption>
<tr> <th>节次</th><th>星期一 </th><th>星期二 </th> <th>星期三 </th> <th>星期四  </th><th>星期五 </th>
突出显示(斜体)
<em></em>
电子邮件和网址(缩小+斜体字) <address></address>
按代码显示(缩小字体)
<code></code>
h
类别
物理 物理 物理 物理 物理 物理 物理 物理 逻辑 逻辑 逻辑 逻辑
18
HTML
4.2.4 段落标记
<p>分段标记 <br>换行标记 <hr>水平线标记 <pre>预格式化标记
例4. 10
</head>
<body><center>
<a href="ex4-10_1.html">下一页</a><p>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第四节、HTML编辑软件
Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页 制作和管理网站于一身的所见即所得网页编辑器，DW是 第一套针对专业网页设计师特别发展的视觉化网页开发工 具，利用它可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
浏览器
IE
火狐
谷歌
Opera
Safari
内核
Trident
Gecko
Blink
Presto
Webkit
优点
不用安装
兼容性最好， 可以装插件
速度快，页面 体验好
安全，速度快
速度快，尤其 表现在图片视 频上
缺点
加载慢，不算 第一次打开慢 兼容性较差 安全
兼容问题很差 对中文网站支 持欠缺
各大浏览器所占市场比重（市场份额）
2001年 (W3C) XHTML 1.1
HTML5 未 来
1997年 (W3C) HTML 4.0
HTML 2.0
万维网联盟
W3C（万维网联盟）创建于1994年，是Web技术领域最具权威和 影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多 项影响深远的Web技术标准及实施指南。HTML语言就是以W3C的标准 发布的。
➢<title>网页标题</title>——打开网页页面的标题，标题内容就是<title></title>标签内书写 对的内容
➢<body></body>——网页的具体内容代码部分，定义了网页文档的主体。body 元素包含文 档的所有内容（比如文本、超链接、图像、表格和列表等等。）
结构、表现、行为分离
记住！——写网页的
HTML的发展历程
1993年 (IETF) HTML 1.0
1995年 (W3C) HTML 2.0
1999年 (W3C) HTML 4.01
2004年 (WHAWG) HTML5 草案
2000年 (W3C) XHTML 1.0
2008年(合并) HTML5正式 版
1996年 (W3C) HTML 3.2
HTML
第一节、HTML发展史
HTML是什么？
HTML——超文本标记语言（HyperText Markup Language），标准通用标记语言的下一 个应用。“超文本”就是指页面可以包含图片、链 接，甚至音乐、程序等非文字元素。超文本标记语 言的结构包括“头”部分（Head）和“主体”部 分（Body），其中“头”部提供关于网页的信息， “主体”部分提供网页的具体内容。
WEB标准不是某一个标准，而是一系列 标准的集合。网页主要由三部分组成：结构 （Structure）、表现（Presentation）和行为 （Behavior）。对应的标准也分三方面：结构 化标准语言主要包括XHTML和XML，表现标准 语言主要包括CSS，行为标准主要包括对象模 型（如W3C DOM）、ECMAScript等。这些 标准大部分由W3C起草和发布，也有一些是其 他标准组织制订的标准，比如ECMA （European Computer Manufacturers Association）的ECMAScript标准。
➢<head></head>——网页的头部标签，用来告诉浏览器关于文档的附加信息。<head> 中的 元素可以引用脚本（JavaScript）、指示浏览器在哪里找到样式表（UTF-8">——规定编码格式为"utf-8"（世界通用的语言编码），为了防止乱 码，中英文编码格式是不一样的，如果搞错了，就会乱码。
2015年6月(全球)
2017年6月份全球主流浏览器市场份额排行榜
第三节、HTML网页基本结构
HTML网页基本结构是指构成一个网页必不可少的标签元素，以下是其基本格 式：
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8" /> <title>网页标题</title>
HTML5支持的浏览器
IE9+
FIrefox
chrome
Opera
Safari
360安全浏览器
UC
搜狗
第二节、主流浏览器及其内核
什么是浏览器的内核
浏览器的内核可以分为两个部分：
➢渲染引擎(layout engineer 或者 Rendering Engine)——负责取得网页的内容（HTML、XML、 图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或 打印机。 ➢JS 引擎则是解析 JavaScript 语言，执行 javascript 语言来实现网页的动态效果。
</head> <body> </body> </html>
网页结构代码语句介绍
➢<!DOVTYPE html>——HTML5的新声明，在编写HTML5文档时，要求指定文档类型（此处指 定为一个html文件），以确保浏览器能在HTML5的标准模式下进行渲染。其实就是告诉浏览器： 我要写网页了！
➢<html lang="en"></html>——1个html文档(文件)， lang="en"是此标签内的一个属性，指 定这个标签范围内的元素的语言种类（英语lang="en",中文lang="zh"，日文lang="ja"）。
WEB标准提倡结构、表现和行为相分离---HTML结构、CSS表现、JavaScript行为
理论上讲，你应该用一个 html 文档来保存内容与结构，用一个 css 文档来控制整个文 档的表现。如今表现与结构的未分离的网站还是很普遍的。所以我们刚开始学习要养成好的习 惯，把它们分别放到分开的文件中。
WEB标准的组成
注：浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所
有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
各大主流浏览器的内核
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染
引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加 上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种： Trident、Gecko、Blink、Presto、Webkit。