html 基础知识

2016-07-11 鲁鲁槟 收藏

一、页面标记 Page

1.1、HTML 文件结构

<html>
    <head>
        <title></title>
        <base href="" />
        <link rel="stylesheet" href="" />
        <isindex />
        <meta />
    </head>
    <body>
    </body>
</html>

1.2、语言字符集的信息

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

1.3、背景色彩和文字色彩

<body bgcolor=# text=# link=# alink=# vlink=#>
<body background="image-URL">

1.4、页面空白 margin

<body leftmargin=#><body rightmargin=#>

1.5、链接 link

<a href="#"></a>

1.6、打开一个新的窗口

<a href="#" target="Window_Name"></a>

1.7、标尺线 <hr />

二、字体标记 Font

1、标题字体 <h#></h#> #=1,2,3,4,5,6

2、字体大小 <font size=#></font> #=1,2,3,4,5,6,7 or +#,-#

3、物理字体 <b></b><i></i><u></u><tt></tt><sup></sup><sub></sub><g></g><strike></strike>

4、逻辑字体 <em></em><strong></strong>

5、字体颜色 <font color=#></font>

6、客户端字体 <font face=#></font>

7、字符实体 &#、&、<、>

三、文字布局标志 Text Style

1、行的控制:段<p>、换行<br>、不换行<nobr>

2、文字的对齐:align、center

3、文字的分区显示:div

4、列表:

(1)无序: <ul><li></li></ul>

(2)有序:<ol><li></li></ol>

(3)定义列表:<dl compact><dt></dt></dl>

5、预格式文本 <pre></pre><listing></listing><xmp></xmp>

6、空白

<spacer type="horizontal/vertical" size=""></spacer>
<spacer type="block" size="" width=# height=# align="top/middle/bottom/left/right"></spacer>

7、多列文本

cols 列的数目、gutter 列的空白、width列的宽度
<multicol cols=# gutter=# width=#></multicol>

8、块引用 <blockquote></blockquote>

9、闪烁 <blink></blink> IE、搜狗不支持

四、图像标记 Image

1、链入图像的基本语法

<img lay-src=#> # = 图像的 URL

<img alt=#> # = 在浏览器尚未完全读入图像时,在图像位置显示的文字

2、图像和文字的对齐 <img align=#> # = top,middle,bottom

3、图像在页面中的对齐布局 <img align=left/right>

4、边框 <img border=#>

5、客户端图像映射图

<img lay-src="map.gif" usemap="#myface"/>
<map name="myface">
    <area shap="rect" href="rect.html" coords="140,20,280,60"/>
</map>

五、表单标记 Form

1、基本语法

<form action="url" method="*">
    <input type=submit>
    <input type=reset>
</form>

表单中提供给用户的输入形式:<input type=* name=**>

* = text、password、checkbox、radio、image、hidden、submit、reset

** = Symbolic Name for CGI script

2、文字输入和密码输入 <input type=text/password value=** size=** maxlength=**>

3、复选框和单选框

<input type=checkbox checked value=**> <input type=radio value=** checked>

4、图像坐标 <input type="image" lay-src=url>

5、隐藏表单元素 <input type=hidden value=*>

6、列表框

<select name=* size=** multiple>
    <option> ...<option selected value=**>
</select>

7、文本区域

<textarea name=** cols=* rows=* wrap=off 不换行 ></textarea>

六、表格标记 TABLE

1、表格的语法基础

<table>
    <tr>表行
    <th>表头
    <td>表元
</table>

2、跨多行、多列的表元 <th colspan/rowspan=#>

3、表格尺寸设置

<table border=边框尺寸 width=宽度 height=高度 cellspacing=间隙 cellpadding=内部空白>

4、表格内文字的对齐/布局 <tr,td,th aligin=left/center/rignt/top/middle/bottom/baseline>

5、表格在页面的对齐方式 <table align=left/center/right>

6、表格的标题 <caption align=left/center/right></caption> <caption valign=top/bottom></caption>

七、表格进阶

1、表格的色彩

(1)表元的背景色彩和背景图像 <tr,th,td bgcolor=# background="URL">

(2)表格边框的色彩 <table bordercolor=#>

(3)表格边框色彩的亮度控制 <table bordercolorlight/bordercolordark=#>

2、表格的分组显示

(1)按行分组:<thead></thead> 表的题头、<tbody></tbody> 表的正文、<tfoot></tfoot> 表的脚注

(2)按列分组:<colgroup align=left/center/right>

(3)列的属性控制:<col span=#> # = 从左数起,具有指定属性的列的列数 <col align=left/center/right>

3、表格中的边框显示 <table fram=#>

显示所有4个边框 box、只显示上边框 above、只显示下边框 below、只显示上下边框 hsides

只显示左右边框 vsides、只显示左边框 lhs、只显示右边框 rhs、不显示任何边框 void

4、表格中分隔线的显示 <table rules=#>

显示所有分隔线 all、只显示组与组之间的分隔线 groups、只显示行与行之间的分隔线 rows、

只显示列与列之间的分隔线 cols、不显示任何分隔线 none

八、多窗口页面 Frames

1、基本语法 <framset ></framset>、<frame lay-src="url">、<noframes></noframes>

2、各窗口间的相互操作:窗口标识 <frame name=#> <a href=url target=_blank/_parent/_top/_self>

3、Frame 的外观

(1)各窗口边框的设置 <fram frameborder=yes/no/1/0>

(2)各窗口空白区域的设置 <framset framespacing = 空白区域的大小>

(3)边框色彩 <frameset bordercolor=#>

(4)页面空白 <frame marginwidth=# marginheight=#>

(5)滚动条设置 <frame scrolling=yes/no/auto>

4、浮动窗口:<iframe lay-src=初始页面的URL name=窗口标识(之后可对此标识进行各窗口间的相互操作)

九、会移动的文字 Marquee

1、基本语法 <marquee></marquee>

2、文字移动属性的设置

方向 <direction = left/right>、方式 <behavior = scroll绕圈/slide一次/alterrate来回

循环 <loop=二次数;若未制定则循环不止>、速度 <scrollamount>、延时 <scrolldelay>

3、外观设置

对齐方式 <align = top,middle,bottom>、底色 <gbcolor = #>、面积<height = # width = #>、空白<haspace/vspace = #>

十、多媒体页面

1、嵌入多媒体文本 <embed lay-src= "URL">

2、背景音乐 <bgsound lay-src=wav文件的url loop=循环次数>

3、插入视频剪辑 <img lay-src="url.gif" dynlay-src="url.avi">

(1)何时开始播放 AVI,即在链接到含本标记的页面时开始播放 AVI;

mouserover 是指你把鼠标移到 AVI 播放区域时才开始播放 AVI。

(2)控制条 <img controls>

(3)循环播放 <img loop=#> 若 # = infinite将循环播放不止

(4)延时播放 <img loopdelay=毫秒数>

阅读 1524