Head First HTML与CSS阅读笔记（二）

浏览数：29 / 时间：2015年06月09日

上一篇Head First HTML与CSS阅读笔记（一）中总结了《Head First HTML与CSS》前9章的知识点，本篇则会将剩下的10~15章内容进行总结，具体如下所示。

div与Span

此元素应该是HTML中使用频度最高的元素之一，div将属于一个逻辑区的元素包含起来；

如果添加div有助于将页面分解为逻辑区，保证结构清晰并便于指定样式，则应该使用div，否则，过多的div只会让页面更加复杂，不应滥用；

width属性指定元素内容区的宽度，不包括内边距，边框和外边距的宽度；

整个元素宽度 = 内容区宽度 + 两侧内边距宽度 + 两侧边框宽度 + 两侧外边距宽度；

块元素默认的宽度是“auto”，允许内容填满可用的全部空间，一般不用指定元素的高度，默认为auto；

text-align只能在块元素上设置，对块元素中所有内联内容对其；

CSS子孙选择器：注意#id h2与#id>h2的区别，后者是直接子元素，前者则是#id下的所有子孙h2元素；

line-height属性值可直接使用数字表示，如：

#elixirs {
  line-height: 1;
}

表示#elixirs <div>中的个元素行高是其自己字体大小的1倍；

一些属性的简写形式：

background: white url(image/coll.png) repeat-x;
border: #007e7e solid thin;
font: font-style font-variant font-weight font-size/line-height font-family;
如：
font: small/1.6em Verdana, Helvetica, sans-serif;

伪类

a元素的几种状态：link, visited, hover, focus（焦点在此链接上时）, active（第一次单击链接时），伪类举例：

#elixirs a:link {
  color: #007e7e;
}

#elixirs a:visited {
  color: #333333;
}

伪类还有很多，如first-child，last-child等,伪类会根据元素的状态来指定元素的样式；

nth-child伪类，状态是一个元素相对于它的兄弟元素的数字顺序；

p:nth-child(even) {          //偶数
  background-color: red;
}

p:nth-child(odd) {            //奇数
  background-color: green;
}

p:nth-child(2n) {
  background-color: red;
}

p:nth-child(2n+1) {
  background-color: green;
}

层叠

在所有样式表中，最优先的是作者的样式表，其次是读者的样式表，最后才是浏览器的样式表，如果读者在样式表的一个属性声明最后加上“!important”就可覆盖作者的样式；

布局与定位

并排放置两个内联元素时，两元素的外边距不会折叠，上下放置两个块元素时，会把他们共同的外边距折叠折叠在一起，折叠的外边距高度就是最大的外边距高度；

即使一个元素嵌套在另一个元素内，如果外面元素没设置边框，这两个外边距也会折叠；

流体布局

扩展浏览器窗口时，页面中的内容会扩展以适应页面；

浮动float

浮动一个元素步骤：

1. 指定一个标识（id）；
2. 指定一个宽度，所有浮动元素都必须有一个宽度；
3. 使用float: right/left是元素浮动；

浮动元素会被从正常流中删除，但是在对内联元素定位时，会考虑浮动元素的边界，会围绕着浮动元素；

浮动一个元素时，如果希望它在某个元素的后面，就要移动浮动元素的HTML，让它紧挨着放在那个元素的下面；

设置两栏布局的话，可以采用右侧边栏浮动，左侧主内容区使用margin-right指定距右侧的距离，如边栏总宽度330px，则设置margin-right: 330px；

使用了浮动，下面的元素则会上移，可能会出现重叠的问题，应使用clear属性，clear会要求当元素流入页面时，在这个元素的左边，右边或两边不允许有浮动内容，如：clear: right/left/both；

浮动元素的外边距不会折叠；

浮动布局适合在一个文本段落中浮动图像，让文本围绕着这个图像；

缺点：必须把需要浮动的<div>移到其父元素之下最前面位置，另外，无法创建两个高度相同的列；

冻结布局

当用户调整屏幕大小时，设计仍能保持原样，指定页面的总宽度，调整浏览器大小，宽度不会变化；

凝胶布局

凝胶布局会锁定页面中内容区的宽度，但会将它在浏览器中居中，使用margin: 0 auto;

很多博客网站采用此种布局；

缺点：内容不会扩展来填满整个浏览器窗口；

绝对定位

使用position属性制定这个元素要绝对定位，例如：

#sidebar {
  position: absolute;
  top: 100px;
  right: 200px;
  width: 280px;
}

一个元素绝对定位时，浏览器会将它从正常流中完全删除，然后将它放在top和right属性指定的位置上，并且流中的元素不会将其内联内容围绕在一个绝对定位的元素周围；

绝对定位可以分层放置，一个元素可以放在另一个绝对定位元素上面，每个定位元素（绝对定位，相对定位，固定定位）都有一个名为z-index的属性，z-index值越大，越方在上面；

可以对任何元素指定绝对位置，包括块元素和内联元素；

position属性有static(默认值)，absolute，fixed(固定定位，固定元素永远也不会移动)，relative(相对定位会让元素正常流入页面，在页面上显示之前要进行偏移)；

相对定位元素仍在正常流中（还在它原本的位置上），然后按照指定的量偏移，可以使用top、left，bottom，right偏移元素，它是相对于其外围包含的元素来定位的；

绝对定位是相对于离它最近的父元素来定位的，可以将一个<div>放在另一个<div>中，对外围<div>使用相对定位，然后用绝对定位指定内部<div>的位置，这样就能相对于父<div>定位了，即一个绝对定位元素嵌套在另一个定位元素中，这个元素就会相对外包含元素定位；

固定定位

#coupon {
  position: fixed;
  top: 300px;
  left: -90px;
}
固定定位元素是相对浏览器的位置不会变动，而不是页面；

表格布局

表格布局结构也比较简单，如下所示：

首先，创建一个<div>表示整个表格，行和列要嵌套在这个<div>中；
然后，对表格中的每一行创建一个<div>，包含行的内容；
最后，在行中，对于每一列，只需要一个块元素作为该列内容；

<div id="tableContainer">
  <div id="tableRow">
    <div id="main">
      ...
    </div>
    <div id="sidebar">
      ...
    </div>
  </div>
</div>

div#tableContainer {
  display: table;
  border-spacing: 10px; //指定表格中单元格之间的边框间距，可看做常规元素的外边距
}

div#tableRow {
  display: table-row;
}

#main {
  display: table-cell;
  verticle-align: top;
  width: 500px; //控制列宽度
}

#sidebar {
  display: table-cell;
  verticle-align: top/middle/bottom;
}

border-spacing和外边距创建的空间不会折叠；

建立多栏布局，且内容栏是均匀的，表格布局就比较适合；

HTML5标记

<section>与<article>的区别？

使用<section> 可以把相关内容分组在一起，<article>包含独立内容，如一个新闻报道，一个博客帖子或者一个简短的报告；要组织相关的内容就是用<section>，而对于独立的内容，则使用<article>；

<time>元素负责在页面中增加日期或时间，datetime属性用来指定一个日期或时间，如果元素内容没有采用官方Internet日期/时间格式来写，就必须有datetime属性；

<time datetime="2015-01-31">1/31/2015</time>

在<section>、<article>、<aside>元素中也可以是用<header>和<footer>元素，可以把一些元素组合起来放在首部或尾部；

导航使用<nav>元素，导航内容一般使用列表来构建；

<video>元素使用

<video controls autoplay width="512" height="288" src="video/test.mp4" poster="images/test.png">
</video>

controls属性使播放器提供一些控制视频音频播放的组件；
autoplay属性，一旦页面加载，视频就会自动播放；
poster属性，提供一个可选的海报图像，视频未播放时就显示这个图像；
loop属性，布尔属性，如果有loop，视频结束播放后会自动重新开始播放视频；
preload属性，preload属性通常用来细粒度的控制视频如何加载，来实现优化，值为"none"表示用户在真正播放视频之前不下载，"metadata"表示下载视频元数据，但不下载视频内容；

<video>元素可以对每一种视频格式分别使用一个<source>元素，提供一组视频，让浏览器选择其支持的第一种格式，如下：

<video controls autoplay width="512" height="288">
  <source src="video/tweetsip.mp4">
  <source src="video/tweetsip.webm">
  <source src="video/tweetsip.ogv">
  <p>Sorry, your browser doesn‘t support the video element</p>
</video>

<mark>元素用于突出显示某些文本；

<audio>包含声音内容；

<canvas>在页面中显示用JS绘制的图像和动画；

<progress>显示任务的完成进度；

<meter>显示某个范围的度量；

表格与列表

<caption>元素指定表格标题，默认显示在表格上方，想将标题移动到表格下方，可在css中使用caption-side: bottom来改变；

不能单独地设置各个单元格的“外边距”，而要使用border-spacing为所有单元格设置一个共同的间距；

border-collapse属性用来折叠边框，使单元格之间没有边框间距，如下所示：

table {
  border: thin solid black;
  caption-side: bottom;
  border-collapse: collapse;
}

可以使用rowspan属性指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格数据元素；

使用colspan属性指定跨多列，跨多列时，需要删除同一行中的表格数据元素；

嵌套表格也很简单，只需要把另一个<table>元素放在一个<td>中即可；

列表的主要属性是list-style-type，disc是默认值，其他值还包括circle，square，none（会删除所有列表标记）；

定制标记

list-style-image属性允许为列表设置标记图像；

li {
  list-style-image: url(image/backpack.gif);
  padding: 5px;
}

list-style-position控制列表上的文本回绕，属性设为"inside"文本会在标记下回绕，设为"outside"文本会在文本下回绕；

HTML表单

表单里可以有什么？

<input type="text" name="fullname" placeholder="Buckaroo Banzai" required> //文本输入
<input type="submit"> //提交按钮
<input type="radio" name="hotornot" id="hot" value="hot" checked>
<label for="hot">hot</label>

<input type="radio" name="hotornot" id="not" value="not">
<label for="not">not</label>

<input type="checkbox" name="spice" value="Salt" checked>
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic">
<textarea name="comments" rows="10" cols="48">
xxxx
</textarea>
<select name="characters">
  <option value="Buckaroo">Buckaroo</option>
  <option value="Tommy">Tommy</option>
  <option value="Penny">Penny</option>
</select>
<input type="number" min="0" max="20"> //限制只能输入数字
<input type="range" min="0" max="20" step="5"> //范围输入，显示为滑动条
<input type="color"> //颜色输入
<input type="date"> //日期输入
<input type="email"> //email输入
<input type="tel"> //电话号码输入
<input type="url"> //URL输入
email、tel、url都是text的变体，在移动设备上会显示不同的定制键盘；
<input type="password" name="secret">
<input type="file" name="doc"> //文件输入
多选菜单
<select name="characters" multiple>
  <option value="Buck">Buckaroo</option>
  ....
</select>

CSS选择器

伪元素

伪元素可以用来选择元素的某些部分，如:first-letter伪元素用来选择一个块元素中文本的第一个字母；:first-line伪元素用来选择段落的第一行；

p:first-letter {
  font-size: 3em;
}

属性选择器

根据属性值来选择元素；

img[width] {border: black thin solid;}
img[height="300"] {border: red thin solid;}
img[alt~="flowers"] {border: #ccc thin solid;} //alt属性包含“flowers”的所有图像；

按兄弟选择

h1+p {
  font-style: italic;
}
选择所有紧跟在<h1>元素后面的p元素；

结合选择器

div#greentea > blockquote p:first-line {
  font-style: italic;
}

开发商特定的CSS属性

div#box {
  transform: rotate(45deg);  //通用属性，旋转45度
  -webkit-transform: rotate(45deg);  //Safari，Chrome
  -moz-transform: rotate(45deg);  //mozilla
  -o-transform: rotate(45deg);  //Opera
  -ms-transform: rotate(45deg);  //IE
}

CSS变换和过渡

transition属性，使元素在规定时间内变换到新状态；

#box {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 20px;
  transition: transform 2s;
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  -o-transition: -o-transform 2s;
}

#box:hover {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}