Download to read offline
Uploaded byfangdeng
Html基础培训
本文介绍了HTML的基础知识，包括HTML文档的结构、常用标签及其用法，如锚点、列表、表格等。还提到CSS和JavaScript在前端开发中的重要性，以及如何设置样式和优化图像的SEO属性。文章最后提供了一些学习资源和联系方式。
Html基础培训
- 1. （第一期） 主讲：李毅超
- 2. HTML（Hyper Text Markup Language 超文本标 识语言） ◦ 是一种用来制作超文本文档的简单标记语言。 ◦ 用HTML编写的超文本文档称为HTML文档。
- 3. CSS？ JavaScript？ XML？ Photoshop images？ （java，php，ruby。。。。） NO！！
- 4. 提出需求# 视觉做出Photoshop的PS Demo 交付前端处理 ◦ Html编写 ◦ Ps demo切图 ◦ Css编写 ◦ Javascript编写 返回内容填充
- 5. <!DOCTYPE HTML> <html> <head> <meta charset="gbk"/> <title></title> </ head > <body> HTML 文件的正文 </body> </ html >
- 6. 锚点 a 行内标签 spanem 图片标签 img 列表标签 li dl 表格标签 table 块标签 div 标题标签h 段落标签p
- 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. <img src=“XXX.com/img.jpg” /> 想获得更高的PV？seo优化级alt属性必加 <img src=“XXX.cn/img.jpg” alt=“这是一张 图片”/>
- 9. <ul> ◦ <li>无序列表项1</li> ◦ <li>无序列表项2</li> ◦ <li>无序列表项3</li> </ul> <ol> ◦ <li>有序列表项1</li> ◦ <li>有序列表项2</li> ◦ <li>有序列表项3</li> </ol>
- 10. 表格（用<table>来表 表头（用<th>来 示，表格可以有背景颜 表格边框 表示，表头是特 色、背景图片） 殊的单元格，其 中的文字加进去 之后默认是居中 一月 二月 三月 单元格（用 <td>来表 并且加粗） 1200 1000 1500 示，每个单 元格可以有 背景颜色和 每一行可以用 背景图片） <tr>来表示， 单元格放在行 中，每行可以 有很多的单元 格。
- 11. <table>定义表格 <tr> 属性 <th>定义表头</th> Align </tr> Border <tr>定义表行 Width <td>…</td>定义单元 height 格 </tr> </table>
- 12. 神秘的div？？ ◦ 它无处不在 ◦ 曾经前端工程师就是叫“DIV+CSS”（05年前） ◦ 它能做一切事 ◦ 它是html里的万灵膏 到底什么是div？？
- 13. 与刚才的div块级不同span与em等都是行内 标签。 Div是占据一行的，而行内标签则是能够共 存与同一行内
- 14.
- 15. 如何在HTML上修改标签的style？ <a style=“font-size:12px;”>实例</a> <span style=“font-size:12px; line-height:12px;”> 实例</span>
- 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. <span style=“font-size:14px; line- height:18px;”>行高测试1</span> 垂直居中 <span style=“font-size:14px;line- height:18px; height:18px;”>行高测试 2</span>
- 18. 背景不管是块级或是行内级都是可以设置的 <span style=“backgroud:#DDD;”>背景测试 1</span> <div style=“backgroud:#DDD;”>背景测试1</div>
- 19.
- 20.
- 22. 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可以到这个论坛
- 23.