一、概念
1.1 HTML、CSS、JavaScript简介
由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。前端开发最核心的3个技术
1）HTML是什么
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制
作的。HTML是一门描述性语言，是一门非常容易入门的语言。
2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
3）JavaScript
JavaScript是一门脚本语言。
1.2 HTML、XHTML、HTML5 区别
HTML
全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的
主要语言。我们常说的HTML指的是HTML 4.01。
XHTML
全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言),
它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML5
HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。
而HTML5指的是下一代的HTML,也就是HTML 4.01的升级版。
不过HTML5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。
HTML5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。
这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。
一句话概括 HTML、XHTML 和 HTML 5 就是：
1） HTML 指的是 HTML 4.01,
2） XHTML 是HTML的过渡版，
3） HTML5是HTML的升级版。
1.2.1 XHTML与HTML的区别
+++ XHTML的来源：
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。
因此为了让机器更好地处理HTML,我们才在HTML基础上引入了XHTML
+++ XHTML相对于HTML来说，在语法上更加严格。
1.XHTML标签必须闭合。
在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标 签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网
正确写法：<p>欢迎来到绿叶学习网</p>
2.XHTML标签以及属性必须小写。
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。
错误写法：<Body><DIV></DlV></Body>
正确写法：<body><div></div></body>
3.XHTML标签属性必须用引号。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>
正确写法：<input id="txt" type="text"/>
4. XHTML标签用id属性代替name属性。
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
错误写法：<div name="wrapper"></div>
正确写法：<div id="wrapper"></div>
下面是一个完整的XHTML文档。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>
1.2.2 HTML5 的特点
对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有 以下几个特点。
1.文档类型说明
基于HTML5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地 简化了。
XHTML文档声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>
HTML5文档声明如下：
<!DOCTYPE html>
2.标签不再区分大小写
<div>绿叶学习网</DIV>
上面这种写法也是完全符合HTML5规范的。
但是在实际开发中，建议所有标签以及属 性都采用小写方式。
3.允许属性值不加引号
<div id=wrapper style=co1or: red> 绿叶学习网 </div>
上面这种写法也是完全符合HTML5规范的。
但是在实际开发中，建议标签所有属性值 都加引号，单引号或双引号都可以。
4.允许部分属性的属性值省略
在HTML5中，部分具有特殊性属性的属性值是可以省略的。
例如，下面代码是完全符 合HTML 5规范的：
<input type="text" readonly/>
<input type="checkbox" checked/>
上面两句代码等价于：
<input type="textM readonly="readonly"/>
<input type="checkbox" checked="checked"/>
表1 -1 HTML5中可以省略属性值的属性
| 省略形式 | 等价于 |
|---|---|
| checked | checked=“checked” |
| readonly | readonly=“readonly” |
| defer | defer=“defer” |
| ismap | ismap=“ismap” |
| nohref | nohref=“nohref” |
| noshade | noshade=“noshade” |
| nowrap | nowrap=“nowrap” |
| selected | selected=“selected” |
| disabled | ciisabled=“disableci” |
| multiple | multiple=“multiple” |
| noresize | noresize=“disabled” |
二、语义化标签
2.1 语义化标签的重要性
1. HTML的精髓就在于标签的语义。
在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；
hl标签，表示“headerl”,标记的是一 个最高级标题……
而div和span是无语义的标签，我们应该尽可能少用。
2. HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不 是看自己学了多少
标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学
习的目的所在。
3. 我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网 页的结构，CSS是网页
的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最 重要的，而CSS和.JavaScript只是
用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。
4.整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替 语义化标签，后期维护
会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜
索引擎跟人不一样，它可“看不懂” 一个页面长什 么样的。它只会根据HTML代码来识别。
搜索引擎一般都是根据HTML标签来识别这里是 一个img标签，那里是一个p标签等。如果整个页面都是div和
span,捜索引擎小蜘蛛肯 定会迷路，可能以后都不想来光顾你这个站点。要是这样的话，你崩溃了，你的老板
也跟着 崩溃了。
基于上述总结：
在网页中html专门负责网页的结构，css负责页面的样式，js负责动作。
所以在使用html标签时，应该关注的是标签的语义，而不是标签的样式。
【标签什么样式不重要，重要的是要理解标签的含义】
2.2 语义化页面的验证
判断一个页面是否语义良好呢？
一个很简单的办法就是：去掉CSS样式，然后看页面是否还 具有很好的可读性。
我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标 签对字体加粗、ul标签有缩进效果，等等。
在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
2.3 案例：语义化标签使用反例
>>>>>> 举例
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.body {
font-family: "微软雅黑";
font-size: 14px;
}
.content {
width: 300px;
padding: 10px;
border: 1px dashed gray;
}
.content div {
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 24px;
}
</style>
</head>
<body>
<div class='content'>
<div>web 前端开发 </div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript HTML控制网页的 结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
</div>
</body>
</html>
如图所示：
>>>>>> 解析
1.对于上面的标题效果，正确的做法应该是
使用h1 ~ h6标签来实现，但这里却使用div 来代替了。虽然页面效果一样，但是这种“用某
一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了 HTML这
门语言的初衷。
2. HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，
表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一 个
最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
3.HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不是看自己
学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地
方，这才是HTML学习的目的所在。
4.我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网 页的结
构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最 重要
的，而CSS和.JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果
结构不稳也容易塌。
5.整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替语义化
标签，后期维护会非常困难。
此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。
但是搜索引擎跟人不一样，它可“看不懂” 一个页面长什 么样的。它只会根据HTML代码来
识别。搜索引擎一般都是根据HTML标签来识别这里是 一个img标签，那里是一个p标签等。
如果整个页面都是div和span,捜索引擎小蜘蛛肯定会迷路，可能以后都不想来光顾你这个
站点。要是这样的话，你崩溃了，你的老板也跟着 崩溃了。
>>>>>> 结论：语义化标签的重要性
编写一个语义结构良好的页面在实际开发中极其重要。
主要有两个最大的优点：
①利于开发调试和后期维护；
②利于搜索引擎优化。
三、HTML基础
<!DOCTYPE html>
<html>
<head>
<title> hello world!!!</title>
</head>
<body>
xxx
</body>
</html>
3.1 文档声明
文档声明用于告诉浏览器网页的版本。浏览器在解析网页时，会根据文档声明来解析html文件。
XHTML文档声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>
HTML5文档声明如下：
<!DOCTYPE html>
3.2 html注释
<!-- 注释 -->
1.注释的内容不会在浏览器中显示。在源码中可以查看到。
2.注释不能嵌套（禁止套娃）。
3.3 html标签分为全围堵标签、半围堵标签
全围堵标签：
标签成对出现。有开始标签，也有结束标签。
半围堵标签(自结束标签)：
只有开始标签。
<input type="" />
<input type="" > 这两种写法都可以
3.4 所有标签都可以自定义属性
<div s="hello" >xx</div>
四、 进制
十进制（生活中使用）
- 特点：满十进一
- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- 单位数字：10个（0-9）
二进制（计算机底层使用）
- 特点：满二进一
- 计数：0 1 10 11 100 101 110 111 10000 ...
- 单位数字：2个（0-1）
- 扩展:
- 所有数据在计算机中都以二进制的形式保存。
- 可以将内存想象为一个由多个小格子组成的容器，每一个小格子都可以存储一个1或一个0。这个小格子在内存中被称为1位（1bit）
8 bit = 1byte（字节）
1024byte =1kb（千字节）
1024kb =1mb（兆字节）
1024mb =1gb（吉字节）
1024gb =1t（t字节）
1024t =1pt
八进制(很少用到)
- 特点：满八进一
- 计数：0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20 21 ...
- 单位数字：8个（0-7）
十六进制
- 特点：满十六进一
- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 13 14 15 16 17 ...
- 单位数字：16个（0-9 a-e）
五、字符编码
5.1 编码和解码
1. 所有数据在计算机中存储时都是以二进制的形式存储的。所以一段文字在内存中存储时，都需要转换为二进制。
当我们读取这段文字时，计算机会将编码转化字符，供我们阅读。
2.
-编码：
将字符转化为二进制的过程称为编码
-解码：
将二进制的编码转化为字符的过程称为解码。
-字符集:
编码和解码所采用的规则就是字符集。
-乱码问题:
如果编码和解码采用的字符集不同，肯定就会出现乱码
5.2 字符集
ASCII（美式字符集）
1.美国标准信息交换码
2.标准 ASCII 码使用 7 个二进位对字符进行编码
3.ASCII码一共规定了128个字符的编码，包含大小写英文字符、阿拉伯数字和标点符号以及33个控制符号
ISO8859-1（西欧字符集）
1.欧洲人对ASCII进行了扩充，采用了8 个二进位对字符进行编码
2.一共规定了256个字符的编码，包好ASCII字符集和西欧国家的字符
GB2312（简体中文字符集）
1.中国对字符集进行扩充
2.一共收录了7445（包括6763个汉字和682个其他字符【包括ASCII字符 集】）个字符，未收录繁体字符和一些偏僻字
GBK（国际简繁体字符集）
1.包括GB2312和BIG5和一些符号，共有21003个
2.使用2个字节编码
UTF-8（Unicode：UTF）(万国码)
1.包含了世界上所有的编码
2.英文，数字，符号用1个字节，中文用3个字节
5.3 测试乱码
1.新建a.html。用node pad++ 修改文本，保存文件时使用UTF-8保存。但是指定html的编码时使用GBK。
2.打开a.html网页，发现乱码。
3.原因
1.在保存a.html文档时，使用的字符集UTF-8进行编码。
2.浏览器在解析a.html文档时，使用了GBK进行解码。
==》发现英文没有乱码，中文出现乱码。字符集不一致造成。
六、unicode万国码
5.1 unicode编码在js中使用
console.log("\u2620");
console.log("\u0021");
5.1 unicode编码在html中使用
1.unicode编码是十六进制的，如果我们在html标签中使用，必须转化为十进制的。
2.通过计算器将unicode的十六进制码转化为十进制。使用即可。
>>>>>> 使用计算器将unicode的编码转化为十进制
>>>>>> 在标签中使用转换后的十进制码
<h1>☠</h1>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
