HPCMS中国WEB前端基础培训课程HTML篇.ppt

课程名称web前端基础课程 html 讲师 老蜗牛PHPCMS中国培训中心QQ 860275582邮件 i 开篇 用于页面展示学习内容 HTML CSS div css JavaScript学习时间 四天 主要内容 HTML简介HTML结构headtitlebodyfontlinkimgtableulformdivframesetiframe HTML简介 什么是HTML 名称HTML英文名称是什么 HyperTextMarkupLanguage 超文本标记语言 主要用于页面信息展示 HTML简介 HTML简介 HTML语言是目前制作网页最流行的语言可以通过浏览器或文本编辑器查看HTML文档 如何编写HTML 先看个实例 HTML简介 以 开始 以 表示标签的结束一对标签中还可以嵌套其它的标签 单独标签不需要与这配对的结束标签 又称这为空标签 例如属性设置的一般格式为 属性名 属性值 属性值部分可以用英文的双引号 可单引号 引起来 也可以不使用任何引号 HTML结构 文件扩展名为 html htmHTML文件的所有内容都应该包含在标记中HTML语言在结构上分为两部分 即头部和主体 头部描述浏览器所需要的一些信息 如文件编码 标题等 主体则包含了文件的主体内容 人 HTML结构 标签 HTML结构 HTML头部 HTML头部需要包含在中 可以在头中使用的标记包括 等等 定义文档的标题 最终将显示在浏览器标题栏上定义页面元信息 主要包含了搜索信息用于引入文件 css指定页面脚本文件 js Meta元素 META标签分两大部分 HTTP标题信息 HTTP EQUIV 和页面描述信息 NAME HTTP EQUIV似于HTTP的头部协议 它回应给浏览器一些有用的信息 以帮助正确和精确地显示网页内容 响应报头信息 如页面编码 缓存模式等等 NAME定义页面基本信息 这些信息是提供给网络搜索引擎的 搜索引擎通过这些信息可以找到页面 META HTTP EQUIV HTTP EQUIVHTTP EQUIV类似于HTTP的头部协议 它回应给浏览器一些有用的信息 以帮助正确和精确地显示网页内容 常用的HTTP EQUIV类型有 Content Type和Content Language 显示字符集的设定 Refresh 刷新 Expires 期限 Pragma cach模式 禁止从本地缓存中获取信息Content No cach Window target 显示窗口的设定 强制页面在当前窗口以独立页面显示 Content选项 blank top self parent META HTTP EQUIV Content Type和Content Language 显示字符集的设定 使用 使用较少 META HTTP EQUIV refresh 刷新例子 refresh html META NAME name属性用于描述页面内容 主要是向搜索引擎提供查询关键字等NAME变量name是描述网页的 对应于Content 网页内容 以便于搜索引擎机器人查找 分类 目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类 Keywords 关键字 Description 简介 Robots 机器人向导 说明 Robots用来告诉搜索机器人哪些页面需要索引 哪些页面不需要索引 Content的参数有all none index noindex follow nofollow 默认是all HTML主体 HTML主体是HTML页面中最终要显示出来的内容部分 主体应该包含在中可以在主体中输出文本 插入图片 表格 表单等等 HTML简介 练习 请做一个html页面 输出 这是我的第一个html页面 HTML标签 标签属性标签可以拥有属性 属性进一步说明了该元素的显示或使用特性 如 属性的格式 xxx body体属性 背景颜色bgcolor red 背景图片background back ground gif 给出图片文件位置 如图片小于页面时 将循环填充背景音乐考虑到效率 基本不用 Body主体 字体 字体大小文字 1 2 3 4 5 6 7字体颜色文字标题字文字 1 2 3 4 5 6 Body主体 字体 下划线 文字删除线 文字增强 文字粗体 文字斜体 文字删除线 文字下划线 文字地址 文字用的少 其他元素 段落 标题字 注释 span块div层Span div的区别 演示span div html body主体 图片 图片 img标记用来在页面中插入图片 其语法形式 src指明图片URL地址alt在图象位置显示的文字图片边框 border 设定图像边的宽度 链接 HTML使用超级链接来连接到网络上的其他页面上 语法形式 显示文本href属性 链接页面地址 href 所要链接到的页面地址 target属性 网易属性值 self body主体 链接 body主体 链接 链接PHPCMS中国查看 前者为绝对路径 后者为相对路径 同级目录 上一级目录 body主体 链接 文字作为连接 文字连接图片作为链接 body主体 路径 相对路径 资源路径与你打开页面有关联的路径叫相对路径绝对路径 资源路径与你打开页面无关的路径叫绝对路径 body主体 表格 表格在页面上最主要的作用其实不是绘制实际中使用的表格 更多情况下是为了使用页面看起来更规整 而将页面各部分放置到表格中 1 大量数据的现实table2 布局小网站 table大网站 div css body主体 表格 table实例 body主体 表格 表格基本语法 定义表格 定义表行 定义表元是的子元素定义列 body主体 表格 画一个表格 一行两列 注意 一个完整的表格必须由三个标签构成 且应该先画行后画列 body主体 表格 表格的属性border 边框 属性 border number background 背景图像 属性 background 图片位置 width height属性 width 300 height 200 企业开发HTML工具 Dreamweaver安装 body主体 表格 colspan属性 合并纵向单元格 colspan number rowspan属性 合并横向单元格 rowspan number body主体 表格 可以为表格设置背景图片和背景颜色背景色 Bgcolor 不推荐使用 背景图片 background行背景色 bgcolor 练习表格 body主体 div和span div图层span 其他元素 块标签 内容空格符 标志实例 body主体 列表 无序列表 UnorderedList 有序列表 OrderedList 自定义列表 DefinitionList body主体 列表 无序列表 无序列表是一个项目的序列 各项目前加有标记 通常是黑色的实心小圆圈无序列表以标签开始 每个列表项目以开始 例子 ulexample html body主体 列表 有序列表有序列表也是一个项目的序列 所谓有序 指的是按照数字或字母等顺序排列列表项目 各项目前加有数字作标记 有序列表以标签开始 每个列表项目以开始 属性type可以指定为A a 1 i I例子 olexample html body主体 列表 自定义列表自定义列表不是一个项目的序列 它是一系列条目和它们的解释 自定义列表以标签开始 自定义列表条目以开始 自定义列表的释义以开始 例子 dlexample html总结 列表在我们后面的div css布局会经常用到 所以大家认真对待哦 body主体 表单 什么是表单 表单的作用 动态网页技术中 表单的作用是十分重要的 用户与服务器的交互就是通过表单来完成的 表单的结构 表单 输入类型 文本框text密码password隐藏字段hidden单选框radio复选框checkbox下拉菜单select和option文本域textarea文件打开file按钮button提交与重置resetsubmit body主体 表单 HTML表单元素 表单元素是能够让用户在表单中输入信息的元素 文本框标签 注意 大部分浏览器中 文本框的宽度默认是20个字符 body主体 表单 单选按钮标签 MaleFemaleChecked属性的特殊性注意 单选按钮的名称必须相同 否则不能控制单选特性 body主体 表单 复选框 studygame body主体 表单 Select属性栏位名称 name selectname 资料栏位名 设定显示的选项数 size selectsize 个数 多重选项 multiple selectmultiple body主体 表单 文本域 Thecatwasplayinginthegarden body主体 表单 两个特殊的按钮提交按钮重置按钮注意 提交按钮必须配合form的action属性使用 修改input元素的外观显示 给元素增加style属性 加上color后加上 然后按空格即可弹出下个提示 框架 框架 frame 用于分割窗口 也就是浏览器在显示页面时分成几部分 每部分由独立的页面显示 如图 框架 加入框架的页面不需要元素 使用frameset在另外一个frame中打开页面target左右分 框架 上下分 框架 frameset属性COLS 20 左右分 可一次分多个ROWS 20 上下分 同上 框架 frame属性1 SRC a htm 当前框架显示的网页URL2 NAME框架名称3 scrolling no 是否显示滚动条 YES显示 NO不显示 AUTO视情况显示 框架 4 noresize不让使用者改变大小 5 marginheight 2框架高度部份边缘所保留的空间 6 marginwidth 2框架宽度部份边缘所保留的空间 框架 不需要一个单独的页面存放框架 灵活性好 Target self parent blank top 练习 做一个上下 左右结构的框架框架页面frameset html 作业1 做一个注册页面form html要求 1 有用户名 密码 确认密码 Email 所在城市这几个必须填写的项 例 用户名 2 有性别 生日 个人主页 自我介绍等选填项3 有是否接受系统邮件选择 接受或不接受 作业2 完成由一个登陆页面登陆页面login html用户名 密码 验证码 提交登陆进入到刚才写的那个框架页面 框架页面的left页面有文字链接 注册 点注册链接到作业1的注册页面form html显示在mainMain显示注册页面register html作业完成后提交到PHPCMS中国社区培训区作业板块 可以在PHPCMS中国建站培训交流群探讨 143560049 PHPCMS零基础建站培训 培训内容 大分类 包括 1 网站策划 2 主机空间 域名选购 3 前端培训 细分 4 主流开源CMS建站培训 主讲phpcms dedecms 5 网站运营及搜索引擎优化 SEO 6 待定主办 PHPCMS中国模板超市网