html语言课件.ppt

HTML语言 学习进度表 1 html代码 上 p1 p153学时2 html代码 下 p16 p363学时3 js代码 上 3学时4 js代码 下 3学时5 复习总结3学时 HTML入门 HTML英语意思是 HypertextMarkedLanguage 即超文本标记语言以文本文件为基础 添加一系列标记描述其格式 颜色等属性 加上图片 音视频 动画 通过浏览器解释 形成精彩画面 eg01通过HTML可以表现出丰富多彩的设计风格通过HTML可以实现页面之间的跳转 eg02浏览器解释html从上到下 从左到右逐句解释 eg03所有的网页都以HTML为基础 可嵌入其他语言 文件的扩展名为 html或 htmeg04eg05 HTML的文档结构 最简单的网页 可见 怎么样 简单吧 可见 html网页eg06 头部区域 主体区域 HTML的基本语法 文本例如 最简单的网页eg06文本例如 背景红色eg07例如 我想学做网页是呀 我也想学 eg07 HTML的常用标记 一 标记 网页全体 用于标识当前文档为html网页 网页内容以开始结束以下所有标记或标记对都必须嵌于此标记中 二 标记 网页头部 1 标记浏览器窗口的标题栏中显示的文字 即网页标题 2 标记用于载入外部CSS文件eg08 3 标记标识网页文档编码 简体中文其它语言字符集 Charsets iso 8859 1 big5 x euc jp euc kreg09 4 标记eg10在当前网页里载入一个abc js文件 5 标记eg10在此标记之间定义本网页的css样式 三 标记 网页体部 1 标记属性 bgcolor 背景色彩text 非可链接文字的色彩link 可链接文字的色彩alink 正被点击的可链接文字的色彩vlink 已经点击 访问 过的可链接文字的色彩 rrggbb 3333FF色彩是用16进制的红 绿 蓝 red green blue RGB 值来表示 16进制的数码有 0 1 2 3 4 5 6 7 8 9 a b c d e f eg11 网页整体背景图象eg12 页面左边的空白 页面上方的空白 天头 eg13未加入eg14加入 2 标记 链接标记属性说明1 url指定此链接指向的文件名及文件路径 文件类型广泛 一般为其他网页文件 路径分为相对路径 物理 和绝对路径 网址 标记之间指定了具有链接的元素 可以是文字 图片等 文字链接实例 链接的例子图片链接实例 属性说明2 target属性指定链接出现在哪类窗口target blank 以新建窗口的方式打开连接 target self 在当前窗口中打开连接 eg15 标记 标尺线 或 或 或eg16 rrggbb16进制RGB数码 或者是下列预定义色彩 Black Olive Teal Red Blue Maroon Navy Gray Lime Fuchsia White Green Purple Silver Yellow Aqua 4 标记 1 2 3 4 5 6 标题字体标记使用方法 eg17今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 属性说明 这些标记显示黑体字 这些标记自动插入一个空行 不必用标记再加空行 因此对文字标题设置时 在一行中无法使用不同大小的字体 5 标记 普通字体标记属性扩展 字体大小 1 2 3 4 5 6 7or 使用方法 控制字体大小今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 今天天气真好 显示 今天天气真好 eg18 字体颜色 客户端可获得的字体 HellowWorld 显示 HellowWorld eg19 6 物理字体标记使用方法 今天天气真好 以黑体字显示今天天气真好 以斜体字显示今天天气真好 以加下划线显示今天天气真好 打字机风格今天天气真好 上标显示今天天气真好 下标显示今天天气真好 删除显示eg20 7 逻辑字体标记使用方法 今天天气真好 斜体加黑体今天天气真好 加黑今天天气真好 代码小字今天天气真好 斜体文字今天天气真好 文字变小今天天气真好 文字变大eg20 8 字符实体标记使用方法 eg21 综合练习 标记的组合使用 今天天气真好 显示 今天天气真好 今天天气真好今天天气真好 好 郊游去 显示 小结 1 标记多数必须以成对形式出现 2 标记都有很多扩展的属性 3 标记间可以灵活嵌套嵌套内的标记不得有未封闭的标记对 4 注意网页的区域性 9 行控制标记 段标记 可以看作是空行 代码 你好吗 很好 显示 你好吗 很好 eg24快捷键 在dreamweaver中直接按下回车键 换行标记代码 你好吗 很好 显示 你好吗 很好 eg24快捷键 在dreamweaver中按下shif 回车键 效果类似word中的回车 10 文字对齐标记 left center right 标题的对齐代码 大家还在听课么 显示 大家还在听课么 eg25 left center right 段落的对齐代码 默认左对齐居中对齐右对齐显示 默认左对齐居中对齐右对齐eg26 通用居中对齐代码 希望还在听显示 希望还在听eg27 11 文字的分区显示 left center right 代码 Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 显示 Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 代码 eg28Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 显示 Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 代码 Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 显示 Canyoufeelhappinesswithoutunpleasant Pleaseshowmeyoursmile 12 列表标记 无序列表 ul标记一个圆点显示的无序列表 li为表项 代码 TodayTommorow显示 TodayTommoroweg29 制定无序列表中的标记 disk circle square 代码 ONETWOTHREE显示 ONETWOTHREEeg29 有序列表 ol标记一个数字显示的有序列表 li为表项 代码 TodayTommorow显示 TodayTommoroweg29 定制有序列表表中的序号 A a I i 1 代码 显示 sadkfasdffasdfasdfasdfasdffasdf sadkfasdffasdfasdfasdfasdffasdf 定义列表 dl标记一个普通定义列表 dt为上层表项 dd为下层表项 代码 TodayTodayisyesterday Todayisyesterday TomorrowTomorrowistoday 显示 eg30TodayTodaywillbeyesterday Todaywillbeyesterday TomorrowTomorrowwillbetoday 注意 和标记必须位于标记对之间使用 源代码显示标记 代码 Pleaseuseyourcard VISAMasterHereisanorderform FaxAirMail显示 eg31Pleaseuseyourcard VISAMasterHereisanorderform FaxAirMail 块引用标记 缩进标记 代码 HerSong WhenIwasyoung Ilistenedtotheradiowaitingfor 显示 eg32HerSong WhenIwasyoung Ilistenedtotheradiowaitingfor 1 图像标记 链入图象的基本语法代码 图象的URL 在图象位置显示的提示文字 给图象指定的宽和高 象素为单位实例 图象和文字的对齐代码 top middle bottom实例 Myface eg33Myface Myface 注意 只有一行文字时才可以放在图象的两边 图象在页面中的对齐代码 eg34 left right实例 MyFace Itisalwayssmiling Hahaha MyFace Itisalwayssmiling Hahaha 图象的间距 value v高 h宽单位 象素Itisalwayssmiling Hahaha eg34 图象的边框代码 value 实例 eg35 1 表单标记 表单的基本语法表单域开始输入的表单 提交按钮重置按钮表单域结束声明 标记 name属性 指定表单的名称 action属性 指定由哪个cgi文件来处理当前表单提交的用户信息method属性 定义表单的提交方式 get或post target属性 定义目标窗口打开的方式 self blank parent top标记inputtype属性 指定用户输入区域的类型text 文本框 password 密码框 hidden 隐藏表单 radio 单选按钮 checkbox 复选按钮 image 图像按钮 submit 提交按钮 reset 重置按钮 name 指定输入表单的名称以供cgi提取eg36 文本框和密码框单行文本框声明 text 定义一个单行的文本输入区域name 当前文本框的名称以便供cgi提取其值size 以字符为单位定义文本框中显示文字的个数maxlength 定义可输入的最大字符个数 其值应该小于等于sizevalue 定义默认显示给用户的文本初始值eg36多行文本框 声明 textarea 定义一个多行的文本输入框cols 定义此文本框的字符宽度 即以字符为单位的列数rows 定义可见文本框的行数 value 定义默认显示给用户的文本初始值wrap 不指定此属性将默认应用自动换行 如设置为off则关闭自动换行eg36密码框声明 password 定义一个单行的密码文本输入区域 字符显示为 号其他同上eg36 单选框和复选框单选框声明 radio 定义一个单选框name 定义此个单选框的名称value 如此单选框被选中 设置此单选框的值 checked 设置此单选框默认被选中 反之则无此属性eg36注意 如定义一组单选框 必须保证他们的name值相一致 复选框声明 checkbox 定义一个复选框name 定义此个复选框的名称value 如此复选框被选中 设置此复选框的值 checked 设置此复选框默认被选中 反之则无此属性eg36注意 如定义一组复选框 必须保证他们的name值相一致 列表框代码 声明 表示列表框开始 表示列表框结束name 定义列表框的名称size 定义列表框显示的列数 默认为1multiple 如加入此属性 则此列表框可多选 反之为弹出式单选列表框 加入时 可用Ctrl键 shift键配合鼠标实现多选或按住鼠标左键拖动多选 和MS WINDOWS的FileManager一样 selected 在所有选项中 指定一个为默认选项 不加 默认为第一个value 为其选项赋值eg36注意 服务器cgi通过区域名字的value属性获得此列表框的值 隐藏表单代码 声明 Hidden 指定此表单为隐藏类型Value 指定此隐藏表单的值eg36 图像按钮代码 eg36声明 image 指定此表单为图像按钮 作用等同于提交按钮小结 制作一个含有多种表单的网页提示 实际运用中 往往搭配js代码对表单进行安全验证等操作 POST方法比较适合用于发送一个保密的 比如信用卡号 或者比较大量的数据到服务器 但速度慢 而Get方法会将所要传输的数据附在网址后面 然后一起送达服务器 因此传送的数据量就会受到限制且不安全 但是执行效率却比Post方法好 具体来说如下 1 Get将表单中数据的按照variable value的形式 添加到action所指向的URL后面 并且两者使用 连接 而各个变量之间使用 连接 Post是将表单中的数据放在form的数据体中 按照变量和值相对应的方式 传递到action所指向URL 2 Get是不安全的 因为在传输过程 数据被放在请求的URL中 而如今现有的很多服务器 代理服务器或者用户代理都会将请求URL记录到日志文件中 然后放在某个地方 这样就可能会有一些隐私的信息被第三方看到 另外 用户也可以在浏览器上直接看到提交的数据 一些系统内部消息将会一同显示在用户面前 Post的所有操作对用户来说都是不可见的 3 Get传输的数据量小 这主要是因为受URL长度限制 而Post可以传输大量的数据 所以在上传文件只能使用Post 当然还有一个原因 将在后面的提到 4 Get限制Form表单的数据集的值必须为ASCII字符 而Post支持整个ISO10646字符集 5 Get是Form的默认方法 15 表格标记 表格的基本语法表格开始 表格结束声明 一个表格的开始一个表格的结束border属性 设置边框宽度 不设置则默认为0width属性 height属性 设置表格宽度和高度 单位为像素或百分比cellpadding 表格单元格边框与其内部内容之间填充空间的大小 cellspacing 表格各单元格之间间距空间的大小属性 表格中的一行 即表行属性 表示表格一行中的一列 即表元属性 定义表头 黑体居中文字 现不常用 eg37 表格的色彩代码 设置整个表格的背景颜色设置表格一行的颜色 颜色可覆盖颜色设置表格一个单元格的颜色 颜色可覆盖颜色eg38设置边框颜色设置边框明亮部分的颜色 当border值 1有效设置边框背光部分的颜色 当border值 1有效eg39 声明 对于同样可以指定background URL 属性 行的设置 代码 aabbcc声明 align属性 控制水平对齐方式可选值left center rightvalign属性 控制垂直对齐方式可选值top middle bottom 单元格的设置 代码 ABC声明 align属性 控制水平对齐方式可选值left center right