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

《HPCMS中国WEB前端基础培训课程HTML篇.ppt》由会员分享，可在线阅读，更多相关《HPCMS中国WEB前端基础培训课程HTML篇.ppt（64页珍藏版）》请在三一办公上搜索。

1、课程名称 web 前端基础课程(html),讲师：老蜗牛PHPCMS中国培训中心QQ：860275582邮件：,开篇,用于页面展示学习内容：HTML、CSS、div+css、JavaScript学习时间：四天,主要内容,HTML简介HTML结构headtitlebodyfontlinkimgtableulformdivframesetiframe,HTML简介,什么是HTML？名称HTML英文名称是什么?HyperText Markup Language（超文本标记语言）主要用于页面信息展示,HTML简介,HTML简介,HTML语言是目前制作网页最流行的语言可以通过浏览器或文本编辑器查看HTM

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

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

4、息，以帮助正确和精确地显示网页内容。常用的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,refres

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

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

7、体-字体,下划线：文字删除线：文字增强：文字粗体：文字斜体：文字删除线:文字下划线:文字地址:文字用的少,其他元素,段落：标题字：注释：span块div层Span&div的区别：演示span_div.html,body主体-图片,图片：img标记用来在页面中插入图片，其语法形式：src 指明图片URL地址 alt 在图象位置显示的文字图片边框：border设定图像边的宽度,链接：HTML使用超级链接来连接到网络上的其他页面上。语法形式：显示文本 href属性（链接页面地址）：href=“所要链接到的页面地址”target属性：网易属性值：_self,body主体-链接,body主体-链接,链接

8、PHPCMS中国查看？前者为绝对路径，后者为相对路径。./同级目录./上一级目录,body主体-链接,文字作为连接：文字连接图片作为链接：,body主体-路径,相对路径：资源路径与你打开页面有关联的路径叫相对路径绝对路径：资源路径与你打开页面无关的路径叫绝对路径,body主体-表格,表格在页面上最主要的作用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中.1.大量数据的现实 table2.布局 小网站：table大网站：div+css,body主体-表格,table实例,body主体-表格,表格基本语法：-定义表格-定义表行-定义表元是的子元素定义

9、列,body主体-表格,画一个表格(一行两列)：注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,body主体-表格,表格的属性border（边框）属性：border=“number”background（背景图像）属性：background=“图片位置”width、height属性：width=“300”height=“200”,企业开发HTML工具,Dreamweaver安装,body主体-表格,colspan属性(合并纵向单元格)：colspan=“number”rowspan属性(合并横向单元格)：rowspan=“number”,body主体-表格,可以为表格设置背景图片和

10、背景颜色背景色：Bgcolor（不推荐使用）背景图片：background行背景色：bgcolor,练习表格,body主体-div和span,div图层span,其他元素,块标签:内容 空格符：标志实例,body主体-列表,无序列表(Unordered List)有序列表(Ordered List)自定义列表(Definition List),body主体-列表,无序列表：无序列表是一个项目的序列。各项目前加有标记：通常是黑色的实心小圆圈无序列表以标签开始。每个列表项目以开始。例子：ulexample.html,body主体-列表,有序列表有序列表也是一个项目的序列。所谓有序，指的是按照数字或

11、字母等顺序排列列表项目。各项目前加有数字作标记。有序列表以标签开始。每个列表项目以开始。属性type可以指定为A、a、1、i、I例子：olexample.html,body主体-列表,自定义列表自定义列表不是一个项目的序列，它是一系列条目和它们的解释。自定义列表以标签开始，自定义列表条目以开始，自定义列表的释义以开始。例子：dlexample.html总结：列表在我们后面的div+css布局会经常用到，所以大家认真对待哦！,body主体-表单,什么是表单？表单的作用：动态网页技术中，表单的作用是十分重要的，用户与服务器的交互就是通过表单来完成的。表单的结构：,表单-输入类型,文本框 text密

12、码 password隐藏字段 hidden单选框 radio复选框 checkbox 下拉菜单 select和option文本域 textarea文件打开 file按钮button提交与重置reset submit,body主体-表单,HTML表单元素（表单元素是能够让用户在表单中输入信息的元素）文本框标签：注意：大部分浏览器中，文本框的宽度默认是20个字符,body主体-表单,单选按钮标签：MaleFemaleChecked属性的特殊性注意：单选按钮的名称必须相同，否则不能控制单选特性。,body主体-表单,复选框：study game,body主体-表单,Select属性栏位名称-name

13、 select name=资料栏位名 设定显示的选项数-size select size=个数 多重选项-multiple select multiple,body主体-表单,文本域：The cat was playing in the garden.,body主体-表单,两个特殊的按钮提交按钮重置按钮注意：提交按钮必须配合form的action属性使用,修改input元素的外观显示,给元素增加style属性,加上color后加上”;”,然后按空格即可弹出下个提示。,框架,框架（frame）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,框架,加入框架的页面不需

14、要元素，使用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框架宽度部份边缘所保留的空间。,框架,不需要一个单独的页面存放框架.灵活性好.

15、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中国http:/模板超市网http:/,