Html基础培训

690 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
690
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×