《传智播客HTML笔记》由会员分享，可在线阅读，更多相关《传智播客HTML笔记（12页珍藏版）》请在金锄头文库上搜索。
1、1Lesson 1一、Html 简介 超文本标记语言 html 不是编程语言，是一种描述性标记语言 eg: color,size Html 文档创建方式：用 html 语言创建文档手工直接编写（记事本）通过图形化的语言的 html 开发软件：dw由 web 服务器上动态网页程序生成： php二、html 语法总结双标记内容有属性值：无属性值：单标记：换行分隔符标记的属性：内容说明A 标记与属性、属性之间以空格分隔B 属性不分先后顺序，且属性不是必须的C 建议所有标记采用小写Lesson2一、Html 的文档结构标题 正文二、meta 标签，标记用于定义文件信息Meta 标签用于定义文件信息，放
2、置于设置关键字 设置描述 设置作者名 设置字符集 （UTF-8 3 字节 gb2312 2 字节）设置页面定时跳转：例子：2Lesson 3 html 编辑器及 body 详解1、 html 编辑器编辑器：editplus好处：代码会有颜色区别的 2、 body 详解Body 属性：.Lesson4Lesson5一、html 标记语义应用Html 文件名最好使用英文字体修饰：（1）标记语法：文本注意：网页的文本字体一般通过 CSS 修饰（2）字符格式功能 标记加粗 文本加强语气（加粗） 文本倾斜 文本加强语气（倾斜） 文本下划线 文本删除行 文本上标 文本下标 文本另： 标题文本 比权限高3*
3、写 html 代码的流程*1 先写控制内容的标记，例如这内容比较重要，可以在语义上加权关键字如果这部分内容是这篇文章的主题-使用标题文本 2 段落文字内容-段落内容+例如：E:笑笑网页设计html-exercisedemo1笔记本电脑排行榜全面强劲 新锐之选ThinkPad Edge 系列采用英特尔(R)酷睿 TM 处理器.性能强劲提升,身躯更轻薄!全新悬浮式键盘 ,将想象力发挥至极致,操作更便捷,创想从此拥有更多可能! 2013-07- 推广42013 全新索尼笔记本电脑旗舰 索尼 VAIO Pro 新登场!索尼笔记本电脑VAIO Pro-轻,薄,彰显品质.新一代超极本(TM) 创新源自英
4、特尔科技.全新索尼VAIO Pro 采用坚固碳纤维机身,8.5 小时持久续航.详情请登陆索尼商城! 2013-07- 推广 笔记本 排行 华硕笔记本 S300,13.3 英寸超薄轻巧Asus VivoBook 触控笔记本,华硕 S300CA笔记本采用第三代智能英特尔(R)酷睿 (TM)i5 处理器.轻薄便携,搭配 SonicMaster 美声大师,海量存储,2 秒开机,2 周待机,快速响应Win8 无延迟 2013-07 - 推广 +（3）段落标记Html 标记之间嵌套使用，一层套一层，若出现交叉嵌套会 出现问题5段落标记格式：属性名称 属性值 说明Align left 左对齐（默认）Cen
5、ter 居中Right 右对齐（4）段落标题格式：说明：X 取值 16 hX 内的文本会自动加粗显示（h1 最大）hX 针对对象是段落，而 font 针对对象是任意文本（5）:换行（换行不换段）二、修饰标记：(6)水平直线属性名称 属性值 说明Size 像素 查手册百分比Width 像素百分比Noshade=“noshade”实体线三、特殊标记定义一个块引用：使用文本缩进格式：（自动向右缩进一些位置）属性名称 属性值 说明Cite url 被引用的地址例如：预格式化： (可显示源代码格式，若不使用就显示一行*)例如：网站上面显示一个“钻石”*Html 列表与图片的应用1.Html 文档中使用的
6、特殊字符特殊字符转义码 注释空格 第一个文字前敲空格毫无作用；两个文字间敲空格无论几个，只有一个有效6版权号 无注册商标® 无“ 无& & 无例如：要在网页上面显示“这个标记是段落标记。 ”转义为：这个标记是段落标记。2 网页中信息的排序显示如何实现?3 列表的标记1) 用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容 无序列表 有序列表 定义列表*注意*可以直接输入标记，查看标记默认状态2）无序列表语法：内容内容其中： 表示一个项目7 项目符号类型参数及显示参数值（必须小写） 描述disc （默认）
7、circle square 3）有序列表语法：内容 1内容 2 项目符号类型参数及显示说明参数值 说明1 表示以 1,2,3,4 来表示a 表示 a,b,c,d 来表示A 表示 A,B,C,D 来表示i i，ii，iiiI I,II,III4)定义列表语法：标题 1内容 1标题 2内容 2定义列表表示一个项目.表示一个项目下更详细的内容的解释4 课堂操作：4.1.1 无序列表4.1.2 无序列表嵌套84.2 有序列表4.3 定义列表（参照当当网）5 网页支持的图片 GIF 256 种颜色，支持透明，动画 JPEG（高度压缩）1670 万种颜色，不支持透明，不支持动画 PNG（网络可移植格式）无
8、损压缩，支持透明，不支持动画，颜色从几种到 1670万种6 插入图片标记7 路径：绝对路径：提供目标文档的完整主机名称、路径信息及文档全称相对路径：从当前文档开始的路径使用:（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为./目标文档全称例如： ./返回上一级文件夹9././返回上两级文件夹（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP 使用）8 图片属性属性名称 属性值 说明src URL 图片的路径alt 文本 规定图
9、片的替代文本图片无法显示时title 文本 鼠标悬停时显示的内容width 像素/百分比 设置图片宽height 像素/百分比 设置图片高border 数字 设置图片边框left 图片靠左，文字靠右right 图片靠右，文字靠左top 文字垂直居上靠middle 文字垂直居中alignbottom 文字垂直居下（默认）vspace 像素 定义图像顶部和底部的空白（垂直边距）hspace 像素 定义图像左侧和右侧的空白（水平边距）张鹏老师 html 笔记整理 Lesson7Lesson10第 7 讲是通过新闻网站实例来复习之前的内容Lesson8Lessson10 是通过 hao123 实例来讲
10、解表格1、表格基本结构.-定义表格.-定义表行.-定义表列（单元格）10.-文字标题栏（加粗）会默认自动居中2、表格标题：3、表格结构化作用：代码乱序时结构得到保持(1)结构化格式（加了无效果，浏览器看）.-表示表头区.-表体区.-表尾区(2)直列化格式. 用于统一控制某一列的格式，取代重复的工作（例如：用于某一列标红，或者某一列居中）4、特殊表格技巧（1）制作凹凸表格：改变 table 的 bordercolorlight、bordercolordark 属性( 这是手册中没有的)Bordercolorlight 设置边框亮时的颜色（boder=”1”时才有用）Bordercolordark
11、 设置边框暗时的颜色（boder=”1”时才有用）（2）隐藏表格某部分边框线：改变 table 下的 frame 属性和 rules 属性（3）细线表格效果公式表格自身的 border=”0”给表格设置背景颜色=细线颜色给表格设置、单元格之间距离 cellspacing=细线粗细设置表格内部背景色5、仿站 小技巧结构分析图可以通过标签嵌套实现一些复杂布局代码尽可能精简， （网站优化）减少网页内存，提高运行速率这是传智播客张鹏老师的 html+css 第 11 节笔记：html 超链接使用一、超链接：Hyperlink 由当前文档到目标文档间的跳转二、语法Target：_blank 在新窗口中
12、打开_self 在自身窗口中打开（默认）_parent 在上一级窗口中打开，框架会经常使用_top 在浏览器的整个窗口中打开，忽略任何框架三、链接类型(1) 内部链接：当前网页与网页在同一个站点 (2) 外部链接：当前网页与网页在不同一个站点(3) E-mail 链接：允许访问者向指定的地址发邮件（一般指要付费的企业邮箱）(4) 局部链接：锚点：跳转到同一页面的某个位置 or 其他文档中的指定位置111)相同文档： 创建锚点： 链接锚点：2)不同文档：(5) 空链接 （无目标，用于特效）例如：设为首页设为首页添加收藏加入收藏夹(6) 脚本链接：一种特殊的链接，当单击设置脚本链接的文本 or 图
13、像时，可以运行相应的 javaScript 语句。常用脚本链接：新浪关闭窗口：输入 javascript:window.close()打开窗口：输入 javascript:window.open(文件名)四、小技巧：1. 增加网页长度，采用空段 Lesson1213 html 表单基础与应用Post 方法可以传递大量信息（主流）Get 方法将值附加到请求该页的 URL 中，适合传递少量信息（默认）表单的元素 input 标签必须含有 name 属性和 type 属性1. 文本框： 2. 密码框： 3. 单选框: 4. 多选框：5. 上传文件：6. 下拉列表：分组的下拉列表：127. 多行文本：
14、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,downBehavior=”滚动方式” scroll一
15、圈一圈地走（默认）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 和 rig
