HTML学习笔记

HTML入门学习笔记

201606上半月html入门学习笔记

• class较多使用，ID较少使用
• padding颜色和背景色相同，因为框内背景色一直铺到border
• IE常见bug及解决方案：
  1.盒模型bug——使用严格doctype声明
  2.双倍margin——“_display: inline;”（前面加“—”是为了不影响其他浏览器）
  3.不认识a:link——只用a{}，不加:link
  4.3倍像素margin bug——规范浮动与清除浮动
• margin重叠现象：
  1.上下相邻的普通元素（没有float），上下边距并非简单的相加，而是取其中较大的边距值。（有float就叠加，不重叠）
  2.父子嵌套也是“相邻”，所以父子div的margin合并，并共享，最终形成父margin的效果。（解决办法：用父元素padding-top代替子元素margin-top）
• a是个内联元素：
  a:link{ color: x1; }（a:link可简写为a{}）
  a:visited{ color:x2; }
  a:hover{ color:x3; }
  a:active{ color:x4; }（active状态一般不必写）
  *注意这四个的顺序是：LVHA
• title=“鼠标放上来显示的文字”
• background-attachment:fixed 就是固定在屏幕前的小窗口
• 在一个css中导入另一个css文件：
  @import url(xxx.css) 当前目录
  @import url(../xxx.css) 上级目录
• 锚点问题

    <a name="xxx"> </a>    

1.假设网页分为p1, p2, p3三部分，可以直接跳到#p1, #p2, #p3位置：

    <a href="xxx.html#p1">p1锚点</a>
    <a href="xxx.html#p2">p2锚点</a>
    <a href="xxx.html#p3">p3锚点</a>

2.在该网页直接转至index.html：

    <a href="index.html">index</a>

3.在新窗口中打开index.html：

    <a href="index.html" target="_blank">index</a>

• 导航栏常见于将内联转换为块状
  display: block;（显示为块级，内联转换为块状）
  display: inline;（显示为内联，块状转化为内联）
  display: none; （块状消失）
• 常见文档使用语句：
  text-index | text-align | text-decoration | letter-spacing
• 相对定位 position: relative
  相对于自己原来位置的偏移，且其他块不可移动到它原来的位置；
• 绝对定位 position: absolute
  从天上掉下来一样，不占实际位置；掉两个的话，第二个在前；
• 关于表单
  overflow: visible;
  overflow: hidden;
  overflow: auto;（有滚动条）
  overflow: scroll;（有滚动条，内容很多时会加条）
• 单选 ：

    <input type="radio" name="" value="" />

• 多选 “checkbox” :

    <select name="">
        <option value=""> xxx </option>
    </select>

• 常用字符实体
  &gt : >
  &lt : <
  &amp : &
  &quot : “”
  etc…
• 为了满足w3c标准，后边加上alt：

    <img src="xxx.gif" > alt=""/>