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

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

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

说明

标记通常是成对出现<

单标记<

br/>

案例:

html符号实体

说明：

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

超链接的案例:

*****************<

ahref="

a.html"

target=”_self,_blank,_top,_parent”>

连接到a.html<

/a>

!

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

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

"

>

跳转到XX<

mailto:

hanshunping@"

联系管理员<

Demo1.htm

b>

横看成林<

/b>

fontcolor="

red"

远近高低各不同<

/font>

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

fontstyle="

font-size:

30px;

不知庐山真面目<

面试:

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

答:

1.如果一个网站有index.html 

和index.htm 

默认情况下，优先访问.html

3. 

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

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

图片:

imgsrc=”图片的路径/该图片也可是一个url”width=”宽度”heigth=”高度”/>

Html的表格元素

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

快速入门:

tablealign="

center"

height="

10px"

bgcolor="

yellow"

border="

3px"

width="

400px"

--tr表示一行-->

tralign="

td>

1<

/td>

2<

3<

/tr>

right"

tdalign="

4<

5<

tr>

9<

10<

/table>

应用案例 

：

确定行

代码 

如下:

--

--tr表示一行

tdalign="

-->

tableheight="

150px"

--显示菜单-->

tableborder="

1"

align="

bordercolor="

#E76BFF"

height="

225px"

cellpadding="

1px"

cellspacing="

0px"

>

--colspan="

3"

表该列要占用三列-->

colspan="

菜谱<

tdrowspan="

2"

素菜<

青草茄子<

花椒扁豆<

小炒韭菜<

白豆腐<

tdrowspan="

荤菜<

清蒸龙<

鱼香肉丝<

小炒肉 

imgsrc="

dog.jpg"

70px"

/>

水煮肉片<

课堂练习:

title>

俺第一个实例<

/title>

Center>

成绩表

/center>

--表格-->

align="

579AFE"

border="

width="

500px"

项目<

tdcolspan="

5"

上课<

休息<

trbgcolor="

pink"

th>

星期<

/th>

星期一<

星期二<

星期三<

星期四<

星期五<

星期六<

星期日<

4"

上午<

语文<

数学<

英语<

物理<

计算机<

地理<

历史<

化学<

体育<

政治<

计算机1<

下午<

无序列表

ul>

li>

/li>

/ul>

代码:

ultype="

circle"

英雄<

精武门<

西游记<

type 

可以取 

disc 

、 

circle 

square

有序列表

oltype="

I"

卢俊义<

吴用<

林冲<

/ol>

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

Frameset框架集

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

framest 

和 

frame 

配合使用，一般讲是用于后台页面

代码

A2.html 

页面用于保护其它页面

framesetcols="

30%,*"

framename="

frame1"

src="

b.html"

noresizeframeborder="

0"

/>

frame2"

c.html"

frameborder="

/frameset>

该页面不能有body和body体

b.html

bodybgcolor="

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

zjl.html"

target="

周杰伦<

qq.html"

齐秦<

target 

属性值有四个

_blank:

表示打开一个全新的页面

_self:

替换本页面

_top:

_parent:

* 

还有一个就是在 

值中直接写对应的那个 

frame的名字.

c.html:

silver"

歌词大全

其它页面

Frameset的综合小案例:

结构示意图:

案例

All.html

framesetrows="

20%,*"

framesrc="

top.html"

scrolling="

no"

framesetcols="

left.html"

noresizeframeborder="

right.html"

name="

myframe"

frameborder="

Top.html

title.JPG"

Left.html

青花瓷<

当兵的人<

Right.html

晚上的练习:

按照笔记走一遍

作业

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

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

）

2.2. 

普通邮箱

Iframe的使用

有时我们需要，在一个含有<

的页面嵌入另外一个页面，形成画中画的效果,怎么处理->

iframe元素（浮动窗口）

入门案例

Iframe.html

h1>

hello,world<

/h1>

iframe1"

连接到taobao<

/A>

ahref="

kk.html"

target="

连接到kk.html<

iframename="

iframesrc="

表单元素

为什么需要 

？

看一个图:

从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素（ 

常见 

输入框、单选框、复选框、文本域、密码框、上传文件。

。

基本结构

inputtype=”类型”name=”名字”/>

一般说，表单元素通常是被<

form>

包含起来的

Abc:

inputtype=”text”name=”hobby”/>

inputtype=”radio”/>

formaction=”?

?

”method=”get”>

U:

inputtype=”text”name=”username”/>

inputtype=”submit”value=”xx”/>

/form>

”method=”?

”>

入门案例:

Login.html

登录页面<

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

--method 

方法指定提交数据的方式,常用的有两种 

get/post-->

formaction="

ok.html"

method="

post"

--name 

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

用户名:

inputtype="

text"

username"

密　码:

password"

inputtype="

submit"

value="

登录系统"

reset"

重新填写"

Ok.html

Ok,登录成功

原理图:

请考虑：

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

25 

秒前 

上传

下载附件 

（27.43KB）

案例代码:

表单元素<

method="

get"

您最喜欢哪些城市:

checkbox"

name="

cities"

value="

beijing"

北京

shanghai"

上海

伦敦"

伦敦

您的性别是:

radio"

sex"

man"

男

woman"

女<

隐藏域的使用

hidden"

data"

ok"

下拉列表<

请选择您的出生地:

selectname="

address"

size=3multiple>

optionvalue="

sichuan"

四川<

/option>

北京<

xizang"

西藏<

/select>

--文本域,-->

textareaname="

mytextarea"

cols="

40"

rows="

10"

/textarea>

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

file"

myfile"

上传文件<

测试"

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

image"

image1.png"

多媒体

head>

title>

我的电影网站<

/head>

body>

!

embedsrc="

一起走到.MPG"

F.GIF"

dynsrc="

clock.avi"

loop="

start="

mouseover"

/body>

/html>

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

图像映射技术:

html>

scriptlanguage="

javascript"

functionshow（）{

window.alert（'

点击了矩形区域'

）;

}

/script>

mapimg.gif"

usemap="

#abc"

--映射区域-->

mapname="

abc"

areashape="

rect"

onclick="

show（）;

href="

#"

coords="

140,20,280,60"

/map>

更新时间:

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

11 

秒前上传

下载附件（7.54KB）

fieldsetstyle="

width:

300px"

legend>

blue"

★审核状态<

/legend>

state"

已经审核

没有审核

全部

/fieldset>

Div+css是什么?

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

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

原理图如下：

1 

分钟前上传

下载附件（22.16KB）

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

基本语法:

style>

下载附件（50.38KB）

选择器{

属性:

属性值;

…

}

/style>

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

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

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

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

下载附件（8.33KB）

Demo.html

css入门小案例<

--引入我们的css-->

linkrel="

stylesheet"

type="

text/css"

my.css"

divclass="

style1"

2.jpg"

/div>

My.css

.style1{

/*宽度*/

width:

400px;

height:

300px;

/*一定要写一个分号*/

background-color:

silver;

border:

1pxsolidred;

margin-left:

400px;

margin-top:

250px;

padding-top:

20px;

padding-left:

40px;

网页设计的三个时期

① 

table网页设计

② 

table+css网页设计

③ 

div+css网页设计

css使用必要性1.可以很好的统一网站的显示风格.

css使用的基本语法

属性1:

属性2:

….

15 

下载附件（7.12KB）

Html文件:

--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->

t