HTML和CSS基础

本文内容主要是HTML和CSS基础知识的杂乱无章的回顾，所以知识点的出现无序的。

1. inline、block和inline-block

    block元素的前后总是有空行，可以设置margin等参数。而inline元素是嵌在block里面的，它的高度不可单独设置，且inline (div)内部不能嵌入block (div)。

    但有时候我们需要将block元素按inline方式布局，典型的例子就是页面顶部的下拉菜单栏。菜单项之间按inline布局（不开新行），但菜单项本身需要是个block，以便设置其布局参数、嵌入下级子菜单。这个时候就要将菜单项的显示方式设置为inline-block。

    注意：设置block属性仅改变元素显示方式，但不改变其“等级”。例如，对某个inline元素设置display为block，只是令浏览器开新行显示，但不能在其内嵌入block元素。

2. em和strong

    em用于口语强调，比如标记文章中某人说的一句话里的某个词；strong用于书面强调，比如标记某个关键的词。

3. <a>标签使用title属性添加标题。

4. <img>标签使用alt在需要时显示替代文字，同时也可使用title添加标题。

5. ul、ol和dl分别是un-ordered list、ordered list和description list的意思。

6. 当超链接指向下载资源时，使用download属性提供默认文件名 ：<a href="..." download="use_this_name.exe">some description</a>

7. img是inline标签。

8. 表单使用value提供默认值，使用placeholder提供输入提示。disabled将不会发送表单数据，readonly禁止用户修改内容。

9. Dropdown widget使用<select></select>，ComboBox使用input text + datalist模拟。

    <input type="text" name="name" placeholder="Enter your name here"/>

（嗯，好像cnblogs的编辑器屏蔽了placeholder属性？）

9. 使用<optgroup></optgroup>来给表单分组：

<form>
<select>
  <optgroup label="China">
    <option>Chang Cheng</option>
    <option>DOng Feng</option>
  </optgroup>
  <optgroup label="International">
    <option>Bie Mo Wo</option>
    <option>Fa La Li</option>
  </optgroup>
</select>
</form>

Chang ChengDOng FengBie Mo WoFa La Li

10. CSS伪类nth-of-type(...)

      表达式内的n从0开始计数，元素从1开始索引。因此，下面的表达式分别表示首个，第二个和第三个指定类型元素：

      nth-of-type(3n+1), nth-of-type(3n+2), nth-of-type(3n+3)

      与之类似的有nth-child(...)。区别在于，nth-of-type只对同级同类型子元素计数，nth-child对同级所有子元素计数。

11. rgba .vs. opacity

      background-color:rbga()透明背景，opacity透明整个元素。