网页设计之 HTML

精选转载

过客751 2012-12-01 20:40:20 博主文章分类：Web/HTML

文章标签 HTML web 文章分类 前端开发

页面基本结构
<HTML>
<HEAD>
<title>,<link>,<meta>……
</HEAD>
<BODY>
HTML 文件的正文写在这里... ...
</BODY>
</HTML>

语言字符集(Charsets)的信息
<meta http-equiv="Content-Type" content="text/html;charset=#">

#=
us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
可在 HTML 文件中设置 MIME 字符集信息。

标题字体
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<hn>---</hn> 这些标记显示黑体字。
<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。
因此在一行中无法使用不同大小的字体。
大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 或 +#, -#，也可以加上单位，我习惯于用px（像素）作为单位。
颜色
<font color=#> ... </font>
#=rrggbb 16进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
字体
<font face="#, #, ..., #"> ... </font>
#=客户端可获得的字体

通常情况不会使用，而用css样式代替。

行的控制
另起一段(Paragraph) (可以看作是空行)<p>你好吗？</p>
另起一行 <br>
不换行<nobr>

文字的对齐
<hn align=#>...</hn>
<p align=#>...</p>
#=left, center, right
<center>...</center>
文字的分区(Division)显示
<div align=left> ... </div>
列表
无序列表 <ul type=#><li>...</li></ul> #=disk, circle, square
有序列表 <ol type=1# start=2#><li>...</li></ol> 1#=A, a, I, i, 1 2#=number
预格式化文本(Preformatted Text) 直接显示代码中的排版格式
<pre>...</pre>
块引用(Blockquote)，相当于缩进
<blockquote>...</blockquote>

图像
基本语法
<img src=#> #=图象的 URL
图像替代文字
<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字，鼠标停留时显示的汉字。
图象和文字的对齐
<img align=#> #=top, middle, bottom
图像的边距
<img vspace=# hspace=#> #=value
图像边框
<img border=#> #=value

表单的基本语法
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
建议采用post方式
表单中提供给用户的输入形式
<input type=* name=** value=*** size=**** maxlength=*****>
*=text, password, checkbox, radio, p_w_picpath, hidden, submit, reset
**=自定义的表单域的名字
***表单值
****长度
*****最大输入的字符数
列表框(Selectable Menu)
<select name=*>
<option> ...
</select>

<option selected>默认选定的项
<option value=**>值
文本区域
<textarea name=* rows=** cols=**> ... <textarea>

基本语法
<table>...</table> - 定义表格
<tr></tr> - 定义表行
<td></td> - 定义表单元格

简单的表格
<table>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
</table>

属性
<table
align="center"
background="1.gif"
bgcolor="#666666"
border="1"
bordercolor="#003399"
bordercolordark="#330099"
bordercolorlight="#3399CC"
cellpadding="2"
cellspacing="3"
class=""
width="200"
height="300"
>
对齐方式
背景图像
背景色
边框宽度
边框颜色
暗边框颜色
亮边框颜色
填充距离
单元格边距
样式
宽度
高度

单元格跨行rowspan=#

单元格跨列colspan=#

嵌入多媒体(EMBED)

基本语法 <embed src=#> #=URL
本标记可以用来在主页中嵌入多媒体，如：
电影(movie), 声音(sound), 要求客户端机器中有播放该媒体的插件。

背景音乐

链接

<a href=url target=_blank> 新窗口</a>
<a href=url target=_self> 本窗口</a>
<a href=url target=_parent> 父窗口</a>
<a href=url target=_top> 整个浏览器窗口</a>

url可以是绝对路径，相对路径或命名锚。

基本语法

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

纵向排列多个窗口：
<frameset cols=#>

横向排列多个窗口：
<frameset rows=#>

<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>

纵横排列多个窗口：
<frameset cols=20%,*>
<frame src="A.html">
     <frameset rows=40%,*>
     <frame src="B.html">
     <frame src="C.html">
     </frameset>
</frameset>

不允许各窗口改变大小
<frame noresize>缺省设置是允许各窗口改变大小的。

窗口标识
<frame name=#>
<a href=url target=#> 可在该标识的框架中打开链接。

特殊的 4 类操作

target=_blank 新窗口
target=_self 本窗口
target=_parent 父窗口
target=_top 整个浏览器窗口

各窗口边框的设置
<frame frameborder=#> #=yes, no / 1, 0
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
<frame src="Bcol.html" frameborder=0>
<frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>

各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小

边框色彩 <frameset bordercolor=#>
#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>

页面空白(Margin) <frame marginwidth=# marginheight=#>
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>

卷滚条设置
<frame scrolling=#> #=yes, no, auto
#=缺省值是 auto。

浮动窗口只支持ie
<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。