first head html css 读书笔记

first head html css 读书笔记

HTML

<a><img>xxx</img></a>表示包含image的link

<q>

表示引用

写html的时候遇到引用可不可以这么写

"引用的内容" others

？

不好。 html只复制内容，至于怎么展示是css的事情， 加“相当于写了怎么展示。

<q> <blockquote>

分别表示inline类型引用和块引用

<a herf="https://baidu.com#certainID"/>

点击会direct到baidu.com页面ID为certainID的地方。

<a herf="http://xxx#top"> (#backtoTop)

direct 到页面的顶部或底部。

<img>

一般要加alt

inline元素

width和height最好放到css中

HTML 4的一些规范

网页必须必DOCTYPE开始

<meta>

指定编码，作为head的第一行

只用块元素填充body，所有的inline必须放在块元素内

inline元素里面不可以放块元素

<p>

禁止包含 块元素

XHTML 与 HTML 4 相比多了那些东东？

这个文档有说明

CSS

CSS 有些属性可以被继承(字体，颜色，字体宽度…)，有些则不可以(border, padding etc…)

CSS 选择器冲突:

原则是： 如果一个规则比其他的更具体，那它将胜出。

ex:

<p class="greentea blueberry">

p {color: black;}

<

.greentea {color: green;}

<

p.greentea {color: green;}

=

p.blueberry {color:purple;}

[p.blueberry比p.greentea后申明，则它胜出]

Font

font-family:

一般来说可加多个, ex:

font-family: Verdana, Geneva, Arial, sans-serif

优先级Verdana>Geneva>Arial;

最后一个不是具体一个字体，而是告诉浏览器用默认的字体;

font-size

单位为 %, em时，是针对父元素(一般而言是body)的百分比。 ex：1.2em，说明font-size为1.2*(父元素font-size)

font-weight (粗体or not)

font-style (斜体or not)

text-decoration:

text-decoration

: line-through|underline|overline|none.

text-decoration: line-through underline;

表示既有下划线也有中间横穿线。

h1 {text-decoration: line-through}

和

h1{text-decoration: underline}

不能表示上述效果，只能表示后申明的效果。

line-height:

行间距. 单位em(是当前字体的多少倍), %, px

text-align: 块元素属性，可以使块元素中所有inline内容居中/左对齐/.., 当中嵌套的块元素也会继承这个属性值。

盒模式 [padding/border/margin]

width/height 不包括 padding, margin的长度。

id/class: 如果一个页面某个东东是唯一的，请用id而不是class

两个块元素上下依次放置，上边元素的下边界（margin）和下边元素的上边界会重叠，具体的宽度依照宽的那个。

DIV： 进行逻辑上划分。

span: 和div类似，但div用于块元素，而且本生也是快元素，但span本生是inline元素。ex：一段文字中，希望当中几个word是粗体或者样子变化，可用span将其包起来。

父子选择器：

div h1{xxx}

父节点是div，子节点（可以使孙节点，增孙节点…）是h1,空格分隔父子。

#xxID h1{xx}

div>h1{xx}

h1只能是儿子节点。

伪类：

a:visited

,

a:hover

,

:focus

…

布局流，float，position，table布局，display：table布局

浏览器用流的方式在页面上放置元素，每个块元素默认占据浏览器窗口的整个宽度； inline元素从左上流依次放置到右下，如果需要多于一行的空间，浏览器就新创建一行。

float

被float的元素，不影响其他元素的流式放置。

一般而言，被float的元素必须指定一个宽度，除了自带width的tag

一个含有clear属性的快元素，左边或右边不能再有float元素。

凝胶布局： 给块元素的内容区设个width，margin设为auto，那么就会有整个居中的效果

position

static 默认的，相对于页面的，元素还在正常的流中，top,bottom,left,right来设置相对页面的位置。

absolute： 相对父节点的位置， 关键在一个一旦被设为absolution，此元素就从正常的流中脱离，浏览器正常的流处理环节不知道该元素的存在，它会现实在正常流元素之上。

table布局， 可以解决上述两种方法布局的缺点，但是table是一个语意非常明确的html tag，只能用于显示表格数据，我们将其用来显示布局，显然不合适。

display:table 布局，可以具有table布局的优点，但没有table布局的缺点。

<div class=”container”>

<div class=”row”>

<div class=”cell”>CELL A</div>

<div class=”cell”>CELL B</div>

<div class=”cell”>CELL C</div>

</div>

</div>

.container {

display: table;

}

.container {

display: table;

}

.row {

display: table-row;

}

.cell {

display: table-cell;

width: 100px;

height: 100px;

border: 1px solid blue;

padding: 1em;

}

这段代码具有table显示的效果more info