整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天小编带领大家走进我们华信智原前端老师的课堂，一起了解HTML的相关知识，本次分享是第一节课哦，后续还会陆续更新全部课程知识，欢迎大家点击关注我们，一起学习前端吧！
这节课的目标是认识HTML是什么以及学会在DW中建立站点，并发布自己的第一个html页面。
一、认识HTML
HTML概念：超本文标记语言（HyperText Markup Language）
超文本：浏览器就可以解释的，比如http（超文本传输协议）。官方解释：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言： 由一个一个的标记组成的语言。比如段落是<p>…</p>这个标记表示，图像是由<img/>这个标记表示。超链接是<a>…</a>标记表示。学习标记语言的关键是明白网页的元素（布局、结构、内容等）应该由什么标记来描述是最恰当的。
我们要让浏览器按照人的思维来显示网页，就必须掌握浏览器解释网页的html语言，明白标签的作用，比如你想产生段落，就必须用<p>段落内容</p>的方式才能实现。
HTML的历史：
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1，于2001年5月31日发布，W3C推荐标准。
XHTML 2.0，W3C工作草案。
HTML4.01 是常见的版本。
XHTML 5，从XHTML 1.x的更新版，基于HTML 5草案。
HTML 5——2014年10月28日，W3C推荐标准
HTML标记的语法：
标记只有两种语法结构，一种包容标记，一种空标记。
1、包容标记 <开始标记>...</结束标记>，比如 <h1>...</h1>、<p>…</p>等。
2、空标记 <开始标记/>，比如<img /> <br/> <hr/>等。
标记的属性只能放在开始标记里面。
1、<a href="URL" target="_blank">被点击的对象</a>
2、<img src="URL" alt="替换文本"/>
在DW的"插入"菜单——标签中，可以看到所有的html标签，如下图：
并不是所有标签都是有用的，有些标签随着版本的升级会废除，但是并没有删除，所以真正有用的标签只有那么几十个。
二、在DW中建立站点，并发布第一个HTML页面
基本步骤如下：
1、建立站点，设置好根目录文件夹和默认图片文件夹（非常重要）。
2、新建html页面，并保存在根目录文件夹下面。
3、再往保存好的页面中添加内容，比如文字和图片、超链接等。
详细介绍如下：
1、点击“管理站点”，在弹出的面板中点击“新建站点”，如图：
2、设置“站点名称”和“本地站点文件夹”，本地站点文件夹就是你存放整个网站的根目录，点击后面的文件夹小图标，选择一个盘符，新建一个文件夹，选择好就可以了。比如，选择F盘下面的lianxi文件夹。
3、这一步非常关键，必须要设置“默认图像文件夹”，点击“高级设置”，再点击后面的文件夹小图标，在刚才设置好的“lianxi”根目录文件夹下面再新建一个“images”文件夹，选择好。要保证“images”文件夹必须在你设置的根目录文件夹的下面。
建立这个默认图像文件夹的好处是从站点以外选择的图片，都会自动把图片复制到这个默认图像文件夹的下面。保证了站点的所有资源都在站点内部，不会丢失图片。
否则，如果你没有设置这个图像文件夹，每次从站点以外的地方插入图片，都会有如下提示：
4、站点建立好后，就可以新建html页面，保存并发布了。
按F12发布的时候，默认是IE浏览器，如果想设置为别的浏览器，可以编辑浏览器列表。如图所示：
1、点击小球球，编辑浏览器列表。
2、点击“+”按钮，添加要发布的浏览器。
3、以谷歌为例，找到谷歌的快捷方式，右键菜单中选择“属性”。
4、复制谷歌的路径，一定是以“.exe”为后缀名的路径，这是可执行文件。
5、粘贴到应用程序中，设置为“主浏览器”，确定即可。
6、回到DW中，按下F12，即可看到在谷歌中发布了网页。
怎么样？这HTML第一课大家学会了吗？
关注华信智原，乐享更多好课。
TML教程
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
在本教程中，您将学习如何使用 HTML 来创建站点。
HTML 很容易学习！相信您能很快学会它！
本教程包含了数百个 HTML 实例。
使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>HTML 文档的后缀名
.html
.htm
都可以。
实例：
<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>实例解析
什么是HTML？
标签
<标签>内容</标签>html元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落</p>web浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户
html网页结构
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
</body>
</html>html的版本：
<!DOCTYPE>声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>html5
<!DOCTYPE html>html4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">xhtml1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
绝对路径-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
其实绝对路径与相对路径的不同之处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
以下为建立路径所使用的几个特殊符号，及其所代表的意义。
“.”–代表目前所在的目录。
“..”–代表上一层目录。
“/”–代表根目录。
例：假设读者所建立的Web站点拥有如下图所示目录路径。假若要在Ref.htm文件中引用BeRef.gif文件时，其相对路径如下：
./SubDir2/BeRef.gif
上面的引用路径中，”.”代表目前的目录(Dir1)，所以”./SubDir2”代表目前目录下的SubDir2。其实，也可以省略”./”直接用这个式引用。
SubDir2/BeRef.gif
若使用绝对路径以根目录为参考点引用该文件时，引用路径如下：
/Dir1/SubDir2/BeRef.gif
如果Web站点的目录之结构如下图示:
引用BeRef.gif文件的相对路径又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件时其相对路径如下：
../SubDir2/BeRef.gif
上面的引用路径中，”..”代表上一层目录，所以，/Dir2”代表上一层目录下的Dir2子目录。若使用绝对路径引用时，则引用路径如下：
/Dir2/BeRer.gif
我们再举一个比较复杂的例子，来比较一下相对路径与绝对路径的使用。假设在读者所建立的Web站点中，拥有如下图的目录路径。
我们用以一个表格来说明在上图的情况下，某文件引用另一文件时，所应使用的相对路径与绝对路径。
上表中比较需要说明的是”../../”所代表的意义。
“..”代表上一层目录，而”../../”所代表的是上一层目录的上一层目录。所以，从上表中可以看出，如果引用的文件存在于目前目录的子目录中，或者存在于上一层目录的 另一个子目录中，运用相对路径是比较方便的。如果不是时，则利用绝对路径。从上表中，亦可以看出，当被引用的是同一个文件时，引用文件所使用的绝对路径是一样的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
