HTML简介 ppt课件
合集下载
HTML语言简介ppt课件
• 标记是HTML文档中一些有特定意义 的符号，使用 ”<“ 和 ”>”括起来。
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• xhtml文档必须有html,head,body,title等基本标 记
• 标记名和属性名必须小写
• 枚举属性值必须小写
• 属性值必须用引号括起来
• 标记必须封闭
• 属性值不能省略
• xhtml支持更多设备、具有更好的扩展性
;
33
文档类型（DOCTYPE）
• 如果html文档中不存在doctype声明，某 些浏览器在显示文档样式（CSS）的时候 ，可能出现混乱。比如：IE6.0。
;
16
<body>…</body>
• 用来指明文档的主体区域，网页所 要显示的内容都放在这个标记内，
• 其结束标记</body>指明主体区域 的结束
;
17
三、HTML文档结构
试一试：
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• xhtml文档必须有html,head,body,title等基本标 记
• 标记名和属性名必须小写
• 枚举属性值必须小写
• 属性值必须用引号括起来
• 标记必须封闭
• 属性值不能省略
• xhtml支持更多设备、具有更好的扩展性
;
33
文档类型（DOCTYPE）
• 如果html文档中不存在doctype声明，某 些浏览器在显示文档样式（CSS）的时候 ，可能出现混乱。比如：IE6.0。
;
16
<body>…</body>
• 用来指明文档的主体区域，网页所 要显示的内容都放在这个标记内，
• 其结束标记</body>指明主体区域 的结束
;
17
三、HTML文档结构
试一试：
HTML的PPT
水平线标记<hr />
<hr/>标记是在HTML文档中加入一条水 平线，它可以直接使用，具有size、color、 width和noshade属性。size是设置水平线 的厚度，而width是设定水平线的宽度， 默认单位是像素。noshade属性用来加入 一条没有阴影的水平线。 <hr size="3" width="85%" color =“red" noshade="noshade" align="center" />
HTML 样式
style 属性用于改变 HTML 元素的样式。 This text is in Verdana and red
This text is in Times and blue
style 属性的作用： 提供了一种改变所有 HTML 元素的样式 的通用方法。
HTML CSS
如何使用样式
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联 样式。 使用内联样式的方法是在相关的标签中使用样 式属性。样式属性可以包含任何 CSS 属性。以下实例 显示出如何改变段落的颜色和左外边距。 <p style="color: red; margin-left: 20px"> This is a paragraph </p>
html课件
8
中关村国际软件人才教育联盟
HTML元素与标记 HTML元素与标记 5-2
HTML中的元素通常由 部分组成： HTML中的元素通常由3部分组成： 中的元素通常由3
– 开始标记：由尖括号括起来的元素，如： 开始标记：由尖括号括起来的元素， <HEAD>、<BODY>、 <HEAD>、<BODY>、<P> – 内容： 内容： – 结束标记：在元素名前加上一个“/”（斜杠）符号， 结束标记：在元素名前加上一个“ 斜杠）符号， 并由尖括号括起来， </HEAD>、</BODY>、 并由尖括号括起来，如： </HEAD>、</BODY>、 </P>
2
中关村国际软件人才教育联盟
WEB浏览器 WEB浏览器 4-1
WWW 中的信息资源主要由一篇篇的 Web文档 或称Web页 Web文档，或称Web页为基本元素构成 文档， HTML 对 Web 页的内容、格式及 Web 页的内容、 页中的超级链接 超级链接进行描述 页中的超级链接进行描述 Web 浏览器的作用就在于读取 Web 站 文档，再对文档中的HTML 点上的 HTML 文档，再对文档中的HTML 标记逐行进行解释 逐行进行解释， 标记逐行进行解释，最后在用户的电脑上 显示相应的 Web 页面
常用实体
中关村国际软件人才教育联盟
HTML元素与标记 HTML元素与标记 5-2
HTML中的元素通常由 部分组成： HTML中的元素通常由3部分组成： 中的元素通常由3
– 开始标记：由尖括号括起来的元素，如： 开始标记：由尖括号括起来的元素， <HEAD>、<BODY>、 <HEAD>、<BODY>、<P> – 内容： 内容： – 结束标记：在元素名前加上一个“/”（斜杠）符号， 结束标记：在元素名前加上一个“ 斜杠）符号， 并由尖括号括起来， </HEAD>、</BODY>、 并由尖括号括起来，如： </HEAD>、</BODY>、 </P>
2
中关村国际软件人才教育联盟
WEB浏览器 WEB浏览器 4-1
WWW 中的信息资源主要由一篇篇的 Web文档 或称Web页 Web文档，或称Web页为基本元素构成 文档， HTML 对 Web 页的内容、格式及 Web 页的内容、 页中的超级链接 超级链接进行描述 页中的超级链接进行描述 Web 浏览器的作用就在于读取 Web 站 文档，再对文档中的HTML 点上的 HTML 文档，再对文档中的HTML 标记逐行进行解释 逐行进行解释， 标记逐行进行解释，最后在用户的电脑上 显示相应的 Web 页面
常用实体
html讲解ppt
超链接的路径
• 绝对路径 • 相对路径
路径
• 路径指定文件系统中，你需要的文件所在 的位置
设置绝对路径
• 绝对路径指文件的完整路径，包括文件传 输的协议http、ftp等，一般用于网站的外 部链接
例如： http://www.broadview.com.cn
ftp://219.153.41.160
例如：<html> • 标记不区分大小写
标记类型
• 单标记 例如：<br>
• 双标记 <标记>内容</标记> 例如：<title>测试</title>
HTML基本语法
• 属性：用来描述标记的详细信息 <标记名字 属性1 属性2 属性3 … >
<a href="https://www.baidu.com">百度</a>
回车
• <br>标记
实例
<html> <head>
<title>回车</title> </head> <body> 输入要显示的文字内容<br/>继续输入要显 示的内容 </body> </html>
<p>与<br>的区别
HTML基础ppt课件
6பைடு நூலகம்
1 HTML文档结构
2．头部信息 <head> … </head>
这一部分用来说明文档标题以及该页面的其他信息， 它构成HTML文档的开头部分，在此标记对之间可 以使用<meta>、<title>等标记，这些标记都是 描述HTML文档相关信息的标志，标志对之间的内 容是不会在浏览器的框内显示出来的，但是其内容 应该尽量简短。
17
2.1 head容器的标记
4．base元素 格式：
<base href="URL" target="text" />
base元素指定一个显式 URL 用于解析对于外部源 的链接和引用，如图像和样式表。当用户使用相对 URL请求文档时，超链接也会正确地执行。Target 指定文档中所有链接的默认窗口，该属性主要用在 使用框架结构的网页中，使用框架结构，同一浏览 器窗口中可以容纳多个网页，同时在若干不同的框 架窗口中显示。
11
2.1 head容器的标记
<head>标记主要用来提供网页文件的整体 信息。包括标题栏名称、文件的网址、所采 用的文档编码等。
<head>标记用来告知浏览器这是文件标题 的开头，最后使用</head>标记告知浏览器 这是文件标题的结束点。
1 HTML文档结构
2．头部信息 <head> … </head>
这一部分用来说明文档标题以及该页面的其他信息， 它构成HTML文档的开头部分，在此标记对之间可 以使用<meta>、<title>等标记，这些标记都是 描述HTML文档相关信息的标志，标志对之间的内 容是不会在浏览器的框内显示出来的，但是其内容 应该尽量简短。
17
2.1 head容器的标记
4．base元素 格式：
<base href="URL" target="text" />
base元素指定一个显式 URL 用于解析对于外部源 的链接和引用，如图像和样式表。当用户使用相对 URL请求文档时，超链接也会正确地执行。Target 指定文档中所有链接的默认窗口，该属性主要用在 使用框架结构的网页中，使用框架结构，同一浏览 器窗口中可以容纳多个网页，同时在若干不同的框 架窗口中显示。
11
2.1 head容器的标记
<head>标记主要用来提供网页文件的整体 信息。包括标题栏名称、文件的网址、所采 用的文档编码等。
<head>标记用来告知浏览器这是文件标题 的开头，最后使用</head>标记告知浏览器 这是文件标题的结束点。
html教程全PPT课件
7
第一张网页（01.htm）
<html> <head> <title>第一张网页</title> </head> <body> 欢迎光临我的主页！ </body>
</html>
2021/3/7
CHENLI
8
基本组成部分—— HTML元素属性
• HTML元素可以有自己的相关属性，每一个属 性还可以由我们网页编制者赋一定的值。元素 属性出现在元素的< >内，并且和元素名之间 有一个空格分隔；属性值用“”引起来。
• 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm
2021/3/7
CHENLI
21
<body>元素及元素属性——4
• <body>元素中有下列元素属性：
– (3)bgproperties=fixed
• bgproperties=fixed使背景图片成水印效果，即图片不 随着滚动条的滚动而滚动。
2021/3/7
CHENLI
26
文字布局
• 行的控制
– 段(Paragraph) (可以看作是空行) <p> – 空白占位符 – 例：013.htm
2021/3/7
《html基础常识》课件
HTML图像
使用<img>标签可以插入图像到网页中，通过指定图像的URL或搜索查询， 可以显示具体的图片。
HTML音视频
HTML5引入了<audio>和<video>标签，可以直接在网页中嵌入音频和视频 内容，为用户提供丰富的多媒体体验。
HTML颜色与样式
通过CSS，可以为HTML元素设置不同的颜色和样式，以改变网页的外观和布 局。
HTML5新特性
HTML5引入了许多新的语义元素、API和功能，例如<canvas>绘图、地理定位和本地存储等。
HTML最佳实践
遵守HTML标准、使用语义化的HTML、优化网页性能和考虑用户体验是 HTML开发的最佳实践。
HTML问题解决与调试技巧
在HTML开发过程中，会遇到各种问题和错误。了解常见的问题和有效的调试 技巧可以提高开发效率。
HTML链接
使用<a>标签可以在网页之间创建链接，使用户可以轻松导航到其他页面或位置。
HTML表格
使用<table>标签以及相关的<tr>、<td>标签可以创建具有行和列的表格， 用于展示和组织数据。
HTML表单
通过<form>标签可以创建交互式的表单，用于用户提交数据。各种输入类型和验证规则可以通过不同的标签 来定义。
html简介PPT课件
边框尺寸设置
边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border 设成不同的值，有不同的效果。
格间线宽度
格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属 性加以调节。格式是：
2020/10/13
14
4.3 表格尺寸设置
表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的， 如果我们要直接固定表格的大小，可以使用下列方式
<table width=n1 height=n2> width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来 表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。
noshade 线段无阴影属性，为实心线段 例 2.4.1 2.4.2 2.4.3 2.4.4
2020/10/13
7
2.5 文字的大小设置、字体与样式 、颜色
提供设置字号大小的是FONT，FONT有一个属性 SIZE，通过指定SIZE属性就能设置字号大小，而 SIZE属性的有效值范围为1－7，其中缺省值为3。 我们可以SIZE属性值之前加上“＋”、“－”字 符，来指定相对于字号初始值的增量或减量。 HTML4.0提供了定义字体的功能，用FACE属性 字体效果 文字颜色设置格式如下： <font color=color_value>…</font> 颜色值 例 2.5
html课件
块级元素从上到下、行内元素从左到右依次排列的布局方式。
文档流布局
通过设置元素的float属性，使元素脱离文档流并向左或向右浮动，常用于实现文字环绕效果。
浮动布局
通过设置元素的position属性，可以精确控制元素在页面上的位置，包括相对定位、绝对定位和固定定位等。
定位布局
掌握CSS的基本语法，包括选择器、属性和值的写法，以及样式的优先级规则。
05
HTML5新增特性及应用场景
如`<header>`、`<footer>`、`<article>`等，增强了网页的可读性和可维护性。
语义化标签
新增了如`<input type="date">`、`<input type="range">`等表单控件，丰富了表单的交互方式。
表单控件
如`<audio>`和`<video>`标签，支持音频和视频的嵌入播放，无需依赖第三方插件。
02
自定义控件
通过JavaScript和HTML5 API，可以自定义音视频的播放控件，实现个性化的播放体验。
Canvas提供了丰富的绘图API，可以绘制线条、形状、图像等图形元素。
图形绘制
结合JavaScript，可以在Canvas上实现各种动画效果，如渐变、旋转等。
HTML基础教程ppt课件
HTMLபைடு நூலகம்文件结构
<html>...</html> <head>...</head> <body>...</body> 元素：是HTML语言的基本部分。元素总是 成对出现，每一对元素一般都有一个开始 的标记（如<body>），也有一个结束的标 记（如</body>）。元素的标记要用一对尖 括号括起来，并且结束的标记总是在开始 的标记前加一个斜杠。
HTML基本结构的 有关元素和元素属性
HEAD元素——5 <meta>元素
<meta http-equiv=“refresh” content=“5;URL=http://www.enet.com.cn/esch ool”> 用来自动刷新网页
练习（03.htm）
编写一个网页，要求3秒钟后自动跳转到硅谷动力学院的 网站。 <html> <head> <title>my first page</title> <meta http-equiv=“refresh” content=“3;URL=http://www.enet.com.cn/eschool”> </head> <body> <p align=“center”>三秒钟后本网页将自动跳转到硅谷动 力网络学院首页</p> </body> </html>
第2章HTML语言精品PPT课件
…
</ head > 文件头结束
<body> 文件体开始
…
</ body > 文件体结束
</ htnl >
htnl文件结束
2.1 文档结构
2.1.1 开始与结束标记
语法格式：
<HTML> HTML文件的所有内容
</HTML>
2.1 文档结构
2.1.2 头部标记
语法格式：
< head > HTML文档的头部内容
2.3 超链接标记
2.3.2 链接至另外一台机器上的Web页面
语法格式：
<A href=”URL”>某机的URL</A>
2.3 超链接标记
2.3.3 链接至同一文件的另一个段落
wk.baidu.com
先做出一个“锚”标记，即链接的目标地，再做
到“锚”的链接。
例如
先在文件中选择“第一部分”做“锚”
标记，
<A name=”第一部分”>第一部分</A>； 再做到“锚”的链接，
第2章 HTML语言
第2章 HTML语言
➢ 系统地学习HTML语言的基本结构和一些常用标记符的 使用。
➢ 掌握HTML语言的基本结构 ➢ 掌握HTML语言基本标记符的使用方法
html ppt课件
HTML PPT的优势与不足
技术门槛高
文件大小问题
制作HTML PPT需要一定的技术基础 ，如HTML、CSS、JavaScript等。
由于HTML PPT包含大量资源文件， 可能导致文件较大，加载速度慢。
兼容性问题
虽然HTML PPT跨平台性好，但不同 浏览器对HTML的支持程度不同，可 能导致显示效果不一致。
02
03
04
精炼文字
只保留核心信息，删除余外的 修饰词和冗余内容。
选择合适的字体
根据内容和风格选择合适的字 体，确保易读性。
图片与文字的配合
图片应与文字内容相关，增强 信息的转达效果。
版权意识
确保使用的图片和素材不侵犯 任何版权。
动画和过渡效果
适度使用
动画和过渡效果能增加趣味性 ，但过度使用会分散注意力。
XXX
PART 04
案例分析
REPORTING
案例一：使用HTML制作动态PPT
总结词
通过HTML和CSS实现PPT的动态效果，如幻灯片自动切换、动画效果等。
详细描写
使用HTML和CSS的动画和过渡效果，可以创建动态的PPT演示。例如，通过设 置CSS的`transition`属性，可以实现幻灯片之间的平滑过渡。此外，使用 JavaScript可以控制幻灯片的自动切换时间，实现自动播放功能。
网页制作——HTML简介.ppt
行标记符BR实现该功能。注意，BR仅单独使用， 而非成对出现。
2. 添加水平线 <HR>
添加水平线的标记符为<HR>（与BR类似，HR 也不包括结束标记符。
五、段落格式
3. 段落对齐
（1） ALIGN属性
ALIGN属性用于设置段落的对齐方式，其常见 取值有4种：RIGHT（右对齐）、LEFT（左对 齐）、CENTER（居中对齐）、JUSTIFY（两端 对齐）。如：<p align=“left”>align to left</p>
四、 文字格式 1．字符格式 <FONT 属性=属性值>文本内容…</FONT> （1）SIZE属性：控制文字的大小 （2）COLOR属性：控制文字的颜色
五、段落格式
1．分段与换行符 <P>…</P>
< BR>
分段标记符用于将文档划分为段落，标记符为
<P>…</P>
要将文字强制换行，而不是另起段落，可以用换
（4）BODY标记符
<BODY></BODY>指的是定义出一个 HTML文档的体部，位于首部下面。在<BODY> 标记符内的文字，所有使用标记符的地方都可 以经浏览器正确地显示在浏览器窗体中。
二、标签格式
html教程全PPT课件
2021/3/7
CHENLI
12
HTML基本结构的 有关元素和元素属性
• HEAD元素——3 • <meta>元素
– <meta name="author" content=“wutao"> – 用来标记文档的作者。
2021/3/7
CHENLI
13
HTML基本结构的 有关元素和元素属性
• HEAD元素——4 • <meta>元素
• 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm
2021/3/7
CHENLI
21
<body>元素及元素属性——4
• <body>元素中有下列元素属性：
– (3)bgproperties=fixed
• bgproperties=fixed使背景图片成水印效果，即图片不 随着滚动条的滚动而滚动。
2021/3/7
CHENLI
26wk.baidu.com
文字布局
• 行的控制
– 段(Paragraph) (可以看作是空行) <p> – 空白占位符 – 例：013.htm
2021/3/7
CHENLI
27
文字布局
• 行的控制
• HTML的段落与段落之间有一定的空隔。如果不希望 出现空隔而只想换行的话，就要用到另一个元素，即 <br>元素。<br>元素可以使所在的位置出现换行。这 种换行和浏览器的自动换行的效果类似。<br>元素不 是成对出现的。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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标准。
2001年 (W3C) XHTML 1.1
HTML5 未 来
1997年 (W3C) HTML 4.0
HTML 2.0
万维网联盟
W3C（万维网联盟）创建于1994年，是Web技术领域最具权威和 影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多 项影响深远的Web技术标准及实施指南。HTML语言就是以W3C的标准 发布的。
第四节、HTML编辑软件
Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页 制作和管理网站于一身的所见即所得网页编辑器，DW是 第一套针对专业网页设计师特别发展的视觉化网页开发工 具，利用它可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
浏览器
IE
Leabharlann Baidu
火狐
谷歌
Opera
Safari
内核
Trident
Gecko
Blink
Presto
Webkit
优点
不用安装
兼容性最好， 可以装插件
速度快，页面 体验好
安全，速度快
速度快，尤其 表现在图片视 频上
缺点
加载慢，不算 第一次打开慢 兼容性较差 安全
兼容问题很差 对中文网站支 持欠缺
各大浏览器所占市场比重（市场份额）
➢<title>网页标题</title>——打开网页页面的标题，标题内容就是<title></title>标签内书写 对的内容
➢<body></body>——网页的具体内容代码部分，定义了网页文档的主体。body 元素包含文 档的所有内容（比如文本、超链接、图像、表格和列表等等。）
结构、表现、行为分离
2015年6月(全球)
2017年6月份全球主流浏览器市场份额排行榜
第三节、HTML网页基本结构
HTML网页基本结构是指构成一个网页必不可少的标签元素，以下是其基本格 式：
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8" /> <title>网页标题</title>
WEB标准提倡结构、表现和行为相分离---HTML结构、CSS表现、JavaScript行为
理论上讲，你应该用一个 html 文档来保存内容与结构，用一个 css 文档来控制整个文 档的表现。如今表现与结构的未分离的网站还是很普遍的。所以我们刚开始学习要养成好的习 惯，把它们分别放到分开的文件中。
WEB标准的组成
➢<head></head>——网页的头部标签，用来告诉浏览器关于文档的附加信息。<head> 中的 元素可以引用脚本（JavaScript）、指示浏览器在哪里找到样式表（CSS）、提供元信息等等。
➢<meta charset="UTF-8">——规定编码格式为"utf-8"（世界通用的语言编码），为了防止乱 码，中英文编码格式是不一样的，如果搞错了，就会乱码。
HTML5支持的浏览器
IE9+
FIrefox
chrome
Opera
Safari
360安全浏览器
UC
搜狗
第二节、主流浏览器及其内核
什么是浏览器的内核
浏览器的内核可以分为两个部分：
➢渲染引擎(layout engineer 或者 Rendering Engine)——负责取得网页的内容（HTML、XML、 图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或 打印机。 ➢JS 引擎则是解析 JavaScript 语言，执行 javascript 语言来实现网页的动态效果。
注：浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所
有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
各大主流浏览器的内核
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染
引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加 上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种： Trident、Gecko、Blink、Presto、Webkit。
记住！——写网页的
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
</head> <body> </body> </html>
网页结构代码语句介绍
➢<!DOVTYPE html>——HTML5的新声明，在编写HTML5文档时，要求指定文档类型（此处指 定为一个html文件），以确保浏览器能在HTML5的标准模式下进行渲染。其实就是告诉浏览器： 我要写网页了！
➢<html lang="en"></html>——1个html文档(文件)， lang="en"是此标签内的一个属性，指 定这个标签范围内的元素的语言种类（英语lang="en",中文lang="zh"，日文lang="ja"）。
第一节、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标准。
2001年 (W3C) XHTML 1.1
HTML5 未 来
1997年 (W3C) HTML 4.0
HTML 2.0
万维网联盟
W3C（万维网联盟）创建于1994年，是Web技术领域最具权威和 影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多 项影响深远的Web技术标准及实施指南。HTML语言就是以W3C的标准 发布的。
第四节、HTML编辑软件
Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页 制作和管理网站于一身的所见即所得网页编辑器，DW是 第一套针对专业网页设计师特别发展的视觉化网页开发工 具，利用它可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
浏览器
IE
Leabharlann Baidu
火狐
谷歌
Opera
Safari
内核
Trident
Gecko
Blink
Presto
Webkit
优点
不用安装
兼容性最好， 可以装插件
速度快，页面 体验好
安全，速度快
速度快，尤其 表现在图片视 频上
缺点
加载慢，不算 第一次打开慢 兼容性较差 安全
兼容问题很差 对中文网站支 持欠缺
各大浏览器所占市场比重（市场份额）
➢<title>网页标题</title>——打开网页页面的标题，标题内容就是<title></title>标签内书写 对的内容
➢<body></body>——网页的具体内容代码部分，定义了网页文档的主体。body 元素包含文 档的所有内容（比如文本、超链接、图像、表格和列表等等。）
结构、表现、行为分离
2015年6月(全球)
2017年6月份全球主流浏览器市场份额排行榜
第三节、HTML网页基本结构
HTML网页基本结构是指构成一个网页必不可少的标签元素，以下是其基本格 式：
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8" /> <title>网页标题</title>
WEB标准提倡结构、表现和行为相分离---HTML结构、CSS表现、JavaScript行为
理论上讲，你应该用一个 html 文档来保存内容与结构，用一个 css 文档来控制整个文 档的表现。如今表现与结构的未分离的网站还是很普遍的。所以我们刚开始学习要养成好的习 惯，把它们分别放到分开的文件中。
WEB标准的组成
➢<head></head>——网页的头部标签，用来告诉浏览器关于文档的附加信息。<head> 中的 元素可以引用脚本（JavaScript）、指示浏览器在哪里找到样式表（CSS）、提供元信息等等。
➢<meta charset="UTF-8">——规定编码格式为"utf-8"（世界通用的语言编码），为了防止乱 码，中英文编码格式是不一样的，如果搞错了，就会乱码。
HTML5支持的浏览器
IE9+
FIrefox
chrome
Opera
Safari
360安全浏览器
UC
搜狗
第二节、主流浏览器及其内核
什么是浏览器的内核
浏览器的内核可以分为两个部分：
➢渲染引擎(layout engineer 或者 Rendering Engine)——负责取得网页的内容（HTML、XML、 图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或 打印机。 ➢JS 引擎则是解析 JavaScript 语言，执行 javascript 语言来实现网页的动态效果。
注：浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所
有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
各大主流浏览器的内核
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染
引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加 上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种： Trident、Gecko、Blink、Presto、Webkit。
记住！——写网页的
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
</head> <body> </body> </html>
网页结构代码语句介绍
➢<!DOVTYPE html>——HTML5的新声明，在编写HTML5文档时，要求指定文档类型（此处指 定为一个html文件），以确保浏览器能在HTML5的标准模式下进行渲染。其实就是告诉浏览器： 我要写网页了！
➢<html lang="en"></html>——1个html文档(文件)， lang="en"是此标签内的一个属性，指 定这个标签范围内的元素的语言种类（英语lang="en",中文lang="zh"，日文lang="ja"）。