()传智播客-韩顺平轻松搞定网页设计-html_第1页
()传智播客-韩顺平轻松搞定网页设计-html_第2页
()传智播客-韩顺平轻松搞定网页设计-html_第3页
()传智播客-韩顺平轻松搞定网页设计-html_第4页
()传智播客-韩顺平轻松搞定网页设计-html_第5页
已阅读5页,还剩38页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

北京传智播客教育轻松搞定网页设计之html讲师:韩顺平email:hanshunping@qq:2317702760

内容介绍:1.html介绍2.优秀网页欣赏3.html项目演示4.html运行基本原理(Hello,顺平)√5.html的基础知识 √①了解html的基本概念②理解html的运行基本原理③掌握html的一些基本用法④ 能写出简单的网页学习目标■

html是什么

HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

html介绍--html是什么■

html可以做什么

①HTML可以编写静态网页. ②该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。 给大家看几个漂亮的网页吧!html介绍--html可以做什么■

html发展历史html介绍--html的发展历史1993标记语言第一版1995html2.01996html3.2w3c推荐标准1999html4.0.1w3c推荐标准2000xhtml1.0w3c推荐标准2001xhtml1.1w3c推荐标准2008html5蒂姆·伯纳斯一李万维网之父html设计者w3c创始人

w3c的介绍

W3C是英文WorldWideWebConsortium的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者TimBerners-Lee。W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。

html介绍--w3c介绍蒂姆·伯纳斯一李

html和xhtml区别

html->xhtml->xml

html语言本身有一些缺陷(比如内容和形式不能分离,标记单一,数据不能复用等),随着xml的兴起,xml越来越受到国际认可,所以人们希望xml来弥补html的不足,但是目前有成千上万的网页都是html编写的,所以完全使用xml来替代html还为时过早,于是w3c在2000推出xhtml1.0,建立XHTML的目的就是实现HTML向XML的过渡。

html介绍htmlxhtml区别■

html项目演示

高级邮箱

html项目演示■

html项目演示

麦当劳导航

html项目演示■

html项目演示(可爱屋)

html项目演示■

html项目演示(旅游岛)

html项目演示■

html项目演示(仿sohu首页面)html项目演示■

html运行原理 ①本地运行 html运行的基本原理■

html运行原理 ②远程访问运行

html运行的基本原理你的电脑浏览器远程服务器hello.html你可能产生的疑问?①ie是怎样访问到hello.html?(url)②万维网是个什么东东?☞可以使用apache来测试一下这个运行的效果!■

万维网(www)

简略图:

html运行的基本原理wwwsohu子网■

万维网(www)-综合图html运行的基本原理■

html的开发工具

①记事本 ②editplusvim ③frontpage ④dw ⑤zendstudio ⑥其它的idehtml的开发工具■

html的基本结构

从下面test.html我们可以看出html的基本结构

<html>

<head>

<title>这是我的第一个网页</title>

</head>

<body>

这是我的第一个网页

<b>你好!</b>

</body>

</html><元素名

[属性]>元素内容</元素名>

html的基本结构■

html的标记/元素

①HTML标记是用来组成HTML元素的 ②HTML标记用两个尖括号”<>”括起来 ③HTML标记一般是双标记,如<b>和</b>前一个标记是起始标记,后一个标记为结束标记 ④两个标记之间的文本是html元素的内容 ⑤某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思,如<br> ⑥html标记和html元素可以看做是同一个概念,在我的课程中为统一说法,就叫html元素。

html常用的元素参考html语言教程(html版)

html的标记/元素介绍■

html的元素的属性每个元素都有多个属性,每个属性有不同的属性值来修饰,从而达到不同的显示效果.举例:html元素的属性<p>段落标记</p><fontsize=“”>字体标记</font>size取值1到7<h#>标题字体</h#>#=1,2,3,4,5,6<b></b>

字体加粗■

html的元素的属性 关于每个元素,所包含的各个属性以及各个属性对应的属性值,请各位同学参看:html语言教程(html版)

html元素的属性■

HTML符号实体-介绍 在网页上显示一些特殊的符号,我们需要使用html的符号实体,有些人把它称为字符实体,比如我们看一个小小的案例(html1_1.html)。

为在网页上显示版权符号,我们就需要使用html的符号实体©才能在网页上正确显示。

HTML符号实体-一览表

html超链接

a.htm代码:<html><body><ahref=b.htm>老鼠爱大米</a><br><ahref=#abc>齐秦</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><fontcolor=red><aname=abc>北方的狼</a></font><ahref=mailto:abc@>abc@</a></body></html>b.htm代码:<html><body>我听见你的声音<BR>有种特别的感觉<BR>让我不断想不敢再忘记你<BR>我记得有一个人<BR>永远留在我心中<BR><ahref=a.htm>返回</a></body></html>打开当前计算机系统中默认的电子邮件客户端软件,例如:OutLookExpress

html常用标记/元素-超链接<ahref=“url地址”></a><ahref=“mailto:电子邮箱地址”></a>■

html图像元素

html常用标记/元素-image<imgsrc=“图片的路径”width=“宽度”height=“高度”></img>■

html表格 html常用标记/元素-table<tableborder=“边框宽度”cellspacing=“空隙大小”cellpadding=“填充大小”></table>■

html表格-小练习 html常用标记/元素-table请用html编写如下网页■

上机练习题 html常用标记/元素-table请用html编写如下网页■

html列表-无序列表 <UL>

的属性设定(常用):例如:<ULtype="square">

type="square"

设定符号款式,其值有三种,如下,默认为type="disc":type="disc"

时的列项符号为实心圆点。type="circle"

时的列项符号为空心圆。type="square"

时的列项符号为空心正方形。

html常用标记/元素-ul/li<ultype=“属性值”><li>列表内容</li></ul>■

html列表-有序列表

<OL>称为顺序列表标记。<LI>则用以标示列表项目。所谓顺序列表就是每一项有顺序,又称编号列表。<OL>的属性设定(常用):例如:<oltype="i"start="4"></ol>type="i"设定数目款式,其值有五种,请参考右表,内定为type="1"。

start="4"设定开始数目,不论设定了哪一数目款式,其值只能是1,2,3..等整数,默认为start="1"。

i可以取以下值中的任意一个:1阿拉伯数字1,2,3,...a小写字母a,b,c,...A大写字母A,B,C,...i小写罗马数字i,ii,iii,...I大写罗马数字I,II,III,...。

html常用标记/元素-ol/li<oltype=“属性值”start=“起始值”><li>列表内容</li></ol>■

html列表-框架

html常用标记/元素-frameset<framesetframeborder=“边框大小”cols=‘”各窗口百分比,隔开”rows=“各窗口百分比”><framename=“给frame取名”src=“html路径”noresize></frameset>■

html框架-(frameset小练习)

html常用标记/元素-frameset/frame完成下面的网页,用户点击左侧的超链接,可以看到相应的歌词■

iframe浮动窗口html常用标记/元素-iframe浮动窗口■

form(表单)元素介绍html常用标记/元素-form客户端服务器<formaction="url"method=*>......<inputtype=submit><inputtype=reset></form>星号*部分可以为GET,也可以是

POST

form(表单)元素html常用标记/元素-form■

form(表单)元素-小练习html常用标记/元素-form■

input元素html常用标记/元素-input元素您的姓名:<input

type="text"

name="姓名"><br>密码:<input

type="password"

name="密码"><br><inputtype="checkbox"

name="水果1">香蕉<p><inputtype="checkbox"

name="水果1"checked>苹果<p><inputtype="Image"

name="submit"align="top"

src="shan.jpg"><inputtype="radio"

name="水果">香蕉<p><inputtype="radio"

name="水果"checked>苹果<p><inp

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论