css设计指南第一章

1 文本元素使用闭合标签

标签格式:<标签>内容

2 引用内容用自闭和标签

<标签名 属性1="" 属性2="" /> , 自闭和标签只是给浏览器提供一个要展示内容的引用,浏览器加载HTML时,额外向服务器发送请求,以获取自闭合标签引用的内容.

3 复合元素 用于创建表格 列表 表单等复杂用户界面的标记,由多个标签共同组成.

4 嵌套标签

橘子
苹果
西瓜

ol标签是 li的父标签(父元素). li标签是 ol标签的子标签(子元素).

That car is fast.

5 HTML模板

 声明是html文档







//网页内容展示

• HTML注释内容

6 块级元素 行内元素

块级元素:

• 所有块级元素的父元素都是
• 块级元素宽度默认与浏览器窗口一样 有少许间隔.这也是其自动换行的原因
• 可设置宽高 margin padding

行内元素:

• 行内元素盒子尽可能的收缩包裹 这也是行内元素可以并排显示一行.
• 设置宽高 无效.
• 可设置 margin padding

常见的块级元素:

...
 6级标签 
段落



 独立引用

常见的行内元素:

  加粗
  斜体
 超链接
 图片
李白 包裹作者
JS 简写
窗前明月光,疑是地上霜,李白,JS


文本内引用

7 DOM 文档对象模型

实例代码如下:

The Document Object Model
The page's HTML markup structure defines the DOM.

示例代码的DOM层次如下:

• section 是 h1 p的父元素 也是其直接祖先元素
• h1 p 是section的子元素,也是其直接后代元素
• h1 p 是同胞元素,他们有共同的父元素 section
• section h1 p是 body的后代元素 或者下面的元素
• body section是h1 p的祖先元素 或者上面的元素

小结:文档流效果, HTML元素会按照他们各自在标记中出现的的先后顺序,依次从页面上方流向下方. 浏览器的样式表之所以提供这种流动式效果,就是为了让那些简单却正确标记的HTML的内容,能够以朴素却可用的方式显示出来.
CSS的妙处就是把这种默认显示效果,转换为既有吸引力又直观的页面设计.