Head First HTML与CSS阅读笔记（二）
上一篇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); }
