1 前端需要学习的内容
- 根据W3C标准，一个网页主要由三部分组成：结构（HTML）、表现（CSS）和行为（JavaScript）。
- 结构：HTML用来描述页面的结构。
- 表现：CSS用于控制页面中元素的样式。
- 行为：JavaScript用于响应用户的操作。
2 HTML简介
2.1 概念
- HTML，超文本标记语言。
- 它负责网页三要素之中的结构。
- HTML使用标签的形式来识别网页中的不同组成部分。
- 所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
2.2 HTML的标准结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
2.3 标签
- HTML中的标记指的就是标签。
- HTML使用标记标签来描述网页。
- 语法：
<标签名>标签内容</标签名> 或 <标签名/>
2.4 元素
- 将一个完整的标签称为元素。
- 我们可以将元素和标签认为是一个同义词。
- 比如：
<!-- h1我们就称为一个元素 -->
<h1>一级标题</h1>
<!-- p是一个元素，em是p的子元素，p是em的父元素 --> <p>我是一个<em>段落</em>标签</p>
<!-- body是一个元素，body是p和em的祖先元素，p和em是body的后代元素 --> <body> <p>我是一个<em>段落</em>标签</p> </body>
2.5 注释
- HTML注释中的内容不会显示到网页中。
- 格式：
<!-- 注释内容 -->
- 合理的使用注释可以帮助开发人员理解网页的代码。
- 注释不能嵌套。
2.6 属性
2.6.1 概念
- 可以为HTML标签设置属性。
- 通过属性为HTML元素提供附加信息。
- 属性需要设置在开始标签或自结束标签中。
- 属性总是以名称/值对的形式出现。
- 格式：
name = "value"
- 有些属性可以是任意值，有些则必须是指定值。
<h1 title="我是一个标题">标题</h1> <img src="" alt=""/>
2.6.2 常见属性
- id属性：id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
- class属性：class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class属性。
- title属性：title属性用来指定标签的标题，指定title后，鼠标移入到元素上方的时候，会出现提示文字。
3 HTML的发展
3.1 HTML的发展历史
- 1993年6月，HTML第一个版本发布。
- 1995年11月，HTML2.0。
- 1997年1月，HTML3.2（W3C推荐）。
- 1999年12月，HTML4.01（W3C推荐）。
- 2000年底，XHTML1.0（W3C推荐）。
- 2014年10月，HTML5（W3C推荐）。
3.2 文档声明
- HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？
- 为了让浏览器知道我们使用的HTML版本，我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。
3.2.1 HTML4
过渡版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
严格版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
3.2.2 XHTML1.0
过渡版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3.2.3 HTML5
- 我们会发现HTML4.01和XHTML的文档声明十分的麻烦。不过不用担心，我们使用的HTML5的文档声明，使用简单。
<!DOCTYPE html>
3.2.4 怪异模式
- 为了兼容一些旧的页面，浏览器中设置了两种解析模式：标准模式和怪异模式。
- 怪异模式解析网页的时候会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
- 避免怪异模式出现的最好方式就是在页面中编写正确的文档声明。
4 编码问题
4.1 编码问题的由来
- 在计算机的内部，文件都是以二进制编码保存的。
- 所谓的二进制编码指的就是0和1，也就是我们的所有内容都需要转换为0或1。
- 中国这两个字在计算机底层保存的可能要转换为10100101这种二进制码，这一过程称为编码。
- 计算机在读取文件的时候需要将10100101在转换为中国给我们显示，这一过程称为解码。
4.2 字符集
- 这样带来一个问题，中国到底是10100101还是01011010到底是由谁来决定。
- 我们需要一个东西称为字符集，字符集规定了如何将文本转换为二进制编码。
- 常见的字符集：ASCII、ISO8859-1、GBK、GB2312、UTF-8。
4.3 乱码
- 如果我们保存文件的时候使用的是UTF-8编码，而浏览器读取页面的时候使用的编码时GBK，这样会导致页面中的内容不能正常显示，这样的现象我们称为乱码。
- 所以我们只需要统一编码和解码的字符集就可以解决乱码这一问题。
- 为了页面具有更好的使用性，我们一般使用UTF-8。
4.4 解决
- 保存文件的编码我们直接通过编辑器即可完成指定，接下来就需要告诉浏览器使用什么字符集去解析问题。
- 在HTML5中只需要使用meta白哦钱即可完成这个任务：
<meta charset="UTF-8"/>
- <meta/>标签作用：
- ①<meta>标签可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
- ②<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了和文档相关联的名称/值对。
- <meta/>标签的用法：
- 设置页面的字符集：
<meta charset="UTF-8">
- 设置网页的描述：
<meta name="description" content="网页的描述"/>
- 设置网页的关键字：
<meta name="keywords" content="不告诉你什么关键字，比如Java、HTML"/>
- 设置请求的重定向：
<!-- http-equiv="refresh"表示请求重定向，content="5;URL=https://www.baidu.com"表示5秒后将重定向到百度页面 --> <meta http-equiv="refresh" content="5;URL=https://www.baidu.com"/>
5 常见标签
5.1 <html>标签
- 作用：<html>标签用于告诉浏览器这个文档中包含的信息是HTML编写的。
- 用法：
- ①所有的网页的内容都需要编写在HTML标签中，一个页面中HTML标签只能有一个。
- ②HTML标签中有两个子标签<head>和<body>。
5.2 <head>标签
- 作用：<head>标签用来表示网页的元数据，<head>中包含了浏览器和搜索引擎使用的其他不可见信息。
- 用法：<head>标签作为<html>标签的子元素出现，一个网页中只能有一个<head>标签。
5.3 <title>标签
- 作用：
- ①<title>标签表示网页的标题，一般会在网页的标题栏显示。
- ②<title>标签中的文字，是页面优化的最重要因素。在搜索引擎搜索的时候是最先看到和最醒目的内容。
- 用法：
- ①建议将<title>标签紧贴着<head>标签编写，这样搜索引擎可以快速检索到标题标签。
- ②网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。
5.4 <body>标签
- 作用：<body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到<body>标签中。
- 用法：<body>标签作为<html>的子标签使用。
5.5 <h1>~<h6>标签
- 作用：
- ①<h1>~<h6>都是网页中的标题标签，用来表示网页中的标题，不同的是，从<h1>到<h6>的重要性越来越低。
- ②标题标签相当于正文的标题，通常认为重要性仅次于页面的<title>标签。
- ③一般标题标签我们只会使用到<h3>，<h3>以后的标题标签对于搜索引擎就没有什么意义了。
- ④一个页面中只会使用一个<h1>标签。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的标签</title> </head> <body> <h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6> </body> </html>
5.6 <p>标签
- 作用：
- ①<p>标签表示网页中的一个段落。
- ②一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的标签</title> </head> <body> <p>我是一个p标签，我表示一个段落</p> <p>我是一个p标签，我表示一个段落</p> <p>我是一个p标签，我表示一个段落</p> </body> </html>
5.7 <br/>标签
- 作用：<br/>标签表示一个换行标签，使用<br/>标签可以使得<br/>标签后的内容另起一行。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的标签</title> </head> <body> <p> 锄禾日当午,<br/> 汗滴禾下土。<br/> 谁知盘中餐，<br/> 粒粒皆幸苦。<br/> </p> </body> </html>
5.8 <hr/>标签
- 作用：<hr/>标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分。
5.9 <img />标签
- 作用：<img />标签来向网页中引入一张图片，<img />标签是一个自结束标签。
- 属性：
- src：设置一个外部图片的路径。
- alt：可以用来设置在图片不能显示的时候，对图片的描述。搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录。
- width：可以用来修改图片的宽度，一般使用px作为单位。
- height：可以用来修改图片的高度，一般使用px作为单位。width和height如果只设置一个，另一个也会同时等比例调整大小。
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的标签</title> </head> <body> <img src="img.jpg" alt="这是一张图片" width="500px"> </body> </html>
6 实体（转义字符）
6.1 概述
- 在HTML中预留了一些字符。
- 这些预留字符是不能在网页中直接使用的。
- 比如<和>，我们不能直接在页面中适用<和>，因为浏览器会将它解析为HTML标签。
- 为了可以使用这些预留字符，我们必须在HTML中适用字符实体。
- 语法：
&实体名;
6.2 应用示例
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用的标签</title> </head> <body> 小于号：<<br/> 大于号：><br/> 空格： <br/> 和符号& ： &<br/> 版权号：©<br/> 引号："<br/> 注册商标： ®<br/> 商标： ™<br/> </body> </html>