HTML和CSS基础

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

1. inline、block和inline-block

    一个block元素单独占据一行，默认填满其父元素宽度，即使为其设置了width也仍然占据一行；而相邻inline元素在一行内连续显示，直到该行满[注]。一般来说，block元素内可以包含block和inline元素，但inline元素内只能包含inline元素。

    inline元素只能设置横向的width、padding和margin，上下方向无效。

    可以通过display属性修改元素的默认布局。

    [注]该行满是一个比较口语化的说法。具体就是：如果相邻inline之间有间隙（空格），那么到达浏览器窗口边界就换行；如果没有空隙，那么即使到达窗口边界也不换行，直到遇到间隙。

    有时候我们需要将元素按inline方式布局（不占整行），但又要可以设置其高度：即相邻元素按inline布局，而元素内容以block呈现。典型的例子就是下拉菜单栏。菜单项之间按inline布局（不开新行），但菜单项本身需要是个block，以便设置其高度等布局参数。这个时候就要将菜单项的显示方式设置为inline-block：相邻元素布局inline，元素内部内容block。这种布局也可以用于自动调整block元素宽度，比如这样：

<p style="display: inline-block; border-bottom: 1px solid orange;">inline-block段落</p>

效果如下：

inline-block段落

如果不使用inline-block布局，border-bottom就会占据整行。

    注意：设置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 Cheng DOng Feng Bie Mo Wo Fa 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透明整个元素。

12. viewport

      viewport指的是你当前能在browser里看到的部分，滚动条以外的部分不计入内。

12. 限制图片宽度不超过其父元素

      默认情况下，如果下级元素size超过父元素，就会溢出到父元素外面。我们可以设定下级元素的max-width来防止溢出。比如某个div box的width为200px，但想要放在里面的图片的原始宽度为400px，可以这样：

      img {
          max- 100%;
      }

13. 我们知道不同的浏览器的默认风格以及在解析HTML和CSS的时候会有稍许不同；所以我们最好需要一个规格化的CSS给予不同浏览器一个统一的初始style。

      参见：http://necolas.github.io/normalize.css/

14.