北大青鸟java培训:HTML语法基础及规则?

北大青鸟java培训:HTML语法基础及规则?,第1张

HTML的主要语法是元素和标签

元素是符合DTD(文档类型定义)的文档组成部分,如title(文档标题)、IMG(图象)、table(表格)等等。

元素名不区分大小写的。

海南北大青鸟http://www.kmbdqn.cn/建议HTML用标签来规定元素的属性和它在文档中的位置。

标签分单独出现的标签和成对出现的标签两中。

大多数的标签是成对出现的,有首标签和尾标签组成。

首标签的格式为<元素名>,尾标签的格式为</元素名>。

成对标签用于规定元素所含的范围,如<title>和</title>标签用来界定标题元素的范围,也就是说。

<title>**</title>之间的部分是该HTML文档的标题。

单独标签的格式为<元素名>,它的作用是在相应的位置插入元素。

如<BR>标签表示在该标签所在位置插入一个换行符。

1,<HTML>标签是文档标识符,它是成对出现的,首标签<HTML>和尾标签</HTML>分别位于文档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的。

该标签不带有任何的属性。

事实上,我们现在所用的浏览器是自动识别HTML文档的,并不要求有<HTML>标签的出现。

也不对它进行任何的 *** 作。

但是,为了提高文档的适用性,还是应该养成用这个标签的习惯。

  2,<HEAD>标签。

习惯上我们把HTML文档分为文档头和文档主题两个部分。

文档的主题部分就是我们在浏览器用户区中看到的内容了。

而文档头部分用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一写属性。

HTML文档的标签是可以嵌套的,即在一对标签中可以嵌套另一对子标签。

用来规定母标签所含范围的属性和其中某一部分内容,嵌套在<HEAD>标签中使用的子标签主要有<title>和<isindex>。

<title>标签是成对的。

用来规定HTML文档的标题。

在<title>和</title>之间的内容将显示在WEB浏览器窗口的标题栏中。

例如:<html>  <head> <title>这是一个测试页</title> </head>  </html>  <isindex>标签是一个单独的标签,它是用来规定文档的属性,说明该文档是可以按关键字索引的,下面我们用一段简单的代码来说明该标签的作用。

你可以将该代码copy到你自己的浏览器中看效果。

  <html> <head>  <title>这是一个"ISINNDEX"事例</title> <isindex>  </head> <body>  其中“可搜索该索引。

请键入要搜索的关键字”是IE浏览器自动加上去的。

浏览者在空白文本条内键入要查询的关键字并按回车按确认后,光标就会移动到该关键字或包含这个关键字的词处。

此时,与关键字相匹配的字符呈亮蓝色。

3,<BODY>标签。

<body>标签是成对标签。

在<body></body>之间的内容将显示在浏览器窗口的用户区内,它是HTML文档的主体部分。

在<body>标签中可以规定整个文档的一些基本属性:  ·"bgcolor"。

指定html文档的背景色。

 ·"text"。

指定html文档中文字的颜色。

  ·"link"。

指定html文档中待连接超链接对象的颜色。

 ·"alink"。

指定html文档中连接中超链接对象的颜色。

  ·"vlink"。

指定html文档中以连接超链接对象的颜色。

 ·"background"。

指定html文档的背景文件。

HTML语法大全

<! - - ... - ->批注

<!>跑马灯

<marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=left></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定卷动距离

<marquee scrolldelay=300>...</marquee>设定卷动时间

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt>打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing>固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =font-size:100 px>...</font>无限增大

<!>区断标记

<hr>水平线

<hr size=9>水平线(设定大小)

<hr width=80%>水平线(设定宽度)

<hr color=ff0000>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=地址>(预设好连结路径)

<a href=地址></a>外部连结

<a href=地址 target=_blank></a>外部连结(另开新窗口)

<a href=地址 target=_top></a>外部连结(全窗口连结)

<a href=地址 target=页框名></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片地址>贴图

<img src=图片地址 width=180>设定图片宽度

<img src=图片地址 height=30>设定图片高度

<img src=图片地址 alt=提示文字>设定图片提示文字

<img src=图片地址 border=1>设定图片边框

<bgsound src=MID音乐文件地址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口

<frameset

cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset

rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

<! - - ... - ->批注

<A HREF TARGET>指定超级链接的分割窗口

<A HREF=#锚的名称>指定锚名称的超级链接

<A HREF>指定超级链接

<A NAME=锚的名称>被连结点的名称

<ADDRESS>....</ADDRESS>用来显示电子邮箱地址

<B>粗体字

<BASE TARGET>指定超级链接的分割窗口

<BASEFONT SIZE>更改预设字形大小

<BGSOUND SRC>加入背景音乐

<BIG>显示大字体

<BLINK>闪烁的文字

<BODY TEXT LINK VLINK>设定文字颜色

<BODY>显示本文

<BR>换行

<CAPTION ALIGN>设定表格标题位置

<CAPTION>...</CAPTION>为表格加上标题

<CENTER>向中对齐

<CITE>...<CITE>用于引经据典的文字

<CODE>...</CODE>用于列出一段程序代码

<COMMENT>...</COMMENT>加上批注

<DD>设定定义列表的项目解说

<DFN>...</DFN>显示"定义"文字

<DIR>...</DIR>列表文字卷标

<DL>...</DL>设定定义列表的卷标

<DT>设定定义列表的项目

<EM>强调之用

<FONT FACE>任意指定所用的字形

<FONT SIZE>设定字体大小

<FORM ACTION>设定户动式窗体的处理方式

<FORM METHOD>设定户动式窗体之资料传送方式

<FRAME MARGINHEIGHT>设定窗口的上下边界

<FRAME MARGINWIDTH>设定窗口的左右边界

<FRAME NAME>为分割窗口命名

<FRAME NORESIZE>锁住分割窗口的大小

<FRAME SCROLLING>设定分割窗口的滚动条

<FRAME SRC>将HTML文件加入窗口

<FRAMESET COLS>将窗口分割成左右的子窗口

<FRAMESET ROWS>将窗口分割成上下的子窗口

<FRAMESET>...</FRAMESET>划分分割窗口

<H1>~<H6>设定文字大小

<HEAD>标示文件信息

<HR>加上分网格线

<HTML>文件的开始与结束

<I>斜体字

<IMG ALIGN>调整图形影像的位置

<IMG ALT>为你的图形影像加注

<IMG DYNSRC LOOP>加入影片

<IMG HEIGHT WIDTH>插入图片并预设图形大小

<IMG HSPACE>插入图片并预设图形的左右边界

<IMG LOWSRC>预载图片功能

<IMG SRC BORDER>设定图片边界

<IMG SRC>插入图片

<IMG VSPACE>插入图片并预设图形的上下边界

<INPUT TYPE NAME value>在窗体中加入输入字段

<ISINDEX>定义查询用窗体

<KBD>...</KBD>表示使用者输入文字

<LI TYPE>...</LI>列表的项目 ( 可指定符号 )

<MARQUEE>跑马灯效果

<MENU>...</MENU>条列文字卷标

<META NAME="REFRESH" CONTENT URL>自动更新文件内容

<MULTIPLE>可同时选择多项的列表栏

<NOFRAME>定义不出现分割窗口的文字

<OL>...</OL>有序号的列表

<OPTION>定义窗体中列表栏的项目

<P ALIGN>设定对齐方向

<P>分段

<PERSON>...</PERSON>显示人名

<PRE>使用原有排列

<SAMP>...</SAMP>用于引用字

<SELECT>...</SELECT>在窗体中定义列表栏

<SMALL>显示小字体

<STRIKE>文字加横线

<STRONG>用于加强语气

<SUB>下标字

<SUP>上标字

<TABLE BORDER=n>调整表格的宽线高度

<TABLE CELLPADDING>调整数据域位之边界

<TABLE CELLSPACING>调整表格线的宽度

<TABLE HEIGHT>调整表格的高度

<TABLE WIDTH>调整表格的宽度

<TABLE>...</TABLE>产生表格的卷标

<TD ALIGN>调整表格字段之左右对齐

<TD BGCOLOR>设定表格字段之背景颜色

<TD COLSPAN ROWSPAN>表格字段的合并

<TD NOWRAP>设定表格字段不换行

<TD VALIGN>调整表格字段之上下对齐

<TD WIDTH>调整表格字段宽度

<TD>...</TD>定义表格的数据域位

<TEXTAREA NAME ROWS COLS>窗体中加入多少列的文字输入栏

<TEXTAREA WRAP>决定文字输入栏是自动否换行

<TH>...</TH>定义表格的标头字段

<TITLE>文件标题

<TR>...</TR>定义表格美一行

<TT>打字机字体

<U>文字加底线

<UL TYPE>...</UL>无序号的列表 ( 可指定符号 )

<VAR>...</VAR>用于显示变量

表格在数据展示方面非常简单,并且表现优秀,通过与CSS的结合,可以让数据变得更加美观和整齐。

行、列、单元格单元格特点:同行等高、同列等宽。

表格的基本语法:

创建一个3行3列的表格:

单元格中内容的填充间距通过cellpadding(默认1px)属性来设置;

单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。

设置单元格的填充间距为10,单元格之间的间距为0,红色边框

一般表格的第一行是标题,并且是文本居中、加粗,将td换成th。

而某些数据需要居中,但不希望加粗,可以给td添加align="center"

表格的跨行跨列

有时,表格的结构并没有那么简单,可能会存在跨行和跨列的情况:

跨行:

跨列:

跨行、跨列并存:

这个问题看似很复杂,其实很简单,在制作跨行和跨列的表格时,只需按照如下步骤就可以轻松搞定!:

首先做一个完整的表格:注意虚线部分,最终去掉这些虚线就是我们要的效果

找出最左上角那个“侵占”其他单元格的单元格,如下图标注数字的位置

观察这个单元格“侵占”的是行还是列,算上自己总共是几个?(行数用r表示,列数用c表示):

如果是行:在这个单元格上添加rowspan="r"

如果是列:在这个单元格上添加colspan="c"

如果既有行又有列:在这个单元格上添加rowspan="r" colspan="c"

把“被侵占”的单元格删掉,删除顺序:从右向左,从上至下,否则很容易出错!

按以上步骤完成一个跨行跨列的表格:

每天持续更新,点点关注不迷路哦~


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7610036.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表(0条)

保存