Yakecan's Blog

本文记录了HTML和CSS学习中的一些特殊用法，采用目录式结构，方便查询。

1. 设计模式基础

1.1. CSS语法详解

文件必须采用unicode utf-8作为编码格式
css代码必须小写
元素名称、类名和ID只能使用字母、数字、下划线_、连字符-和Unicode字符
使用空格分隔多个类名，可以将多个类同时赋值给一个元素
常量值不能加引号。如color:black是对的，而color:"black"是错的
反斜杠（\）可用于转义（插入特定情况下不能出现的字符）
字符串可以包含括号、逗号、空格、单引号（'）、双引号（"），但必须加反斜杠转义
每一个CSS规则和@import语句都必须以分号结束
使用花括号可以将多个规则组合成规则集
除非加双引号转换为一个字符串（如"}"），否则右花括号（}）表示一组属性结束
CSS注释以 /* 开头，以 */ 结束，注释不可以嵌套
CSS属性名若由多个单词组成，使用连字符-分隔单词，空格无效

1.1.1. 使用属性值

color:black;

black为常量，color属性可以赋值170多个颜色常量
background-color:white;
- background-color:rgb(100%,100%,100%);
- background-color:rgb(255,255,255);
- background-color:WindowInfoBackground;
  
  操作系统颜色常量，用驼峰格式表示；
  
  注意：每当给同一个元素指定相同属性时，新规则会覆盖钱一个规则，这里一行中包含了4个background-color规则，最终生效的是最后一个规则。
font-style:italic;<normal,oblique>
font-size:20px;

大多数属性都支持不同的度量单位，有px（像素）、em（字体或font-size的高度）、ex（字母x的高度）、pt（点距，即1/72英寸）、in（英寸）、cm（厘米）、mm（毫米）、pc（12点活字，即12个点距或1/6英寸）
font-family:"Century Gothic",verdana,arial,sans-serif;

一组以逗号分隔的字体名称，如果一种字体无效，那么浏览器会使用第二种字体，以此类推。最后一种字体必须是常用字体：serif、sans-serif、cursive、fantasy、monospace。如果字体名带有空格，必须加上引号
line-hight:150%;

将行高设为font-size值的150%
margin:1em;

将margin设置为字号的1倍大小（即font-size乘以1）
border:4px double black;

将边框设置为宽4像素的黑色双实线，border使用3个空格分隔的值，分别表示边框宽度、样式和颜色，可以任意排列，border是border-width、border-style和border-color的简写属性，其他的简写属性还有background, font, liststyle, margin, padding
background-image:url("gradient.jpg");

使用url函数设置图片，url函数只有一个参数为文件的URL。当URL包含空格时必须添加双引号。
background-repeat:repeat-x;

将background-repeat设置为常量值repeat-x。还可以设置为repeat-y、repeat或no-repeat
margin:0;

0是唯一不适用度量单位的值。
font-weight:900;

将font-weight设置为常量900，这个数值实际上是一个常量。浏览器一般支持normal和bold，而bolder、lighter、100、200、…、900支持较差。

在属性名称之前加上数字1或任意字符，就可以禁用一个规则

1.1.2. 使用层叠顺序

选择器分组的优先级排序：

最高优先级：添加了!important规则的分组，会覆盖所有不含!important的规则

#i100{border:6px solid black !important;}
第二优先级：style属性所嵌入的规则，但是style属性的代码难以维护，不推荐使用
第三优先级：具有一个或多个ID选择器的规则

#i100{border:6px solid black;}
第四优先级：具有一个或多个类、属性或伪选择器的规则

*.c10{border:4px solid black;}
第五优先级：具有一个或多个元素选择器的规则

div{border:2px solid black;}
最低优先级：只包含通配选择器的规则

*{border:0px solid black;}

如果竞争规则属于同一个选择器分组，优先级会根据选择器的类型和数量进行比较，具有更多高优先级选择器的选择器分组优先级更高。

如果竞争规则选择器分组、选择器的类型和数量都相同，会进一步按照位置优先级进行比较：

最高优先级：HTML文档头部的<style>元素
第二优先级：<style>元素中@import导入的样式表
第三优先级：<link>元素附加的样式表
第四优先级：<link>元素附加的样式表中，@import语句导入的样式表
第五优先级：最终用户附加的样式表
最低优先级：浏览器提供的默认样式表

1.1.3. 简化层叠顺序

减少样式表数量、不使用@import语句、避免!important操作符、对选择器按照层叠顺序在css中进行排序：

/*通配选择器*/
/*元素选择器*/
/*类\属性\伪选择器*/
/*ID选择器*/

/*!important 通配选择器*/
/*!important 元素选择器*/
/*!important 类\属性\伪选择器*/
/*!important ID选择器*/

1.1.4. CSS属性与值：常用

i表示属性是继承的

表 1. CSS属性与值：常用
属性名	属性常用值	功能/备注
background-color	transparent, COLOR
background-image	none, url("file.jpg")
background-repeat	repeat, repeat-x, repeat-y, no-repeat
background-attachment	scroll, fixed
background-position	0% 0%, H% V%, H V, left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
border	WIDTH STYLE COLOR
border-width	medium, LENGTH, thin, thick
border-style	none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color	black, COLOR
border-left/right/top/bottom-width/style/color	与上述border对应的值，分别对应
cursor	auto, default, pointer, help, wait, progress, move, crosshair, text, n-resize, s-resize, e-resize, w-resize	i
display	inline,none,block,inline-block,list-item,table-cell,table,table-row
visibility	visible,hidden	i

1.1.5. CSS属性与值：内容

内容属性适用于除表格行外的所有元素

表 2. CSS属性与值：常用
属性名	属性常用值	功能/备注
clear
color
direction
etter-spacing
float
font
font-family
font-size
font-style
font-variant
font-weight
left
margin
margin-left/right/top/bottom
overflow
position
right
text-indent
text-align
text-decoration
text-transform
text-align
unicode-bidi
vertical-align
white-space
word-spacing
z-index

1.1.6. CSS属性与值：内容

内容属性适用于除表格行外的所有元素

表 3. CSS属性与值：内容
属性名	属性常用值	功能/备注
padding[-left/right/top/bottom]	0, LENGTH

font	caption, icon, menu, message-box, small-caption, status-bar	i
font-family	serig, FONTLIST, sans-serif, monospace, fantasy, cursive	i
font-size	medium, LENGTH, %ParentElementFontSize, xx-small, x-small, smaller, small, large, larger, x-large, xx-large	i
font-style	normal, italic, oblique	i
font-variant	normal, small-caps	i
font-weight	normal, lighter, bold, bolder, [1-9]00	i

text-decoration	none, underline, line-through, overline	i
text-transform	none, lowercase, uppercase, capitalize	i
direction	ltr, rtl	i
unicode-bidi	normal, bidi-override, embed

line-height	normal, LENGTH, %FontSize, MULTIPLIER	i
letter-spacing	normal, LENGTH	i
white-space	normal, pre, nowrap	i
word-spacing	normal, LENGTH	i

color	#rrggbb, #rgb, rgb(RED,GREEN,BLUE), rgb(RED%,GREEN%,BLUE%), …	i 颜色对照表

1.1.7. CSS属性与值：布局

表 4. 浮动属性适用于除单元格和行以外的所有元素
属性名	属性常用值	功能/备注
float	none, left, right

表 5. 复位属性适用于除行内、行内块、单元格和行以外的所有元素

clear	none, left, right, both

表 6. 定位属性适用于除单元格和行以外的所有元素

position	static, relative; absolute, fixed
left	auto, LENGTH, %WidthOfContainingBlock
right	auto, LENGTH, %WidthOfContainingBlock
top	auto, LENGTH, %HeightOfContainingBlock
bottom	auto, LENGTH, %HeightOfContainingBlock
z-index	auto, INTEGER

表 7. 水平外边距属性适用于除单元格和行以外的所有元素

margin	0, LENGTH, %WidthOfContainingBlock, auto
margin-left/right	0, LENGTH, %WidthOfContainingBlock, auto

表 8. 垂直外边距属性适用于除行内、单元格和行以外的所有元素

margin	0, LENGTH, %WidthOfContainingBlock, auto
margin-top/bottom	0, LENGTH, %WidthOfContainingBlock, auto

表 9. 宽度属性适用于除行内与行以外的所有元素

width	auto, LENGTH, %WidthOfContainingBlock
min-width	0, LENGTH, %WidthOfContainingBlock
max-width	none, LENGTH, %WidthOfContainingBlock

表 10. 高度属性适用于除行内与行以外的所有元素

height	auto, LENGTH, %HeightOfContainingBlock
min-height	0, LENGTH, %HeightOfContainingBlock
max-height	none, LENGTH, %HeightOfContainingBlock
overflow	0, LENGTH, %WidthOfContainingBlock, auto

表 11. 内容布局属性适用于除行内、表格和行以外的所有元素

text-indent	0, LENGTH, %WidthOfContainingBlock	i
text-align	left, center, right, justify	i
overflow	visible, hidden, auto, scroll

1.1.8. CSS属性与值：专用

内容属性适用于除表格行外的所有元素

表 12. 列表属性仅适用于列表元素
属性名	属性常用值	功能/备注
list-style	TYPE POSITION IMAGE	i
list-style-type	disc, circle, square, none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman	i
list-style-position	outside, inside	i
list-style-image	none, url("file.jpg")	i

表 13. 表格属性仅适用于表格元素

border-collapse	separate, collapse	i
table-layout	auto, fixed

表 14. 单元格属性仅适用于单元格元素

vertical-align	baseline, bottom, middle, top

表 15. 行内属性仅适用于行内和行内块元素

vertical-align	baseline, LENGTH, #LineHeight, text-bottom, text-top, middle, top, bottom

表 16. 换页属性仅适用于块和表格元素

page-break-after	auto, always, avoid
page-break-before	auto, always, avoid

1.1.9. 选择器

表 17. 选择器
选择器	注释
* {}	选择所有元素
p {}	选择所有<p>元素
*.c {}	选择所有class="c"的元素
p.c {}	选择所有class="c"的<p>元素
#main {}	选择id="main"的一个元素
a:link {}	选择所有未访问的超链接
a:visited {}	选择所有已访问的超链接
a:hover {}	选择所有鼠标悬停的超链接
a:active {}	选择当前激活的超链接
a:focus {}	选择所有聚焦的超链接
p:first-letter {}	选择所有<p>元素的第一个字母
p:first-line {}	选择所有<p>元素的第一行
p:first-child {}	选择所有<p>元素的第一个子元素
tr:nth-child(even) {}	选择表格的偶数行
tr:nth-child(2n+0) {}	同上
tr:nth-child(10n+9) {}	选择第9、19、29……行
#n *.c :first-line {}	后代元素选择器示例
#n > *.c > :first-line {}	子元素选择器实例
#n + *.c + :first-line {}	友邻元素选择器示例
#n , *.c , :first-line {}	给不同的选择器应用相同的属性
*[title] {}	选择所有带title属性的元素
*[title="WORD"] {}	选择所有title属性包含"WORD"的元素
*[title="EXACT_MATCH_OF_ENTIRE_VALUE"] {}	选择与属性值完全匹配的所有元素

1.1.10. 媒体查询

CSS支持设置与媒体相关联的样式表，它们可以适合不同媒体类型的显示。

更多信息见：W3S媒体查询

常见媒体特性：

width, device-width
height, device-height
orientation
aspect-ratio, device-aspect-ratio
color, color-index
monochrome（如果不是monochrome设备，则等于0）
resolution
scan（指tv输出设备的扫描过程）
grid（指输出设备为栅格型或位图型）

1.1.11. 灵活尺寸单位

1.1.12. 固定度量单位

1.1.13. 96dpi下度量单位的换算

1.1.14. 96dpi下的常用字号

1.1.15. 过渡、动画与2D变换

过渡：允许CSS属性值在指定时间间隔内平滑地变化，在属性值发生变化时触发

动画：允许CSS属性值在指定时间间隔内平滑地变化，在动画属性生效时执行

1.1.16. 修复CSS错误

检查顺序

验证HTML文档的有效性，保证无语法问题
验证每一个CSS样式表
1. 保证在非零度量值之后使用正确的度量单位
2. 保证属性名称与值之间只有一个冒号
3. 保证每一条规则均以分号（；）结尾
使用Mozilla浏览器的错误控制台，检查CSS解析错误清单
确认选择器选择且只选择了全部应该选择的元素，只需要在选择器中添加outline:2px solid invert;，就能够看到选择器的结果。
仔细检查每一个没有成功应用的规则的层叠优先级
确认样式表中元素、类和ID的大小写与HTML文档的大小写完全匹配
仔细检查简写属性，是否遗漏了属性值，因为简写属性会将值赋给它所代表的全部属性。
1. 包括margin, border, padding, background, font和list-style
2. font是一个非常复杂的简写属性，且所有值都可以继承，一定要小心
确认浏览器加载了所有的样式表
避免使用@import语句，尽量写在样式表开头，保证它的优先级低于样式表中的其他规则
确认样式表加载顺序符合要求，讲<link>和@import语句按优先级升序排列
确认服务器是将text/css作为CSS样式表的Content-Type头信息发送
删除CSS样式表中可能存在的HTML元素，如<style>，且一定要删除HTML文档头部不小心添加的所有<style>子元素

1.2. HTML设计模式

1.2.1. HTML结构

表 18. HTML结构
容器	内容
<html>	<head><body>
<head>	<title> & (<meta>\|<link>\|<object>\|<script>\|<base>)
<body>	<noscript><div>
<noscript>	行内/
块	<article>
行内/	块
<section>	行内/
块	<nav>
行内/	块
<div>	行内/
块	<h1>
行内	<p>
行内	<ol>或<ul>
<li>	<li>
行内/	块
<dl>	<dt><dd>
<dt>	行内
<dd>	行内/
块	<table>
<caption><colgroup><thead><tfoot><tbody>	<caption>
行内	<colgroup>
<col>	<col>
null	<thread>
<tr>	<tfoot>
<tr>	<tbody>
<tr>	<tr>
<th><td>	<th>
行内/	块
<td>	行内/
块	<form>
行内/	块（<form>除外）
<fieldset>	行内/
块（<form>除外）	<label>
行内/	块（<label>除外）
<input>	null
<textarea>	文本
<select>	<optgroup>/
<option>	<optgroup>
<option>	<option>
文本	<button>
行内/	块（<a>、<form>、控件除外）
<address>	行内
<a>	行内（<a>除外）
<img>	null
<canvas>	null
<audio>	null
<video>	null
<map>	<area>
<area>	null
<object>	<param>/
行内/	块
<param>	null
<br>	null
null	无内容；带结束斜线的单个标签（如<br />）
文本	Unicode文本，包括解析和替换的HTML实体

表 19. 块级元素，包括结构块、多功能块、终止块

结构块	-<ol> <ul> <dl> <table> <tr> <thead> <tfoot> <tbody> <colgroup> <col>
多功能块	<div> <li> <dd> <td> <th> <form> <noscript>
终止块	<h1> <p> <dt> <caption> <address> <blockquote>

表 20. 行内元素，包括以下3个大类和6个小类的行内元素

行内语义	包括由以下若干元素表示的文本
重要性	<span> <em> <strong>
短语	<a> <cite> <code> <kbd> <samp> <var>
单词	<abbr> <dfn> <cite>
字符	<sub> <sup>
行内流动	<br> <bdo>
行内块式	包括替换元素和表单控件
替换	<img> <object> <embed> <iframe> <audio> <video> <canvas> <svg>
控件	<input> <textarea> <select> <button> <label> <video> （包括控件属性）

2. 设计模式方法

2.1. 旁注下沉图片文本替换

mgd.html

<!DOCTYPE html>
<html lang="en">
 <head>
    <title>Marginal Graphic Dropcap</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 </head>

 <body>

 <h1>Marginal Graphic Dropcap</h1>

  <p class="indent"><span class="graphic-dropcap" >M<span></span></span>arginal
   Graphic Dropcap. The letter M has been covered by the dropcap image.
   Screen readers read the text and visual users see the image.
   If the browser cannot display the dropcap image,
   the text becomes visible.</p>

 </body>
</html>

page.css

//将段落相对定位，增加120px的左外边距
*.indent               { position:relative;  margin-left:120px; }

//将下沉内容绝对定位，移到段落最左边，设置为与下沉图片相同尺寸
*.graphic-dropcap      { position:absolute;
                         width:120px; height:90px; left:-120px; top:0; }

//下沉图片的span绝对定位，移到下沉文本之上，用背景图覆盖文本
*.graphic-dropcap span { position:absolute;
                         width:120px; height:90px; margin:0; left:0; top:0;
                         background:url("m.jpg") no-repeat; }

效果：

3. HTML模板

3.1. 基础结构

基础结构

<!DOCTYPE html>

<html lang="en">

<head><title>HTML Structure</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="site.css" media="all" type="text/css"/>
  <link rel="stylesheet" href="page.css" media="all" type="text/css"/>
  <link rel="stylesheet" href="print.css" media="print" type="text/css"/>
  <!--[if lte IE 6]>
  <link rel="stylesheet" href="ie6.css" media="all" type="text/css"/>
  <![endif]-->
</head>
<body>
<noscript>Show this when script cannot run.</noscript>
<div>
  <h1>HTML Structure</h1>

  <p>Paragraph</p>

  <ol>
    <li>Ordered List Item</li>
    <li>Ordered List Item</li>
  </ol>
  <ul>
    <li>Unordered List Item</li>
    <li>Unordered List Item</li>
  </ul>
  <dl>
    <dt>Definition Term</dt>
    <dt>Definition Term</dt>
    <dd>Definition Data</dd>
    <dd>Definition Data</dd>
  </dl>

  <table>
    <caption>Table Caption</caption>
    <colgroup>
      <col/>
      <col/>
    </colgroup>
    <thead>
    <tr>
      <td>row1-col1</td>
      <td>row1-col2</td>
    </tr>
    </thead>
    <tfoot>
    <tr>
      <td>row3-col1</td>
      <td>row3-col2</td>
    </tr>
    </tfoot>
    <tbody>
    </tbody>
  </table>

  <form id="form1" method="post" action="http://www.tipjar.com/cgi-bin/test">
    <input type="hidden" title="input hidden" name="hidden" value="Secret"/>

    <input id="radio1" name="radios" type="radio" value="radio1" checked="checked"/>
    <label for="radio1">Radio1</label>

    <input id="radio2" name="radios" type="radio" value="radio2-pushed"/>
    <label for="radio2">Radio2</label>

    <input id="xbox1" name="xbox1" type="checkbox" value="xbox1" checked="checked"/>
    <label for="xbox1">Checkbox1</label>

    <label for="inputtext">Input-text</label>
    <input id="inputtext" name="inputtext" type="text" value="Type here" size="14"/>

    <label for="select1">Select</label>
    <select id="select1" name="select" size="2">
      <option selected="selected" value="item1">Item1</option>
      <option value="item2">Item2</option>
    </select>

    <label for="textarea">Textarea</label>
    <textarea id="textarea" name="textarea" rows="2" cols="10">Textarea</textarea>

    <input type="submit" id="submit1" name="submit1" value="Submit"/>
    <input type="reset" id="reset1" name="reset1" value="Reset"/>
    <button type="submit" id="button1" name="button1" value="Button1">Button</button>
  </form>

  <div>Division within a Division <a id="link1" href="left.html">Link</a>
    <img src="left-right.gif" width="20" height="20" usemap="#map1" alt="alt text"/>
    <map id="map1" name="map1">
      <area href="left.html" alt="left" shape="rect" coords="0,0,10,20"/>
      <area href="right.html" alt="right" shape="rect" coords="10,0,20,20"/>
    </map>

    <span>span</span>
    <em>em</em>
    <strong>strong</strong>
    <cite>cite</cite>
    <code>code</code>
    <kbd>kbd</kbd>
    <samp>samp</samp>
    <var>var</var>
    <abbr>abbr</abbr>
    <dfn>dfn</dfn>
    <sub>sub</sub>
    <sup>sup</sup>
    <bdo dir="rtl">backwards</bdo>

    <object type="application/x-shockwave-flash">
      <param name="movie" value="http://myserver.com/movie.swf">
      <param name="allowfullscreen" value=true>
    </object>
  </div>
  <article>
    <header>
      <h1>My blog post</h1>

      <p>
        <time pubdate datetime="2011-10-07T10:00-08:00"></time>
      </p>
    </header>
    <p>The article element represents a self-contained composition in page that is independently distributable or
      reusable, e.g. in syndication.</p>
    <footer>
      <a href="?comments=1">Show comments...</a>
    </footer>
  </article>
  <section>
    <h1>First section heading</h1>

    <p>
      The section element represents a generic section of a document (thematic grouping of content).
    </p>
  </section>
  <section>
    <h1>And one more section</h1>

    <p>A page could be split into sections for an introduction, news items, contact information, etc.</p>
  </section>
  <nav>
    <h1>Some Navigation</h1>
    <ul>
      <li><a href="articles.html">Index of articles</a></li>
      <li><a href="contact.html">Contact information</a></li>
    </ul>
    <p>A nav element doesn't have to contain a list, it can contain other kinds of content as well.</p>
  </nav>
  <address>address</address>
</div>
</body>
</html>

效果：

3.2. 页头元素

页头元素

<!DOCTYPE html>
<html lang="en">

 <head>
  <title>Header Elements</title>

  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />


  <!-- 添加样式表链接 -->
  <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
  <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
  <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
  <!--[if lte IE 6]>
  <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
  <![endif]-->


  <!-- 添加其他用户可以应用的样式表（可选） -->
  <link rel="alternate stylesheet" type="text/css" title="cool" href="cool.css" />
  <link rel="alternate stylesheet" type="text/css" title="hot"  href="hot.css"  />



  <!-- 添加仅应用于本页面的样式规则（可选） -->
  <style type="text/css" media="all">
   body  { margin:0px; padding:20px; padding-top:0px; width:702px;
          font-family:verdana,arial,sans-serif; font-size:medium; }
   h1    { margin:10px 0 10px 0; font-size:1.9em;  }
  </style>



  <!-- 添加JavaScript文件链接（可选） -->
  <script type="text/javascript" src="script.js" ></script>


  <!-- 添加仅应用于本页面的Javascript代码（可选） -->
  <script type="text/javascript" ><!--
   alert("Hello World!");
  --></script>

 </head>

 <body> <h1>Header Elements</h1> <p>Look at the source to see the header</p></body>
</html>

3.3. 结构块元素

结构块元素

<!DOCTYPE html>
<html lang="en">
<head><title>Structural Block Elements</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

 <h1>Structural Block Elements</h1>
<!-- 有序列表 -->
  <ol>
    <li>                            </li>
    <li>  One or more list items... </li>
  </ol>

<!-- 无序列表 -->
  <ul>
    <li>                            </li>
    <li>  One or more list items... </li>
  </ul>

<!-- 定义列表 -->
  <dl>
    <dt>                                  </dt>
    <dt>  One or more definition terms... </dt>
    <dd>                                  </dd>
    <dd>  One or more definitions...      </dd>
  </dl>

<!-- 表格 -->
  <table>
   <caption> One optional caption per table. </caption>
   <colgroup> <col /> <col /> </colgroup>
    <thead>
      <tr>
        <th> One or more header cells in a row...  </th>
        <td> One or more data cells  in a row...   </td>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th> One or more rows in a row group...    </th>
        <td>                                       </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th> Zero or more row groups in a table... </th>
        <td>                                       </td>
      </tr>
    </tbody>
  </table>

<!-- 节 -->
  <div> <div> <div> ... </div> </div> </div>

</body>
</html>

3.4. 终止块元素

终止块元素，指不能包含其他块元素的块元素。

终止块元素

<!DOCTYPE html>
<html lang="en">
<head><title>Terminal Block Elements</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

<h1>Terminal Block Elements</h1>

<p>
  Headings, paragraphs, blockquotes, definition terms, addresses,
  和 table captions 均为终止块元素. 它们只包含内容。如果将块元素放置在终止块元素中，HTML验证程序将声明文档无效。
</p>

<blockquote> blockquote 是一个终止块</blockquote>

<dl>
  <dt>注意:</dt>
  <dd>终止块的内容均在行内</dd>
</dl>

<address> address 是一个终止块</address>

<table>
 <caption>Table caption 是一个终止块.</caption>
 <tr><td></td></tr>
</table>

</body>
</html>

3.5. 多功能块元素

多功能块元素

<!DOCTYPE html>
<html lang="en">
<head><title>Multi-purpose Block Elements</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

<noscript>若script不能运行则展示该部分</noscript>

<div>
 <div>
  <h1>多功能块元素</h1>
 </div>
</div>

<!-- 下面的代码是无效的HTML，其结构不正确 -->
<ol>
  This content is inside a list but is not inside a list item like it should be.
  <li> This content is properly nested in a list item. </li>
  This content outside a list item invalidates and destroys the structure of a list.
</ol>

<!-- 下面的代码是有效的HTML，因为HTML的DTD中存在漏洞，但是其结构仍然不正确 -->
<div>
  Compare the mixed content in this division with that of the preceding list.
  <div> This content is inside a nested structural division. </div>
  This <em>mixed content</em> is not invalid, but it destroys the block structure
  and requires a browser to create <em>anonymous blocks</em> in which to render it.
</div>

<!-- 下面的表单包含块，块中加入了控件 -->
<form id="form1" method="post" action="http://www.tipjar.com/cgi-bin/test" >
 <ul>
  <li> <input type="checkbox" id="xbox1" name="xbox1" value="xbox1" />
       <label for="xbox1">Checkbox1</label></li>
  <li> <input type="submit" id="submit1" name="submit1" value="Submit" /> </li>
 </ul>
</form>

</body>
</html>

3.6. 行内元素

行内元素

<!DOCTYPE html>
<html lang="en">
<head><title>Inline Elements</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

 <h1>Inline Elements</h1>
 <h2>Italicized</h2>
 <code>&lt;em&gt;      </code>  <em>emphasized</em>                   <br />
 <code>&lt;cite&gt;    </code>  <cite>citation 引文</cite>                 <br />
 <code>&lt;var&gt;     </code>  <var>computer variable</var>          <br />
 <code>&lt;dfn&gt;     </code>  <dfn>definition</dfn>                 <br />

 <h2>Bold</h2>
 <code>&lt;strong&gt;  </code>  <strong>strongly emphasized</strong>  <br />

 <h2>Monospace 等宽字体</h2>
 <code>&lt;code&gt;    </code>  <code>computer code 计算机代码</code>            <br />
 <code>&lt;kbd&gt;     </code>  <kbd>key press 按键 </kbd>                  <br />
 <code>&lt;samp&gt;    </code>  <samp>sample computer output 计算机输出样本</samp>   <br />

 <h2>Underlined</h2>
 <code>&lt;a&gt;       </code>  <a href="#">a</a>                     <br />
 <code>&lt;acronym&gt; </code>  <acronym title="a" >acronym 首字母缩写</acronym> <br />
 <code>&lt;abbr&gt;    </code>  <abbr title="a" >abbreviation 缩写、简写</abbr>  <br />

 <h2>Vertical-aligned</h2>
 <code>&lt;sup&gt;     </code>  superscript 上标<sup>1</sup>               <br />
 <code>&lt;sub&gt;     </code>  subscript 下标<sub>1</sub>                 <br />

</body>
</html>

3.7. 类和ID属性

3.8. HTML空白字符

HTML空白字符

<!DOCTYPE html>
<html lang="en">
<head><title>HTML Whitespace</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
 <![endif]-->
</head>

<body>

<h1>HTML Whitespace</h1>
<p>     start    middle  &#x0020; &#x0009;  <span> </span>    <span></span>
                                      &#x000A; &#x000D;  	  end      </p>

<h2>Controlling Where Whitespace Collapses</h2>
<p>start<span class="border">  middle </span> end<em>—inside element</em></p>
<p>start <span class="border"> middle</span>  end<em>—outside element</em></p>

<h2>Embedding Whitespace Inside Tags 在标签内嵌入空格 </h2>
 <p>start<span
          class
           =
            "spaced"
             >middle</span
              >end</p>

<h2>Embedding Space Entities 嵌入空间实体</h2>
<code>&amp;zwnj;   </code><span class="border">&zwnj;</span>    &nbsp;
<code>&amp;thinsp; </code><span class="border">&thinsp;</span>  &nbsp;
<code>&amp;nbsp;   </code><span class="border">&nbsp;</span>    &nbsp;
<code>&amp;ensp;   </code><span class="border">&ensp;</span>    &nbsp;
<code>&amp;emsp;   </code><span class="border">&emsp;</span>    &nbsp;


</body>
</html>

4. CSS选择器与继承

4.1. 类型选择器

4.2. 位置选择器

4.3. 属性选择器

4.4. 伪元素选择器

4.5. 伪类选择器

4.6. 子类选择器

4.7. 继承

4.8. 可视化继承

【前端笔记】HTML和CSS

1. 设计模式基础

1.1. CSS语法详解

1.1.1. 使用属性值

1.1.2. 使用层叠顺序

1.1.3. 简化层叠顺序

1.1.4. CSS属性与值：常用

1.1.5. CSS属性与值：内容

1.1.6. CSS属性与值：内容

1.1.7. CSS属性与值：布局

1.1.8. CSS属性与值：专用

1.1.9. 选择器

1.1.10. 媒体查询

1.1.11. 灵活尺寸单位

1.1.12. 固定度量单位

1.1.13. 96dpi下度量单位的换算

1.1.14. 96dpi下的常用字号

1.1.15. 过渡、动画与2D变换

1.1.16. 修复CSS错误

1.2. HTML设计模式

1.2.1. HTML结构

2. 设计模式方法

2.1. 旁注下沉 图片文本替换

3. HTML模板

3.1. 基础结构

3.2. 页头元素

3.3. 结构块元素

3.4. 终止块元素

3.5. 多功能块元素

3.6. 行内元素

3.7. 类和ID属性

3.8. HTML空白字符

4. CSS选择器与继承

4.1. 类型选择器

4.2. 位置选择器

4.3. 属性选择器

4.4. 伪元素选择器

4.5. 伪类选择器

4.6. 子类选择器

4.7. 继承

4.8. 可视化继承

2.1. 旁注下沉图片文本替换