Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html基础培训

714 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html基础培训

  1. 1. (第一期) 主讲:李毅超
  2. 2.  HTML(Hyper Text Markup Language 超文本标 识语言) ◦ 是一种用来制作超文本文档的简单标记语言。 ◦ 用HTML编写的超文本文档称为HTML文档。
  3. 3.  CSS? JavaScript? XML? Photoshop images? (java,php,ruby。。。。)NO!!
  4. 4.  提出需求# 视觉做出Photoshop的PS Demo 交付前端处理 ◦ Html编写 ◦ Ps demo切图 ◦ Css编写 ◦ Javascript编写 返回内容填充
  5. 5. <!DOCTYPE HTML><html> <head> <meta charset="gbk"/> <title></title> </ head > <body> HTML 文件的正文 </body></ html >
  6. 6. 锚点 a行内标签 span em图片标签 img列表标签 li dl表格标签 table块标签 div标题标签h段落标签p
  7. 7.  常规外链的a <a href=“index.html” title=“锚点实例”>锚点实例</a> 含有锚的a <a href=“index.html#a” title=“锚点”>锚点实例</a> <a class="a-side" href="#" title="回顶部" target="_self">回顶部</a> 含有target <a href=“index.html” title=“锚点实例” target=“_blank”>锚点实例</a>
  8. 8.  <img src=“XXX.com/img.jpg” /> 想获得更高的PV?seo优化级alt属性必加 <img src=“XXX.cn/img.jpg” alt=“这是一张 图片”/>
  9. 9.  <ul> ◦ <li>无序列表项1</li> ◦ <li>无序列表项2</li> ◦ <li>无序列表项3</li> </ul> <ol> ◦ <li>有序列表项1</li> ◦ <li>有序列表项2</li> ◦ <li>有序列表项3</li> </ol>
  10. 10. 表格(用<table>来表表头(用<th>来 示,表格可以有背景颜 表格边框表示,表头是特 色、背景图片)殊的单元格,其中的文字加进去之后默认是居中 一月 二月 三月 单元格(用 <td>来表并且加粗) 1200 1000 1500 示,每个单 元格可以有 背景颜色和 每一行可以用 背景图片) <tr>来表示, 单元格放在行 中,每行可以 有很多的单元 格。
  11. 11. <table>定义表格 <tr> 属性 <th>定义表头</th> Align </tr> Border <tr>定义表行 Width <td>…</td>定义单元 height 格 </tr></table>
  12. 12.  神秘的div?? ◦ 它无处不在 ◦ 曾经前端工程师就是叫“DIV+CSS”(05年前) ◦ 它能做一切事 ◦ 它是html里的万灵膏 到底什么是div??
  13. 13.  与刚才的div块级不同span与em等都是行内 标签。 Div是占据一行的,而行内标签则是能够共 存与同一行内
  14. 14. 内嵌style概况FontColorLine-heightBackgroudPitaya库简介
  15. 15.  如何在HTML上修改标签的style? <a style=“font-size:12px;”>实例</a> <span style=“font-size:12px; line-height:12px;”> 实例</span>
  16. 16.  设置字体大小 <span style=“font-size:12px”>实例</span> 设置字体粗细 <span style=“font-size:12px; font-weight:bold; ”>实例 </span> 文本居中 <span style=“font-size:12px; font-weight:bold; text- align:center;”>实例</span> 文本颜色 <span style=“font-size:12px; font-weight:bold; text- align:center; color:#DDD;”>实例</span>
  17. 17.  <span style=“font-size:14px; line- height:18px;”>行高测试1</span> 垂直居中 <span style=“font-size:14px;line- height:18px; height:18px;”>行高测试 2</span>
  18. 18.  背景不管是块级或是行内级都是可以设置的 <span style=“backgroud:#DDD;”>背景测试 1</span> <div style=“backgroud:#DDD;”>背景测试1</div>
  19. 19. 建议不要用可视化分栏式的填充
  20. 20. DW的可视化编辑会自动的插入一些标签可能会造成布局混乱
  21. 21.  http://www.w3cschool.cn 一个全能的Web学习网站, 吐血推荐!! http://www.php100.com/html/shipinjiaoche ng/XHML/list_40_6.html php100推出的一组 html学习视频,很好很强大 http://bbs.blueidea.com/forum-1-1.html 蓝色理想, 想进一步学习HTML可以到这个论坛
  22. 22. 联系我:旺旺:leyteris微博:http://weibo.com/leyteris

×