Head_First_HTML_and_CSS-读书笔记

HTML（HyperText Markup Language）：超文本标记语言，用来建立网页的结构
CSS（Cascading Style Sheets）：层叠样式表，用来控制HTML的表现
URL（Uniform Resource Locator）：统一资源定位符，用于定位互联网上资源的地址**（协议://主机名:端口号/路径?查询参数#片段）**（#片段:用id链接到对应元素）
FTP（File Transfer Protocol）：文件传输协议
HTTP（HyperText Transfer Protocol）：超文本传输协议
本地文件协议（file://）：浏览器使用file协议从你的计算机读取页面
HTML标准现在是一个“活的标准”，这说明这个标准会不断改变，加入新的特性和更新
浏览器使用流在页面中放置元素

页面基本结构：

<html>
  <head></head>
  <body></body>
</html>

绝对路径	相对路径
从根目录（或顶级目录）开始	从当前目录开始
唯一	依赖于当前目录，不唯一
	（`./` 表示当前目录）（`../` 表示上一级目录）
	单击一个相对链接时，在后台浏览器会根据这个相对路径和所单机页面的路径创建一个绝对路径。所以，所有Web服务器看到的都是绝对路径

列表：
1. 有序列表：ol(ordered list)，li(list item)
2. 无序列表：ul(unordered list)
3. 自定义列表：dl，dd，dt
布局：块元素，内联元素

图像：

JPEG	PNG	GIF
适合连续色调图像，如照片	适合单色图像和线条构成的图像（如logo、剪贴画和图像中的小文本）	类似PNG
可以表达包含多达1600万中不同颜色的图像	可以表示包含上万种不同颜色的图像（PNG有三种：PNG-8、PNG-24、PNG-32，取决于需要表示多少颜色）	可以表示最多256种不同颜色的图像
“有损”格式，因为缩小文件大小时会丢掉图像一些信息	“无损”格式，会压缩文件来缩小文件大小，不过不会丢掉信息	“无损”格式
不支持透明度	允许将颜色设置为“透明”，使图像下面的东西可以显示出来	支持透明度，不过只允许一种颜色设置为“透明”
文件比较小，以便web页面更高效显示	与相应的JPEG文件相比，PGN文件更大一些，不过取决于使用的颜色数，可能比相应的GIF文件小，也可能更大	GIF文件往往比相应的JPEG文件大
不支持动画	不支持动画	支持动画

内置的CSS规则：@font-face、@import、@media
字体大小调节：px、em、百分数、关键字
适配设备：在元素中使用媒体查询、使用CSS中的@media规则增加媒体查询
CSS布局：
1. 浮动布局
2. 凝胶布局
3. 绝对布局
4. 表格显示布局
页面布局：
1. 流体布局：扩展浏览器窗口时，页面中的内容会扩展以适应页面
2. 冻结布局：内容的宽度是固定的，不会随着浏览器窗口扩展或收缩
3. 凝胶布局：内容的宽度是固定的，但是外边距会随着浏览器窗口扩展或收缩
浮动元素：
- 浮动元素必须有特定的宽度，不能设置为auto
- 浮动元素放在块元素之上，不会影响正常的页面流。不过，内联元素会考虑浮动元素的边界，围绕着这个浮动元素
选择器：
- 优先级计算
- 选择器类型（属性、兄弟、结合、类、id…）
盒模型：布局外边距折叠