搜索
1Lesson1一、Html简介①超文本标记语言html不是编程语言，是一种描述性标记语言eg:color,size②Html文档创建方式：用html语言创建文档手工直接编写（记事本）通过图形化的语言的html开发软件：dw由web服务器上动态网页程序生成：php二、html语法总结①双标记开始标记内容/结束标记有属性值：font/font无属性值：title/title②单标记：标记/br/换行hr/分隔符③标记的属性：标记属性1=“参数1”属性2=“参数2”内容/标记说明A．标记与属性、属性之间以空格分隔B．属性不分先后顺序，且属性不是必须的C．建议所有标记采用小写2Lesson2一、Html的文档结构htmlheadtitle标题/title/headbody正文/body/html二、meta标签，标记用于定义文件信息Meta标签用于定义文件信息，放置于head/head设置关键字metaname=”keywords”content=”value”/设置描述metaname=”description”content=”value”/设置作者名metaname=”author”content=”作者名”/设置字符集metahttp-equiv=”content-type”content=”text/html;charset=”gb2312”或者”UTF-8”（UTF-83字节gb23122字节）设置页面定时跳转：metahttp-equiv=”refresh”content=”2;URL=””3例子：Lesson3html编辑器及body详解一、html编辑器编辑器：editplus好处：代码会有颜色区别的二、body详解Body属性：bodybgcolor=”背景颜色”background=”背景图像”test=”文本颜色”link=”链接文本颜色”vlink=”访问过的文本颜色”alink=”激活的链接文本颜色”leftmargin=”左边界”rightmargin=”右边界”topmargin=”上边界”bottommargin=”下边界”.../body4Lesson4~Lesson5一、html标记语义应用Html文件名最好使用英文字体修饰：（1）font标记语法：fontcolor=”文本颜色”size=”字号”face=”字体”文本/font注意：网页的文本字体一般通过CSS修饰（2）字符格式功能标记加粗b文本/b加强语气（加粗）strong文本/strong倾斜i文本/i加强语气（倾斜）em文本/em下划线u文本/u删除行s文本/s上标sup文本/sup下标sub文本/sub另：h1标题文本/h1比strong权限高5*****写html代码的流程*****1先写控制内容的标记，例如这内容比较重要，可以在语义上加权strong关键字/strong如果这部分内容是这篇文章的主题----使用h1标题文本/h12段落文字内容----p段落内容/p++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++例如：E:\笑笑\网页设计\html-exercise\demo1bodypfontcolor=bluesize=4ufontcolor=red6strong笔记本电脑/strong/font排行榜全面强劲新锐之选/u/fontbrfontsize=2ThinkPadEdge系列采用英特尔(R)酷睿TM处理器.性能强劲提升,身躯更轻薄!全新悬浮式键盘,br将想象力发挥至极致,操作更便捷,创想从此拥有更多可能!/fontbrfontcolor=greensize=2=graysize=2-推广/font/font/ppfontcolor=bluesize=4u2013全新索尼strong7fontcolor=red笔记本电脑/font/strong旗舰索尼VAIOPro新登场!/font/ubrfontsize=2索尼fontcolor=red笔记本电脑/fontVAIOPro-轻,薄,彰显品质.新一代超极本(TM)创新源自英特尔科技.全新索尼brVAIOPro采用坚固碳纤维机身,8.5小时持久续航.详情请登陆索尼商城!/fontbrfontcolor=greensize=2=graysize=2-推广/font/font/pp8ufontcolor=bluesize=4fontcolor=red笔记本/font排行华硕笔记本S300,13.3英寸超薄轻巧/font/ubrfontsize=2AsusVivoBook触控fontcolor=red笔记本/font,华硕S300CAfontcolor=red笔记本/font采用第三代智能英特尔(R)酷睿(TM)i5处理器.轻br薄便携,搭配SonicMaster美声大师,海量存储,2秒开机,2周待机,快速响应Win8无延迟./fontbrfontcolor=greensize=2=greysize=2-推广/font/p/body++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++9（3）段落标记Html标记之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题段落标记格式：palign=”对齐方式”/p属性名称属性值说明Alignleft左对齐（默认）Center居中Right右对齐（4）段落标题格式：hXalign=”对齐方式”…/hX说明：X取值1~6hX内的文本会自动加粗显示（h1最大）hX针对对象是段落，而font针对对象是任意文本（5）br/:换行（换行不换段）二、修饰标记：(6)水平直线hr/属性名称属性值说明Size像素查手册百分比Width像素10百分比Noshade=“noshade”实体线三、特殊标记定义一个块引用：使用文本缩进格式：blockquote…/blockquote（自动向右缩进一些位置）属性名称属性值说明①Citeurl被引用的地址例如：blockquotecite=””/blockquote②预格式化：pre/pre(可显示源代码格式，若不使用就显示一行**)例如：网站上面显示一个“钻石”pre*************************/preHtml列表与图片的应用1.Html文档中使用的特殊字符11特殊字符转义码注释空格 第一个文字前敲空格毫无作用；两个文字间敲空格无论几个，只有一个有效版权号©©无注册商标®®无“"无&&无<例如：要在网页上面显示“p/p这个标记是段落标记。”转义为：<p></p>这个标记是段落标记。>2网页中信息的排序显示——如何实现?3列表的标记1)用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容①无序列表ul…/ul②有序列表ol…/ol12③定义列表dl…/dl*****注意***可以直接输入标记，查看标记默认状态2）无序列表①语法：ultype=”项目符号类型”litype=”项目符号类型”内容/lili内容/li/ul其中：li…/li表示一个项目13②项目符号类型参数及显示参数值（必须小写）描述disc●（默认）circle○square■3）有序列表①语法：olstart=”列表起点”type=”项目符号类型”li内容1/lili内容2/li/ol②项目符号类型参数及显示说明参数值说明1表示以1,2,3,4来表示a表示a,b,c,d来表示A表示A,B,C,D来表示ii，ii，iiiII,II,III4)定义列表①语法：dldt标题1/dt14dd内容1/dddt标题2/dtdd内容2/dd/dldl/dl定义列表dt/dt表示一个项目dd/dd.表示一个项目下更详细的内容的解释4课堂操作：4.1.1无序列表4.1.2无序列表嵌套154.2有序列表4.3定义列表（参照当当网）5网页支持的图片①GIF256种颜色，支持透明，动画②JPEG（高度压缩）1670万种颜色，不支持透明，不支16持动画③PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种6插入图片标记imgsrc=”图片路径”/7路径：①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称②相对路径：从当前文档开始的路径③使用:（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；（2）如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称17（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为../目标文档全称例如：../返回上一级文件夹../../返回上两级文件夹（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP使用）8图片属性属性名称属性值说明srcURL图片的路径alt文本规定图片的替代文本[图片无法显示时]title文本鼠标悬停时显示的内容width像素/百分比设置图片宽height像素/百分比设置图片高18border数字设置图片边框alignleft图片靠左，文字靠右right图片靠右，文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默认）vspace像素定义图像顶部和底部的空白（垂直边距）hspace像素定义图像左侧和右侧的空白（水平边距）张鹏老师html笔记整理Lesson7~Lesson10第7讲是通过新闻网站实例来复习之前的内容Lesson8~Lessson10是通过hao123实例来讲解表格一、表格基本结构table19trtd/td/tr/tabletable.../table-----定义表格tr.../tr----定义表行td.../td---定义表列（单元格）th.../th----文字标题栏（加粗）会默认自动居中表格标签表格描述table定义表格caption定义表格标题。th定义表格的表头。tr定义表格的行。td定义表格单元。thead定义表格的页眉。tbody定义表格的主体。tfoot定义表格的页脚。20col定义用于表格列的属性。colgroup定义表格列的组。二、表格标题：tablecaption/caption/table三、表格结构化作用：代码乱序时结构得到保持(1)结构化格式（加了无效果，浏览器看）thead.../thead----表示表头区tbody.../tbody----表体区tfoot..../tfoot----