小強的HTML5移動開發之路（11）——連接，圖片，表格，框架

時間  2019-11-11
標籤 小強 html5 html 移動 開發 之路 連接 圖片 表格 框架 欄目 HTML5 简体版
原文   原文鏈接

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

1、HTML是什麼？html5

HTML(hypertext mark-uplanguage)是 超文本標記語言, 主要的用處是作網頁, 能夠在網頁上顯示 文字、圖像、視頻、聲音…linux

HTML只能作靜態網頁android

2、HTML發展歷史web

html之父-Tim Berners-Lee
蒂姆·伯納斯－李（Tim Berners-Lee）1955年6月8日出生於英國倫敦
瀏覽器

關於詳細請看：http://blog.csdn.net/chinayaosir/article/details/2982025tomcat

3、W3C介紹

world wide web consortium 中文意思是W3C理事會或萬維網聯盟。W3C於1994年10月在麻省理工學院計算機科學實驗室成立，創立者是html之父Tim Berners-Lee。服務器

W3C組織是網絡標準制定的一個非盈利組織，像HTML、XHTML、CSS、XML的標準都是由W3C來定製。微信

一流公司作標準網絡

二流公司作服務

三流公司作產品

四流公司作項目

4、HTML的運行

html的基本結構

  1. <html>  
  2.     <head>  
  3.         <title>html結構</title>  
  4.     </head>  
  5.     <body>  
  6.         <!--註釋-->  
  7.     </body>  
  8. </html>  

一、本地運行（直接用瀏覽器打開）


二、遠程訪問

安裝例如tomcat服務器後遠程訪問。

5、html中的符號實體


6、圖片顯示及連接

  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>  


7、顯示錶格

  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屬性：合併豎直單元格

8、框架

經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。每份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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程