一、概念
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>