传智播客HTML笔记.doc

《传智播客HTML笔记.doc》由会员分享，可在线阅读，更多相关《传智播客HTML笔记.doc（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、如有侵权，请联系网站删除，仅供学习与交流传智播客HTML笔记【精品文档】第 24 页Lesson 1一、Html 简介 超文本标记语言 html不是编程语言，是一种描述性标记语言 eg: color,size Html文档创建方式：用html语言创建文档手工直接编写（记事本）通过图形化的语言的html开发软件：dw由web服务器上动态网页程序生成：php二、html语法总结双标记内容有属性值：无属性值：单标记：换行分隔符标记的属性：内容说明A 标记与属性、属性之间以空格分隔B 属性不分先后顺序，且属性不是必须的C 建议所有标记采用小写Lesson2一、Html的文档结构标题 正文二、meta标

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

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

4、VAIO Pro-轻,薄,彰显品质.新一代超极本(TM) 创新源自英特尔科技.全新索尼VAIO Pro采用坚固碳纤维机身,8.5小时持久续航.详情请登陆索尼商城! 2013-07 - 推广 笔记本 排行 华硕笔记本S300,13.3英寸超薄轻巧Asus VivoBook触控笔记本,华硕S300CA笔记本采用第三代智能英特尔(R)酷睿(TM)i5处理器.轻薄便携,搭配SonicMaster美声大师,海量存储,2秒开机,2周待机,快速响应Win8无延迟. 2013-07 - 推广 （3）段落标记Html标记之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题段落标记格式：属性名称 属性值 说明Ali

5、gn left左对齐（默认）Center 居中Right右对齐（4）段落标题格式：说明：X取值16 hX内的文本会自动加粗显示（h1最大）hX针对对象是段落，而font针对对象是任意文本（5）:换行（换行不换段）二、修饰标记：(6)水平直线属性名称 属性值 说明Size像素查手册百分比Width像素百分比Noshade=“noshade”实体线三、特殊标记定义一个块引用：使用文本缩进格式：（自动向右缩进一些位置）属性名称属性值说明Citeurl被引用的地址例如：预格式化： (可显示源代码格式，若不使用就显示一行*)例如：网站上面显示一个“钻石”Html列表与图片的应用1.Html文档中使用的特

6、殊字符特殊字符转义码注释空格 第一个文字前敲空格毫无作用；两个文字间敲空格无论几个，只有一个有效版权号©无注册商标®无“"无&无<例如：要在网页上面显示“这个标记是段落标记。”转义为：<p></p>这个标记是段落标记。>2网页中信息的排序显示如何实现?3列表的标记1) 用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容 无序列表 有序列表 定义列表*注意*可以直接输入标记，查看标记默认状态2）无序列表语法：内容内容其中：表示一个项

7、目 项目符号类型参数及显示参数值（必须小写）描述disc（默认）circlesquare3）有序列表语法：内容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定义列表表示一个项目.表示一个项目下更详细的内容的解释4课堂操作：4.1.1无序列表4.1.2 无序列表嵌套4.2有序列表4.3定义列表（参照当当网）5网页支持的图片 GIF 256种颜色，支持透明，动画 JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画 PNG（网络可移植

8、格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种6插入图片标记7路径：绝对路径：提供目标文档的完整主机名称、路径信息及文档全称相对路径：从当前文档开始的路径使用:（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为./目标文档全称例如：./返回上一级文件夹././返回上两级文件夹（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP使用）8图片属性属性名称属性值说明srcURL图片的路径alt文本规定图片的替代文本图片无

9、法显示时title文本鼠标悬停时显示的内容width像素/百分比设置图片宽height像素/百分比设置图片高border数字设置图片边框alignleft图片靠左，文字靠右right图片靠右，文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默认）vspace像素定义图像顶部和底部的空白（垂直边距）hspace像素定义图像左侧和右侧的空白（水平边距）张鹏老师html笔记整理Lesson7Lesson10第7讲是通过新闻网站实例来复习之前的内容Lesson8Lessson10 是通过hao123实例来讲解表格一、 表格基本结构.-定义表格.-定义表行.-定义表列（单元

10、格）.-文字标题栏（加粗）会默认自动居中表格标签表格描述定义表格定义表格标题。定义表格的表头。定义表格的行。定义表格单元。定义表格的页眉。定义表格的主体。定义表格的页脚。定义用于表格列的属性。定义表格列的组。二、 表格标题：三、 表格结构化作用：代码乱序时结构得到保持(1)结构化格式（加了无效果，浏览器看）.-表示表头区.-表体区.-表尾区(2) 直列化格式. 用于统一控制某一列的格式，取代重复的工作（例如：用于某一列标红，或者某一列居中）四、 特殊表格技巧（1）制作凹凸表格：改变table的 bordercolorlight、bordercolordark属性(这是手册中没有的)Border

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

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

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

14、. 上传文件：6. 下拉列表： 分组的下拉列表： 7. 多行文本：8. 按钮1. 提交按钮 2. 重置按钮 3. 普通按钮 4. 图片按钮 注意：图片按钮的功能相当于提交按钮Lesson 14 html多媒体应用一、FLASH动画插入，两种方式 通过dw自动生成代码 embed标签属性：src =”url” wmode=”transparent”(使flash背景透明 ) width=” ” height=” ”二、插入背景音乐如loop=”-1” 即为无限循环三、插入视频wmv格式 四、滚动字幕（手册没有）滚动的文字属性：direction=”滚动的方向” left,right,up,dow

15、nBehavior=”滚动方式” scroll一圈一圈地走（默认）slide只走一圈 alternate来回地走Loop=”滚动循环次数” 若未指定则循环不止 (loop=”infinite”)Bgcolor=”背景颜色” width=”宽度” height=”高度”On mouseover=”this.stop()” on mouseout=”this.start()”鼠标过来停止滑动Scrollamout=”速度” 数值越大速度越快Scrolldelay=”延时”(走一步，停一停)Lesson 15框架技术框架制作流程（以为例）1 先做主框架文件 126.html2 再分别制作网站各部分，包含left.html ,right.html3 通过框架技术，将left和right包含到126.html中框架链接操作有一个target属性，默认自身窗口如果链接指向的目标是一个框架的区域，必须先给这个区域起个名称框架标记写框架时不需要写body标志