尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】

尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】

本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃）

一、进制

1.十进制（日常使用）：
特点：满10进1
计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20
单位数字：10个（0-9）
2.二进制（计算机底层的进制）：
特点：满2进1
计数：0 1 10 11 100 101 110 111
单位数字：2个（0-1）
扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格子在内存中被称为1位（bit）。
8bit = 1byte（字节）
1024byte = 1kb（千字节）
1024kb = 1mb（兆字节）
1024mb = 1gb（吉字节）
1024gb = 1tb（特字节）
1024tp = 1pb
3.八进制（很少用）
特点：满8进1
计数：0 1 2 3 4 5 6 7 10 11 12 13 14…17 20
单位数字：8个（0-7）
4.十六进制（一般显示一个二进制数字时，都会转换为十六进制）
特点：满16进1
计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12…1a 1b 1c 1d 1e 1f 20…
单位数字：16个（0-f）

二、字符编码

举个例子：
（这里假设周杰伦对应的二进制码是110000110110）

周杰伦→110000110110（编码）
110000110110→周杰伦（解码）

-笔记总结：所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存中时，都需要转换为二进制编码。当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。
1.编码：将字符转换为二进制码的过程成为编码。
2.解码：将二进制转换为字符的过程成为解码。
3.字符集（charset）：编码和解码所采用的规则称为字符集。可以通过meta标签来设置网页的字符集，避免乱码问题。
4.乱码问题：如果编码和解码所采用的字符集不同就会出现乱码问题。
5.常见的字符集：ASCII
ISO88591
GB2312
GBK
UTF-8（在开发时我们使用的字符集都是UTF-8）

三、文档的使用

这里我们需要牢记整个HTML中的最基本的架构：

四、实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格。在HTML中有些时候，我们不能直接书写一些特殊符号，比如，多个连续的空格，字母两侧的大于小于号等等。
在HTML中常用的实体名字：
 ；空格
>；大于号（great）
<；小于号（little）
©；版权符号（©）

五、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看。
charset指定网页的字符集。
name指定数据的名称。
content指定数据的内容。
keywords表示网站的关键字，可以同时指定多个关键字，关键字之间使用逗号隔开。
description用于指定网站描述，网站的描述会显示在搜索引擎的搜索的结果中。
title标签的内容会作为搜索结果的超链接上的文字显示。

六、语义化标签（1）

在网页中HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式。
1.标题标签：
h1~h6 一共有六级标题；
从h1~h6重要性递减，h1最重要，h6最不重要；
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1；
一般情况下标题标签只会使用到h1~h3;
标题标签都是块元素。
2.在页面中独占一行的元素称为块元素（block element）。
3.hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup。
4.p标签表示页面中的一个段落。p标签是一个块元素。
5.em标签用于表示语音语调的一个加重。
6.在页面中不会独占一行的元素称为行内元素（inline element）。
7.strong表示强调重要内容。
8.blockquote表示一个长引用。
9.q表示一个短引用。
10.br标签表示页面中的换行。

七、块和行内

1.块元素（block element）
在网页中一般通过块元素来对页面进行布局。
2.行内元素（inline element）
行内元素主要用来包裹文字；
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素；
块元素中基本上什么都能放；
p元素中不能放任何的块元素。
3.浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。比如：
标签写在了根元素的外部；
p元素中嵌套了块元素；
根元素中出现了除head和body以外的子元素；
……

八、语义化标签（2）

布局标签（结构化语义标签）。
header表示网页的头部；
main表示网页的主体部分（一个页面中只会有一个main）；
footer网页的底部；
nav表示网页中的导航；
aside和主体相关的其他内容；
article表示一个独立的文章；
section表示一个独立的区块，上边的标签都不能表示使用section；
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素；
span行内元素，没有任何的语义，一般用于在网页中选中文字。

九、列表

在HTML中也可以创建列表，一共有三种列表方式：
1.有序列表
2.无序列表
3.定义列表
无序列表，使用ol标签来创建无序列表，使用li表示列表项。
有序列表，使用ul标签来创建有序列表，使用li表示列表项。
定义列表，使用dl标签来创建一个定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明。
列表之间可以相互嵌套。