传智播客HTML笔记(共27页)

1、PAGE PAGE 13Lesson 1一、Html 简介(jin ji)超文本标记(bioj)语言 html不是编程语言，是一种描述性标记(bioj)语言 eg: color,sizeHtml文档创建方式：用html语言创建文档手工直接编写（记事本）通过图形化的语言的html开发软件：dw由web服务器上动态网页程序生成：php二、html语法总结双标记内容有属性值：无属性值：单标记：换行分隔符标记的属性：内容说明标记与属性、属性之间以空格分隔属性不分先后顺序，且属性不是必须的建议所有(suyu)标记采用小写Lesson2一、Html的文档结构(jigu)标题(biot) 正文二、meta标

2、签，标记用于定义文件信息Meta标签用于定义文件信息，放置于设置关键字 设置描述 设置作者名 设置字符集 （UTF-8 3字节 gb2312 2字节）设置页面定时跳转：例子(l zi)：Lesson 3 html编辑器及body详解(xin ji)html编辑器编辑器：editplus好处：代码会有颜色(yns)区别的 body详解Body属性：.Lesson4Lesson5一、html标记(bioj)语义应用Html文件名最好(zu ho)使用英文字体(zt)修饰：（1）标记语法：文本注意：网页的文本字体一般通过CSS修饰（2）字符格式功能标记加粗文本加强语气（加粗）文本倾斜文本加强语气（倾

3、斜）文本下划线文本删除行文本上标文本下标文本另： 标题文本比权限高*写html代码(di m)的流程*1先写控制内容的标记，例如(lr)这内容比较重要，可以在语义上加权关键字如果这部分内容(nirng)是这篇文章的主题使用标题文本2段落文字内容段落内容+例如：E:笑笑网页设计html-exercisedemo1 笔记本电脑 排行榜全面强劲(qingjng) 新锐之选ThinkPad Edge系列采用英特尔(R)酷睿TM处理器.性能强劲提升,身躯更轻薄!全新(qun xn)悬浮式键盘,将想象力发挥至极致(j zh),操作更便捷,创想从此拥有更多可能! 2013-07- 推广 2013全新(qun

4、 xn)索尼笔记本电脑旗舰(qjin) 索尼VAIO Pro新登场!索尼笔记本电脑VAIO Pro-轻,薄,彰显(zhn xin)品质.新一代超极本(TM) 创新源自英特尔科技.全新索尼VAIO Pro采用坚固碳纤维机身,8.5小时持久续航.详情请登陆索尼商城! 2013-07 - 推广(tugung) 笔记本 排行 华硕笔记本S300,13.3英寸(yngcn)超薄轻巧Asus VivoBook触控笔记本,华硕S300CA笔记本采用(ciyng)第三代智能英特尔(R)酷睿(TM)i5处理器.轻薄便携,搭配SonicMaster美声大师(dsh),海量存储,2秒开机,2周待机,快速响应Win8

5、无延迟. 2013-07 - 推广(tugung) +（3）段落标记Html标记(bioj)之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题段落标记格式：属性名称 属性值 说明Align left左对齐（默认）Center 居中Right右对齐（4）段落标题格式(g shi)：说明：X取值16 hX内的文本会自动(zdng)加粗显示（h1最大）hX针对对象是段落，而font针对对象是任意文本（5）:换行（换行不换段）二、修饰标记：(6)水平直线属性名称 属性值 说明Size像素查手册百分比Width像素百分比Noshade=“noshade”实体线三、特殊标记定义一个块引用：使用文本缩进格式

6、：（自动向右缩进一些位置）属性名称属性值说明Citeurl被引用的地址例如(lr)：预格式(g shi)化： (可显示源代码格式，若不使用就显示一行*)例如：网站上面显示(xinsh)一个“钻石”*Html列表与图片的应用1.Html文档中使用的特殊字符特殊字符转义码注释空格第一个文字前敲空格毫无作用；两个文字间敲空格无论几个，只有一个有效版权号无注册商标无“无&无例如：要在网页上面显示“这个标记是段落标记。”转义为：这个标记是段落标记。2网页中信息(xnx)的排序显示如何(rh)实现?3列表(li bio)的标记用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在

7、一种列表中嵌套另一种列表。便于概括显示一系列相关的内容无序列表有序列表定义列表*注意*可以直接输入标记，查看标记默认状态2）无序列表语法：内容内容其中：表示一个项目PAGE PAGE 28项目符号(fho)类型参数及显示参数值（必须小写）描述disc（默认）circlesquare3）有序列表语法(yf)：内容1内容2项目符号类型参数及显示说明参数值说明1表示以1,2,3,4来表示a表示a,b,c,d来表示A表示A,B,C,D来表示ii，ii，iiiII,II,III4)定义列表语法：标题1内容1标题2内容2定义(dngy)列表表示一个(y )项目.表示一个项目下更详细(xingx)的内容的解

8、释4课堂操作：4.1.1无序列表4.1.2 无序列表嵌套4.2有序列表4.3定义(dngy)列表（参照当当网）5网页支持(zhch)的图片GIF 256种颜色，支持(zhch)透明，动画JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种6插入(ch r)图片标记7路径(ljng)：绝对路径：提供目标文档的完整主机名称、路径信息及文档全称相对路径：从当前文档开始的路径使用:（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目

9、标文档全称（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为./目标文档全称例如：./返回上一级文件夹././返回(fnhu)上两级文件夹（4）根相对路径：从站点根目录开始(kish)的路径，以“/”开始(kish)（PHP使用）8图片属性属性名称属性值说明srcURL图片的路径alt文本规定图片的替代文本图片无法显示时title文本鼠标悬停时显示的内容width像素/百分比设置图片宽height像素/百分比设置图片高border数字设置图片边框alignleft图片靠左，文字靠右right图片靠右，文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默认）

10、vspace像素定义图像顶部和底部的空白（垂直边距）hspace像素定义图像左侧和右侧的空白（水平边距）张鹏老师html笔记(bj)整理Lesson7Lesson10第7讲是通过新闻网站实例来复习(fx)之前的内容Lesson8Lessson10 是通过(tnggu)hao123实例来讲解表格表格基本结构.定义表格.定义表行.定义表列（单元格）.文字标题栏（加粗）会默认自动居中表格标签表格描述 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_table.asp.htm 定义表格 HYPERLINK mk:MSITStore:

11、H:w3school建站手册.CHM:/html/./tags/tag_caption.asp.htm 定义表格标题。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_th.asp.htm 定义表格的表头。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_tr.asp.htm 定义表格的行。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_td.asp.htm 定义表格单元。 HYPER

12、LINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_thead.asp.htm 定义表格的页眉。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_tbody.asp.htm 定义表格的主体。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_tfoot.asp.htm 定义表格的页脚。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_

13、col.asp.htm 定义用于表格列的属性。 HYPERLINK mk:MSITStore:H:w3school建站手册.CHM:/html/./tags/tag_colgroup.asp.htm 定义表格列的组。表格(biog)标题：表格(biog)结构化作用(zuyng)：代码乱序时结构得到保持(1)结构化格式(g shi)（加了无效果，浏览器看）.表示表头区.表体区表尾区直列化格式. 用于统一控制某一列的格式，取代重复的工作（例如：用于某一列标红，或者某一列居中）特殊表格技巧（1）制作凹凸表格：改变table的 bordercolorlight、bordercolordark属性(这是

14、手册中没有的)Bordercolorlight 设置边框亮时的颜色（boder=”1”时才有用）Bordercolordark 设置边框暗时的颜色（boder=”1”时才有用）隐藏表格某部分边框线：改变table下的frame属性和rules属性细线表格效果公式表格自身的border=”0”给表格(biog)设置背景颜色=细线颜色给表格(biog)设置、单元格之间距离cellspacing=细线粗细设置表格(biog)内部背景色仿站小技巧 结构分析图可以通过标签嵌套实现一些复杂布局代码尽可能精简，（网站优化）减少网页内存，提高运行速率这是传智播客张鹏老师的html+css第11节笔记：html

15、超链接使用超链接：Hyperlink 由当前文档到目标文档间的跳转语法Target：_blank 在新窗口中打开_self 在自身窗口中打开（默认）_parent在上一级窗口中打开，框架会经常使用_top 在浏览器的整个窗口中打开，忽略任何框架链接类型内部链接：当前网页与网页在同一个站点 外部链接：当前网页与网页在不同一个站点E-mail链接：允许(ynx)访问者向指定的地址发邮件（一般指要付费的企业邮箱）局部链接：锚点：跳转到同一页面的某个位置(wi zhi)or其他文档中的指定位置1)相同文档：创建锚点：链接锚点：2)不同文档：空链接 （无目标，用于特效）例如：设为首页设为首页添加收藏加入

16、收藏夹(6) 脚本链接：一种特殊(tsh)的链接，当单击设置脚本链接的文本or图像时，可以运行相应的javaScript语句。常用(chn yn)脚本链接：新浪关闭(gunb)窗口：输入 javascript:window.close()打开窗口：输入javascript:window.open(文件名)四、小技巧：增加网页长度，采用空段 Lesson1213 html表单基础与应用Post方法可以传递大量信息（主流）Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）表单的元素 input标签必须含有name 属性和type属性1. 文本框： 2. 密码(m m)框： 3. 单选

17、框: 4. 多选框：5. 上传文件(wnjin)：6. 下拉列表(li bio)： 分组的下拉列表： 7. 多行文本：8. 按钮1. 提交按钮 2. 重置按钮 3. 普通按钮 4. 图片按钮 注意：图片(tpin)按钮的功能相当于提交按钮Lesson 14 html多媒体应用(yngyng)一、FLASH动画插入(ch r)，两种方式通过dw自动生成代码embed标签属性：src =”url” wmode=”transparent”(使flash背景透明 ) width=” ” height=” ”二、插入背景音乐如loop=”-1” 即为无限循环三、插入视频wmv格式 四、滚动字幕（手册没有）滚动的文字属性：direction=”滚动的方向” left,right,up,downBehavior=”滚动方式” scroll一圈一圈地走（默认）slide只走一圈 alternate来回地走Loop=”滚动循环次数” 若未指定则循环不止 (loop=”infinite”)Bgcolor=”背景颜色” width=”宽度” height=”高度”On mouseover=”this.stop()” o