传智播客-张鹏-ppt-一周学会html课件

—高级网页设计人才培训专家!轻松学习HTML第一课HTML语言基础主讲：张鹏邮箱：[e-mail]—高级网页设计人才培训专家!网站设计师精品就业班课程体系北京传智播客教育制作—高级网页设计人才培训专家!网站设计师行业职位需求分析北京传智播客教育网站美工网站编辑网页设计师网页制作网站前端工程师FLASH动画设计师总结——职位多，选择多，机会多！—高级网页设计人才培训专家!网站设计师行业职位薪水北京传智播客教育—高级网页设计人才培训专家!目标一.认识什么是HTML二.标记的语法三.掌握常用的HTML标记的应用—高级网页设计人才培训专家!网页是用什么制作出来的—高级网页设计人才培训专家!HTML简介HTML（HyperTextMark-upLanguage超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用html标记来实现。Html文档的创建方式：用html语言创建的文档手工直接编写（例如记事本）。通过图形化的HTML开发软件Dreamweaver。由Web服务器上的动态网页程序生成。—高级网页设计人才培训专家!HTML标记的语法html最基本的语法就是标记符内容/标记符，标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如：hrwidth=”80%”/例如：fontsize=”7”文字内容/font—高级网页设计人才培训专家!HTML标记的语法HTML标记的类型：单标记与双标记一、单标记(1).标记名称单一型,无属性值。如：br/(2).标记名称属性=”属性值”单一型，有属性值。如：hrwidth=”80%”/—高级网页设计人才培训专家!HTML标记的语法二、双标记(3).标记名称…/标记名称没有属性值。如：title…/title(4).标记名称属性=”属性值”…/标记名称有属性值。如：bodybgcolor=”red”…/bodyfontsize=”7”…/font—高级网页设计人才培训专家!HTML标记的语法HTML标记语法总结：1、双标记：开始标记内容/结束标记2、单标记：标记3、标记的属性：标记属性1=参数1属性2=参数2…内容/标记说明：A、标记与属性、属性之间以空格分隔B、属性不区分先后顺序；且属性不是必需的重点强调：虽然在HTML中标记不区别大小写，但在XHTML中所有标记都必须小写，所以建议从现在开始，所有标记都采用小写。—高级网页设计人才培训专家!html文档结构1、文档结构所有的网页文件,通常由四对标记来构成,文档的骨架，它们是：htmlheadtitle标题/title/headbody正文/body/htmlhtml……/html标识网页文件的开始与结束，所有的html元素都要放在这对标记中head……/head标识网页文件的头部信息，如标题、搜索引擎关键字等title……/title标识网页文件的标题body……/body标识网页文件的主体部分—高级网页设计人才培训专家!Meta标记用于定义文件信息Meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于head/head之间设置关键字：metaname=”keywords”content=”value”多个关键字内容之间可以用“，”分隔设置描述：metaname=”description”content=”value”设置作者：metaname=”author”content=”作者名”设置字符集：metahttp-equiv=”content-type”content=”text/html;charset=gb2312”设置页面定时跳转：metahttp-equiv=Refreshcontent=2;URL=—高级网页设计人才培训专家!（1）、注释!--注释内容--（2）、body属性bodybgcolor=“背景颜色”background=“背景图像”text=“文本颜色”link=“链接文本颜色”vlink=“访问过的文本颜色”alink=“激活的链接文本颜色”leftmargin=“左边界”rightmargin=“右边界”topmargin=“上边界”bottommargin=“下边界”网页主体标记body—高级网页设计人才培训专家!字体修饰(1)、font标记语法：fontcolor=文本颜色size=字号face=字体文本/font注：网页中的文本字体、字号一般通过CSS修饰颜色英文名称十六位进制颜色英文名称十六位进制白色White#FFFFFF黑色Black#000000红色Red#FF0000绿色Green#00FF00蓝色Blue#0000FF灰色Gray#999999—高级网页设计人才培训专家!(2)、字符格式功能标记加粗b文本/b倾斜i文本/i加强语气(加粗)strong文本/strong加强语气(倾斜)em文本/em下划线u文本/u删除线s文本/s上标sup文本/sup下标sub文本/sub—高级网页设计人才培训专家!（3）、段落标记：格式：palign=”对齐方式“…/p属性名称属性值说明alignleft左对齐（默认）center居中right右对齐段落控制标记—高级网页设计人才培训专家!（4）、段落标题hxalign=”对齐方式“…/hx：段落标题说明：X取值[1~6]hx内的文本会自动加粗显示。hx针对的对象是段落，而font针对的对象的任意文本。（5）、br/：换行（换行不换段）段落控制标记—高级网页设计人才培训专家!修饰标记(6).水平直线hr/属性名称属性值说明size像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade=noshade实体线—高级网页设计人才培训专家!特殊标记定义一个块引用：使用文本缩进格式：blockquote.../blockquote属性名称属性值说明citeurl被引用的地址居中标记center内容/center(被废弃的标签)预格式化pre/pre显示已经格式化好的文字。不加此标记的话，HTML浏览器会忽略所有空格和制表符。—高级网页设计人才培训专家!在HTML文档中使用特殊字符特殊字符转义码空格 版权号©©注册商标®®“"&&<>—高级网页设计人才培训专家!网页中信息的排序显示-如何实现—高级网页设计人才培训专家!列表的标记1、列表标记用途：列表标记可以创建一般的无序列表、编号列表，以及定义列表三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。[1]、无序列表ul…/ul[2]、有序列表ol…/ol[3]、定义列表dl…/dl—高级网页设计人才培训专家!2、无序列表语法：ultype=“项目符号类型”litype=“项目符号类型”内容1/lili内容2/li…/ulli/li表示一个项目参数值(必须小写字母)描述disccirclesquare列表的标记—高级网页设计人才培训专家!3、有序列表语法：olstart=“列表起点”type=“项目符号类型”li内容1/lili内容2/li…/ol属性名称属性值说明type1表示以1,2,3,4来表示a表示以a,b,c,d来表示A表示以A,B,C,D来表示i表示以i,ii,iii来表示I表示以I,II,III来表示列表的标记—高级网页设计人才培训专家!4、定义列表语法：dldt标题1/dtdd内容1/dddd内容2/dddt标题1/dtdd内容1/dddd内容2/dd/dldl/dl定义列表dt/dt表示一个项目dd/dd表示一个项目下的更详细的内容的解释定义列表—高级网页设计人才培训专家!Web上支持的图片格式GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。JPEG（联合图像专家组）：该格式不支持透明色及动画，颜色可达1670万种PNG（网络可移植格式）：该格式支持透明色，但不支持动画，颜色从几种至1670万种。图片标记imgsrc=“图片的路径”/图片—高级网页设计人才培训专家!路径□绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称□相对路径:从当前文档开始的路径如果当前文档和目标文档位置平行，则直接书写目标文档全称如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称如果当前文档所在文件夹和目标文档位置平行，则书写为../目标文档全称□根相对路径:从站点根目录开始的路径，以/开头—高级网页设计人才培训专家!属性名称属性值说明srcURL图片的路径alt文本规定图片的替代文本[图片无法显示时]title文本鼠标悬停时显示的内容width像素/百分比设置图片宽height像素/百分比设置图片高border数字设置图象边框alignleft图片靠左,文字靠右right图片靠右,文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默认）vspace像素定义图像顶部和底部的空白（垂直边距）hspace像素定义图像左侧和右侧的空白（水平边距）—高级网页设计人才培训专家!轻松学习HTML第二课表格与链接主讲：张鹏邮箱：[e-mail]—高级网页设计人才培训专家!31目标一.表格的应用二.超级链接的使用—高级网页设计人才培训专家!32网页中内容排版与定位---表格—高级网页设计人才培训专家!表格因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的表格基本结构：table.../table-定义表格tr.../tr-定义表行td.../td-定义表列(单元格)th.../th-定义标题栏(文字加粗)—高级网页设计人才培训专家!属性用途tablebgcolor=””设置表格的背景色。tablebackground=””设置表格的背景图片。tableborder=””设置边框的宽度，若不设置此属性，则边框宽度默认为0。tablecellpadding=””设置表格单元格边框与其内部内容之间空间的大小。默认为2(表格边距)tablecellspacing=””设置表格单元格之间空间的大小。默认为2(单元格间距)tablebordercolor=””设置表格边框的颜色。tablebordercolorlight=””设置边框亮部分的颜色(当border的值大于等于1时才有用)。tablebordercolordark=””设置边框暗部分的颜色(当border