本次学习目标

掌握HTML的基本知识，能够写出简单的页面。

1. 开发工具

1.浏览器（chrome(谷歌浏览器)，IE浏览器，火狐浏览器，QQ浏览器等等)。
2.代码编辑器（sublime,HBuilder等）,网上资源非常多，请自行百度。
3.photoshop（进行一些切图等的操作）

2. Web标准（重点）

由于不同的浏览器解析出来的内容效果不一样，所以要制定统一的标准使不同的浏览器能展示统一的内容。

3. Web标准的好处与构成

好处：

①使网站更易于维护
②提高页面浏览速度
③内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）。
④更容易被搜索引擎搜索
⑤内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）。
⑥…
⑦…

构成：

Web标准不是某一个标准，而是W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要学的是HTML。
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要学的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要学的是Javascript。

形象化：人的骨骼相当于结构，衣服鞋子相当于表现，行走跳跃就是行为。

结构：使内容更清晰，更有逻辑性
表现：用于修饰内容的样式
行为：内容的交互及操作

4.HTML初识

先学习HTML，后学习CSS

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”。是用来描述网页的一种语言。

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接。

<h1>我是一个大标题<h1>

新建一个文本文档，敲入以上代码，保存时将文件名改为“HTML练习”，扩展名改为html，打开后效果如图：

此时细心体会：“文本”、“标签”、“语言”

注意HTML不是一种编程语言，而是一种标记语言。

5.HTML骨架格式

生活中我们写的书信有固定的格式，同样HTML也有自己的语言语法骨架格式：

<HTML><head><title></title><head><body></body>
<HTML>

1.HTML标签：
使用所有HTML中标签的一个根节点。最大的标签。

2.head标签：文档的头部
文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签：文档的标题
作用：让页面拥有一个属于自己的标题。

之前的代码练习在网页上显示如上图，页面的标题为“HTML练习”，如果我把代码修改一下：

<html><head><title>我是标题</title></head><body><h1>我是一个大标题<h1><body>
</html>

运行结果如下图：

很清晰的看到页面的标题改为了“我是标题”。

4.body标签：文档的主体，页面的内容。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

6.HTML标签分类

在HTML页面中，带有“<>”符号的元素被称为HTML标签，如上面提到的、、都是HTML骨架结构标签。所谓标签就是放在“<>”标签符中表示某个功能的编码命令，也称为HTML标签或HTML元素。

1.双标签

<标签名>内容</标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签”，“</标签名>”表示该标签的作用结束，一般称为“结束标签”，和开始标签相比，结束标签只是在前面加了一个关闭符“/”：

比如<body>CSDN前端教学</body>

2.单标签

<标签名/>

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能地标签：

比如<br/>

7.HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系:

<head><title></tilte>
</head>

2.并列关系

<head></head>
<body></body>

建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位，如果是并列关系，要上下对齐。

小技巧：在代码编辑器sublime页面中输入以下2个代码：
1.html：5
2.！
然后按tab键即可自动生成HTML骨架。

8.文档类型<!DOCTYPE>

<!DOCTYPE html>

这句代码是告诉我们使用哪个html版本？我们使用的是html5的版本。html有很多版本，我们应该告诉用户和浏览器我们使用的版本号。

"<!DOCTYPE>"标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，必须在开头处使用“<!DOCTYPE>”标签为所有的html文档指定html版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意：一些老网站可能用的还是老版本的文档类型，比如XHTML之类的，但我们现在所学的是HTML5，它的兼容性很好。

9.字符集

<meta charest="UTF-8">

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312：

gb2312：简单中文，包括6763个汉字

BlG5：繁体中文

GBK：包含全部中文字符

UTF-8则包含全世界所有国家需要用到的字符

建议:以后全部使用UTF-8字符集

引用位置：

<!DOCTYPE html>
<html>
<head><meta charest="UTF-8"><title></title>
</head>
<body>
</body>
</html>

10.HTML标签的语义化

就是指标签的含义。

为什么要有语义化标签：
1.方便代码的阅读和维护
2.同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中地内容
3.使用语义化标签会具有更好地搜索引擎优化

核心：合适地地方给一个最为合理的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。一眼望去，就知道哪个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML，再选合适的CSS。

11.HTML常用的标签

首先HTML和CSS是两种完全不同的语言，我们先学的是结构，就先写HTML标签，认识标签就可以了，CSS到后面在学。

首先我们先做一个小练习：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><h2>忆江南(1) 唐.白居易</h2><p> 江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p><h4> 作者介绍</h4><p> 白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p><h4>注释</h4> (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、<p>《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p><h4>品评</h4><p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body></html>

排版标签

排版标签主要和CSS搭配使用，显示网页结构，是网页布局最常用的标签。

标题标签（掌握）

head:头部，标题。而title是文档标题。
为了使网页更具语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即:

<h1>、<h2>、<h2>、<h3>、<h4>、<h5>

标题标签的含义：作为标题使用，并且依据重要性递减。

其基本语法格式如下：

<hn>标题文本</hn>

注意：h1标签因为重要，尽量少用，一般h1都是给logo使用或者页面中最重要标题信息。

下面做一个练习，敲入以下代码：

<html><head><title>标题练习</title></head><body><h1>我是一个大标题<h1><h2>我是一个大标题<h2><h3>我是一个大标题<h3><h4>我是一个大标题<h4><h5>我是一个大标题<h5><body>
</html>

然后再浏览器运行，观察效果，理解标题。

段落标签（掌握）

paragraph：段落。
在网页中要把文字有条理地显示出来，离不开段落标签。

<p>文本内容</p>

段落标签是HTML文档中最常见的标签，默认情况下，文本会在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签（理解）

horizontal：横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来实现，＜hr/>就是创建水平线地标签，其基本语法格式如下：

<hr/>是单标签

在网页中显示的效果就如同上面一条线。

换行标签（掌握）

break：换行。

在HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要瀚航标签：

<br/>

记住：word中的回车键是不会换行的。

div span标签（重中之重）

div span 是没有语义的，是网页布局主要的2个盒子

div就是division的缩写：分割，分区的意思，用div来组合网页。

span：跨度，范围，跨距。

语法格式为：

<div>这是头部</div>
<span>春夏秋冬</span>

下面来做一个练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div>我是布局</div><div>我是布局</div><span>布局用</span><span>布局用</span>
</body>
</html>

运行上面的代码，观察效果，理解。

span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
形象一点讲：div是盒子，盒子里装的是内容。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<b></b>或<strong></strong>文字以粗体方式显示
<i></i>或<em></em>文字以斜体方式显示
<s></s>或<del></del>文字以加删除线方式显示
<u></u>或<ins></ins>文字以加下划线方式显示

b i s u 只是使用没有强调的意思 strong em del ins 语义更强烈

下面做一个综合练习：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><h1> 40.6摄氏度：上海创出140年气象史上高温新纪录</h1>2013年07月27日 <br>10:58:26 来源： <strong>新华网</strong>
<hr><p> <em>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</em></p><p><ins>上海已经连续２天发出了最高等级的红色高温警报。</ins>上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p><p>在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站<font color="red" size="5">１４０年来仅出现了５次记录</font>，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p><p> <del>由于气温实在太高，上 海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</del></p></body>
</html>

观察运行效果，理解所学知识。

图像标签img（重点）

image：图像。

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就就需要使用图像标签以及和其他相关的属性，基本语法如下：

<img src="图片的路径URL"/>

该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必要属性。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

下面做一下练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签练习</title>
</head>
<body>
1.基本图像插入方式<br/>
<img src="1.jpg"/><br/>2.带有alt的图像<br/>
<img src="1.jpg" alt="小狗"/><br/>3.带有title的图像<br/>
<img src="1.jpg" title="小狗的图片"/><br/>4.带有宽度的图像<br/>
<img src="1.jpg" title="小狗的图片"/><br/>5.带有边框的图像<br/>
<img src="1.jpg" title="小狗的图片" width="300" border="10"/><br/></body>
</html>

从网上下载一个小狗图片，将文件名改为“1”，将图片与你的文档放在同一个目录下。运行观察结果，理解图片标签。

链接标签（重点）

anchor：锚，抛锚。

在HTML中创建超链接非常简单，只需要标签环绕需要被链接的对象即可，基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接功能。Hypertext Reference的缩写，意思是超文本引用target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
注意：
1.外部链接需要写成类似这样的：http://www.baidu.com
2.内部链接直接链接内部页面名称即可比如：

<a href="index.html">首页</a>

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

下面做一个练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接练习</title>
</head>
<body>
<h1>百度链接:</h1>
<a href:"http://www.baidu.com">百度一下，你就知道</a>
<a href="标题练习.html">标题练习</a>
<a href="#">神秘链接</a>
</body>
</html>

锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1.使用"a href="#id名"链接文本/a"创建链接文本。
2.使用相应的id名标注跳转目标的位置。
例子：

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><title>锚点链接练习</title>
</head>
<body><a href="#x">跳转到神秘链接</a><br/><p>狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前。被称为“人类最忠实的朋友”，是饲养率最高的宠物，其寿命大约在12~18年 [1]  。在中国文化中，狗属于十二生肖之一，在十二生肖中的第11位。</p><hr/><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><p>狗是由狼驯化而来的。早在狩猎采集时代，人们就已驯养狗为狩猎时的助手。<br/>因此，狗算是人类最早驯养的家畜。河北武安磁山、河南新郑裴李岗、浙江余姚河姆渡等遗址，都发现了狗骨骼，足证其驯养历史之久远。 山东胶县三里河出土的狗形鬶，造型生动逼真，使我们得见新石器时代家犬的形态特征。陕西西安半坡遗址出土的狗骨，头骨较小，额骨突出，肉裂齿小，下颌骨水平边缘弯曲，与华北狼有很大区别，说明人类驯养狗的历史确实很早。</p><h3 id="x">神秘链接</h3><hr/>
</body>
</html>

运行并观察结果，理解锚点链接。

base标签

base可以设置整体链接的打开状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><base  target="_blank" /><!-- 把所有的连接 都默认添加 target="_blank" -->
</head>
<body>链接:<a href="http://www.baidu.com">百度</a><a href="http://www.sina.com">新浪</a><a href="http://www.souhu.com">搜狐</a><a href="http://www.163.com" >网易</a>
</body>
</html>

运行并观察结果。

特殊字符标签

特殊字符	描述	字符的代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
°	摄氏度	&deg；
±	正负号	&plusmn；
×	乘号	&times；
÷	除号	&divide；
2	平方2	&sup2；
3	平方3	&sup3；

练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>&lt;p&gt;&lt;/p&gt; 是一个段落标签<p>&nbsp;&nbsp;&nbsp;&nbsp;我是文字</p>&yen;
<!-- 不能说的秘密 -->.<!-- header star -->.<!-- 快捷键 -->
</body>
</html>

注释标签

在HTML中还有一种特殊的标签–注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面的注释文字，就需要注释标签。其标准语法格式如下：

<!--注释语句-->

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

建议：良好的注释习惯可以方便自己，也方便别人，在工作中跟同时合作效率更高。

12.路径（重、难点）

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置

路径可以分为：相对路径和绝对路径

相对路径

1.图像文件和HTML文件位于同一文件夹，只需要输入图像文件的名称即可，如：

<img src="1.png"/>

2.图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如：

<img src="img/img01/1.png"/>

3.图像文件位于HTML文件的上一级文件夹，在文件夹之前加入“…/”，如果是上两级，则需要使用“…/…/”,如：

<img src="../1.png"/>

绝对路径

“D:\web\img\1.png”,或完整的网络地址，如：http://www.baidu.com。

13.列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序

无序列表ul（重点）

无序列表的各个表项之间没有顺序级别之分，是并列的，其基本语法格式如下：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>