zoukankan      html  css  js  c++  java

  • 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自：http://blog.csdn.net/dawanganban/article/details/18098193

    一、HTML是什么？

    HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音…

    HTML只能做静态网页

    二、HTML发展历史

    html之父-Tim Berners-Lee
    蒂姆·伯纳斯－李（Tim Berners-Lee）1955年6月8日出生于英国伦敦

    关于详细请看：http://blog.csdn.net/chinayaosir/article/details/2982025

    三、W3C介绍

    world wide web consortium 中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创立者是html之父Tim Berners-Lee。

    W3C组织是网络标准制定的一个非盈利组织，像HTML、XHTML、CSS、XML的标准都是由W3C来定制。

    一流公司做标准

    二流公司做服务

    三流公司做产品

    四流公司做项目

    四、HTML的运行

    html的基本结构

    1. <html>  
    2.     <head>  
    3.         <title>html结构</title>  
    4.     </head>  
    5.     <body>  
    6.         <!--注释-->  
    7.     </body>  
    8. </html>  

    1、本地运行（直接用浏览器打开）


    2、远程访问

    安装例如tomcat服务器后远程访问。

    五、html中的符号实体


    六、图片显示及链接

    1. <html>  
    2.     <head>  
    3.         <title>html结构</title>  
    4.     </head>  
    5.     <body>  
    6.         <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>  
    7.     </body>  
    8. </html>  


    1. <html>  
    2.     <head>  
    3.         <title>html结构</title>  
    4.     </head>  
    5.     <body>  
    6.         <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>  
    7.         <a href="http://blog.csdn.net/dawanganban">  
    8.             <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>  
    9.         </a>  
    10.     </body>  
    11. </html>  


    七、显示表格

    1. <html>  
    2.     <head>  
    3.         <title>html结构</title>  
    4.     </head>  
    5.     <body>  
    6.         <!--宽度可以用像素，也可以用百分比-->  
    7.         <table border="1px" width="300px">  
    8.             <tr align="center" bgcolor="yellow">  
    9.                 <td>1</td><td>2</td>  
    10.             </tr>  
    11.             <tr align="center">  
    12.                 <td>3</td><td>4</td>  
    13.             </tr>  
    14.             <tr align="center">  
    15.                 <td>5</td><td>6</td>  
    16.             </tr>  
    17.         <table>  
    18.         <!--默认文字靠左-->  
    19.     </body>  
    20. </html>  

    border：边框的宽度，默认值是0

    width=”60%" ：表格的宽度，占父容器的60%

    cellpadding="10"  ：表示内容和单元格的距离

    cellspacing="10"  ：表示单元格和其他单元格之间的距离

    表格的对齐：

    align属性：水平对齐  

    valign属性：垂直对齐

    不规则表格：

    colspan属性：合并水平单元格

    rowspan属性：合并竖直单元格

    八、框架

    通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：

    开发人员必须同时跟踪更多的HTML文档

    很难打印整张页面 

    框架结构标签（<frameset>）
    • 框架结构标签（<frameset>）定义如何将窗口分割为框架
    • 每个 frameset 定义了一系列行或列
    • rows/columns 的值规定了每行或每列占据屏幕的面积 

    框架标签（Frame）

    Frame 标签定义了放置在每个框架中的 HTML 文档。


    主页面.html (注意使用框架的时候，里面不能用body标签)

    1. <html>  
    2.     <head>  
    3.         <title>html结构</title>  
    4.     </head>  
    5.     <frameset rows="150,*">  
    6.         <frame name="frame0" src="title.html" frameborder="0">  
    7.         <frameset cols="20%,*">  
    8.             <frame name="frame1" src="a.html"  noresize frameborder="0"/>  
    9.             <frame name="frame2" src="b.html" frameborder="0"/>  
    10.         </frameset>  
    11.     </frameset>  
    12.       
    13. </html>  

    noresize=“noresize"的作用是不能拉伸每个frame

    frameborder="0"将边框宽度设为0

    title.html

    1. <body  bgcolor="#FFA54F">  
    2. <div id="container">  
    3.         <div id="header">  
    4.     <div class="header">  
    5.         <div id="blog_title">  
    6.             <h1>  
    7.                 <a href="http://blog.csdn.net/dawanganban">大碗干拌</a></h1>  
    8.             <h2>兴趣是坚持的理由，网络是最牛的老师，博客是最好的笔记，交流是创新的源头</h2>  
    9.             <div class="clear">  
    10.             </div>  
    11.         </div>  
    12.         <div class="clear">  
    13.         </div>  
    14.     </div>  
    15. </div>  
    16. </body>  

    a.html

    1. <body bgcolor="pink">  
    2. <!--target表示我们点击后，目标指向谁-->  
    3. <a href="b.html" target="frame2">返回主页>></a><br><br/><br/>  
    4. <a href="http://blog.csdn.net/column/details/android-growup.html" target="frame2">Android菜鸟的成长笔记</a><br/>  
    5. <a href="http://blog.csdn.net/column/details/dawanganban-html5.html" target="frame2">小强的HTML5移动开发之路</a><br/>  
    6. <a href="http://blog.csdn.net/column/details/dawanganban-linux-n.html" target="frame2">鸟哥的Linux私房菜笔记</a><br/>  
    7. </body>  

    b.html

    1. <body bgcolor="#F2F2F2">  
    2.     <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>  
    3.     <a href="http://blog.csdn.net/dawanganban">  
    4.         <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>  
    5.     </a>  
    6. </body>  
  • 相关阅读:
    卡特兰数
    割点和桥
    子序列(超级水)
    react 进行时
    又开启react之路
    关于特殊字体
    react 组件传值
    git 的安装和项目建立
    ES6 let and const
    js封装的一行半显示省略号（字数自由控制）
  • 原文地址：https://www.cnblogs.com/wanghang/p/6298970.html
Copyright © 2011-2022 走看看