HTML 不是一种编程措辞，而是一种标记措辞 (markup language)
标记措辞是一套标记标签 (markup tag)
HTML 利用标记标签来描述网页
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 供应的新元素和新的 API 简化了 web 运用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
CSS 是一种描述 HTML 文档样式的措辞。
CSS 描述该当如何显示 HTML 元素。
CSS 用于掌握网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 被拆分为"模块"。紧张包括盒子模型、列表模块、超链接办法、措辞模块、背景和边框、笔墨殊效、多栏布局等模块。
CSS3的新特色有很多，例如圆角效果、图形化边界、块阴影与笔墨阴影、利用RGBA实现透明效果、渐变效果、利用@Font-Face实现定制字体、多背景图、笔墨或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。
1 标注效果要实现如下效果：
HTML5:
<ruby>少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt></ruby>，<ruby>乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt></ruby>。2 与文本换行干系的属性利用解释
line-break
用于指定如何（或是否）断行。除了Firefox，其它浏览器都支持。取值包括：auto，利用缺省的断行规则分解文本；loose，利用最疏松的断行规则分解文本，一样平常用于短行的情形，如报纸；normal，利用最一样平常的断行规则分解文本；strict，利用最严格的断行原则分解文本。
word-wrap
许可长单词或URL地址换行到下一行。所有浏览器都支持。取值包括：normal，只在许可的断字点换行（浏览器保持默认处理）；break-word，在长单词或 URL 地址内部进行换行。
word-break
定义文本自动换行。Chrome和Safari浏览器支持不足友好。取值包括：normal：为默认值，许可在字内换行;keep-all,对付中文、韩文、日文，不许可字断开；break-all，与normal相同，许可非亚洲措辞文本行的任意字内断开。
white-space
设置如何处理元素中的空格。所有浏览器都支持。取值包括：normal，默认处理办法；pre，显示预先格式化的文本，当笔墨超出边界时不换行；nowrap， 逼迫在同一行内显示所有文本，合并文本间的多余空缺，直到文本结束或者遭遇br工具；pre-wrap，显示预先格式化的文本，不合并笔墨间的空缺间隔，当笔墨碰到边界时发生换行；pre-line， 保持文本的换行，不保留笔墨间的空缺间隔，当笔墨碰到边界时发生换行。
3 text-shadow要实现的效果：
CSS3：
p { text-align: center; font: bold 60px helvetica, arial, sans-serif; color: #fff; text-shadow: black 0.1em 0.1em 0.2em;}要实现的效果：
CSS3：
p { text-align: center; font:bold 60px helvetica, arial, sans-serif; color: red; text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;}要实现的效果：
CSS3：
p { text-align: center; padding: 24px; margin: 0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; color: #D1D1D1; background: #CCC; text-shadow: -1px -1px white, 1px 1px #333;}要实现的效果：
CSS3：
p { text-align: center; padding: 24px; margin: 0; font-family: helvetica, arial, sans-serif; font-size: 80px; font-weight: bold; color: #D1D1D1; background: #CCC; text-shadow: 1px 1px white, -1px -1px #333;}4 border的transparent属性要实现的效果：
CSS3：
#demo { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}要实现的效果：
CSS3：
#demo { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}要实现的效果：
CSS3：
#demo { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}要实现的效果：
CSS3：
#demo { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent;}5 transform: rotate要实现的效果：
CSS3和HTML5：
<style type="text/css">.bubble { width: 200px; /定义框大小，可忽略，让框自由紧缩/ height: 50px; background:hsla(93,96%,62%,1); /定义背景色，必须与下面箭头背景色同等/ padding: 12px; /增加补白，防止文本跑到框外/ position: relative; /定义定位包含框，方便定位箭头/ -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; /圆角/}.bubble:before { content: ""; /不显示任何内容/ width: 0; /定义箭头内容区大小/ height: 0; position: absolute; /绝对定位/ z-index:-1; /显示在框下面/}.bubble.bubble-left:before { right: 90%; top: 50%; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); transform: rotate(-25deg); /定位箭头倾斜角度/ /定义箭头是非、粗细/ border-top: 20px solid transparent; border-right: 80px solid hsla(93,96%,62%,1); border-bottom: 20px solid transparent;}div { margin:50px;}<div class="bubble bubble-left">左侧提示框<br>class="bubble bubble-left"</div>6 background: repeating-linear-gradient要实现的效果：
CSS3：
html, body { margin: 0; padding: 0; height: 100%;}body { background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px); background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px ); background-size: 100% 30px; position: relative;}body:before { content: ""; display: inline-block; height: 100%; width: 4px; border-left: 4px double #FCA1A1; position: absolute; left: 30px;}须要实现的效果：
CSS3：
.box { background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px); color: #fff; padding: 12px 24px;}7 实现选项卡效果
<script>function setTab(cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById("tab_"+i); var con=document.getElementById("con_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; }}</script><div id="tab"> <div class="Menubox"> <ul> <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li> <li id="tab_2" onclick="setTab(2,4)">搞笑</li> <li id="tab_3" onclick="setTab(3,4)">美女</li> <li id="tab_4" onclick="setTab(4,4)">拍照</li> </ul> </div> <div class="Contentbox"> <div id="con_1" class="hover" ><img src="images/1.png" /></div> <div id="con_2" class="hide"><img src="images/2.png" /></div> <div id="con_3" class="hide"><img src="images/3.png" /></div> <div id="con_4" class="hide"><img src="images/4.png" /></div> </div></div></body>8 表格隔行添加背景色CSS3：
tbody tr:nth-child(2n) { background-color: #f5fafe;}9 border-radius圆角表格的CSS3：
.bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;}10 border-spacing单线表格的CSS3：
table { border-collapse: collapse; / IE7 and lower / border-spacing: 0; width: 100%;}11 box-shadow设计图片翘边阴影效果：
CSS3：
.box { width: 980px; clear: both; overflow: hidden; height: auto; margin: 20px auto;}.box li { background: #fff; float: left; position: relative; margin: 20px 10px; border: 2px solid #efefef; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset; -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;}.box li img { width: 290px; height: 200px; margin: 5px;}.box li:before { content: ""; position: absolute; width: 90%; height: 80%; bottom: 13px; left: 21px; background: transparent; /透明背景/ z-index: -2; /显示在照片的下面/ box-shadow: 0 8px 20px rgba(0,0,0,0.8); /添加阴影/ -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8); -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8); transform: skew(-12deg) rotate(-6deg); /变形并旋转阴影，让其翘起/ -webkit-transform: skew(-12deg) rotate(-6deg); -moz-transform: skew(-12deg) rotate(-6deg); -os-transform: skew(-12deg) rotate(-6deg); -o-transform: skew(-12deg) rotate(-6deg);}.box li:after { /在左侧添加翘边阴影/ content: ""; position: absolute; width: 90%; height: 80%; bottom: 13px; right: 21px; z-index: -2; background: transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.8); transform: skew(12deg) rotate(6deg); -webkit-transform: skew(12deg) rotate(6deg); -moz-transform: skew(12deg) rotate(6deg); -os-transform: skew(12deg) rotate(6deg); -o-transform: skew(12deg) rotate(6deg);}<ul class="box"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li></ul>ref
《HTML5+CSS3+JavaScript从入门到精通（实例版）》
-End-
