html基础知识

浏览数：20 / 时间：2015年06月09日

HTML 超文本标记语言，描述网页的。跟其他编程语言不同，可通过文本编辑器来创建。

HTMl文件格式：

文件是.html或者.htm后缀的文件。

HTMl超文本标记语言书写格式要符合W3C（万维网联盟）标准。（字母小写）

HTML完整的结构：

<html>

<head>

声明css或者引入js、css以及其他内容

</head>

<body>

页面显示的内容

</body>

</html>

<html>……</html>:表示文件类型为HTML文档

<head>……</head>:文档头部标记,表示设置文档描述及其他不在web网页上显示的信息

<head>……</head>内部经常使用标签说明:

　 <link>:提供将现行文档与其他文档或实体关联的信息。

　 <isindex>:指明在服务器上提供文档可以检索的索引

<title>……</title>:文档标题,即在标题栏中显示的题目

<body>……</body>:当主题标记,记在网页内要现实的题目.

<body>……</body>用于定义页面内容的显示效果.

bgcolor=”颜色值”:设置背景色

background=“url”这是背景图片的文件名。

alink:活动时连接颜色

link:链接的颜色

vlink:连接后的颜色

text:文本的颜色

属性解释:

align=left/right/center:设置在网页中的左右对齐方式。

valign=top/middle/botton/baseline:设置在网页中的上下对齐方式。

<address>……</address>:地址风格一般用与文档的开始或结尾处,并以斜体格式显示文本。

标记：

标题文字标记：<hn>....</hn> : n的取值为:1—6,1最大,6最小;1-6级标题。

常用段落标记：

注释标记:其格式为:<!- - 注释内容(不局限一行，不执行该代码) - ->

换行标记:<br />或者是<br>

强制换段标记,格式为: 文字<p>,相当于两个<br>

设置段落标记,格式为:<p>文字</p>

预格式化标记:<pre>…</pre>

位置控制标记,格式为:<div align=”对齐方式”>文本或图像</div>

我们可将div认为是容器，默认是纵向排列的。

水平线标记:<hr>：其属性有:

size:水平线的宽度.

width:水平线的长度,可用占平宽度的百分比或像素值来表示

heigth:水平线的高度,可用占平宽度的百分比或像素值来表示

align:水平线的对齐方式,有left/right/center三种

noshade:线段无阴影属性,为实心线段

字体标记：

<font size=大小 face=字体 color=颜色 >要显示的内容</font>

size:设置字体大小,取值1--7

face:设置字体,如:隶书,宋体,幼圆,楷体等.

color:设置文字颜色

　　 <b>……</b>:设置字体加粗

　　 <tt>……</tt>:标准打字机字体

　　 <i>……</i>:设置斜体字

　　 <strike>……</strike>:设置带删除线的文字

　　 <u>……</u>:设置带下划线的文字

　　 <sub>……</sub>:将文本作为下标显示

　　 <sup>……</sup>将文本作为上标显示，例如：2的2次幂

　　 <big>……</big>:大字体文本显示

　　 <small>……</small>:小字体文本显示

　　 <strong>……</strong>:加重显示字体

超链接标记

<a href="跳转的路径URL">显示的文本内容</a> 属性：name="" 相当于给该标签起名字。

例如：如果当前页面一个a标签跳转到指定当前页面另一个a标签所在位置：

target将链接的文件最终要显示的位置.其值为:

　　　 target=_blank:将链接的文件显示在一个新的窗口

　　　 target=_self:将链接的文件显示在本窗口

　　　 target=_top:将链接的文件显示在整个浏览器窗口

　　　 target=_parent:将链接文件显示在前一个窗口

　　　 target=”windowname”将链接的文件显示在指定的窗口

相对路径：相对某个文件，去找目标文件，不写具体的盘符

绝对路径：直接写具体的盘符文件夹路径

./同级路径的 ../跳出一层文件夹

图像标记

src=’url’设置图片的路径

name=图片的名字

width:设置图片的宽度

height:设置图片的高度

vspace:设置图片离网页顶端的空白距离

hspace:设置图片离网页左端的空白距离

alt:在浏览器尚未完全读入图像时,在图像位置显示的信息:

title:当鼠标指到图片时出现的信息.

border:设置图片边框的粗细,其值为数字.

相关序列表标记

定义无序列表标签：<ul><li>内容</li><li>内容</li><li>内容</li></ul>

Type=disk/circle/square:指定表项左端前面的符号类型.

有序列表标记:<ol start="3"><li>内容</li><li>内容</li><li>内容</li></ol>

type=""属性，指定该列表序号格式。可设定5种序号：数字、大小写英文字母、大小写罗马字母。

start=“”指定该了列表从几开始排列标示符。

自定义项目列表：<dl><dt>标题<dt>…<dd>内容<dd>…</dl>

表格标记：

<table>…</table>：定义表格。

<caption>…</caption>：定义表格标题。

<tr>…</tr>：定义表行。

<th>…</th>：定义表头。

<td>…</td>：定义表元（即表格的具体数据）。

<colspan=#>：#=从左数起，具有指定属性的列的列数。

<colalign=#>：#=left,right,center：设置所在列的左右对齐方式。

表格中边框的显示：（对table标签）

frame=box：全部显示四个边框。

frame=above：只显示上边框。

frame=hsides：只显示上下边框。

frame=lhs：只显示左边框。

frame=void：不显示任何边框。

表格中分隔线(Rules)的显示：(对table标签)

rules=all：显示所有的分隔线。

rules=rows：只显示行之间的分隔线。

rules=none：不显示任何分隔线。

其它属性有：

bgcolor：背景色 background=”图片名”

表格边框色彩的亮度控制：

bordercolorlight：表格边框亮度颜色值。

bordercolordark：表格边框阴影颜色值。

width=宽度 height=高度 border=边框粗细 bordercolor=”颜色值”

cellspacing=单元格间隙 cellpadding=设置表格边框与其内容空间的大小

colspan=跨列 rowspan=跨行

form表单常用标记

<form></form> 用于提交请求发送数据使用。

属性：name：定义表单的名字。

action：表单提交的目的地址。action=”url”。

method：表单的提交方式。其值有post/get。

target=”_blank/_self/_top/_parent”：指定表单提交结果文档最终要显示的位置。

enctype=”multipart/form-data”：来确保匿名上载文件的正确的编码

文本框：<input type=”text” value=”” name=””>

属性：

name="username" 相当于给该标签起名字，以后传输数据时使用。

value=""该属性是该标签真实的值；

readonly 该属性，指定该标签是只读。

size：定义文本框的宽度，单位是单个字符宽度：如：size=”5”。

maxlength="10" 定义最多输入的字符数

（如下两个标签任何标签都有该属性）：

id="" 唯一标示该标签，页面上的id，不允许重复。

class="" 以后css会使用该属性，相同的class属性的标签认为是一组

文本域:<textarea name="">输入的文本</textarea>

textarea多行多列输入元素，即多行多列文本框。

textarea基本属性：

name：定义多行文本框的名称。

cols：定义多行文本框的宽度，单位是单个字符宽度。

rows：定义多行文本框的高度，单位是单个字符宽度。

wrap：属性定义输入内容大于文本域时显示的方式，可选值如下：

virtual：允许文本自动换行。

off：不允许自动换行。

physical：让文本换行，当数据被提交处理时换行符也将被一起提交处理。

隐藏域：<input type="hidden" name="" value="">

基本属性：

name：设定提交信息时的提交名称，对应HTML文档的hidden中的name。

type：定义该输入元素为隐藏域。

密码框：<input type="password"> 同样有文本框相关的属性。

文件上传框：其格式：<input type=”file” name=” ”>

下拉列表：<select name="" id="" class="" >

</select>

selected 属性指定某个要选中的option,

disabled 该属性一般用在select标签、button按钮上面，让该标签不可以被使用（不可被点击）。

size：定义下拉选择框的行数。

multiple：设置滚动菜单，属性表示可以多选，如果不设置本属性，那么只能单选。

单选框：<input type="radio" valu="1" name="sex"><input type="radio" value="2" name="sex">

属性：name,相同的name属性认为是一组。

复选框：<input type="checkbox" value="">

按钮：普通按钮：<input type="button" value="确定" >

form标签中专门用于提交form表单的提交按钮：<input type="submit" value="提交">

form标签中专门用于提交form表单的重置按钮：<input type="reset" value="重置">

框架标记

</frameset>

框架内的属性有：

rows=像素值：设定横向分割的框架数目 cols=像素值：设定纵向分割的框架数目

src=”url”：指定表示该框架对应的源文件。Name：指定框架名称。

border=像素值：设定边框的宽度。bordercolor=颜色值：设定边框的颜色

frameborder=yes/no 设定边框的有无，缺省值为yes。

noresize：设定框架不可编辑，即固定边框。

marginwidth=像素值，marginheight=像素值：设定页面空白区域的大小。

scrolling=yes/no：设置是否显示滚动条。

framespacing=像素值：窗口之间空白区域设置。

marginwidth=像素值/marginheight=像素值：设置页面空白的大小。

<html>

<!--

noresize该属性(只能使用在frame上)，让周围边框不可以拖拽。

frameborder="0" 或者yes或者no，0 此时不显示边框和no一致。>0相当于yes

不显示边框。可以用在frame或者frameset上；

-->

</frameset>

</html>

嵌入窗口标记

例如：

<html>

<body>

</body>

</html>

fieldset 标签：

</table>

</p>

</fieldset>

制作多媒体页面

<bgsound src=#> #=WAV 文件的URL。

<bgsound loop=#> #=循环数。

<img src=”url.gif” dynsrc=”url.avi”>：插入视频剪辑。

start=#：设置何时播放。

#=fileopen时，表示链接到本页时开始播放该视频。

#=mouseover时，表示把鼠标移到播放区域时，开始播放该视频。

controls：用来在视频窗口下附加MS-WINDOWS的AVI播放控制条。

loop=#：设置播放次数。

loopdelay=#：设置播放延时，单位是毫秒。

在网页设置会移动的文字

direction设置文字移动的方向:其值可以有:up/down/left/right

behavior: 设置文字移动的方式:其值可以有:slide/alternate/scroll

loop: 设置文字移动的次数:默认值为无数次循环.

scrolldelay:设置文字移动的延时.

scrollamount:设置一次滚动的文本量

width：数值滚动内容宽度

height：数值滚动内容高度

vspace：数值滚动区域宽度

hspace：数值滚动区域高度

鼠标经过时滚动停止离开重新滚动

1. 向左滚动（默认）代码

<MARQUEE scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.</FONT></MARQUEE>

2. 向右滚动代码

<MARQUEE direction=right scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.</FONT></MARQUEE>

3. 向上滚动(多行文字在每行后加<br>标记)代码

<MARQUEE direction=up scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you! <BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

4. 向下滚动代码

<MARQUEE direction=down scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

5. 滚动次数3次（默认为无数次）代码

<MARQUEE loop=3 scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

6. 滚动延时代码

<MARQUEE scrollDelay=20 direction=up><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

7. 滚动文本量代码

<MARQUEE direction=up scrollamount=2 scrolldelay=100><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

8. 滚动文本大小(默认为原文字大小)代码

<MARQUEE scrollamount=2 scrolldelay=100 width=200 height=40><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

9. 滚动区域的宽度和高度(默认为原文字大小)代码

<MARQUEE hspace=100 vspace=50><FONT color=#ff6600>Welcom to my blog.<BR>It‘s just for you!<BR>The most preferred bilingual bol for you to share</FONT></MARQUEE>

10. 滚动的超链接代码

<MARQUEE behavior=alternate><A href=http://blog.cersp.com/14400.aspx target=blank>此处为链接文字说明(点击进入动感部落的博客)</A></MARQUEE>

11. 滚动的图片加超链接

12. 来回滚动代码

13. 鼠标经过时滚动停止代码（此效果在新浪博客中可能无效）

div:

可以认为是一个容器：

style属性：添加Css样式表，控制该标签的样式。 border:solid 1px red;表示边框，实心，1像素宽，红色。

本文出自 “扣小眸J2EE” 博客，谢绝转载！

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html基础知识

标签： html基础html基础