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

课程名称 web 前端基础课程(html),讲师：老蜗牛 PHPCMS中国培训中心 QQ：860275582 邮件：,开篇,用于页面展示 学习内容： HTML、CSS 、div+css、 JavaScript 学习时间：四天,主要内容,HTML简介 HTML结构 head title body font link img table ul form div frameset iframe,HTML简介,什么是HTML？ 名称 HTML英文名称是什么? HyperText Markup Language （超文本标记语言） 主要用于页面信息展示,HTML简介,HTML简介,HTML语言是目前制作网页最流行的语言 可以通过浏览器或文本编辑器查看HTML文档,如何编写HTML,先看个实例,HTML简介,以“”开始，以“”表示标签的结束 一对标签中还可以嵌套其它的标签。 单独标签不需要与这配对的结束标签，又称这为空标签 ，例如 属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（”）可单引号（）引起来，也可以不使用任何引号。,HTML结构,文件扩展名为.html/.htm HTML文件的所有内容都应该包含在标记中 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容,人,HTML结构,HTML结构,HTML头部,HTML头部需要包含在中，可以在头中使用的标记包括、等等。 定义文档的标题，最终将显示在浏览器标题栏上 定义页面元信息，主要包含了搜索信息 用于引入文件.css 指定页面脚本文件.js,Meta元素,META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME) HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容 ,响应报头信息，如页面编码、缓存模式等等. NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面,META-HTTP-EQUIV,HTTP-EQUIV HTTP-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.大量数据的现实 table 2.布局 小网站：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主体-列表,无序列表(Unordered List) 有序列表(Ordered List) 自定义列表(Definition List),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 提交与重置 reset submit,body主体-表单,HTML表单元素（表单元素是能够让用户在表单中输入信息的元素 ） 文本框标签： 注意：大部分浏览器中，文本框的宽度默认是20个字符,body主体-表单,单选按钮标签： Male Female Checked属性的特殊性 注意：单选按钮的名称必须相同，否则不能控制单选特性。,body主体-表单,复选框： study game,body主体-表单,Select属性 栏位名称 - name select name=“资料栏位名“ 设定显示的选项数 - size select size=个数 多重选项 - multiple select multiple,body主体-表单,文本域： The cat was playing in the garden. ,body主体-表单,两个特殊的按钮 提交按钮 重置按钮 注意：提交按钮必须配合form的action属性使用,修改input元素的外观显示, 给元素增加style属性,加上color后加上”;”,然后按空格即可弹出下个提示。,框架,框架（frame）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,框架,加入框架的页面不需要元素，使用frameset 在另外一个frame中打开页面 target 左右分： ,框架,上下分： ,框架,frameset属性 COLS=“20,*” 左右分，可一次分多个 ROWS=“20,*” 上下分，同上,框架,frame属性 1. SRC=“a.htm” 当前框架显示的网页URL 2. 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显示在main Main 显示