分享
 
 
 

新手站长必须懂的一些HTML标签

王朝网站推广·作者佚名  2011-12-04
窄屏简体版  字體: |||超大  

一、基本概念:

网页、网站、浏览器、IE/NetScape

HTML:超文本标记语言,什么是超文本、什么是标记语言。

HTML的内容怎样显示出来。

二、HTML语法:

<html></html>

<head></head>

<title></title>

<body></body>

三、<body>的一些属性:

什么是属性:

text:设定整个网页中文字的色彩

link:用于设定一般超链接文本的显示色彩

alink:用于设定鼠标移动到超链接上并按下鼠标是超文本的显示色彩

vlink:设置访问过的超链接的色彩

background:设定背景图片,可以是绝对路径也可以是相对路径。

bgcolor:用户设定背景色,当已设定background时这个属性会失去作用

leftmargin:左边距

topmargin:上边距

四、注释与特殊字符:

<!--.........-->

注释的内容不会被显示出来

注释不能被嵌套。

< <

> >

& &

" '

注册符号

版权符号

" TM

空格

五、格式标签

<p></p>:用来创建一个段落,可以用align属生来设置段落的对齐方式

<br />:单标记 直接在“>“前加一个“/ ”表示结束标记,显示一个换行

<center></center>:对之间的图形或文本在水平方向居中显示

<marquee></marquee>:移动图片或文本。direction属性:内容的移动方向(left,right,down,up);behavior:指定内容的移动行为(scroll,alternate,slide)

<dl></dl><dt></dt><dd></dd>:用来创建一个普通列表。

<ol></ol><ul></ul><li></li>:<ol></ol>创建一个标有数字的列表;<ul></ul>对创建的列表标有一个圆点;<li></li>只能在<ol></ol>或<ul></ul>之间使用,表示列表项

<pre></pre>:对文本进行预格式处理

六、文本标签:

<h1></h1>......<h6></h6>:把文本以标题方式显示。

<b></b><i></i><u></u>:分别对应粗体,斜体,下划线

<sub></sub><sup></sup>:分别对应下上标的显示

<cite></cite>:引用方式的字体,通常是斜体

<em></em>:显示需要强调的文本,通常是斜体加粗

<strong></strong>:用来显示加重文本,通常是加粗显示

<font></font>:对字体、字号、颜色进行改变。face属性:字体;Size属生:大小; Color属生:色彩

七、图像标签:

<img />

src属性:必不可少,用来设置图像文件所在位置。

alt属性:当鼠标移到图像上显示的提示文本,当图像无法显示时,所显示的代替文字

align属性:设置图像与周围文本的对齐方式。top,bottom,left,right

border属性:设置图像的边框宽度

width和height:设置图像的长宽高

<hr/>:在HTML文档中加入一条水平线。

size:线的粗细

color:线的色彩

width:线的长度

noshade:阴影显示

八、超链接标签:

通一资源定位符:URL;

如:http://www.freednf.com

http:所使用的协议;www:要访问的主机名;80:端口号

<a href=""></a>:把中间标记的内容作为超链接显示,href的内容作为超连接点击后转向的页面。

如: <a href="http://www.wowbigfoot.org">大脚</a>

<a href="http://www.wowbigfoot.org"<img src="image/hy.gif"></a>

href属性是不可少的;

target属性:指明在浏览器的哪个窗口打开新页面。

<a name="">:锚点标记,在同一网页中设置多个锚点便于超链接的浏览。

如: <a href="#标记1">跳转到第一个标记上</a>

mailto:打开电子邮件:

<a href="mailto:ldc_5588@163.com subject=hello&body=您好">联系我们</a>

九、<map name=""></map>:图像地图将一个图像分成多个部分,各部分分别指向不同的链接。

<area shape="形状" coords="坐标" href="url">:给图像分块

shape属性可以是以下几种形状:

rect:矩形,此时的coords为矩形的左上角个右下角的坐标

poly:多边形,此时的coords为多边形的各个顶点

circle:圆,此时coords为圆习坐标及半径

如:

<img src="chinagif" usemap="mymap" />

<map name=mymap>

<area shape="rect" href="a.html" coords="140,20,280,60">

<area shape="poly" href="b.html" coords="100,100,180,80,200,400">

<area shape="circle" href="c.html" coords="10,100,60">

</map>

十、表格标签:<table></table><tr></tr><td></td>

这三个标签的层次结构:

<table></table>:定义一个表格的开始和结束

<tr></tr>:定义一行的开始和结束

<td></td>:定义一个单元格的开始和结束

<table></table>的属性:

bgcolor:设置表格的背景色彩

border:设置表格的边框的宽度

bordercolor:设置表格边框色彩

bordercolorlight:设置表格边框明亮部分的色彩

bordercolordark:设置表格边框昏暗部分的色彩

cellspacing:设置单元格之间的间隔

cellpadding:设置单元格内部的内容与边框的间隔

width:表格的宽度

height:表格的高度

<tr></tr>

align:整行单元格的内容水平对齐方式left,center,right。

valign:整行单元格的内容竖直对齐方式top middle,bottom

bgcolor:设置这一行的色彩

<td></td>

width:单元格的宽度(大小)

height:单元格的高度

align:单元格内部内容的水平对齐方式

valign:单元格内部内容的竖直对齐方式

colspan:设置一个单元格跨占的列数

rowspan:设置一个单元格跨占的行数

nowrap:禁止单元格内的内容自动换行

<th></th>与<td></td>类似只不过里面显示的内容是黑体居中的

十一、框架标签<frameset></frameset><frame></frame>:

什么是框架:将一个窗口分割成多部分,每一部分显示一个独立的页面。

框架只是分割窗口。

<frameset></frameset>定义一个框架集:

rows:将窗口竖直拆分时窗口的大小比例

cols:将窗口水平拆分窗口的大小比例

<frame></frame>定义一个具体的框架窗口:

src:要显示网页的URL

name:框架窗口的名子

taget:该框架中的超链接默认的打开窗口_blank,_parent,_self,_top。

scrolling:是否在框架边上出现滚动条yes,no,auto

noresize:禁止用户拖动分隔线来调整框架的大小,直接将该属生放入就可以了。

<iframe></iframe>在一个网上插入一个简单的框架窗口,这个窗口用来显示另一个文件。

name:框架窗口的名子

src:框架窗口中所显示的新的网页

十二、表单标签:

什么时表单?

<form></form>:定义表单的开始和结束位置<略讲>

action:处理表单内容的服务器程序的URL

method:提交给服务器处理表单信息的方式

get:将表单信息以URL参数的形式附在action的URL后面

set:将表单信息以HTTP消息实体发送给WEB服务器

target:设置服务器返回结果显示的窗口

title:当鼠标放在表单上的时候以黄色的泡泡进行提示

<input type="submit">:定义一个提交按钮

action:指定URL所指定的服务器程序

value:按钮上的文字

<input type="reset">:定义一个重新填写的按钮。

value:按钮上的文字

<input type="text">:定义一个单行文本框

size:输入区域的宽度,以字符个数为单位

value:文本框的内容

maxlength:用户能够输入的最大字符串长度

readonly:属性存在时,文本框可以获得焦点,但用户不能更改里面的内容。

disable:属性存在时,文本框不能获得焦点,也不能更改里面的内容。

<input type="checkbox">:定义一个复选框

name:复选框的名,同一组复选框用同一个名子

checked:该复选框是否被选中

value:指定复选框被选中时,这个复选框的后台值

<input type="radio">:定义一个单选按钮

name:单选按钮的名,同一组单选按钮用同一个名子

value:指定单选按钮被选中时,这个单选按钮的后台值

<input type="hidden">:在表单上添加一个隐式的字段的元素,浏览器不会显示这个字段

name:名子

value:值

当表单提交的时候会以name=value的形式提交到服务器上去。

<input type="button">:在表单上定义一个普通的按钮,这个按钮通常与某个脚本代码下关联

<input type="password">:在表单上定义一个密码输入区域.

<input type="file">:用来从本机向服务器传文件

<input type="image">:在表单上创建一个图像元素。

图像的源文件由src属性来指定,它没有value属性。

图像元素在某些情况下可以代替submit按钮来使用

单击图像元时就会将表单信息和单击处的x,y值一起发送到服务器

<select></select>创建一个下拉列表框或可以复选的列表框。

size:设置列表框中可见选项的数目。默认值是1,这时显示的是下拉列表框。

mutiple属性:这是一个不且赋值的属性,定义列表框是否可以多选。

在列表框中定义各项是用<option></option>来实现的。

<option></option>为列表框中添加项目

value:项目的后台值

selected:指定项目是否被选定

<textarea></textarea>创建一个可输入多行文本的文本框

cols:文本框的列数

rows:文本框的列数

十三、分区标签:

<div></div>:区域标签,层

<span></span>:区域标签

十四、头元素:

<base>标签:用于指定网页中超链接的基准地址。网页中所有超链接的相对地址都以该地址为基准地址。

该标签只能放在<head></head>标签之间。

如:<base href="http://www.36666.org.cn" target="_blank">

<meta>标签:通常用于文件的<head></head>之间。主要有两种类型的<meta>,它们用不同的属性名(name,http-equiv)来划分。

name属性主要用于在网页中加入一些关于网页的描述信息,例如,网页的关键字,网页的描述信息等

http-equiv属性主要用于在HTML文档中模拟HTTP头。

什么是HTTP头?

通过访问网页时,服务器除了返回网页文件本身的内容(也就是在浏览器中用查看源文件能看到的东西)之外,它还在返回网页文件内容之前,传送一部分被称为HTTP头的内容给浏览器,这部分肉容是在浏览器的查看源文件中看不到的。HTTP头的内容相当于服务器发送给浏览器的一些暗号指令,通知浏览器查看该网页时应使用的字符编码、是否本地缓存、网页的到期时间、是否间隔一定时间以后刷新页面或跳到其它页面等。

name属性的设置:

Keywords:网页的关键字,以便于在搜索引擎中进行收集信息。

<meta name="keywords" content="软件工程师培训,清华IT,华育国际">

Description:网页描述信,以便于搜索。

Generator:用于编辑此页所用的工具名,content中填入所用的网页编辑软件。

Author:用于说明网页的作者,content中填入作者的姓名。

Copyright:用于版权声明,content中填入你的版权声明。

http-equiv属性设置:

Content-Type:用于说明网页内容的类型以及文本内容所使用的字符集编码。

<meta http-equiv="Content-Type" content="text/html;charset=gb2312">

Refresh:告诉浏览器定时自动刷新网页

<meta http-equiv="Content-Type" content="1;url=http://www.5278.org.cn">

通知浏览器过一秒后跳转到热血英雄网上去。

Expires:用于设定网页的到期时间。为了提高效率,浏览器可以被设置成缓存以前访问的页面,当再次访问该页面时,浏览器不会再去服务器上访问,而是直接在本地缓存中读到。如果将其Content设为0则禁止浏览器使用缓存页面。

<meta http_equiv="Expires" content=""Mon,12,May,2007 00:00:00 GMT>

Windows-Target:强制页面在某个窗口显示。例如要防止别人把你的网页作为frame页面调用:

<meta http-equiv="Windows-Target" content="_top">

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有