HTML 标签（上）
一、HTML 简介
1.1 网页
什么是网页？
要知道什么是网页，先要理解网站的概念。网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页就是网站中的一页，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
什么是 HTML
HTML 指的是超文本标记语言（ Hyper Text Markup Language），它是用来描述网页的一种语言。是具有一套标记标签的标记语
所谓的超文本，有两层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）。
网页的形成
网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码 —-> 浏览器解析、渲染代码 —-> 生成最后的 Web 页面
1.2 常用的浏览器
常用的浏览器
浏览器是网页显示、运行的平台。常用的浏览器有 IE 、火狐（Firefox）、谷歌（Chrome）、Safari、和 Opera 等。
查看浏览器市场份额：http://tongji.baidu.com/data/browser 谷歌浏览器占最大市场份额，强烈推荐使用。
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页显示方式并显示页面。
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 Firefox Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 Chrome/Opera Blink 谷歌、Opera 浏览器内核。其实是 WebKit 的分支。 目前国内一般浏览器都会采用 Webkit/Blink 内核，如360、UC、QQ、搜狗等浏览器。
1.3 Web 标准
Web 标准是由 W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
为什么需要 web 标准
浏览器不同，它们显示页面或者渲染效果就有些许差异。有了 web 标准就可以消除所有浏览器的显示差异。
web 标准的构成
web 标准主要包括 结构（Structure）、 表现（Presentation）、 行为（Behavior）三个方面。
- 结构：结构用于对网页元素进行整理和分类，主要用 HTML。
- 表现：表现用于设置网页元素的板式、颜色、大小等外观样式，主要用 CSS。
- 行为：行为是指网页模型的定义及交互的编写，主要用 Javascript。
web 标准提出的最佳体验方案：结构、样式、行为相分离。即应该把结构写到 HTML 文件中，表现写到 CSS 中，行为写到 JavaScript 文件中。
二、HTML 标签介绍
2.1 HTML 语法规范
基本语法概述
HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，它们称为双标签。第一个是开始标签，第二个是结束标签。
也有特殊的标签是单个的标签，例如 <br /> ，它们称为单标签。
标签关系
双标签关系可以分为包含关系和并列关系两类。
/* 包含关系 */ <head> <title></title> </head> /* 并列关系 */ <head></tead> <body></body>
2.2 HTML 基本结构标签
第一个 HTML 网页
每一个网页都会有一个基本的结构标签（也称之为骨架标签），页面内容也是在这些基本标签上书写的。HTML 页面也称为 HTML 文档。
<html> <head> <title>我的第一个页面</title> </head> <body> 从来没有真正的绝境, 只有心灵的迷途| </body> </html>
标签名 定义 说明 <html></html> HTML 标签 页面中最大的标签，我们称为根标签 <head></head> 文档的头部 网页的相关信息写在这里，必须要有 title 标签 <title></title> 文档的标题 网页的标题 <body></body> 文档的主体 元素内容，页面内容都放这里
三、开发工具 VSCode 的使用
工欲善其事必先利其器，网页的开发工具有很多，Dreamweaver、sublime、WebStorm、HBuilder、Visual Studio Code等。其中 VSCode 在前端开发中最长用。
3.1 软件的下载和基本的 html 文件创建
VSCode 下载可以去VSCode官网下载
新建文件，该文件名和和文件格式为 .html 即可
在新建的 html 文件中输入 ! 接着回车或按 Tab 键即可生成网页骨架。
<!-- 输入 ! 回车可快速生成下面骨架 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>修改网页的<title> 和 <body> 标签为自己想修改的内容然后右键选择Open In Default Browser 在默认浏览器中打开，可能你的右键没有这个选项，需要安装插件。
觉得页面代码字体不合适可以通过 command + 加号键、和 command + 减号键调整字体大小。
3.2 VSCode 插件使用
插件安装方法，在最左边的是插件功能选择，之后再搜索框搜索插件名安装，重启 VSCode 即可生效。
推荐安装的插件
- Chinese(Simplified)Language Pack for VS Code：中文（简体）语言包
- Open in Browser：右键选择在浏览器中打开 html 文件，上面演示的功能
- JS-CSS-HTML Formatter：每次保存，都会自动格式化js、css 和 html 代码
- Auto Rename Tag：自动重命名配对的 HTML/XML 标签
- CSS Peek：追踪至样式
更多好用的插件希望大家相互推荐~
3.3 VSCode 工具生成的骨架标签新增的代码
文档类型声明标签 < !DOCTYPE >：告诉浏览器使用那种 HTML 版本来显示网页
<!DOCTYPE html> 表示当前页面采用的是 HTML5 版本来显示网页。<!DOCTYPE html> 不是一个 HTML 标签，它只是一个文档类型声明标签。
lang 语言种类：用来定义当前文档显示的语言
en 定义语言为英语，zh-CN 定义语言为中文。无论哪种都可以在网页里写中英文，都能正常显示，这个属性只用于浏览器翻译功能的判断而已。
字符集：是多个字符的集合，以便计算机能够识别和存储各种文字
在<head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档使用的字符编码集。
charset 常用值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
【注意】:上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。
四、HTML 常用标签
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。 根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
4.1 标题标签<h1> - <h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即 <h1> - <h6>。
<h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减，</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后，</h5> <h6>具体效果刷新见。</h6>
h 是单词 head 的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
特点有：
加了标题的文字会变的加粗，字号也会依次变大。
一个标题独占一行。
4.2 <p> 段落标签和 <br /> 换行标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p> 我是一个段落标签 </p>p 是单词 paragraph的缩写，意为段落。
标签语义：可以把 HTML 文档分割为若干段落。
特点:
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。
<p> 我是一个段落标签 </p> <p> 我是一个换行的<br />段落标签 </p>
br 是单词 break 的缩写，意为打断、换行。
标签语义:强制换行。
特点:
- <br /> 是个单标签。
- <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
4.3 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体 或下划线或
删除线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。标签语义: 突出重要性, 比普通文字更重要。格式化标签表
4.4 <div> 和 <span> 盒子标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
<div> 我是div1,同时演示下<strong>加粗</strong> </div> <div> 我是div2,同时演示下<em>倾斜</em></div> <span> 我是span1,同时演示下<del>删除线</del></div></span> <span> 我是span2,同时演示下<ins>下划线</ins></div></span>
div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
特点：
- <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
- <span> 标签用来布局，一行上可以多个 <span>。小盒子
4.5 < img> 图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
<img src="图像URL" />img 是单词 image 的缩写，意为图像。
src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的属性：
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对>的格式，即 key=“value” 的格式，属性 = “属性值”。
路径可以分为：
- 相对路径是以引用文件所在位置为参考基础，而建立出的目录路劲，这里简单来说，图片相对于 HTML 页面的位置。相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是图片相对于 HTML 页面的位置。
- 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。例如，Windown系统上”D:\web\img\logo.gif“或MacOS系统上”/Users/ganmingpro/Desktop/log.jpg“或完整的网络地址”http://www.itcast.cn/images/logo.gif"。
4.6 <a> 超链接标签
超链接可以链接到其他想要跳转的地方
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>a 是单词 anchor 的缩写，意为:锚。
链接的分类：
- 外部链接：例如<a href=”http://www.baidu.com"> 百度 </a>。
- 内部链接：网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 <a href=”index.html”> 首页 </a>。
- 空链接：如果当时没有确定链接目标时，<a href=”#”> 首页 </a> 。
- 下载链接：如果 href 里面地址是一个文件或者压缩包，点击这个链接会下载这个文件。
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：当我们想点击链接，可以快速定位到页面中的某个位置时用锚点链接。
- 在链接文本的 href 属性中，设置属性值为#名字 的形式，如<a href=”#two”> 第2集 </a>。
- 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如<h3 id=”two”>第2集介绍</h3>。
4.7 HTML 中的注释和特殊字符
注释：如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。 HTML 中的注释以” <!– “开头，以” –> “结束。VSCode 中注释快捷键为 command + / (MacOS)。
特殊字符：在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
