Chinaunix首页 | 论坛 | 博客

kylin_755的ChinaUnix博客kylin755.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

kylin_755

  • 博客访问： 99006
  • 博文数量： 34
  • 博客积分： 925
  • 博客等级： 准尉
  • 技术积分： 350
  • 用 户 组： 普通用户
  • 注册时间： 2011-08-15 11:52
文章分类

全部博文（34）

文章存档

2011年（34）

我的朋友
最近访客
推荐博文
相关博文
HTML 常用标记

分类： 系统运维

2011-08-18 10:55:43

  1. <ul>
  2.    <li>List item 1</li>
  3.    <li>List item 2</li>
  4.    <li>List item 3</li>
  5. </ul>
  • List item 1
  • List item 2
  • List item 3
  1. <ol>
  2.    <li>List item 1</li>
  3.    <li>List item 2</li>
  4.    <li>List item 3</li>
  5. </ol>
  1. List item 1
  2. List item 2
  3. List item 3
Link Targes:
_blankOpens the URL in a new browser window.
_selfLoads the URL in the current browser window.
_parentLoads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
_topLoads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren't any longer.
image:
  1. <img src="" width="100" height="100" alt="Smile" />
srcRequired attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
widthOptional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
heightOptional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.
Image Links:
  1. <a href="">
  2. <img src=""
  3.     width="100" height="100" alt="Smile" />
  4. </a>
Image Border:
  1. <a href="">
  2. <img src=""
  3.     width="100" height="100" alt="Smile" border="0" />
  4. </a>
HTML Forms:
1. Radio Buttons:
  1. <input type="radio" name="lunch" value="pasta" /><br />
  2. <input type="radio" name="lunch" value="rissotto" />
2.Checkboxes:
  1. <input type="checkbox" name="lunch" value="pasta" /><br />
  2. <input type="checkbox" name="lunch" value="rissotto" />
3. Select List:
  1. <select>
  2.   <option value ="sydney">Sydney</option>
  3.   <option value ="melbourne">Melbourne</option>
  4.   <option value ="cromwell">Cromwell</option>
  5.   <option value ="queenstown">Queenstown</option>
  6. </select>
HTML Frames:
In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content.

Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.

So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.

1.Two Column Frameset:
  1. The frameset (frame_example_frameset_1.html):

  3. <html>
  4. <head>
  5. <title>Frameset page<title>
  6. </head>
  7. <frameset cols = "25%, *">
  8.   <frame src ="frame_example_left.html" />
  9.   <frame src ="frame_example_right.html" />
  10. </frameset>
  11. </html>

  13. The left frame (frame_example_left.html):

  15. <html>
  16. <body style="background-color:green">
  17. <p>This is the left frame (frame_example_left.html).</p>
  18. </body>
  19. </html>

  21. The right frame (frame_example_right.html):

  23. <html>
  24. <body style="background-color:yellow">
  25. <p>This is the right frame (frame_example_right.html).</p>
  26. </body>
  27. </html>
2. Add a Top Frame
  1. The frameset (frame_example_frameset_2.html):

  3. <html>
  4. <head>
  5. <title>Frameset page</title>
  6. </head>
  7. <frameset rows="20%,*">
  8.   <frame src="/html/tutorial/frame_example_top.html">
  9. <frameset cols = "25%, *">
  10.   <frame src ="/html/tutorial/frame_example_left.html" />
  11.   <frame src ="/html/tutorial/frame_example_right.html" />
  12. </frameset>
  13. </frameset>
  14. </html>

  16. The top frame (frame_example_top.html):

  18. <html>
  19. <body style="background-color:maroon">
  20. <p>This is the Top frame (frame_example_top.html).</p>
  21. </body>
  22. </html>

  24. (The left and right frames don
3. Remove the Borders:
You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.
  1. The frameset (frame_example_frameset_3.html):

  3. <html>
  4. <head>
  5. <title>Frameset page</title>
  6. </head>
  7. <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
  8.   <frame src="/html/tutorial/frame_example_top.html">
  9. <frameset cols = "25%, *">
  10.   <frame src ="/html/tutorial/frame_example_left.html" />
  11.   <frame src ="/html/tutorial/frame_example_right.html" />
  12. </frameset>
  13. </frameset>
  14. </html>

  16. (The left, right, and top frames don
4. Load Another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).

This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.

Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.

  1. The frameset (frame_example_frameset_4.html):

  3. <html>
  4. <head>
  5. <title>Frameset page</title>
  6. </head>
  7. <frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">
  8.   <frame src ="/html/tutorial/frame_example_left_2.html" />
  9.   <frame name="content" src ="/html/tutorial/frame_example_yellow.html" />
  10. </frameset>
  11. </html>

  13. The left frame (frame_example_left_2.html):

  15. <html>
  16. <body style="background-color:green">
  17. <p>This is the left frame (frame_example_left_2.html).</p>
  18. <p>
  19. <a target="content" href="frame_example_yellow.html">Yellow</a><br />
  20. <a target="content" href="frame_example_lime.html">Lime</a>
  21. </p>
  22. </body>
  23. </html>

  25. The yellow frame (frame_example_yellow.html):

  27. <html>
  28. <body style="background-color:yellow">
  29. <p>This is the yellow frame (frame_example_yellow.html).</p>
  30. </body>
  31. </html>

  33. The lime frame (frame_example_lime.html):

  35. <html>
  36. <body style="background-color:Lime">
  37. <p>This is the lime frame (frame_example_lime.html).</p>
  38. </body>
  39. </html>
Tag Reference:
1. the frameset Tag.  In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.
AttributeDescription
rowsSpecifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
colsSpecifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%
2. The frame Tag. For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.
AttributeDescription
nameAssigns a name to a frame. This is useful for loading contents into one frame from another.
longdescA long description - this can elaborate on a shorter description specified with the title attribute.
srcLocation of the frame contents (for example, the HTML page to be loaded into the frame).
noresizeSpecifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).
scrollingWhether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values:
  • auto
  • yes
  • no
frameborderWhether the frame should have a border or not. Possible values:
  • 1 (border)
  • 0 (no border)
marginwidthSpecifies the margin, in pixels, between the frame's contents and it's left and right margins.
marginheightSpecifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

3. The noframe Tag.The noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.
  1. <html>
  2. <head>
  3. <title>Frameset page<title>
  4. </head>
  5. <frameset cols = "25%, *">
  6.   <noframes>
  7.   <body>Your browser does not support frames.
  8.   Therefore, this is the noframe version of the site.</body>
  9.   </noframes>
  10.   <frame src ="frame_example_left.html" />
  11.   <frame src ="frame_example_right.html" />
  12. </frameset>
  13. </html>
















阅读(292) | 评论(0) | 转发(0) |
0

上一篇：HTML button 加上超链接

下一篇：HTML 常用标记

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6