HTML的总结

                                                                      HTML的总结

1.注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”

这样同一组的单选按钮才可以起到单选的作用。

2.label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在
label 标签内点击文本，di就会触发此控件。
点击文字就可以选中按钮。

<label for="控件id名称"></label>
<input id="控件id名称" />
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

3.浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，
所以可以理解为继承的权值最低。


4.层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在
时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}green被使用

5.我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，
如下代码：
p{color:red!important;}
p{color:green;}


6.
2em的意思就是文字的2倍大小。

7.常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

8.
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

9.
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置

10.在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer

11.
流动布局模型具有2个比较典型的特征：
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，
因为在默认状态下，块状元素的宽度都为100%。
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

12.
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

13.
body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性
(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

14.
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，
那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。


15.
满足(定宽和块状)两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。


16.不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1.加入 table 标签
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

1.加入table后可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，
使其水平居中。
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

要注意是这个 div元素 居中，而不是里面的文本居中啊


2.
display:inline;      text-align：center
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，
变成了行内元素，所以少了一些功能，比如设定长度值。


17.
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，
分别加到一个文本行内容的顶部和底部。
即：字体：height == line-height



18.
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle

方法二：display：table-cell    vertical-align:middle
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7
而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。


19.
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
 1. position : absolute
 2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，
当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。








-------------------------------------------------------------------------------
w3c
1.对齐：margin：auto;
2.position:absolute左右对齐
3.float：左右对齐

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

1.line-height = height
2.padding 上下设置相同的内边距





--------------------------------------------------------------------------
解决兼容性的问题bug
1.声明严格的<!doctype>
2.使用css初始化文件进行初始化

IEbug
1.双倍marginbug    _display:inline;
2.不认识a:link     直接写a
3.3px 的margin bug    规范浮动与清除浮动

用绝对定位时，父元素要有position，否则一直向上找直到找到祖先元素有position
为止，同时也是相对于此时的祖先元素进行相对！

绝对定位相对于漂浮起来，不占位置;同时覆盖了下面的元素
相对定位，位置改变了原来的位置还是自己占的！

比较小的元素，有的浏览器最小为5px,使用此时overflow:hidden

margin-left:为负值的时候，当全部的空间左边全走完了，则像上面走！

如果行内元素放一个块级元素，块级元素会占父亲的父亲全部宽度,相当于父元素也是块级元素
父元素不设置高度，子元素是有高度的，会把父元素撑开*/
/*如果子元素设置浮动的话，就脱离了文档流，就不会把父元素撑开了





-----------------------------------------------------------------------------
                        CSS from Head first Html/CSS
1.文档流规定元素的排放方式就是流.块级元素由上至下，内联元素由左上至右下
2.对内联元素定位时，他们会考虑到浮动元素的边界因此会围绕元素;
对于内联元素进行浮动是可以的，不过除了图片其他的都不常见！
对于浮动元素，块级元素相当于忽略，而内联元素会在意。
当绝对定位的时候，元素会被文档流完全删除。
可以对任何元素绝对定位，包括内联和块元素！
绝对定位用百分比的时候，是相对于浏览器的宽和高。





css手册：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”这个很绕，打个比喻：假设有两个行内元素a和 b，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。


结构和表现分离的思想，用尽量少的div先控制框架，继而实现设计稿中的分离！






1.浮动让元素变成block
2.去空格化，浮动可以将空格去除，比如按钮


在html中已经声明 自闭合元素(单闭合标签)后的斜杠可以省略，既然可以省略，省略更好，省字节。（双闭合标签千万别省,不然错那都不知道了，经常会因为这些小细节，找一下午，中枪有木有？）