HTML 是用以叙述页面的一类词汇。
HTML 指的是LZ77记号词汇 (Hyper Text Markup Language)
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的新特点有许多，比如梯形效用、GUI边界线、块阴霾与文本阴霾、采用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: black0.1em 0.1em 0.2em; }要同时实现的效用：
CSS3：
p { text-align: center; font:bold 60pxhelvetica, 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 1pxwhite, –1px –1px #333; }4 border的transparent属性
要同时实现的效用：
CSS3：
#demo { width: 0; height: 0; border-left: 50pxsolid 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: 60pxsolid 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-
