传智播客 韩顺平 php从入门到精通 122讲html课堂笔记.docx

《传智播客 韩顺平 php从入门到精通 122讲html课堂笔记.docx》由会员分享，可在线阅读，更多相关《传智播客 韩顺平 php从入门到精通 122讲html课堂笔记.docx（48页珍藏版）》请在冰豆网上搜索。

传智播客韩顺平php从入门到精通122讲html课堂笔记

Html+css 四天

   Html是什么

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

☞ 标记==元素

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

   Html历史

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

|

2008html5.0

u    W3c的介绍

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

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

->hack

   Html的运行原理

Hello.html

Html的运行有两种方式

Html文件的基本结构

1.本地运行

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

2.    远程访问

l    何为协议?

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

远程访问的原理示意图:

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

Html的基本结构

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

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

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

说明

1.    标记通常是成对出现

2.    单标记

案例:

html符号实体

说明：

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

超链接的案例:

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

连接到a.html

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

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

跳转到XX

 hanshunping@">联系管理员

Demo1.htm

横看成林

远近高低各不同

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

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

面试:

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

答:

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

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

4讲图像表格实际应用-菜谱课堂练习-课程表

图片:

   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,登录成功

原理图:

请考虑：

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

25 秒前 上传

下载附件 （27.43KB）

案例代码:

您最喜欢哪些城市:

北京

上海

伦敦

您的性别是:

男

女

隐藏域的使用

下拉列表

请选择您的出生地:

四川

北京

西藏

--文本域,-->

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

上传文件

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

课堂练习:

多媒体

--

-->

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

图像映射技术:

案例:

--

      functionshow（）{

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

      }

-->

--映射区域-->

更新时间:

2012年09月21日20时08分来源:

11 秒前上传

下载附件（7.54KB）

代码:

300px">

★审核状态

Div+css是什么?

Div+css是一种目前比较流行的网页布局技术

Div来存放需要显示的数据（文字，图表..）,css就是用来指定怎样显示，从而做到数据和显示相互的效果

原理图如下：

1 分钟前上传

下载附件（22.16KB）

有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css

基本语法:

我们可以简单的这样理解div+css:

div是用于存放内容（文字,图片,元素）的容器。

css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

快速入门案例（体验案例）

1 分钟前上传

下载附件（8.33KB）

Demo.html

--引入我们的css-->