HeadFirstHTMLCSS2 学习笔记

本文记录在学习HeadFirstHTMLCSS2一书中，值得回顾的地方

---

第一章：开始了解HTML

1. 几个名词和概念：HTML、HTML元素、标记、属性、CSS

• HTML：是HyperText MarkUp Language的简写，中文全名：超文本标记语言，看到这里的MarkUp，知道大名鼎鼎的MarkDown为什么这么起名字了。
• HTML元素，通常由：开始标记 + 内容 + 结束标记，三部分组成。
• 标记拥有属性，如下：

    <h1 id='myH1'>我是标题</h1>

• CSS：中文全称为层叠样式表，用来控制HTML的表现

2. 关于忽略：大多数空白字符，如制表符、回车、空格，都会被HTML忽略，但如果是code、pre元素，则不同：
   

    我是pre元素，内容中可以有多个空格       。

我是code元素，内容中可以有空格 ，但只有一个空格位

第二章：深入了解超文本

1. href的概念： 是HyperText Reference的简称，中文名：超文本引用
2. a元素：可在元素内容中包裹其他元素，如图片，单击元素也可跳转指定链接

<a> <img src='xxx' /> </a>

3. 文件夹和文件的命名中尽量不要出现空格，容易引发错误

第三章：创建网页：构建模块

1. q元素代表引用，通常是对内容加引号，具体表现取决于浏览器

2. blockquote元素，长引用，区别于q元素的短引用

3. 几个概念：

• 块元素 block，单独显示，前后都有换行
• 内联元素 inline，不换行

4. br元素，你可以把它看成一个回车符，它没有内容，不需要结束标记，这类元素叫做void元素，img元素也属于此类。
5. ol，有序列表，ul，无序列表，他们必须和li元素配合使用。
6. dl，定义列表，列表中每一项都有一个定义术语dt和一个定义描述dd

<dl>
    <dt>爱因斯坦</dt>
    <dd>德国著名物理学家</dd>
    <dt>门捷列夫</dt>
    <dd>苏联，化学家</dd>
</dl>

显示为：

爱因斯坦

德国著名物理学家

门捷列夫

苏联，化学家

7. 常用字符实体清单
8. time元素，中间可以包裹时间，我是时间

第四章：WEB镇之旅：开始链接

1. www.baidu.com，其中baidu.com是域名，www.baidu.com是网站名，www是服务器名，一个域名可以演变成多个网站名，例如ditu.baidu.com，waimai.baidu.com
2. 在浏览器里输入的WEB地址统称为URL，即统一资源定位符,Uniformed Resource Locators
3. 其中https://指用于获取资源的协议，www.baidu.com代表网站名，/index.html指根文件到资源的绝对路径,http为超文本传输协议
4. 如果URL指向的是WEB服务器中的一个文件夹而不是文件，例如:https://www.baidu.com/images/，这个时候，web服务器会尝试查找目录中的一个默认文件，例如index.html或default.html
5. 为a元素设置title属性，可以更好的提示访问者这个链接的指向，事实上，可以为任何元素指定title属性（鼠标移上去可显示提示信息）
6. 在a元素的href属性中使用#，跳转至当前页面指定的锚点，锚点是怎么设置的呢？很简单，为元素添加id属性即可。例如：
   跳转至第一章
7. 设置a元素的target属性为"_blank",将在新窗口中打开一个链接，如果target设置一个指定的命名，例如coffee，那么这个新窗口会被命名为coffee，后续其他a元素被点击时，如target也是coffee，将在相同的窗口打开。

第五章：为你的页面增加图像

1. 常用图片格式：JPEG、PNG、GIF，它们区别如下：

JPEG	PNG	GIF
照片及复杂图像使用	单色图像和几何图像	单色图像或几何图像
不支持动画	不支持动画	支持动画
比较小	比较大	比较大
不支持透明	任意颜色可透明	单个颜色可透明
有损存储	无损存储	无损存储

2. 使用img元素的最佳实践：

• 利用工具调整图片大小，使之适应浏览器，避免无谓的下载过高分辨率的图片
• 设置width和height两个属性，使之与调整后的图片相同，因为使用了固定的尺寸，避免了页面布局的二次渲染
• 使用alt属性设置替代

4. 如果把一个透明的图像放在WEB页面中，则需要确保这个图像的蒙版颜色与web页面背景色一致

第六章：标准及其他，严肃的HTML

1. HTML不再会有6、7、8版本，从H5开始，版本就是动态的了
2. 利用meta可以指定字符编码，字符编码提供一种方法，它可以在计算机上表示某种语言的所有字母、数字和其他字符。Unicode可以表示所有语言。

<meta charset='utf-8'>

3. uft-8是Unicode系列中的一个编码，web页面一般使用utf-8，因此html文本文件应保存成utf-8的格式

第七章：CSS入门

1. 选择器之间加逗号，可为多个元素指定样式：h1,h2{}
2. sans-serif,这种字体没有衬线，看起来会比较清晰
3. 继承，子元素会继承父元素的CSS属性，但不是所有属性都能继承，一般来说，影响外观的属性能被继承，你可以根据常识来判断
4. 类选择器，p.classname

第八章：增加字体和颜色样式

1. 认识几种常见的字体系列
   1. serif 含有衬线的字体，优雅，代表：times new roma
   2. sans serif 不含有衬线的字体，清晰，代表：Arial，WEB页面常用
   3. monospace 每个字符宽度相同，常用于代码显示
   4. cusive 类似手写
   5. fantasy 含有某种风格的字体
2. font family 通常会列举同一个系列的字体，例如，Verdana, Geneva, Arial, sans-serif，最后一个总是放通用的字体系列名
3. 在css中，使用@font-face{font-family：‘xxx’;src:‘http://xxx’}来指定自定义的字体
4. 字体大小设置最佳实践
   1. 在body中设置浏览器的通用大小，推荐small,medium
   2. 然后其他地方使用em,或百分比，可保证一致性

第九章：盒模型

1. css中inherit的含义是继承，指的是按父元素的设置来处理
2. background-image和img，前者仅仅是作为元素的背景，后者是插入图片，两者功能定位是不一样的
3. border-style，常用四种：
   • solid 实线
   • double 双线
   • dotted 虚线
   • dashed 破折线
   • groove 槽线
   • insert 内凹
   • outset 外凸
   • ridge 脊线
4. p#footer，id为footer的段落样式
5. ，在css引入中使用媒体查询
6. media=‘screen and (max-device-width:480px)’ screen指的是有屏幕的设备（排除打印机、3d眼镜、盲文阅读器等）
7. 各类设备的一般像素：
   • 智能手机 480*640
   • 平板电脑 1024*768
   • 桌面PC 1280*960
   • 互联网电视 2650*1600

第十章：DIV和SPAN

1. div h2 {color:black} 选择器（中间空格）：父元素为div的所有h2元素，再如：#elixire h2 {}
2. #elixires>h2，选择器间加>表示直系子元素, 更多延伸：#elixirs div div {}, .myDiv nth
3. 更多选择器
4. 使用数字排列法确定层叠样式的最终结果，根据[id选择器的数量] [类和伪类的数量] [元素选择器的数量]形成的数字，数字越大，优先级越高，例如 #myDiv .myDivClass . myBlock div p 数字为[1][2][2],即122

第11章：布局和定位

1. 首先要理解flow元素流的概念，块元素流向默认是从上到下，内联元素的流向是从左上到右下

2. 浏览器中上下放置两个块元素时，外边距会折叠，即会取两者之间的最大者

3. 当一个元素嵌套在另一个元素之中，且外元素未设置边框，那么，内外元素的外边距会折叠

4. float详解

   • 尽可能远的向左或向右浮动一个元素，然后它下面的所有内容会绕流这个元素
   • 对于所有的浮动元素有一个要求，它必须有一个宽度
   • 它会从文档流中删除，下面的块元素会填充空白区域，而内联元素会考虑这个浮动元素的边界，并尽量绕开它，包括块中的内联元素
   • 为一个元素设置clear属性，可以使得该元素左边、右边、或者两边

   #footer{
       clear: right;
   }
   

5. position的默认值是static，也就是说在文档流中，Relative也会让元素正常的流入文档中，但是在页面显示之前要进行偏移

第12章：HTML5标记

1. 语义化标签：header,footer,nav,aside,article,video,time
2. time 标签的内容可能不符合时间的标准格式，这种情况下，需要使用datetime属性

<time datetime='2019-10-01'>2019年10月1日</time>

3. video元素
   • 类似于img元素
   • autoplay 可以设置自动播放
   • 视频格式：google chrome要使用.webm格式，对于Safari,应使用.mp4（H.264格式）FireFox & Opera 使用.ogv
   • controls属性为true，播放器会提供一些控制视频和音频播放的控件
   • poster，默认海报，视频未播放之前显示
   • preload 预加载
   • 容器:WebM,MP4,Ogg,包含视频编码和音频编码，为了尽可能兼容，你可以在video元素下添加source元素，并为每个source指定src
4. 尝试一下其他的新元素
   • mark 突出显示某些文本
   • audio
   • figure 用来定义照片图表等独立的内容
   • progress

第13章：表格与更多列表

1. 利用nth-child(even) 和nth-child(odd)可以轻松实现隔行着色，nth-child(3n) 和nth-child(3n+1)
2. list-style-image 可以指定url来定制化标记图像