Html基础培训

（第一期）

主讲：李毅超

 HTML（Hyper Text Markup Language 超文本标
识语言）
◦ 是一种用来制作超文本文档的简单标记语言。
◦ 用HTML编写的超文本文档称为HTML文档。

 CSS？
 JavaScript？
 XML？
 Photoshop images？
 （java，php，ruby。。。。）

NO！！

 提出需求#
 视觉做出Photoshop的PS Demo
 交付前端处理
◦ Html编写
◦ Ps demo切图
◦ Css编写
◦ Javascript编写
 返回内容填充

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk"/>
<title></title>
</ head >
<body>
HTML 文件的正文
</body>
</ html >

锚点 a
行内标签 span em
图片标签 img
列表标签 li dl
表格标签 table
块标签 div
标题标签h
段落标签p

 常规外链的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>

 <img src=“XXX.com/img.jpg” />

 想获得更高的PV？seo优化级alt属性必加
 <img src=“XXX.cn/img.jpg” alt=“这是一张
图片”/>

 <ul>
◦ <li>无序列表项1</li>
</ul>

 <ol>
◦ <li>有序列表项1</li>
</ol>

表格（用<table>来表
表头（用<th>来示，表格可以有背景颜表格边框
表示，表头是特色、背景图片）
殊的单元格，其
中的文字加进去
之后默认是居中
一月二月三月单元格（用
<td>来表
并且加粗） 1200 1000 1500 示，每个单
元格可以有
背景颜色和
每一行可以用背景图片）
<tr>来表示，
单元格放在行
中，每行可以
有很多的单元
格。

<table>定义表格
<tr> 属性
<th>定义表头</th> Align
</tr> Border
<tr>定义表行 Width
<td>…</td>定义单元 height
格
</tr>
</table>

 神秘的div？？
◦ 它无处不在
◦ 曾经前端工程师就是叫“DIV+CSS”（05年前）
◦ 它能做一切事
◦ 它是html里的万灵膏

到底什么是div？？

 与刚才的div块级不同span与em等都是行内
标签。

 Div是占据一行的，而行内标签则是能够共
存与同一行内

内嵌style概况
Font
Color
Line-height
Backgroud
Pitaya库简介

 如何在HTML上修改标签的style？

 <a style=“font-size:12px;”>实例</a>

 <span style=“font-size:12px; line-height:12px;”>
实例</span>

 设置字体大小
 <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>

 <span style=“font-size:14px; line-
height:18px;”>行高测试1</span>

垂直居中
 <span style=“font-size:14px;line-
height:18px; height:18px;”>行高测试
2</span>

 背景不管是块级或是行内级都是可以设置的

 <span style=“backgroud:#DDD;”>背景测试
1</span>

 <div style=“backgroud:#DDD;”>背景测试1</div>

建议不要用可视化
分栏式的填充

DW的可视化编辑会自动的插入一些标签可能会造成布局混乱

 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可以到这个论坛

联系我：
旺旺：leyteris
微博：http://weibo.com/leyteris

Html基础培训

Recomendados

Recomendados

Más contenido relacionado

Similar a Html基础培训

Similar a Html基础培训 (20)

Más de fangdeng

Más de fangdeng (20)

Último

Último (6)

Html基础培训