Embed Size (px)
DESCRIPTION
H T M L 语 言. 网页制作系列教程. HTML 文件结构 (Document Structures). …… 网页正文 . 背景色彩和文字色彩. bgcolor --- 背景色彩 - PowerPoint PPT Presentation
Citation preview
H T M L H T M L 语 言语 言
网页制作系列教程网页制作系列教程
HTMLHTML 文件结构文件结构 (Document (Document Structures)Structures)
<HTML><HTML>
<HEAD><HEAD>
<TITLE>……<TITLE><TITLE>……<TITLE>
<META http-equiv=content-type <META http-equiv=content-type content=“text/html; charset=gb2312”>content=“text/html; charset=gb2312”>
</HEAD></HEAD>
<BODY><BODY> 网页正文网页正文 </BODY></BODY>
</HTML></HTML>
背景色彩和文字色彩 背景色彩和文字色彩 <body bgcolor=# text=# link=# alink=# <body bgcolor=# text=# link=# alink=#
vlink=#> vlink=#> • bgcolor --- bgcolor --- 背景色彩 背景色彩 • text --- text --- 非可链接文字的色彩 非可链接文字的色彩 • link --- link --- 可链接文字的色彩 可链接文字的色彩 • alink --- alink --- 正被点击的可链接文字的色彩 正被点击的可链接文字的色彩 • vlink --- vlink --- 已经点击已经点击 (( 访问访问 )) 过的可链接文字的过的可链接文字的色彩色彩 #=rrggbb #=rrggbb
• 色彩是用 色彩是用 16 16 进制的 红－绿－蓝进制的 红－绿－蓝 (red-green-blue, RGB) (red-green-blue, RGB) 值值来表示。来表示。16 16 进制的数码有进制的数码有 : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
背景图象 背景图象 <body background="image-URL"><body background="image-URL">Non Scrolling Background <body Non Scrolling Background <body bgproperties=FIXED> bgproperties=FIXED>
链接链接 (Link) (Link) 基本语法 基本语法 <a href="URL"> ... </a> <a href="URL"> ... </a>
这是一个这是一个<a href=“link.html”><a href=“link.html”> 链接的例子链接的例子 </a></a> 。 。 • 锚点锚点<a name="name"> ... </a> <a name="name"> ... </a>
<a href="#name"> ... </a><a href="#name"> ... </a>
开一个新的开一个新的 (( 浏览器浏览器 )) 窗口 窗口 (Target Window) <a (Target Window) <a href="URL" target="Window_Name"> ... href="URL" target="Window_Name"> ... </a> </a>
<a href="window.html" <a href="window.html" target="window_name">target="window_name">开一个新窗口开一个新窗口 !!</a></a>
链接链接 (Link) (Link) 基本语法 基本语法
标尺线标尺线 <hr><hr> <hr size=#><hr size=#> <hr size=10> <hr size=10> <hr width=#><hr width=#> <hr width=50><hr width=50>
<hr width=50%> <hr width=50%> <hr align=#> #=left, right<hr align=#> #=left, right <hr width=50% align=left><hr width=50% align=left>
<hr width=50% align=right> <hr width=50% align=right>
<hr color=#> <hr color=#> • #=rrggbb 16 #=rrggbb 16 进制 进制 RGB RGB 数码，或者是下列预定义色彩：数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<hr color="red"> <hr color="red">
字体字体 ((FONTFONT)) 标记标记 标题字体标题字体 (Header)(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1><h1> 今天天气真好！今天天气真好！ </h1> </h1> 今天天气真好！今天天气真好！<h2><h2> 今天天气真好！今天天气真好！ </h2> </h2> 今天天气真好！今天天气真好！
<hn>---</hn> <hn>---</hn> 这些标记显示黑体字。 这些标记显示黑体字。 <hn>---</hn> <hn>---</hn> 这些标记自动插入一个空行，不这些标记自动插入一个空行，不
必用 必用 <p> <p> 标记再加空行。标记再加空行。因此在一行中无法使用不同大小的字体。因此在一行中无法使用不同大小的字体。
字体大小字体大小<font size=#> ... </font> #=1, 2, 3, 4, <font size=#> ... </font> #=1, 2, 3, 4,
5, 6, 7 5, 6, 7
<font size=7><font size=7> 今天天气真好！今天天气真好！ </font> </font> 今今天天气真好！天天气真好！
<font size=6><font size=6> 今天天气真好！今天天气真好！ </font> </font> 今天今天天气真好！天气真好！
物理字体物理字体 (Physical Style)(Physical Style)
<b><b> 今天天气真好！今天天气真好！ </b> </b> 今天天气真好今天天气真好！！<i><i> 今天天气真好！今天天气真好！ </i> </i> 今天天气真好！今天天气真好！<u><u> 今天天气真好！今天天气真好！ </u> </u> 今天天气真好！今天天气真好！<sup><sup> 今天天气真好！今天天气真好！ </sup> </sup> 今天天气真好今天天气真好！！<sub><sub> 今天天气真好！今天天气真好！ </sub> </sub> 今天天气真好今天天气真好！！<strike><strike> 今天天气真好！今天天气真好！ </strike> </strike> 今天天气今天天气
真好！真好！
字体颜色字体颜色
指定颜色 指定颜色 <font color=#> ... </font><font color=#> ... </font>• #=rrggbb 16 #=rrggbb 16 进制数码，或者是下列预定义色彩：进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua Aqua
<font color=ffffff>White</font> <font color=ffffff>White</font> <font color=white>White</font> <font color=white>White</font>
字符实体字符实体 (Entities)(Entities)
& && &
< << <
> >> >
quot; " quot; "
文字布局文字布局 (TEXT STYLE) (TEXT STYLE) 行的控制 行的控制 段段 (Paragraph) ((Paragraph) ( 可以看作是空行可以看作是空行 ) <p>) <p>
你好吗？你好吗？ <p><p> 很好。 很好。 你好吗？ 你好吗？ 很好。很好。换行 换行 <br><br>
你好吗？你好吗？ <br><br> 很好。 很好。 你好吗？你好吗？
很好。 很好。不换行不换行 <nobr><nobr>
<nobr> <nobr> 请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作
用！用！</nobr> </nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！ 记的作用！
文字的对齐文字的对齐 (Alignment) (Alignment)
<hn align=#>...</hn> <hn align=#>...</hn> <p align=#>...</p> #=left, center, right <p align=#>...</p> #=left, center, right • <h3 align=center>Hello<\h3><h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3> <h3 align=right>Hello<\h3>
<center>...</center> <center>...</center> • <center>Hello</center> <center>Hello</center>
文字的分区文字的分区 (Division)(Division) 显示 显示 <div align=left> ... </div> <div align=left> ... </div>
• <div align=left><div align=left>Can you feel happiness without unpleasant? </div> Can you feel happiness without unpleasant? </div>
<div align=center> ... </div><div align=center> ... </div>
<div align=right> ... </div><div align=right> ... </div>
列表列表无序列表 无序列表 <ul><li>...</ul><ul><li>...</ul>
<ul><ul><li>Today<li>Today<li>Tommorow<li>Tommorow</ul> </ul>
Today Today Tommorow Tommorow 有序列表 有序列表 <ol><li>...</ol> <ol><li>...</ol>
<ol><ol><li>Today<li>Today<li>Tommorow<li>Tommorow</ol> </ol>
1.Today 1.Today 2.Tommorow 2.Tommorow
定制列表元素定制列表元素定制表中的标记 定制表中的标记 <li type=#> #=disk, circle, <li type=#> #=disk, circle,
square square <ul><ul>
<li type=disc>ONE<li type=disc>ONE<li type=circle>TWO<li type=circle>TWO<li type=square>THREE<li type=square>THREE
</ul> </ul>
图象图象 (IMAGE)(IMAGE) 标标记记 链入图象的基本语法链入图象的基本语法
<img src=#> #=<img src=#> #= 图象的 图象的 URLURL
<img alt=#> <img alt=#> #=#= 在浏览器尚未完全读入图象时，在图象位在浏览器尚未完全读入图象时，在图象位置显示的文字。 置显示的文字。
<img src="f.gif" alt="MY FACE :-)"> <img src="f.gif" alt="MY FACE :-)">
图象和图象和文字文字的对齐的对齐<img align=#> #=top, middle, bottom<img align=#> #=top, middle, bottom
• <img src=URL align=top> My face! <img src=URL align=top> My face!
图象在页面中的对齐图象在页面中的对齐 // 布局布局 (Floating Image) (Floating Image)
<img align=left><img align=left>• <img src=URL align=left>My Face!<br><img src=URL align=left>My Face!<br>
It is always<br>It is always<br>smiling.<br>smiling.<br>Hahaha....<br>Hahaha....<br>
图象图象 (IMAGE)(IMAGE) 标标记记
<img vspace=# hspace=#> #=value<img vspace=# hspace=#> #=value <img src=URL align=left vspace=10 <img src=URL align=left vspace=10 hspace=20>My Face!<br>hspace=20>My Face!<br>It is always<br>It is always<br>smiling.<br>smiling.<br>Hahaha....<br>Hahaha....<br>
< img border=#> #=value< img border=#> #=value <a href="URL"><a href="URL">
<img src=URL border=15><img src=URL border=15>
</a> </a>
图象图象 (IMAGE)(IMAGE) 标记标记
表 单 表 单 (FORM)(FORM) 基本语法基本语法表单的基本语法表单的基本语法<form action="url" method=*><form action="url" method=*>
... ...
... ... <input type=submit> <input type=reset><input type=submit> <input type=reset></form> </form>
*=GET, POST *=GET, POST 表单中提供给用户的输入形式表单中提供给用户的输入形式<input type=* name=**><input type=* name=**>*=text, password, checkbox, radio, image, *=text, password, checkbox, radio, image,
hidden, submit, resethidden, submit, reset**=Symbolic Name for CGI script **=Symbolic Name for CGI script
文字输入和密码输入文字输入和密码输入
**=text, password =text, password
<input type=*><input type=*>
<input type=* value=**><input type=* value=**>
<form action=post-query method=POST> <form action=post-query method=POST> 您的姓名您的姓名 : <input type=text name=: <input type=text name= 姓名姓名><br> ><br> 您的主页的网址您的主页的网址 : <input type=text : <input type=text name=name= 网址 网址 value=http://><br> value=http://><br> 密码密码 : : <input type=password name=<input type=password name= 密码密码><br> <input type=submit value="><br> <input type=submit value=" 发发送送 "><input type=reset value=""><input type=reset value=" 重设重设 "> "> </form> </form>
复选框复选框 (Checkbox)(Checkbox)<input type=checkbox><input type=checkbox>
<input type=checkbox checked><input type=checkbox checked><input type=checkbox value=**><input type=checkbox value=**>
<form action=post-query method=POST> <form action=post-query method=POST> <input type=checkbox name=<input type=checkbox name= 水果水果 1> 1> Banana<p> Banana<p>
<input type=checkbox name=<input type=checkbox name= 水果水果 2 2 checked> Apple<p> checked> Apple<p>
<input type=checkbox name=<input type=checkbox name= 水果水果 3 3 value=value= 橘子橘子 > Orange<p> > Orange<p>
<input type=submit><input type=reset> <input type=submit><input type=reset> </form> </form>
单选框单选框 (RadioButton)(RadioButton)<input type=radio value=**><input type=radio value=**>
<input type=radio value=** checked><input type=radio value=** checked>
<form action=post-query method=POST> <form action=post-query method=POST>
<input type=radio name=<input type=radio name= 水果水果 > Banana<p> > Banana<p>
<input type=radio name=<input type=radio name= 水果 水果 checked> checked> Apple<p> Apple<p>
<input type=radio name=<input type=radio name= 水果 水果 value=value= 橘子橘子 > > Orange<p> Orange<p>
<input type=submit><input type=reset> <input type=submit><input type=reset> </form> </form>
列表框列表框 (Selectable Menu)(Selectable Menu)基本语法基本语法<select name=*><select name=*>
<option> ...<option> ...</select> </select>
<option selected><option selected><option value=**><option value=**>
<form action=post-query method=POST> <form action=post-query method=POST> <select name=fruits> <select name=fruits> <option>Banana <option>Banana <option selected>Apple <option selected>Apple <option value=My_Favorite>Orange <option value=My_Favorite>Orange </select></select><p> <input type=submit><p> <input type=submit><input type=reset> </form> <input type=reset> </form>
<select size=**><select size=**>
<form action=post-query method=POST> <form action=post-query method=POST> <select name=fruits size=3> <select name=fruits size=3> <option>Banana <option>Banana
<option selected>Apple <option selected>Apple
<option value=My_Favorite>Orange <option value=My_Favorite>Orange <option>Peach </select><option>Peach </select>
<p> <p>
<input type=submit><input type=reset> <input type=submit><input type=reset> </form> </form>
列表框列表框 (Selectable Menu)(Selectable Menu)
<select size=** multiple><select size=** multiple> 注意，是用 注意，是用 Ctrl Ctrl 键配合鼠标实现多选。键配合鼠标实现多选。
(( 和 和 MS-WINDOWS MS-WINDOWS 的 的 File Manager File Manager 一样一样 ) )
<form action=post-query method=POST> <form action=post-query method=POST> <select name=fruits size=3 multiple> <select name=fruits size=3 multiple> <option selected>Banana <option selected>Banana
<option selected>Apple <option selected>Apple
<option value=My_Favorite>Orange <option value=My_Favorite>Orange <option selected>Peach </select><option selected>Peach </select>
<p> <p>
<input type=submit><input type=reset> <input type=submit><input type=reset> </form></form>
列表框列表框 (Selectable Menu)(Selectable Menu)
文本区域文本区域
<textarea name=* rows=** <textarea name=* rows=** cols=**> ... <textarea>cols=**> ... <textarea>
<form action=post-query method=POST> <form action=post-query method=POST> <textarea name=comment rows=5 <textarea name=comment rows=5 cols=60> </textarea> cols=60> </textarea>
<P> <P>
<input type=submit><input type=reset> <input type=submit><input type=reset> </form> </form>
HTML HTML 指定了以下的颜色指定了以下的颜色 black olive teal red blue maroon navy black olive teal red blue maroon navy
gray lime fuchsia white green purple gray lime fuchsia white green purple silver yellow aqua silver yellow aqua
如果感觉颜色不够可以对颜色指定如果感觉颜色不够可以对颜色指定 RGBRGB 颜色即颜色即#RRGGBB#RRGGBB ，分别用两位十六进制数代表红、，分别用两位十六进制数代表红、绿、蓝三种颜色的含量。绿、蓝三种颜色的含量。
