1.HTML页面结构、基础标签
一、HTML介绍
1.1 什么是HTML？
我们可以在浏览器里打开任意一个网站页面，它就是一个HTML，当然你所见到的网页都离不开HTML，作为专业的前端工程师，HTML是必学的技能之一，那么我先来认识一下它。HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
- 语 言: 人们用于交流的工具。
- 超文本：就是指页面内可以包含图片、链接，甚至音乐、视频等非文字元素；
- 标 记：一种标记符，可以告诉浏览器如何显示其中的内容；
- 比如：<b>我很粗</b> ，<b></b>就是一种标记符
注意事项:
- HTML 不是一种编程语言（因为HTML中没有变量，流程控制等），它是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)，例如：<b>我很粗</b><i>我很歪</i>
- HTML 使用标记标签来描述网页内容
1.1.1 为什么要使用HTML？
因为HTML是一种标记语言，主要用于描述网页内容，告诉浏览器跟据我们的标记符的类型，显示相应的内容。HTML就像是我们的饭碗一样，如果吃饭这个只少也要算个标配吧！当然，对于我们的网站，HTML就是整个网站的骨架，如果不用HTML，我们很难想像网站长什么样子。所以这些基础知识我们必需撑握。
1.1.2 HTML在哪里使用？
HTML使用的地方非常的广泛，基于浏览器端所有能看到的网站都用到它。
1.2 动态网页与静态网页
静态网页，html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。
注意：不要将动态网页和页面内容是否有动画效果混为一谈，比如网页中幻灯片效果，文字滚动效果，如果内容本身没有变化，那么也属于静态网页。
1.3 HTML，XHTML的区别
- HTML：超文本标记语言
- XHTML：XML+超文本标记语言（结构比较严谨的HTML）
- XML：是一种格式非常规范，严谨的一门语言（非常简单）
1.4 为什么学HTML5
1、强化了Web网页表现能力。除了可以绘制图形外，还可以直接在网页中播放视频和音频（HTML4中需要flash插件，才能播放视频和音频，关键是flash容易崩溃，而且漏洞很多）；
2、支持（客户端 PC）本地数据库等Web应用的能力；
3、HTML5容错性更很高（例如：标签未正常的关闭、属性的引号问题等），HTML5是向上兼容的，这保证使用HTML5也可以在低版本浏览器中正常显示。
4、HTML5是近十年来Web标准发展而生的产物。 和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台。
5、HTML5对移动端兼容性非常好，所以手机网站开发必备。
1.5 HTML的开发工具
可以用来写HTML编辑器有很多，甚至可以使用记事本来编辑，那作为专业的WEB前端工程师应该选用哪一款呢？我们首来看一下常见的编辑器:
- Dreamwear：Adobe的一款可视化开发网页的软件
- HBuilder：强力的前端开发工具
- EditPLUS：简单便捷的轻型编辑软件
- Sublime：提示功能比较强大(轻，小，需要安装插件)
- Vi / Vim ：Linux 系统上的最著名的文本/代码编辑器
- Vscode :
- Webstorm:
- 记事本
二、HTML入门（重点）
1、 HTML标签格式
（1）什么是 HTML 标签？
HTML标记标签也称为HTML标签(HTML tag)，由开始标签和结束标签组成，用于表现结构化的内容，将内容构造成为一个完整的网页。
- 开始标签是被尖括号包围的元素名。
- 结束标签是被尖括号包围的斜杠和元素名。
<元素名>内容< /元素名>
例如：<h1>文本内容</h1> <b></b>
（2）单标签与双标签
通常情况下，在我们的HTML中，标签分为两大类：
1） 双标签 双标签是指由开始标签和结束标签组成，例如：<b>内容</b>
2） 单标签 单标签是指没有结束标签的标签，由一个标签构成即为开始也是结束，例如：<hr /> <br />
（3）标签属性
定义：属性主要用于设置标签的更多细节信息，比如字体标签<font>，如果需要设置字体大小，我们就需要使用size属性。
基本语法：
<标签名 属性名="属性值" 属性名="属性值" ....>
<!-- 设置字体的标签 -->
<font size="7">大不大</font>
3、HTML的基本结构
<!DOCTYPE html> <html> <head></head> <body></body> </html>
- DOCTYPE: 文档声明
- html: 标签告知浏览器其自身是一个 HTML 文档
- head: 标签用于定义文档的头部（文档的描述信息）
- body: 标签用于定义文档的主体（文档的主体内容）
4、HTML基本结构的认识
<!-- 文档声明：位于文档的首行，告知浏览器文档使用哪种 HTML 或 XHTML 规范。让浏览器通过正确的方式解析我们的网页，使网页能正常显示。 -->
lang:表示规则元素内容语言（了解）
属性的值：
en:表示英文
zh:表示简体中文
<!DOCTYPE html> <!-- html标签：告诉页面这是一个HTML文档--> <html lang="en"> <!-- head标签:就是一个网页的头,头部中的内容一般存放描述文档的信息。--> <head> <!--meta元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词等。 声明文件的编码是UTF-8的编码，告诉浏览器，你用什么编码去解析这个文件 UTF-8 : 国际通用码 GBK/GB2312 : 中文编码 这里的编码必需要和文件的编码完全一致--> <meta charset="UTF-8" /> <!-- viewport：表示视区 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 兼容IE浏览器 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 提供给搜索引擎的关键字信息 --> <meta name="keywords" content="Java、web前端" /> <meta name="description" content="源代码" /> <!--title : 网页的标题，会显示在标题栏--> <title>你看得见我嘛？</title> </head> <!-- body标签:就是一个身体 一般来说:body里面的内容要显示出来--> <body> 我是源码 </body> </html>
5、HTML的注释
- 语法：<!-- 注释内容 -->
- 含义：注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的理解。
- 注意：注释不能嵌套
6、HTML的编码问题
常见的编码格式有：
- UTF-8 国际通用编码字符集，UNICODE的灵活版
- GBK/GB2312 中文编码字符集
- BIG5 中文繁体字符集
- iso8859-1 西方欧洲语言字符集，通常叫做Latin-1
- UNICODE 大字符集，包含了地球上所有语言的编码
- HTML的编码声明为： <meta charset="utf-8"/>
文件编码是指HTML文件保存到硬盘中的编码格式，一般在保存的时候设置，常见的开发工具都可在编辑的时候设置。
7、HTML的规范
- 1) HTML标签是由尖括号包围的标签，比如 <html>
- 2) HTML标签通常是成对出现的，比如<b>和</b>
- 3) HTML不区别大小写(我们建议使用小写)
- 4) HTML 可以嵌套，但是不允许交叉嵌套
三、HTML基本标签
1、基础标签
- h1标签: <h1> .....</h1> 定义最小的标题
- p 标签: <p> ....</p> 标签定义段落
- br标签: <br/> 可插入一个简单的换行符
- hr标签: <hr/> 创建一条水平线
2、文本标签
- b标签和 strong标签: <b>和<strong> 文本加粗(HTML5中建议使用 <strong>)
- i标签和em标签： <i> <em> 斜体显示(HTML5中建议使用 <em>)
- small标签: <small> 标签呈现小号字体效果
- big标签： <big> 标签呈现大号字体效果
- pre标签：<pre> 定义预格式化的文本
- u标签：<u> 标签可定义下划线文本
- del标签：<del> 定义文档中已被删除的文本
- sub标签：<sub> 定义文档中的下标文本
- sup标签：<sup> 定义文档中的上标文本
3、布局标签
- span标签：<span> 标签被用来组合文档中的行内元素
- div标签：<div> 标签可以把文档分割为独立的、不同的部分
块标签与行内标签的区别：
- 块标签独占一行，宽度默认为100%；
- 行内标签多个并排一行，宽高为内容大小。
4、特殊符号
- 空格 (小空格)
-   空格 (大空格，占一个中文位置)
- > 大于 >
- < 小于 <
- & &
- © ?
- ¥ ￥
5、基本标签总结
- i/em 斜体(强调) ,HTML5建议使用em 双标签
- b/strong 加粗(重要) ,HTML5建议使用strong 双标签
- u 下划线 双标签
- del 删除线 双标签
- p 段落(默认情况下和上下的内容之间有段间距) 双标签
- br 换行 单标签
- h(n) 标题 (h1-h6 从大到小的 换行 加粗，上下内容之间有距离)，一个网页里面，建议只出现一个h1与h2 双标签
- hr 水平线 单标签
- pre 预格式文本，原样显示内容（标签会解析） 双标签
- sub 下标 双标签
- sup 上标 双标签
- span 无格式行内标签 双标签
- div 布局块 双标签
四、常用标签-超链接&多媒体&列表
1、HTML5语义标签（了解）
1.1 结构化标签
- <header>：定义文档的头部区域
- <nav>：定义导航链接的部分
- <main> ：定义页面主要内容,它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单
- <section>：定义文档中的节（section、区段）
- <article>：定义页面独立的内容区域
- <aside>：定义页面的侧边栏内容
- <footer>：定义 section 或 document 的页脚
- div(无语义) < section(内容分区) < article(独立的内容区域，可供外部使用)
2、超连接 a （重点）
2.1、a标签定义和用法
<a> 标签可定义超连接。有两种用法：
- 通过使用 href 属性，创建指向另外一个文档的链接（或超链接，跳转到其它网页）
- 通过使用 name 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接，在自身网页中跳转）
基本语法：<a 属性="属性值">~标签内容~</a>
注意事项：
- <a> 标签是一个行内标签，同时也是一个双标签。
- <a> 元素最重要的属性是 href 属性，它指定链接的目标。
可选的属性：
| target |
_blank _self _parent _top framename |
在何处打开目标 URL | TF |
| type | MIME 编码类型 | 规定目标 URL 的 MIME 类型 | STF |
| 属性 | 值 | 描述 | DTD |
| charset | 字符集名称 | 规定目标 URL 的字符编码 | STF |
| coords | 坐标 | 规定连接的坐标 | STF |
| href | URL | 链接的目标 URL | STF |
| hreflang | ISO 语言代码 | 规定目标 URL 的基准语言 | STF |
| name | section_name | 规定锚的名称 | STF |
| rel | text | 规定当前文档与目标 URL 之间的关系 | STF |
| rev | text | 规定目标 URL 与当前文档之间的关系 | STF |
| shape |
default rect circle polydefault rect circle polyv |
规定链接的形状 | STF |
示例：
<!-- href 属性 --> <a href="http:// www.itsource.cn">源码时代教育</a> <!-- name属性 --> <a href="#tag1" name="tag0">源码时代教育</a> <div style="height: 1000px;"></div> <a name="tag1">tag1</a> <a href="#tag0" name="tag2">tag2</a>
3、相对路径与绝对路径（重点）
3.1 绝对路径
- 绝对路径以协议（http://、https://）或者以“/”作为前缀：http协议(一般网络路径)：<a href="http://www.itsource.cn">源码时代官网</a>
- 基于网站根路径（/）： <a href="/news.html">新闻中心</a>
3.2 相对路径
定义：以文件本身所在的目录为参照路径进行定位。
- 当前页面所在同级目录路径：<a href="02.html">02.html</a>
- 当前页面所在下级路径：<a href="./03/03.html">03.html</a>
- ./ 当前目录，可以省略不写。访问下级目录要写目录名。
- ../ 回到上一层目录 ：<a href="../helloworld.html">hello</a>
- 目录名/ 当前目录的下级目录
4、图片img标签（重点）
4.1、img标签
基本语法：<img src="图片的路径" alt="图片说明文字" />
属性：
| 属性 | 值 | 描述 |
| src | URL | 规定显示图像的 URL |
| alt | text | 规定图像的替代文本，当图片加载失败时显示 |
例：
<img src="./img/118.gif" alt="努力工作！"/>
可选的属性：
| 属性 | 值 | 描述 |
| height | pixels（%） | 定义图像的高度 |
| width | pixels（%） | 设置图像的宽度 |
| title | 无 | 图片的说明(一般鼠标放到上面会显示相应的文字) |
例：
<img src="img/gril.jpg" width="300" title="一个美丽的女孩" />
注意事项：
- 1. img是一个行内标签，并且是一个单标签（自关闭）
- 2. 多种图片格式都认识（jpg,bmp,png,gif）
- 3. 当我们修改图片的宽度时，高度会等比例进行缩放(反之亦然)
5、多媒体
5.1、audio标签
基本语法：<audio src="音乐文件路径url" controls="controls"> </audio>
属性解释：
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | muted | 规定视频输出应该被静音 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性 |
| src | url | 要播放的音频的 URL |
示例：
<audio src="img/beyond.mp3" controls="controls"> 您的浏览器不支持audio标签 </audio>
5.2、video标签
基本语法：<video src="视频文件路径" controls="controls">......</video>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | muted | 规定视频的音频输出应该被静音 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度 |
示例：
<video src="img/movie.ogg" controls="controls" poster="./img/aa.bmp" width="400"> 您的浏览器不支持video标签 </video>
5.3、source标签（了解）
定义：source标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
基本语法：
<source src="资源地址url" type="资源类型"> 示例: 1.选择合适的音频播放： <audio controls="controls"> <source src="img/beyond.mp3" type="audio/mp3"> <source src="img/1.mp4" type="audio/mp4"> 您的浏览器不支持audio标签 </audio>
示例(选择适合的视频):
<video controls="controls"> <source src="img/1.mp4" type="video/mp4"> <source src="img/movie.ogg" type="video/ogg"> 您的浏览器不支持audio标签 </video>
注意事项:
src的值为资源地址，type的值为资源的类型。可以指定多个资源，浏览器将自动选择支持的资源进行播放。
常用类型：
用于视频：
video/ogg
video/mp4
video/webm
用于音频：
audio/ogg
audio/mpeg
6、列表标签ul,ol,dl（重点）
HTML中的列表共有3种形式：无序列表、有序列表以及定义列表。
6.1、无序列表ul
<!--基本语法:--> <ul > <li>文本内容</li> </ul>
结构说明:
- 列表标签：ul ,li ->块标签 ，并且必须组合出现
- ul代表整个列表， li代表列表中的每个成员。
- ul标签：用于定义列表的位置（外壳）
- li标签：用于定义列表的每一项，列表可以有多项（多个li标签对）
注意事项:
- 1. <ul>标签对里面添加<li>标签，<ul> <li> 是组合使用的，li代表列表里面的每一个列表项。
- 2. li标签对里面可以添加任何内容（可以嵌套标签）
- 3. 无序列表通常会自动生成一个小圆点效果，在实际应用中通常要去除。
（使用行内样式去掉li前面小圆点<ul style=”list-style:none”>***</ul>）
6.2、有序列表ol
定义：通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
<!--基本语法：--> <ol> <li>小苹果</li> </ol>
结构说明:
- 列表标签：ol,li ->块标签 ，并且必须组合出现
- ol代表整个列表， li代表列表中的每个成员
注意事项:
<ol> <li> 是组合使用的，li代表列表里面的每一个列表项。
有序列表ol上的type属性有几个值：
- 1. A 代表列表项前面显示的是大写字母；
- 2. a表示显示小写字母；
- 3. I代表用大写罗马数字显示；
- 4. i代表用小写罗马数字显示。
- 5. 默认情况下显示数字；
6.3、定义列表dl
定义: <dl> 标签定义了定义列表，常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。
<!--基本语法：--> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
结构说明:
- dl:标记定义了一个定义列表
- dt:标签定义了 定义列表中的项目（即术语部分）
- dd:标签定义了 定义列表中的项目部分的解释
- <dt>和<dd>都必须放在<dl></dl>标志对之间
注意事项:
- <dl> <dt> <dd> 通常是配合使用的，不能单独使用。
- 列表标签一般需要配合CSS一起完成某些效果。
7、课程总结
1、重点
1.img标签和多媒体标签基本语法及使用
2.ul标签语法及使用
3.超连接
4.相对路径与绝对路径
2、难点
1.img标签的注意事项和必要属性
2.正确的使用列表标签的结构
3.相对路径
3、如何掌握？
1. 理解重点标签的基本结构及注意事项。
2. 有针对性的进行代码的书写。
3. 此技能靠使用升级，使用次数越多等级越高
4、排错技巧
1. 相关英文单词是否书写正确
2. 必选属性是否书写正确
3. 固定结构是否正确
4. 学会使用控制台找问题所在
8、面试题
1. img标签上title与alt属性有何不同?
2. 说说HTML5中新增了那几个常用的标签？
3. 什么是标签语义化?