html笔记.docx

《html笔记.docx》由会员分享，可在线阅读，更多相关《html笔记.docx（26页珍藏版）》请在冰豆网上搜索。

html笔记

课程安排

Html+css四天

◆Html是什么

1.html（hypertextmark-uplanguage）是超文本标记语言,主要的用处是做网页,可以在网页上显示文字、图像、视频、声音…

☞标记==元素

简单说明一下动态网页的示意图:

◆Html历史

1999html--xhtml（xhtml可以理解成就是html的加强版）-xml

|

2008html5.0

◆W3c的介绍

是一个制定标准的组织（比如给html,xhtml,css,xml,wml…制定标准）

☞不同的浏览器，去访问同一个网页，可能看到的效果是有差别!

->hack

◆Html的运行原理

Hello.html

Html的运行有两种方式

Html文件的基本结构

1.本地运行

所谓本地运行就是直接用浏览器打开

2.远程访问

●何为协议?

计算机互相通信（网络）的规则.ftpsmtppophttp

远程访问的原理示意图:

☞这里我们涉及到http协议，这里我们没有深入讲解，但是这是一个非常重要的知识点.

Html的基本结构

<元素属性1=”值”…./>

<元素属性1=”属性值”属性2=“属性值”…>内容

<元素属性=”属性值”/>

说明

1.标记通常是成对出现

2.单标记

案例:

Demo1.htm

横看成林

远近高低各不同

--size值可以取1..7-->

30px;">不知庐山真面目

面试:

请问后缀html和htm有什么区别?

答:

1.如果一个网站有index.html和index.htm默认情况下，优先访问.html

3.htm后缀是为了兼容以前的dos系统8.3的命名规范

◆html符号实体

说明：

当我们在网页中有一些特殊字符时候，可以考虑使用字符实体（charentity）

超链接的案例:

*****************

连接到a.html

--如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的url-->

--url统一资源定位-->

跳转到XX

hanshunping@">联系管理员

图片:

◆Html的表格元素

●在以前对网页布局要求不高的情况下，使用table布局（即使用表格来显示数据，同时用于布局）

快速入门:

--tr表示一行-->

1

2

3

2

4

5

3

9

10

3

9

10

应用案例：

1.确定行

代码如下:

--

--tr表示一行

1

2

3

2

4

5

3

9

10

3

9

10

-->

--显示菜单-->

--colspan="3"表该列要占用三列-->

菜谱

素菜

青草茄子

花椒扁豆

小炒韭菜

白豆腐

荤菜

清蒸龙

鱼香肉丝

小炒肉

水煮肉片

课堂练习:

--表格-->

项目

上课

休息

星期

星期一

星期二

星期三

星期四

星期五

星期六

星期日

上午

语文

数学

英语

英语

物理

计算机

休息

数学

数学

地理

历史

化学

计算机

化学

语文

体育

计算机

英语

计算机

政治

英语

体育

历史

地理

计算机1

>下午

语文

数学

英语

英语

物理

计算机

休息

数学

数学

地理

历史

化学

计算机

◆无序列表

案例:

代码:

☞type可以取disc、circle、square

◆有序列表

代码:

☞type用于指定用什么来显示,start表示从第几开始计算.

◆Frameset框架集

用途主要是用于分割显示多个页面

☞framest和frame配合使用，一般讲是用于后台页面

快速入门:

代码

A2.html页面用于保护其它页面

☞该页面不能有body和body体

b.html

--target表示我们点击后，目标指向谁-->

周杰伦

齐秦

☞target属性值有四个

_blank:

表示打开一个全新的页面

_self:

替换本页面

_top:

_parent:

*还有一个就是在target值中直接写对应的那个frame的名字.

c.html:

歌词大全

其它页面

Frameset的综合小案例:

结构示意图:

案例

All.html

Top.html

Left.html

• 青花瓷
• 当兵的人

Right.html

歌词大全

晚上的练习:

1.按照笔记走一遍

2.作业

2.1做一个自己的网页，显示自己的基本信息：

姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？

）

2.2.普通邮箱

◆Iframe的使用

？

有时我们需要，在一个含有的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素（浮动窗口）

入门案例

Iframe.html

hello,world

连接到taobao

连接到kk.html

◆表单元素

为什么需要？

看一个图:

从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素（常见输入框、单选框、复选框、文本域、密码框、上传文件。

。

。

）

基本结构

一般说，表单元素通常是被包含起来的

Abc:

?

”method=”get”>

U:

?

”method=”?

?

”>

入门案例:

Login.html

--action的值应当是提交哪个页面（url）-->

--method方法指定提交数据的方式,常用的有两种get/post-->

--name的值可以任意，但是不要使用关键字-->

用户名:

密　码:

Ok.html

Ok,登录成功

原理图:

请考虑：

如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域

案例代码:

您最喜欢哪些城市:

北京

上海

伦敦

您的性别是:

男

女

隐藏域的使用

下拉列表

请选择您的出生地:

四川

北京

西藏

--文本域,-->

--文件上传的控件-->

上传文件

--这是一个图片按钮-->

课堂练习:

◆多媒体

--

-->

◆照着html文档，我们对html在加强一把

图像映射技术:

案例:

--

functionshow（）{

window.alert（'点击了矩形区域'）;

}

-->

--映射区域-->

代码:

300px">

★审核状态