Head First HTML with Css & XHTML
注释 <!-- --> Markup Language 浏览器根据默认规则解析HTML并展示网页 <a href= ’ ’ >…</a>
a标签的内容只能是text 或者 image href可以是相对路径也可以是URL
相对路径 <img src= ’ ’ / > <p> <q>和<blockquote>
<q>：inline element <blockquote> ： block element <br / > listordered list – ol
unordered list – ul
list item – li character entity
> = > < = < & = & 每个character entity都有number，例如d ，但不一定都有name domain name <a title=’ ’ >…</a>
title属性可能与链接的页面的title属性值有关 title属性是对页面的描述 <a href = 'index.html #id ’ >…</a>
<a target = ’ ’ >…</a>
target属性定义页面打开方式
_blank ： 永远打开新窗体 固定名称 ： 相同target值的页面在同一窗体 <img src = ’ ’ /> JPEG和GIF
JPEG
GIF
单色及几何图形 最多支持256种颜色 无损压缩 支持透明度 <img src = ’ ’ alt = ’ ’ width= ’ ’ height = ’ ’ / >
alt属性 ： 相当于图片描述 width和height属性
布局占位，当获取到图片后，如果不一致会重新布局。 当与实际图片不一致时，会下载原始图片，然后调整至设定大小。 图片过大时可以先展示缩略图，点击后展示高清图
<!DOCTYPE > 使用strict模式可以获得在不同浏览器中的一致性 <img>必须有alt属性 必须指定文件类型及字符集 ------ <meta> inline element必须在block element内部 <body>内部只能嵌套block element <p>内部不能嵌套block element <blockquote>内部只能嵌套block element 与改变外观有关的html元素不能 W3C在HTML 4.01的基础上结合XML的可拓展性（element可自定义）发展起来的 element规则通过<html>的xmlns属性指定 W3C不再发展XHTML select {
property1 : value1;
property2 : value2;
... : ...
}
<link type = ’ text/css ’ ref=’ stylesheet ’ href = ’ ’ / > 部分属性可继承、重写 注释 /* … */ 元素选择器 element 类选择器 .class 多个选择器选择同一个
font
font-family
priority list of font 字体名称有空格时用双引号包裹 font-size
px % / em 相对于祖元素有明确定义过的值 small、medium、large font-weight 粗细
font-style
italic / not italic oblique / not oblique italic和oblique在部分浏览器上显示效果一致
italic 字体斜、special oblique 字体斜 color text-decoration 上下划线
underline
line-through overline color表示方式
name 有限 rgb( 100% , 100% , 100% ) rgb( 255, 255, 255) #cc6600
每两个数字代表 r , g , b 每组数字都相同可简写为 #c60 line-height
box model
content area padding border
margin background
background-image
url ( images/background.gif ) background-position background-repeat border
border-style
border-width 线宽 border-color id选择器 #id <link>引入多个stylesheet
继承、重写 media属性 使用<div>进行block element层面的逻辑结构分区 width属性控制element的content area的宽度，element的总宽度等于各项相加 text-align
只能设置在block element 只对block element内部的各种inline element有效 后代选择器
用空格隔开，例如#elixirs h2 后代而不仅仅是child element 子元素选择器
用>隔开，例如#elixirs > h2 仅仅是child element line-height
如果设定值为 px 或者 % 或者 em，则后代元素直接继承父代的line-height大小 如果设定值直接是number，则后代元素继承的是倍数（相对于后代自身的font-size） padding简写
padding ： top , right , bottom , left ; padding ： top and bottom , left and right ; boder简写
border ： style width color in any order background简写
background ： color url repeat position in any order font简写
font ： font-style font-variant font-weight font-size/line-height font-family 使用<span>进行inline element层面的逻辑结构分区 伪类选择器
根据状态选择，用 ： 隔开，例如a:hover
hover 悬停 link 正常 visited 点击 浏览器根据状态自动将element加到某个伪类中 层叠样式表
搜集所有的样式表 与element相关的所有规则 按照author、user、browser的顺序进行分类（其中，author的优先级最高）
可在property value后加 ！important 重新设定优先级 在三组内部按照 specificity 进行排序
specificity的确定
0 0 0
第一个数代表选择器是否有id 第二个数代表选择器是否有class或者pseudo-class 第三个数代表选择器是否有element name 用逗号分隔的选择器看作多个独立的规则 同一specificity的规则按照出现顺序选取最后出现的 flow
block element从top到bottom inline element从top left到bottom right
inline element并列放置
block element上下放置
会发生collapse，只取最大的margin 只要vertical margin直接接触就会发生collapse，即使是嵌套element，但是如果外层element有border就不会直接接触 float
必须设置width 设置了float属性的element会从flow中除去，后续element顶替原位置 后续element内部的inline element依然会以设置了float属性的element为边界 inline element也可设置float，如<img> 需要调整HTML结构顺序 可设置clear属性使element移动至其Z方向没有float元素的位置
由于float元素的width固定，所以当屏幕宽度较小时，后续element的内容还是会挤到后面，展示顺序会被打乱 liquid layout
frozen layout
将页面内容的content的width设为固定值 页面大小改变时内容不会改变 jello layout
将页面内容的content的width设为固定值的同时，左右margin设为auto 页面大小改变时内容不会改变，但保持在页面中部 absolute positioning
设置position属性为absolute并指定top、right以及width
position
static 默认设置，有浏览器决定element位置 absolute 相对于最近的被position设置过的父元素 fixed 相对于浏览器 relative 原位置的偏移 该element从flow中移除，inline element也无法获知absolute element z-index属性控制层叠方向位置 无法设置clear属性 <table summary= ' description for visully impaired ' >
< caption> </ caption> < tr> < th> </ th> </ tr> < tr> < td> </ td> </ tr> </ table> caption-side 控制caption出现在table的位置，top or bottom table默认存在border-spacing，可通过border-collapse去除
border-collapse ： collapse； 如果通过设置 border-spacing ：0px; 会出现double border，双厚度 list
list-style-type 控制 list item 序号样式 list-style-image：url ( ) <form action = ’ ’ method = ’ ’ >
通常使用<table>对<form>进行布局，方便 <input type = ’ ’ value = ’ ’ / >
type
text 单行输入框，此时value为输入框初始值 submit 此时value为按钮文本值 radio 多个radio同一个name表示单选
checkbox.
password file <textarea rows= ’ ’ cols = ’ ’ >default text</textarea>
<label for = ’ ’ > < fieldset> < legend> </ legend> </ fieldset> < select> < optionvalue = ' ' > </ option> < optionvalue = ' ' > </ option> </ select> <select>
multiple = ’ multiple ’ <option>
more selector
pseudo-element
p:first-line p:first-letter attribute
by siblings
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
