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