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

1、课程名称 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语言是目前制作网

2、页最流行的语言 可以通过浏览器或文本编辑器查看HTML文档,如何编写HTML,先看个实例,HTML简介,以“”开始，以“”表示标签的结束 一对标签中还可以嵌套其它的标签。 单独标签不需要与这配对的结束标签，又称这为空标签，例如 属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（”）可单引号（）引起来，也可以不使用任何引号,HTML结构,文件扩展名为.html/.htm HTML文件的所有内容都应该包含在标记中 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容,人,HTML结构,标签,HTML结构,H

3、TML头部,HTML头部需要包含在中，可以在头中使用的标记包括、等等。 定义文档的标题，最终将显示在浏览器标题栏上 定义页面元信息，主要包含了搜索信息 用于引入文件.css 指定页面脚本文件.js,Meta元素,META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME) HTTP-EQUIV 似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容 ,响应报头信息，如页面编码、缓存模式等等. NAME 定义页面基本信息，这些信息是提供给网络搜索引擎的，搜索引擎通过这些信息可以找到页面,META-HTTP-EQUIV,HTTP-EQUI

4、V 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-La

5、nguage (显示字符集的设定) 使用: 使用较少,META-HTTP-EQUIV,refresh-刷新 例子：refresh.html,META-NAME,name属性用于描述页面内容，主要是向搜索引擎提供查询关键字等 NAME变量 name是描述网页的，对应于Content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类） Keywords(关键字) Description(简介) ： Robots(机器人向导)说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none

6、、index、noindex、follow、nofollow。默认是all,HTML主体,HTML主体是HTML页面中最终要显示出来的内容部分，主体应该包含在中 可以在主体中输出文本、插入图片、表格、表单等等,HTML简介,练习：请做一个html页面，输出：“这是我的第一个html页面,HTML标签,标签属性 标签可以拥有属性。属性进一步说明了该元素的显示或使用特性。如： 属性的格式 ： xxx,body体属性,背景颜色 bgcolor=red” 背景图片 backgroundback-ground.gif” 给出图片文件位置，如图片小于页面时，将循环填充 背景音乐 考虑到效率,基本不用,Bo

7、dy主体-字体,字体大小 文字 #=1, 2, 3, 4, 5, 6, 7 字体颜色 文字 标题字 文字 # =1，2，3，4，5，6,Body主体-字体,下划线：文字 删除线：文字 增强：文字 粗体：文字 斜体：文字 删除线:文字 下划线:文字 地址:文字 用的少,其他元素,段落： 标题字： 注释： span块 div层 Span”,然后按空格即可弹出下个提示,框架,框架（frame）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,框架,加入框架的页面不需要元素，使用frameset 在另外一个frame中打开页面 target 左右分：,框架,上下分：,框架

8、,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,练习,做一

9、个上下,左右结构的框架 框架页面 frameset.html,作业1,做一个注册页面form.html 要求: 1,有用户名,密码,确认密码,Email,所在城市这几个必须填写的项.(例:用户名*) 2,有性别,生日,个人主页,自我介绍等选填项 3,有是否接受系统邮件选择(接受或不接受,作业2,完成由一个登陆页面 登陆页面 login.html 用户名，密码，验证码，提交 登陆进入到刚才写的那个框架页面, 框架页面的left页面有文字链接”注册” 点注册链接到作业1的注册页面form.html显示在main Main 显示注册页面 register.html 作业完成后提交到PHPCMS中国社区培训区 作业板块。 可以在PHPCMS中国建站培训交流群探讨：1435