Cms and Html

优酷 CMS>HTML 碎片产品团队 09-10-10

CMS 当前存在的问题数量繁多形式多样时间紧迫

HTML HTML （ HyperText Mark-up Language ）即超文本标记语言或超文本链接标示语言。 CSS （ Cascading Style Sheets) 层叠样式表 HTML CSS 由浏览器解析在浏览器上呈现出所想要的页面！

HTML & CSS HTML （页面文档的结构） <span> 一些文字 </span> <div> <h1> 标题标题 </h1> <span> 文字文字 </span> </div>

HTML & CSS HTML （页面文档的结构） <body> <div class="header"> <h1> 网站标题 </h1> <span> 副标题 </span> </div> <div class="main"> <h2> 文章标题 </h2> <div class=“article”> 文章内容 </div> </div> <div class="footer"> </div> </div> </body>

HTML & CSS CSS （层叠样式表单） <div class=“window”> 窗户 </div> .window{color:#00FF00;width:200px;height:100px;}

HTML & CSS 常用 HTML 标签划分区域 div （块级）， span （内联）标题 h1 , h2 , h3 , h4 , h5 , h6 图片 img 列表 ul/ol , li 修饰文本 p ， em ， strong ， a 其他标签 ( 实体字符 ) br ,   表格 table

HTML & CSS 常用 HTML 标签 div ( 块级 ) <div style="font-size:12px;border:1px solid red; width:100px;height:100px;"> 显示区块 </div> span( 内联 ) <p> 文字文字文字 <span style="margin:0 10px; color:red;"> 修饰文字 </span> 文字 </p>

HTML & CSS p( 块级 ) <p style="font-size:12px; width:100px;line-height:22px;text-indent:24px;"> 我是帅气的大段文字我是帅气的大段文字我是帅气的大段文字我是帅气的大段字我是帅气的大段文字我是帅气的大段文字我是帅气的大段文字 </p> em , strong <p> 文字 <em> 强调 </em> 字文字 <strong> 重点突出 </strong> 文字 </p>

HTML & CSS a( 链接标签 ) <a > 优酷网 </a> href="www.youku.com" target="_blank" img <a href="www.youku.com" target="_blank" style="color:#FF0000;font-size:14px;text-decoration:none;" > 优酷网 </a> <img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" /> <img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" width="130" height="35" title=" 优酷网 " />

HTML & CSS ul / ol <ul> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> </ul> <ol> <li> 第一名 </li> <li> 第二名 </li> <li> 第三名 </li> <li> 第四名 </li> <li> 第五名 </li> </o> ul 常用于新闻 , 文章列表 ol 常用于排行榜

HTML & CSS h1 ~ h6 <h1> 我是文章标题 1</h1> <h2> 我是文章标题 1</h2> <h3> 我是文章标题 1</h3> <h4> 我是文章标题 1</h4> <h5> 我是文章标题 1</h5> <h6> 我是文章标题 1</h6>

HTML & CSS <br /> <p> 一段华丽的文字被 <br /> 换行了 </p>   <p> 一段华丽的文字被 <br />     换行了 </p>

HTML & CSS table <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 一行一列一行两列 <table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 两行一列 <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 两行两列 <table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table>

HTML & CSS table <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 死神 </a></td> <td><a href="#" target="_blank"> 火影忍者 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 海贼王 </a></td> <td><a href="#" target="_blank"> 守护甜心 </a></td> <td><a href="#" target="_blank"> 犬夜叉 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫前线 </a></td> <td><a href="#" target="_blank"> 新番 </a></td> <td><a href="#" target="_blank"> 星之愿 </a></td> </tr> </table>

常见 CMS 结构 HTML 部分： <div class="banners"> <div class="b"><a href="http://c.youku.com/qingchun" target="_blank"><img src="http://res.youku.com/100120090512164108F230BBFD187F53E76F90A00C000494C3" /></a></div> <div class="b"><a href="http://c.youku.com/tuanzhang" target="_blank"><img src="http://res.youku.com/100120090512164300754CE7C118D8C99E0A3EAD3490368463" /></a></div> </div> CSS 部分： .banners .b{margin:10px 0;}

常见 CMS 结构 HTML 部分： <div class=“intro”> <a href=“ 链接地址” target=“_blank”><img width=“280” height=“200” src=“ 图片地址 "></a> <p> 文字介绍 </p> <span class=“more”><a href=“ 链接地址” target=“_blank”> 更多… </a></span> </div> CSS 部分： .Intro img{text-align:center;margin:5px 0;} .intro p {text-indent:16px;} .more a {float:right;}

常见 CMS 结构 HTML 部分： <div class="person-intro"> <div class="person-info"> <h3> 萧亚轩 </h3> <img src=“ 图片地址 " width="110" height="131" title=" 萧亚轩 " /> <p> 今年再度斥资打造独一无二新舞台，视觉和听觉同步引领时尚新潮流，以 [ 闪亮钻石糖 , 快 !</p> </div> <div class="person-links"> <ul> <li>• <a href=“ 链接地址” title=“ 萧亚轩新优酷首发 " target="_blank"> 萧亚轩新专首波闪亮主打 < 闪闪惹人爱 > 优酷首发 </a></li> <li>• <a href=“ 链接地址” title=“ 罗志祥、萧亚轩败给你 " target="_blank"> 罗志祥、萧亚轩最新甜蜜对唱单曲败给你 </a></li> </ul> </div> </div> CSS 部分： .person-intro{width:280px;} .person-info{position:relative;} .person-info h3{font-weight:bold;font-size:14px;margin:3px 0;} .person-info img{float:right;position:relative;top:-20px;left:3px;} .person-info p{font-size:12px;width:165px;line-height:18px;} .person-links{clear:both;} .person-links a{font-size:12px;}

常见以及需要注意的问题图片尺寸，字节过大 HTML 标签没有关闭浏览器兼容性碎片的示例大多都在 http://c.youku.com/cmspreview/html

常用编辑工具 Dreamweaver

常用学习手册在线学习 HTML http://www.w3school.com.cn/html/index.asp http://www.w3pop.com/learn/index/f/1/c/7/ 在线学习 CSS http://www.w3school.com.cn/css/index.asp http://www.w3pop.com/learn/index/f/1/c/9/ 有用的帖子 http://bbs.blueidea.com/viewthread.php?tid=2524735 附件里的文件

Cms and Html

More Related Content

Viewers also liked

Similar to Cms and Html

Cms and Html

Editor's Notes