Download presentation
Presentation is loading. Please wait.
1
让IT教学更简单，让IT学习更有效 HTML语言基础 盒子模型的概念 盒子相关属性 元素的类型 元素的转换
2
网站设计师 设计 制作 PS网页效果图设计 Flash网页动画设计 Html Xhtml DIV+CSS Javascript JQuery
3
✎ 学习目标 1 2 4 3 掌握盒子相 理解元素的转换 关属性 了解盒子模 熟悉元素的 型的概念 类型 掌握 理解 熟悉 了解
让IT教学更简单，让IT学习更有效 掌握盒子相 关属性 1 掌握 理解 了解 熟悉 2 理解元素的转换 了解盒子模 型的概念 4 3 熟悉元素的 类型
4
网站美工 网站编辑 网页设计师 网页制作 网站前端工程师 FLASH动画设计师 总结——职位多，选择多，机会多！
5
网站设计师行业职位薪水 北京传智播客教育
6
目录 1 2 3 4 认识什么是HTML 标记的语法 掌握常用的HTML标记的应用 阶段案例—制作音乐盒 ☞点击查看本小节知识架构
让IT教学更简单，让IT学习更有效 1 认识什么是HTML 2 标记的语法 ☞点击查看本小节知识架构 3 掌握常用的HTML标记的应用 4 阶段案例—制作音乐盒
7
网页如何制作出来的
8
HTML简介 HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。 Html文档的创建方式：用html语言创建的文档 手工直接编写（例如记事本）。 通过图形化的HTML开发软件 Dreamweaver。 由Web服务器上的动态网页程序生成。
9
HTML标记的语法 html最基本的语法就是<标记符>内容</标记符>，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/” 当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如： <hr width= ” 80% ” / > 例如：<font size= ” 7 ” > 文字内容 </font>
10
HTML标记的语法 HTML 标记的类型：单标记与双标记 一、单标记 (1).< 标记名称 > 单一型 , 无属性值。 如： <br /> (2).< 标记名称 属性 = ” 属性值 ” > 单一型，有属性值。 如： <hr width= ” 80% ” / >
11
HTML标记的语法 二、双标记 (3).< 标记名称 > … </ 标记名称 > 没有属性值。 如： <title> … </title> (4).< 标记名称 属性 = ” 属性值 ” > … </ 标记名称 > 有属性值。 如： <body bgcolor= ” red ” > … </body> <font size= ” 7 ” > … </font>
12
HTML标记的语法 HTML标记语法总结： 1、双标记：<开始标记>内容</结束标记> 2、 单标记：<标记> 3、标记的属性： <标记 属性1=参数1 属性2=参数2 …>内容</标记> 说明： A、标记与属性、属性之间以空格分隔 B、属性不区分先后顺序；且属性不是必需的 重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。
13
html文档结构 1、文档结构 所有的网页文件,通常由四对标记来构成,文档的骨架，它们是： <html>
<head> <title> 标题 </title> </head> <body> 正文 </body> </html> <html>……</html>标识网页文件的开始与结束，所有的html元素都要放在这对标记中 <head>……</head>标识网页文件的头部信息，如标题、搜索引擎关键字等 <title>……</title>标识网页文件的标题 <body>……</body>标识网页文件的主体部分
14
Meta标记用于定义文件信息 Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于<head></head>之间 设置关键字： <meta name=”keywords” content=”value”>多个关键字内容之间可以用“，”分隔 设置描述：<meta name=”description” content=”value”> 设置作者：<meta name=”author” content=”作者名”> 设置字符集：<meta http-equiv=”content-type” content=”text/html;charset=gb2312”> 设置页面定时跳转：<meta http-equiv="Refresh" content="2;URL= />
15
网页主体标记body （1）、注释 <!--注释内容--> （2）、body属性
<body bgcolor=“背景颜色” background=“背景图像” text=“文本颜色” link=“链接文本颜色” vlink=“访问过的文本颜色” alink=“激活的链接文本颜色” leftmargin=“左边界” rightmargin=“右边界”topmargin=“上边界” bottommargin=“下边界”>
16
字体修饰 (1)、<font>标记 语法：
<font color="文本颜色" size="字号" face="字体">文本</font> 注：网页中的文本字体、字号一般通过CSS修饰 颜色 英文名称 十六位进制 白色 White #FFFFFF 黑色 Black #000000 红色 Red #FF0000 绿色 Green #00FF00 蓝色 Blue #0000FF 灰色 Gray #999999
17
(2)、字符格式 功能 标记 加粗 <b>文本</b> 倾斜 <i>文本</i>
加强语气(加粗) <strong>文本</strong> 加强语气(倾斜) <em>文本</em> 下划线 <u>文本</u> 删除线 <s>文本</s> 上标 <sup>文本</sup> 下标 <sub>文本</sub>
18
段落控制标记 （3）、段落标记： 格式： <p align= ” 对齐方式 “ > … </p>
属性名称 属性值 说明 align left 左对齐（默认） center 居中 right 右对齐
19
段落控制标记 （4）、段落标题 <hx align= ” 对齐方式 “ > … </hx>：段落标题 说明：
X取值[1~6] hx内的文本会自动加粗显示。 hx针对的对象是段落，而font针对的对象的任意文本。 （5）、<br />：换行（换行不换段）
20
修饰标记 (6). 水平直线 <hr /> 属性名称 属性值 说明 size 像素 绝对设置，以数字表示，属性值越大，线越粗
属性名称 属性值 说明 size 像素 绝对设置，以数字表示，属性值越大，线越粗 百分比 相对设置，以 % 表示，属性值越大，线越粗 width 像素 绝对设置，长度不会应视窗的改变而改变 百分比 相对设置，长度会随着视窗宽度而改变 noshade="noshade" 实体线
21
特殊标记 定义一个块引用：使用文本缩进 格式： <blockquote>...</blockquote>
属性名称 属性值 说明 cite url 被引用的地址 居中标记 <center>内容</center>(被废弃的标签) 预格式化 <pre></pre> 显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。
22
在HTML文档中使用特殊字符 特殊字符 转义码 空格 版权号 © © 注册商标 ® ® “ " &
版权号 © 注册商标 ® “ " & & < >
23
网页中信息的排序显示-如何实现
24
列表的标记 1、列表标记用途： 列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。 还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。 [1]、无序列表 <ul>…</ul> [2]、有序列表 <ol>…</ol> [3]、定义列表 <dl>…</dl>
![列表的标记 1、列表标记用途： 列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。 还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。 [1]、无序列表 <ul>…</ul>](http://slidesplayer.com/slide/14001184/86/images/24/%E5%88%97%E8%A1%A8%E7%9A%84%E6%A0%87%E8%AE%B0+1%E3%80%81%E5%88%97%E8%A1%A8%E6%A0%87%E8%AE%B0%E7%94%A8%E9%80%94%EF%BC%9A+%E5%88%97%E8%A1%A8%E6%A0%87%E8%AE%B0%E5%8F%AF%E4%BB%A5%E5%88%9B%E5%BB%BA%E4%B8%80%E8%88%AC%E7%9A%84%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%E3%80%81%E7%BC%96%E5%8F%B7%E5%88%97%E8%A1%A8%EF%BC%8C%E4%BB%A5%E5%8F%8A%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F%E3%80%82+%E8%BF%98%E5%8F%AF%E4%BB%A5%E5%9C%A8%E4%B8%80%E7%A7%8D%E5%88%97%E8%A1%A8%E4%B8%AD%E5%B5%8C%E5%A5%97%E5%8F%A6%E4%B8%80%E7%A7%8D%E5%88%97%E8%A1%A8%E3%80%82%E4%BE%BF%E4%BA%8E%E6%A6%82%E6%8B%AC%E6%98%BE%E7%A4%BA%E4%B8%80%E7%B3%BB%E5%88%97%E7%9B%B8%E5%85%B3%E7%9A%84%E5%86%85%E5%AE%B9%E3%80%82+%5B1%5D%E3%80%81%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8+%3Cul%3E%E2%80%A6%3C%2Ful%3E.jpg "[2]、有序列表 <ol>…</ol> [3]、定义列表 <dl>…</dl>")
25
列表的标记 <li></li> 表示一个项目 2、无序列表 语法： <ul type=“项目符号类型”>
<li type=“项目符号类型”>内容1</li> <li> 内容2</li> … </ul> <li></li> 表示一个项目 参数值 (必须小写字母) 描述 disc circle square
26
列表的标记 3、有序列表 语法： <ol start=“列表起点” type=“项目符号类型”>
<li >内容1</li> <li >内容2</li> … </ol> 属性名称 属性值 说明 type 1 表示以 1,2,3,4 来表示 a 表示以 a,b,c,d 来 表示 A 表示以 A,B,C,D 来 表示 i 表示以 i,ii ,iii 来表示 I 表示以 I,II,III 来表示
27
定义列表 <dl> <dt>标题1</dt> <dd>内容1</dd>
4、定义列表 语法： <dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> <dl></dl>定义列表 <dt></dt>表示一个项目 <dd></dd>表示一个项目下的更详细的内容的解释
28
图片 Web上支持的图片格式 图片标记 <img src=“图片的路径” />
GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。 JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种 PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。 图片标记 <img src=“图片的路径” />
29
路径 □ 绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称 □ 相对路径:从当前文档开始的路径
如果当前文档和目标文档位置平行，则直接书写目标文档全称 如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称 如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称 □ 根相对路径:从站点根目录开始的路径，以"/"开头
30
属性名称 属性值 说明 src URL 图片的路径 alt 文本 规定图片的替代文本[图片无法显示时] title 鼠标悬停时显示的内容 width 像素/百分比 设置图片宽 height 设置图片高 border 数字 设置图象边框 align left 图片靠左 , 文字靠右 right 图片靠右 , 文字靠左 top 文字垂直居上靠 middle 文字垂直居中 bottom 文字垂直居下（默认） vspace 像素 定义图像顶部和底部的空白（垂直边距） hspace 定义图像左侧和右侧的空白（水平边距）
![属性名称 属性值. 说明. src. URL. 图片的路径. alt. 文本. 规定图片的替代文本[图片无法显示时] title. 鼠标悬停时显示的内容. width. 像素/百分比.](http://slidesplayer.com/slide/14001184/86/images/30/%E5%B1%9E%E6%80%A7%E5%90%8D%E7%A7%B0+%E5%B1%9E%E6%80%A7%E5%80%BC.+%E8%AF%B4%E6%98%8E.+src.+URL.+%E5%9B%BE%E7%89%87%E7%9A%84%E8%B7%AF%E5%BE%84.+alt.+%E6%96%87%E6%9C%AC.+%E8%A7%84%E5%AE%9A%E5%9B%BE%E7%89%87%E7%9A%84%E6%9B%BF%E4%BB%A3%E6%96%87%E6%9C%AC%5B%E5%9B%BE%E7%89%87%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA%E6%97%B6%5D+title.+%E9%BC%A0%E6%A0%87%E6%82%AC%E5%81%9C%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E5%86%85%E5%AE%B9.+width.+%E5%83%8F%E7%B4%A0%2F%E7%99%BE%E5%88%86%E6%AF%94..jpg "设置图片宽. height. 设置图片高. border. 数字. 设置图象边框. align. left. 图片靠左 , 文字靠右. right. 图片靠右 , 文字靠左. top. 文字垂直居上靠. middle. 文字垂直居中. bottom. 文字垂直居下（默认） vspace. 像素. 定义图像顶部和底部的空白（垂直边距） hspace. 定义图像左侧和右侧的空白（水平边距）")
31
阶段案例 制作网页中常见的个人网页
32
✎ 本章小结 让IT教学更简单，让IT学习更有效 01 02 03 块元素、行内元素 <div>与<span> 元素类型的转换 最后制作出了一个常见的盒子模型效果 盒子模型的概念 盒子模型相关的属性 通过本章的学习，读者应该能够熟悉html构成，熟练运用html属性控制网页中的元素，理解网页元素，掌握<html>标记的使用。
Similar presentations
