学生个人网站制作html代码(学生个人主页制作html)
一个完整的html代码怎么编写?
简单的htm的编写过程如下:
先新建一个文本文件,可以自己命名,如下图,我命名为测试。
编译文本,以最简单的代码格式为例html???? head???????? title???????? /title???? /head???? body???? /body/html
在body/body写入你要写的内容,下面以hello world为例。
修改文件后缀名,将txt改为html。
测试是否成功,双击? 测试.html,如果出现了下面的内容,恭喜你,你已经学会了最简单的html编写。
需要一份html教程的网页制作,主题是我的个人网页,
这是我在大学学的知识
给你借鉴一下 ,希望对你有帮助
网页设计教程
html文字操作(一)
1、段落 p……/p
在dreamweaver设计界面中,enter(回车)即为另起一段。
2、换行 br/
在dreamweaver设计界面中,shift+enter即为另起一段。
3、标题1~6 h1……/h1
标题1最大,依次变小。
4、空格:
Dreamweaver 只允许一次空格,如果需要使用连续空格,则需要设置,或使用nbsp;
或使用快捷键:ctrl+shift+space(空格键)
5、水平线 hr
size:水平线的粗细
width:长度
align:对齐方式
htlm文字操作(二)
一、几个文字特殊效果
1、加粗b/b strong/strong
2、倾斜i/i em/em
3、上标sup/sup(适合用代码来实现,设计中无法完成)
4、下标sub/sub(适合用代码来实现,设计中无法完成)
随着css的逐渐普及,文字的效果都更多的通过css来实现,以上的几个标签作为了解即可。
二、文字列表
1、无序列表
无序列表有两个标签ul和li
ul
liCSS教程/li
liDOM教程/li
liXML教程/li
liFlash教程/li
/ul
2、有序列表
有序列表有两个标签ol和li
ol
liCSS教程/li
liDOM教程/li
liXML教程/li
liFlash教程/li
/ol
图片
一、如何获取图像
最好的途径是通过互联网
二、使用设计界面插入图像
1、菜单(一个图片属性:替换文字)
2、工具栏
3、拖曳
三、图像格式扩展阅读:
JPEG图像、GIF图像、PNG图像
四、代码
img src=" " width=" " height=" " alt=" "/
一、超级链接的基本知识
1、含义:实现网页之间的跳转和联系
2、分类:
绝对链接
相对链接 在同一站点不同位置之间的链接
二、三种常见的超级链接
1、文字链接a href=""百度/a
2、图像链接
3、图像热点链接
===============
还有不是太常用的链接
1、空连接 a href="#"空连接/a
2、锚链接:在同一页面的不同位置跳转
三、链接的属性
链接目标 a href="" target="_blank"百度/a
表单设计
一、设计界面
1、单元格间距
2、单元格边距
二、代码
1、从属关系:表格由行组成,行由单元格组成。
表格:table……/table
行:tr……/tr
单元格:td……/td
2、table标签的属性
bgcolor:背景色
cellspacing:表格的单元格间距(间距)
cellpadding:表格的单元格边距(填充)
文字占据一行div/div
文字不占据一行span/span
、html引入css的几种方法
1、链接式
将css代码写在一个独立的文件中,文件的扩展名为.css。然后在html网页中使用link/标签将外部css文件放在head/head之间。举例:
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
link href="tp.css" rel="stylesheet" type="text/css"
/head
2、嵌入式
将Css代码写在head/head之间,并且用style/style包含起来,如果考虑到兼容性,可以再使用!-- -- 将css代码包含其中。
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style type="text/css"
!--
p {
font-family: "楷体_GB2312";
font-size: 18px;
}
--
/style
/head
1.标签选择器:
就是网页元素本身,所有的XHTML框架中的标签都可以作为CSS样式的选择器,如定义段落样式,我们可以选择P标签的名称,即把P作为选择器。P{/*定义段落属性*/}。如果定义了标签样式,则整个网页中使用了该标签都会应用这个样式。一般应用在统一文档的某个元素的显示样式中。
2.ID选择器:
它是唯一的,网页中不同的元素它的ID是不一样的。而且一个元素它只能应用一个ID。因为如果我们使用Javascript来控制网页元素的时候它是通过ID来实现的,在这种情况下就无法正常工作了。它在定义的时候用#开始,它在应用的时候用id=””。它的名称由设计者来确定。
3. 类选择:
它的名称也是由设计者来确定的,它在定义的时候用点号开始,应用的时候用class=“”;它与ID选择器所不同的是它具有一对多的特性而ID是一对一的特性。也就是说一个类选择器它可以应用到多个网页元素中而且一个元素可以应用多个类,一个元素也可以应用两个类样式,中间用空格分开,但不能是三个或者更多。在同等条件下,ID具有比class更高的优先权。
1、复杂类选择器
p.one{color:red}
实例:
style
.one{color:red;}
p.two{color:blue;}
/style
.one可以用于各种标签;而。two只能用于p标签。
2、后代选择器
div p{color:#00FF00}
例子:
div
h1这是一个标题。/h1
p我是一个兵。/p
/div
3、组合选择器(集体声明)
p,h1,.one{color:red}
4、通用选择器
对html文档的所有元素进行控制。
*{color:red;}
5、伪类选择器
a:link;hover;visited;active
或者:a.one:link;a#two:link
当用css定义链接的各种状态时,一定要注意其书写顺序,即::link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。
一、属性
1.大小 font-size
大小就是字号,可以直接填入数字,然后选择单位。
2.样式
font-style
设置文字的外观,包括正常、斜体、偏斜体。
3.行高 line-height
这项设置在网页制作种很常用。设置行高,可以选择“正常”,让计算机自动调整行高,也可以使用数值和单位结合的形式自行设置。需要注意的是,单位应该和文字的单位一致,行高的数值是包括字号数值在内的。例如,文字设置为12pt,如果要创建一倍行距,则行高应该为24pt。
4.修饰 font-decoration
文本的特殊样式:上下划线、删除线、闪烁(IE不支持此效果)
5.粗细 font-weight
设置文字的加粗还是变细的效果。
6.颜色 color
设置文字的色彩。
颜色的表示方法常见的有RGB模式、十六进制模式和名称模式。
7.字体 font-family
设置文字的字体,注意多个字体的选择。
8.文本对齐 text-align
设置文本的水平对齐方式。 这里也不仅仅局限于文字,泛指所包含的内容。
9.文字缩进 text-indent
这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值,然后选择单位。文字的缩进和字号要保持统一。如字号为12px,像创建两个中文自的缩进效果,文字缩进就应该为18px。
二、属性值:css中的单位
1、大小单位:px和em
2、颜色单位:red和#00ff00
三、css背景
1、背景色:background-color: (5-1)
2、背景图片:background-image:url(^);(5-3)
3、背景图片的重复方式:background-repeat:(5-5)
4、背景图片的位置:background-position:top right;(30% 70%;水平位置 垂直位置)(300px 30px;)(5-8)
5、背景图片的固定与否:background-attachment:scroll;(fixed;)背景是否与网页内容一起滚动。(5-10)
fixed:背景不动,内容动;scroll:背景和内容一起滚动
6、背景图片的综合样式:background:blue url(……) no-repeat fixed 5px 10px;
7、列表样式:list-style:
怎样制作个人网页,有教程,简单点。
具体步骤如下:
1、打开服务器中网站文件的目录,假设为D:\\abcd。
2、新建一个txt文件,文件名改为index.htm。index.htm文件是网站首页的链接,进入你的网站后第一个显示的就是这个文件上的内容。然后右键index.htm—打开方式—记事本。
3、现在可以添加html代码,使得网页显示文本。p/p是html中段落的标签,p是开始符,/p是结束符,两个符号之间的字会显示在网页上。在index.htm中添加一行:p声明:这是一个个人网站,网页里的内容均为站主原创,请勿用于违法行为。/p;下图为效果截图。
4、还可以为网页添加图片,图片的标签是img。假设图片文件的路径为D:\\abcd\pic\123.jpg,则在index.htm中添加一行:img src=pic/123.jpg。下图为效果截图。
5、添加链接的标签是a/a。在index.htm中添加一行:a href=""百度,前面是链接,这里是显示的字。/a下图为效果截图,点开蓝字,则会跳转到"百度一下"。
6、完成上述步骤后,即可制作个人网页。
网页设计常用HTML代码
网页设计常用HTML代码大全
HTML是用来描述网页的一种语言。下面我为大家分享HTML代码,希望对大家学习html代码有帮助!
忽视右键
body oncontextmenu="return false"
或
body style="overflow-y:hidden"
1.如何几秒后转到别的页面?
META HTTP-EQUIV="Refresh" CONTENT="时间;URL=地址"
2.点击关闭窗口
a href="javascript:top.window.close();"点击关闭窗口/a!
3.请问如何去掉主页右面的滚动条?
body scroll="no"
body style="overflow-y:hidden"
4.请问如何做到让一个网页自动关闭.
html
head
OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
param name="Command" value="Close"
/object
/head
body onload="window.setTimeout(‘‘‘‘closes.Click()‘‘‘‘,10000)"
这个窗口会在10秒过后自动关闭,而且不会出现提示. /body
如何在不刷新页面的情况下刷新css?
style
button{ color:#000000;}
/style
button onclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘点击按钮直接修改style标签里button选择符使按钮改为红色/button
请问如何让网页自动刷新?
在head部记入META HTTP-EQUIV="Refresh" content="20"其中20为20秒后自动刷新,你可以更改为任意值。
5.如何让页面自动刷新?
方法一,用refresh
HTML 代码片段如下:
head
meta http-equiv="refresh" content="5"
/head
5表示刷新时间
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
方法二,使用setTimeout控制
img src=/logo.gif
script
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
/script
6.如何让超链接没有下划线
在源代码中的HEAD…/HEAD之间输入如下代码:
style type="text/css" !--
a { text-decoration: none}
-- /style
7.请问如何去掉IE的上下滚动条?
body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘
/body
8.怎样才能把RealPlayer文件在网页做一个试听连接?
embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" controls="PlayButton"
9.如何用html实现浏览器上后退按钮的功能?
a href="java script:history.go(-1)"点击后退/a
或者
script history.back() /script
10.请问怎么在网页中改变鼠标的箭头形状?
HTML 代码片段如下:
body
a href="#" style="cursor: auto;"auto/abr
a href="#" style="cursor: crosshair "crosshair /abr
a href="#" style="cursor: default "default /abr
a href="#" style="cursor: hand "hand /abr
a href="#" style="cursor: move "move /abr
a href="#" style="cursor: e-resize "e-resize /abr
a href="#" style="cursor: ne-resize "ne-resize /abr
a href="#" style="cursor: nw-resize"nw-resize/abr
a href="#" style="cursor: n-resize"n-resize/abr
a href="#" style="cursor: se-resize"se-resize/abr
a href="#" style="cursor: sw-resize"sw-resize/abr
a href="#" style="cursor: s-resize"s-resize/abr
a href="#" style="cursor: w-resize"w-resize/abr
a href="#" style="cursor: text"text/abr
a href="#" style="cursor: wait"wait/abr
a href="#" style="cursor: help"help/abr
/body
11.怎样不使用页面的缓存?即每一次打开页面时不是调用缓存中的东西
META HTTP-EQUIV="Pragma" CONTENT="no-cache"
12.页面打开时自动弹出一个窗口的代码怎么写?
HTML 代码片段如下:
html
head
titleUntitled Document/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
script language="B style="color:black;background-color:#A0FFFF"javascript/B"
!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//--
/script
/head
body bgcolor="#FFFFFF" text="#000000" onLoad="MM_openBrWindow(‘‘‘‘‘‘‘‘,‘‘‘‘,‘‘‘‘width=400,height=400‘‘‘‘)"
/body
/html
13.如何让我的页面出现一个会讲话的小人?Merlin
HTML 代码片段如下:
HTML
HEAD
TITLE默林/TITLE
META http-equiv=Content-Type content="text/html; charset=gb2312"
/HEAD
BODY
pOBJECT id=sims classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F
/OBJECT
SCRIPT
var MerlinID;
var MerlinACS;
sims.Connected = true;
MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);
Merlin = sims.Characters.Character(MerlinID);
Merlin.Show();
Merlin.Play("Surprised");
Merlin.Speak("大家好");
Merlin.Play("GestureLeft");
Merlin.Think("我是默林!");
Merlin.Play("Pleased");
Merlin.Think("可爱吗?");
Merlin.Play("GestureDown");
Merlin.Speak("哈哈!");
Merlin.Hide();
function LoadLocalAgent(CharID, CharACS){
LoadReq = sims.Characters.Load(CharID, CharACS);
return(true);
}
/SCRIPT
/p
p /p
p看此效果必须装有office2000!!!/p
/BODY
/HTML
14.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
HTML 代码片段如下:
htmlhead
STYLE
body {background-image:url(logo.gif);
background-repeat:no-repeat; background-position:center }
/STYLE
/head
body bgproperties="fixed"
/body
/html
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
background-repeat:no-repeat; 是让背景图不占满整个页面
body bgproperties="fixed" 是拉动scroll时背景图不动
15.文本输入框什么属性能实现不可输入?
HTML 代码片段如下:
input type="text" name="textfield" disabled
或者
input type="text" name="textfield" readonly
16.如何禁止自己的页面在别人的框架里打开?
把以下代码加至你的head区
script
if (window.top!=self){
window.top.location=self.location
}
/script
17.如何实现首页全屏幕显示?
HTML 代码片段如下:
html
bodyscript language="B style="color:black;background-color:#A0FFFF"javascript/B"
var coolw=642
var coolh=400
var coolhuang=window.open("","coolhuang","width="+coolw+",height="+coolh+",
fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")
window.close()
/script/body/html
18.如何监听一个窗口被关闭了?
HTML 代码片段如下:
body onunload="alert(‘‘‘‘你关闭了这个窗口‘‘‘‘)"
19.如何禁止Ctrl+N?
HTML 代码片段如下:
body onkeydown=return(!(event.keyCode==78event.ctrlKey))
如何把页面加入用户的收藏夹?
HTML 代码片段如下:
a href="B style="color:black;background-color:#A0FFFF"javascript/B:window.external.AddFavorite(‘‘‘‘‘‘‘‘,‘‘‘‘无忧脚本‘‘‘‘)"收藏无忧脚本/a
如何在我的'页面中加入背景音乐?
IE: bgsound src="*.mid" loop=infinite
NS:embed src="*.mid" autostart=true hidden=true loop=true
*.mid你的背景音乐的midi格式文件
关于页面转换效果
meta http-equiv="page-enter" content="revealTrans(Duration=4,Transition=23)"
或
meta http-equiv="page-exit" content="revealTrans(Duration=4,Transition=23)"
说明:Transition=23是随机效果,另可以选0-22任一数字固定某个效果
如何设定打开页面的大小
HTML 代码片段如下:
body onload="top.resizeTo(300,200);"!--(width,height)--
怎样双击滚屏,单击停止?
HTML 代码片段如下:
html
head
title新网页1/title
/head
body
script language"B style="color:black;background-color:#A0FFFF"javascript/B"
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
/script
pa/ppa/ppa/ppaa/ppaa/ppaa/p
paa/ppaa/ppaa/ppaa/ppaa/ppaa/p
paa/ppaa/ppaa/ppaa/ppaa/ppaa/p
paa/ppaa/ppaa/ppaa/ppa/p
/body
/html
如何让body中的文字不被选中?
HTML 代码片段如下:
body onselectstart="return false" aaa/body
如何让弹出的窗口不能关闭?
在新开的窗口中加入如下代码
body onunload=open(location.href)
/body
如何让浏览器在保存页面时保存失败?
HTML 代码片段如下:
NOSCRIPT
B style="color:black;background-color:#ffff66"IFRAME/B SRC="*.html"
/B style="color:black;background-color:#ffff66"IFRAME/B
/NOSCRIPT
表单中如何用图片按钮实现 reset?
html
head
script
function aaa(){
document.forms[0].reset()
}
/script
/head
body
form
textarea rows="2" name="S1" cols="20"/textarea
input type="submit" values="提交" name="B1"
image src="logo.gif" onclick=aaa()
/form
/body/html
进入网页时弹出的信息对话框
body onLoad="window.alert(‘‘‘‘欢迎光临本站‘‘‘‘)"
关闭窗口后弹出对话框
body onUnload="window.alert(‘‘‘‘谢谢你的光临!欢迎下次再来!‘‘‘‘)"
告别提示
body onUnload= alert("再见,感谢你的访问!")
右键菜单的制作
OBJECT id=menu type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
PARAM name="Command" value="Related Topics,menu"
PARAM name="Item1" value="动易;"
PARAM name="Item2" value="搜狐;"
PARAM name="Item3" value="新浪;"
PARAM name="Item4" value="网易;"
PARAM name="Item5" value="互动学院;"
/OBJECT script if (document.all) document.body.onmousedown=new Function("if (event.button==2) menu.Click();") /script
下拉菜单
object id=HHCtrl type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" PARAM name="Command" value="Related Topics,Menu" PARAM name="Item1" value="aspease;" PARAM name="Item2" value="byhu;" PARAM name="Item3" value="lzz;" /object a href=javascript:HHCtrl.Click() title="下拉菜单"下拉菜单/a
;
如何制作HTML页面
1、首先我们需要在桌面上,新建一张记事本
2、然后我们需要打开记事本,编写代码
3、然后我们需要把记事本修改后缀名为.html
4、然后我们需要在桌面上就会有一张网页,这一点很重要。
5、最后我们需要需要在浏览器上运行该网页
怎么用html制作简单得网页代码?
用html制作简单的网页的步骤:
1、整体形象设计:企业确定要搭建网站,那么首先就需要确定企业的整体形象,这个形象包括企业的logo设计,整个站点的色彩搭配,网页流程设计,版面设计,甚至包括哪些地方本使用动态效果,哪些地方搭配文字信息,又或者需要布局哪些模块等等,这个都需要纳入到整体形象设计当中。
2、页面风格设计:网站整体设计完成之后,需要落实到每个小的页面,每个页面风格设计可以不同,但大的方向却需要一致,这样才能保证整个站点是整洁有序的,千万不能是一个页面一个页面设计,这样让用户感觉到非常突兀,甚至会不适应。
3、代码设计:代码设计其实也就是功能设计,一个网站不可能只是展示,还需要有一些其他功能,最少有联系版块的功能,留言功能等等,如果是电子商务网站还需要一些支付功能等等。此外,代码设计也涵盖了整个网站的框架布局,这个需要站长结合SEO优化元素去设计。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。