学习目标
目标：能根据PSD文件，用HTML+CSS布局出符合W3C规范的网页。
学习安排
1. HTML 预热目标
能够写出基本的html页面（里面包含图片、链接、文字等网页元素标签）
1.1. 认识WEB
1.1.1. 认识网页
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
注： ① 思考： 网页是如何形成的呢?
网页如何形成
② 总结： 网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来。
1.1.2. 浏览器（显示代码）
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
可能你最熟悉的是 IE浏览器，但是。。。
1.1.2.1 浏览器内核介绍
（1）查看浏览器占有的市场份额： https://tongji.baidu.com/research/site?source=index（百度统计浏览器市场份额）
（2）浏览器内核： 英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。负责读取网页内容，整理讯息，计算网页的显示方式并显示页面.
注： ① 主流浏览器及其内核：
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。 chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 Opera blink 现在跟随chrome用blink内核。 ② 拓展阅读：
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的
1.1.3. Web标准（重点）
目标
- 记忆
- 能说出网页中 web 标准三层组成（经典面试题）
- 理解
- 能结合人来表述web标准三层
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
1.1.3.1 为什么要遵循WEB标准呢？
通过以上不同浏览器，内核不同，我们知道他们显示页面或者排版就有些许差异。
1.1.3.2 Web 标准的好处
遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点
① 让Web的发展前景更广阔
② 内容能被更广泛的设备访问
③ 更容易被搜寻引擎搜索
④ 降低网站流量费用
⑤ 使网站更易于维护
⑥ 提高页面浏览速度
1.1.3.3 Web 标准构成
（1）构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 | 备注 |
|---|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要学的是HTML。 |  |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |  |
| 行为 | 行为是指网页模型的定义及交互的编写，主要学的是 Javascript |  |
理想状态我们的源码： .html或.htm、.css、.js
1.1.4. 拓展
-
介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？
浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。 后来js引擎越来越独立，内核就倾向于只指渲染引擎。
深度阅读：五大主流浏览器内核的源起以及国内各大浏览器内核总结
2. 第一阶段 前端基础HTML
2.1. HTML 初识
学习目标
- 理解
- HTML的概念
- HTML标签的分类
- HTML标签的关系
- HTML标签的语义化
- 应用
- HTML骨架格式
- HTML编辑器基本使用
2.1.1 什么是HTML？
HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来创建网页的一种标准标记语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)；
- 标记语言是一套标记标签 (markup tag)；
- HTML 使用标记标签来描述网页；
- HTML 文档包含了HTML 标签及文本内容；
- HTML文档也叫做 web 页面。
注： ① html作用： 网页是由网页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。
② 所谓超文本，有2层含义：
【1】因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
【2】不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
举例：<img src="图片名.jpg" />门外汉眼中的效果页面
我们要做的html页面
③ html 总结：
- html 是超文本标记(标签)语言；
- 我们用html标签描述网页元素。 比如 图片标签 、文字标签、链接标签等；
- 标签有自己的语法规范，所有的html标签都是用 <> 表示的。
2.1.2. HTML骨架标签
（1）HTML 有自己的语言语法骨架格式：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
（2）HTML骨架标签总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <!DOCTYPE html> | 声明为HTML5文档 | |
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 |
| <titile></title> | 文档的标题 | 描述了网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
注： 规定：HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：<head> <title>我的第一个页面</title> </head>不推荐：
<HEAD> <TITLE>我的第一个页面</TITLE> </HEAD>
2.1.3. HTML元素标签分类
（1）标签： 在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。
- HTML 标签是由尖括号包围的关键词，比如 <html>。
（2）分类：
① 常规元素（双标签）
<标签名> 内容 </标签名> <!--比如 <body> 我是文字 </body>-->
- 该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。
- 和开始标签相比，结束标签只是在前面加了一个关闭符“/”。
- 我们以后接触的基本都是双标签
② 空元素（单标签）
<标签名 /> <!--比如 <br />-->
- 空元素 用单标签来表示， 简单点说，就是里面不需要包含内容， 只有一个开始标签不需要关闭。
2.1.4. HTML标签关系
主要针对于双标签 的相互关系，分为两种：
（1）嵌套关系
<head>
<title> </title>
</head>
（2）并列关系
<head></head>
<body></body>
注： ① 建议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。
② 举例：请问下列哪组标签关系是错误的？
<head> </head><body> </body><div> <strong></strong> </div><head> <title></head> </title><body> <div></div> </body>
2.1.5. 文档类型<!DOCTYPE>
（1）用法： doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
（2）作用： <!DOCTYPE>声明位于文档中的最前面的位置，处于<html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签，此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。<!DOCTYPE html> 就是告诉浏览器按照HTML5 规范解析页面。
注： 规定： ① HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明；
② 在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD；
③ 使用 W3C 的验证 检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档！
④ 常见的DOCTYPE声明：
- HTML 5
<!DOCTYPE html>
- HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" >"http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
2.1.6. 页面语言lang
<html lang="en"> <!--指定html 语言种类，通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明-->
HTML 的 lang 属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。
最常见的2个：
① en定义语言为英语；
② zh定义语言为中文。
注： ① 语言标签规定：
language-script-region-variant-extension-privateuse
【1】language：这部分就是ISO 639规定的代码，比如中文是zh。
【2】script：表示变体，比如简体汉字是zh-Hans，繁体汉字是zh-Hant。
【3】region：表示语言使用的地理区域，比如zh-Hans-CN就是中国大陆使用的简体中文。
【4】variant：表示方言。
【5】extension-privateus：表示扩展用途和私有标识。
一般约定，language标签全部小写，region标签全部大写，script标签只有首字母大写。不同标签之间用连字号-链接。
如：zh-Hans 简体中文、zh-Hans-CN 大陆地区使用的简体中文、zh-Hant 繁体中文、zh-Hant-CN 大陆地区使用的繁体中文
有一点需要注意，任何合法的标签都必须经过IANA的认证，已通过认证的标签可以在这个网页查到。
② 拓展阅读： 简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。比如可以：
- 根据根据lang属性来设定不同语言的css样式，或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
2.1.7. 字符集
<meta charset="UTF-8" />
（1）字符集（Character set）：是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。字符（Character）是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。
（2）字符编码（Character encoding）：也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），即在符号集合与数字系统之间建立对应关系，以便文本在计算机中存储和通过通信网络的传递。常见的例子包括将拉丁字母表编码成摩斯电码和ASCII。其中，ASCII将字母、数字和其它符号编号，并用7比特的二进制来表示这个整数。通常会额外使用一个扩充的比特，以便于以1个字节的方式存储。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
注： ① 常用的字符集编码：
ASCII编码：美国(国家)信息交换标准(代)码，一种使用7个或8个二进制位进行编码的方案，最多可以给256个字符（包括字母、数字、标点符号、控制字符及其他符号)分配(或指定）数值。
ASCII编码表
扩展ASCII编码表
- ANSI编码：是 Windows 95 及其之前的 Windows 系统中默认的字符集，ANSI并不是某一种特定的字符编码，而是在不同的系统中，ANSI表示不同的编码。为了使计算机支持更多语言，通常使用0x80~0xFF范围的2个字节来表示1个字符。比如:汉字“中”在中文操作系统中使用[0xD6, 0xD0] 这两个字节存储。不同的国家和地区制定了不同标准，在英文操作系统下，ANSI编码代表扩展ASCII编码，在简体中文系统下，ANSI 编码代表 GB2312 编码，在日文操作系统下，ANSI 编码代表 JIS 编码。
【1】GB2312编码：是ANSI编码里的一种，对ANSI编码最初始的ASCII编码进行扩充，为了满足国内在计算机中使用汉字的需要，中国国家标准总局发布了一系列的汉字字符集国家标准编码，统称为GB码，或国标码。
【2】GBK编码：即汉字内码扩展规范，K为扩展的汉语拼音中“扩”字的声母。GBK编码标准兼容GB2312。GB2312的出现，基本满足了汉字的计算机处理需要，但对于人名、古汉语等方面出现的罕用字，GB 2312不能处理，这导致了后来GBK及GB 18030汉字字符集的出现。
【3】BIG5编码：又称大五码，是繁体中文汉字字符集，港澳台等用。
【4】Unicode编码：不同 ANSI 编码之间互不兼容，当信息在国际间交流时，无法将属于两种语言的文字，存储在同一段 ANSI 编码的文本中。一个很大的缺点是，同一个编码值，在不同的编码体系里代表着不同的字。这样就容易造成混乱。导致了unicode码的诞生。Unicode编码将世界上所有的符号都纳入其中，无论是英文、日文、还是中文等，大家都使用这个编码表，就不会出现编码不匹配现象。每个符号对应一个唯一的编码，乱码问题就不存在了。
【5】UTF-8编码：为了提高Unicode的编码效率，于是就出现了UTF-8编码。UTF-8可以根据不同的符号自动选择编码的长短。比如英文字母可以只用1个字节就够了。
② 这句话是让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。这句代码非常关键， 是必须要写的代码，否则可能引起乱码的情况。
2.1.8. HTML标签的语义化
所谓标签语义化，就是指标签的含义。
（1）语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。比如：无语义 元素实例: <div> 和 <span> — 无需考虑内容；语义元素实例: <p>, <strong>, and <img> - 清楚的定义了它的内容.
注： ① 语义化的目的： 根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
【1】方便代码的阅读和维护；
【2】同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容；
【3】使用语义化标签会具有更好地搜索引擎优化 。
② 语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。
③ 遵循的原则： 先确定语义的HTML ，再选合适的CSS。所以，我们接下来学习html标签，要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签。
（2） HTML5语义元素
许多现有网站都包含以下HTML代码：<div id="nav">，<div class="header">， 或者 <div id="footer">，来指明导航链接，头部，以及尾部。
HTML5 提供了新的语义元素来明确一个Web页面的不同部分：
-
<header>元素
<header>元素描述了文档的头部区域，<header>元素主要用于定义内容的介绍展示区域，在页面中你可以使用多个<header>元素。<header>标签不能被放在<footer>、<address>或者另一个<header>元素内部。
<article>
<header>
<h1>标题简介</h1>
</header>
<p>介绍内容</p>
</article>
-
<nav>元素
<nav>标签定义导航链接的部分，<nav>元素用于定义页面的导航链接部分区域，但是，并非所有的链接都需要包含在<nav>元素中！
<nav>
<a href="简书">https://www.jianshu.com
</a> |
<a href="掘金">https://www.juejin.cn
</a> |
<a href="博客园">https://www.cnblogs.com/
</a> |
<a href="CSDN">https://www.csdn.net</a>
</nav>
-
<section>元素
<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>简书</h1>
<p>创作你的创作</p>
</section>
-
<article>元素
<article>标签定义独立的内容，如：论坛帖子、博客文章、新闻故事、评论等。
<article>
<h1>最新消息！民航局：春节期间机票可免费退改</h1>
<p>为响应国家合理有序引导群众就地过年的号召，最大限度减少人员流动，切实降低疫情传播风险，1月26日，民航局下发通知，明确自1月27日0时起，购买1月28日-3月8日春节期间机票的旅客，均可办理免费退票或至少一次改期。</p>
</article>
-
<aside>元素
<aside>标签定义页面主区域内容之外的内容（比如侧边栏），aside 标签的内容应与主区域的内容相关。
<p>推荐三大热门菜品</p>
<aside>
<h4>三大热门菜品</h4>
<p>水煮鱼</p>
<p>梅香小排</p>
<p>番茄炖牛腩</p>
</aside>
-
<figure>与<figcaption>元素
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption>标签定义<figure>元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<img src="黄山风景.jpg">
<figcaption>图一. 黄山风景</figcaption>
</figure>
-
<footer>元素
<footer> 元素描述了文档的底部区域，一个页脚通常包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等，文档中可以使用多个 <footer>元素。
<footer>Copyright © 2019-2021 <b><a href="http://www.lrkcloud.com/">别样的人儿</a></b> <b><a href="http://www.lrkcloud.com/">lrkcloud.com</a></b> All Rights Reserved.
</footer>
注： Internet Explorer 8 及更早IE版本中的问题： IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js
下载后，将以下代码放入到网页中：<!--[if lt IE 9]> <script src="html5.min.js"></script> <![endif]-->以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素
2.2 HTML常用标签
学习目标
- 理解：
- 相对路径三种形式
- 应用：
- 排版标签
- 文本格式化标签
- 图像标签
- 链接
- 相对路径，绝对路径的使用
2.2.1. HTML常用标签
2.2.1.1 排版标签
排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
(1）标题标签<h> (熟记)
单词缩写： head — 头部，标题 title — 文档标题
-
标题标签语义： 作为标题使用，并且依据重要性递减，HTML提供了6个等级的标题，即<h1>~<h6>。
其基本语法格式如下：
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
显示效果如下：
注： 小结 :
① 一行是只能放一个标题的（块级元素）；
② 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
③ 搜索引擎使用标题为您的网页的结构和内容编制索引。
（2）段落标签<p> ( 熟记)
<p> 段落内容 </p>
单词缩写： paragraph — 段落
作用语义： 把 HTML 文档分割为若干段落。在网页中要把文字有条理地显示出来，离不开段落标签，就如同文章一样，整个网页也可以分为若干个段落，而段落的标签就是<p>，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
注： ① 浏览器会自动地在段落的前后添加空行。（</p>是块级元素）
② 不要忘记结束标签<\p>，虽然大多数浏览器即使没有结束标签也能正确显示，但是忘记使用结束标签会产生意想不到的结果和错误。<p>这是一个段落 <p>这是另一个段落
（3）水平线标签<hr/>(认识)
<hr /><!--<hr/>标签是单标签-->
单词缩写：horizontal — 横线
作用语义：在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。<hr />就是创建横跨网页水平线的标签，在网页中显示默认样式的水平线。
注： ① 辨析：<hr>、<hr\ >、<hr \ >（带有空格）： <hr> 是 HTML 写法，是 XHTML1.1 的写法。<hr\ > 是 XHTML 为兼容 HTML 的写法，也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
后期XHTML参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，在逻辑上来讲等同于<hr>....</hr>（但是没有 </hr> 这种写法），这样一来保证了较少的代码量，二来保证了规范的严谨。所以，建议单标签（HTML空元素）均需要在开始标签中加上“/”进行闭合，即<hr/ >。
② 在 HTML 4.01 中，所有的布局属性（align、noshade、size、width）都已废弃。在 HTML5 中不再支持这些属性。请使用 CSS 来为
元素定义样式
（4）换行标签<br/> (熟记)
<br /><!--<br/>标签是单标签-->
单词缩写：break — 打断，换行
作用语义： 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br\ >，直接敲回车键换行不起作用。
注：
（5）<div>和<span>标签（重点）
<div> 块级元素 </div>
<span>行内元素</span>
<div>、<span>是没有语义的，是网页布局主要的2个盒子。
- <div>标签：块级元素，一行只能放一个<div>（除非通过CSS修改属性使其变为行内元素，一行才可放多个<div>）；
- <span>标签：行内元素，一行上可以放好多个<span>。标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
注： ① 排版标签总结：
标签名 定义 说明 <h1></h1>~<h6></h6>标题标签 作为标题使用，并且依据重要性递减 <p></p>段落标签 定义一个段落 <hr />水平线标签 水平线，用以分割内容 <br />换行标签 插入单个折行（换行） <div></div>div标签 块级元素，一行只能放一个<div> <span></span>span标签 行内元素，一行上可以放好多个<span> ② 提示： HTML 标签对大小写不敏感：<P> 等同于 <p>。但因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。故推荐使用小写标签。
2.2.2. 文本格式化(熟记)
2.2.2.1 文本格式化标签
<p>这是一个普通的文本<b>这是一个加粗文本</b>。</p>
<strong>加重语气（粗体）</strong>
<p>这是一个普通的文本 <i>这是斜体文本</i>。</p>
<em>强调文本（斜体）</em><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<del>删除</del> <ins>下划线</ins>
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
注： ① 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML 5 规范声明：标题应该用 <h1> - <h6>标签表示，被强调的文本应该用 <em> 标签表示，重要的文本应该用 <strong> 标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。
② <sub>【<sup>】 标签定义下【上】标文本。下【上】标文本将会显示在当前文本流中字符高度的一半为基准线的下【上】方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式，比如 H2O。【上标文本能用来添加脚注，比如 WWW[1]】。
2.2.2.2 “计算机输出”标签
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<var>变量</var>
<pre>
预格式化文本
所见即所得
</pre>
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
2.2.2.3 引文, 引用标签
The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<address>地址<address>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<cite>定义标题</cite>
<dfn>定义项目</dfn>
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
注： ① 在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。
1.3 HTML标签属性
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
常用的全局属性：
注： ① 常用引用属性值：属性值应该始终包括在引号内，一般使用双引号，个别情况比如：属性值中包含双引号时，应该使用单引号。
② 属性和属性值对大小写不敏感，但推荐使用小写字母。
1.4 图像标签img (重点)
单词缩写： image 图像
要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img />以及和他相关的属性。（它是一个单身狗）
语法如下：
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
<img src="media/img.png" />
border 后面我们会用css来做，这里童鞋们就记住这个border 单词就好了
**注意: **
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 key="value" 的格式
比如:
正常的<br />
<img src="cz.jpg" width="300" height="300" /><br />
带有边框的<br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
有提示文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
有替换文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
此处有练习题
重点掌握点：
- 请说出 图像标签那个属性是必须要写的？
- 请说出 图像标签中 alt 和 title 属性区别？
1.5 链接标签(重点)
单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。
语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。 |
注意：
- 外部链接 需要添加 http:// www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
- 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
重点掌握点：
- 请说出 链接标签那个属性是必须要写的？
- 请说出 如何新窗口打开这个一个链接网页的？
1.6 注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
简单解释：
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
语法格式：
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
注释重要性：
<img src="media/zs.png" />
pink老师 一句话说出他们:
注释是给人看的，目的是为了更好的解释这部分代码是干啥的， 程序是不执行这个代码的
团队约定
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text -->
<div>...</div>
不推荐：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
2. 路径(重点、难点)
<img src="media/dt.png" width="400" />
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
**目录文件夹： **
就是普通文件夹，里面只不过存放了我们做页面所需要的 相关素材，比如 html文件， 图片 等等。
<img src="media/g.png" />
**根目录 **
打开目录文件夹的第一层 就是 根目录
<img src="media/gg.png" />
页面中的图片会非常多， 通常我们再新建一个文件夹专门用于存放图像文件（images），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为： 相对路径和绝对路径
相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
| 路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 只需输入图像文件的名称即可，如<img src="baidu.gif" />。<img src='./media/04路径同目录.jpg'> | |
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如<img src="images/baidu.gif" />。 <img src='./media/05路径不同.jpg'/> |
| 上一级路径 | “../” | 在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推， 如<img src="../baidu.gif" />。 <img src='./media/06路径不同.jpg'/> |
**pink老师 一句话说出他们: **
相对路径，是从代码所在的这个文件出发， 去寻找我们的目标文件的，而 我们所说的 上一级 下一级 同一级 简单说，就是 图片 位于 HTML 页面的位置
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
注意：
绝对路径用的较少，我们理解下就可以了。 但是要注意，它的写法 特别是符号 \ 并不是 相对路径的 /
3. 今日总结
每一天都有一个主题 我们HTML第一天的主题就是 <认识标签> 能用常用标签，写出最简单的页面
学HTML 之前 觉得 很神秘
<img src="media/z.png" />
等你学完之后忽然发现
<img src="media/rh.jpg" width="615" />
总结今天的思路贯穿线：
<img src="media/a.png" width="1000" />
4. 综合案例： 圣诞
5. @拓展阅读
5.1 锚点定位 （难点）
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系） 我也有一个姓毕的姥爷..
<a href="#two">
<img src="C:/Users/itcast/Desktop/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80HTML%E7%AC%AC%E4%B8%80%E5%A4%A9/%E7%AC%94%E8%AE%B0/media/03a%E7%9B%AE%E6%A0%87.jpg">
快速记忆法：
好比找个人办事， 首先找到他，然后拉关系，最后看效果。
5.2 base 标签
语法：
<base target="_blank" />
<img src="C:/Users/itcast/Desktop/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80HTML%E7%AC%AC%E4%B8%80%E5%A4%A9/%E7%AC%94%E8%AE%B0/media/base.png" />
**总结： **
- base 可以设置整体链接的打开状态
- base 写到 <head> </head> 之间
- 把所有的连接 都默认添加 target="_blank"
pink老师 一句话说出他们:
全体链接~ 到 ~ 全体集合 所有链接 以新窗口打开页面 ~ 是
5.3 预格式化文本pre标签
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
pink老师 一句话说出他们:
所谓的预格式化文本就是 ，按照我们预先写好的文字格式来显示页面， 保留空格和换行等。
有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制。
5.4 特殊字符 （理解）
一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码。
<img src="media/zifu.png" />
虽然有很多，但是我们平时用的比较较少， 大家重点记住 空格 大于号 小于号 就可以了，剩下的回来查阅。
总结：
- 是以运算符
&开头,以分号运算符;结尾。 - 他们不是标签，而是符号。
- HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
团队约定
推荐：
<a href="#">more >></a>
不推荐：
<a href="#">more >> </a>
5.5 html5发展之路
<img src="media/html5.png" width="600"/>
5.6 什么是XHTML
XHTML 是更严格更纯净的 HTML 代码。
- XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
- XHTML 的目标是取代 HTML。
- XHTML 与 HTML 4.01 几乎是相同的。
- XHTML 是更严格更纯净的 HTML 版本。
- XHTML 是作为一种 XML 应用被重新定义的 HTML。
- XHTML 是一个 W3C 标准。
5.7 HTML和 XHTML之间有什么区别?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
- XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
6. @深入阅读
7. 预习内容
表格标签
-
能够通过表格标签能够写出一个简版表格数据展示
例如：
<img src="media/qq.png" />
可以把你今天学习的内容放在表格内，再次作为总结
