首頁 > web前端 > H5教程 > 小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

黄舟
發布: 2017-01-22 11:30:06
原創
1393 人瀏覽過

一、HTML是什麼?

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

HTML只能做靜態網頁

二、HTML發展歷史

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

html之父-Tim Berners-Lee
蒂姆·伯納斯-李(Tim Berners-Lee)1955年6月8日出生於英國倫敦

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


三、W3C介紹


world wide web consortium 理事會是33C3C3C。 W3C於1994年10月在麻省理工學院電腦科學實驗室成立,創立者是html之父Tim Berners-Lee。

W3C組織是網路標準制定的非營利組織,像是HTML、XHTML、CSS、XML的標準都是由W3C來客製化。

一流公司做標準

二流公司做服務

三流公司做產品

四流公司做項目

四、HTML的運作

html的基本結構

四、HTML的運作

html的基本結構小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

四、HTML的運作

html的基本結構

四、HTML的運作


html開啟)

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

2、遠端存取

安裝例如tomcat伺服器後遠端存取。 小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

五、html中的符號實體

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

六、圖片顯示及連結

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <body>  
        <!--注释-->  
    </body>  
</html>
登入後複製

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <body>  
        <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>  
    </body>  
</html>
登入後複製

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架

border:邊框的寬度,預設值是0

width=”60%" :表格的寬度,佔父容器的60%

cellpadding="10"  :表示內容物和單元格的距離

cellspacing="10"  :表示內容和單元格的距離

cellspacing="10"  :表示單元格和其他單元格之間的距離

表格的對齊:

align屬性:水平對齊 

valign屬性:垂直對齊

不規則表格:

colspan屬性:合併水平單元格

不規則表格:

:合併垂直單元格

八、框架

透過使用框架,你可以在同一個瀏覽器視窗中顯示不只一個頁面。每份HTML文件稱為一個框架,並且每個框架都獨立於其他的框架。使用框架的壞處:

開發人員必須同時追蹤更多的HTML文件

很難列印整張頁面 

  • 框架結構標籤() >)定義如何將視窗分割為框架
  • 每個frameset 定義了一系列行或列
  • rows/columns 的值規定了每行或每列佔據螢幕的面積 
  • 框架Frame)

Frame 標籤定義了放置在每個框架中的HTML 文件。

小強的HTML5行動開發之路(11)-鏈接,圖片,表格,框架主頁.html (注意使用框架的時候,裡面不能用body標籤)

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <body>  
        <img src="http://img.my.csdn.net/uploads/201401/06/1389011264_6592.jpg" width="150px" alt="欢迎关注我的官方公众微信"/>  
        <a href="http://blog.csdn.net/dawanganban">  
            <img src="http://avatar.csdn.net/D/F/D/1_lxq_xsyu.jpg" alt="来点我啊" title="点我啊" width="150px"/>  
        </a>  
    </body>  
</html>
登入後複製

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


將邊框寬度設為0

title.html

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <body>  
        <!--宽度可以用像素,也可以用百分比-->  
        <table border="1px" width="300px">  
            <tr align="center" bgcolor="yellow">  
                <td>1</td><td>2</td>  
            </tr>  
            <tr align="center">  
                <td>3</td><td>4</td>  
            </tr>  
            <tr align="center">  
                <td>5</td><td>6</td>  
            </tr>  
        <table>  
        <!--默认文字靠左-->  
    </body>  
</html>
登入後複製

a.html

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <frameset rows="150,*">  
        <frame name="frame0" src="title.html" frameborder="0">  
        <frameset cols="20%,*">  
            <frame name="frame1" src="a.html"  noresize frameborder="0"/>  
            <frame name="frame2" src="b.html" frameborder="0"/>  
        </frameset>  
    </frameset>  
      
</html>
登入後複製

b.html

<body  bgcolor="#FFA54F">  
<div id="container">  
        <div id="header">  
    <div class="header">  
        <div id="blog_title">  
            <h1>  
                <a href="http://blog.csdn.net/dawanganban">大碗干拌</a></h1>  
            <h2>兴趣是坚持的理由,网络是最牛的老师,博客是最好的笔记,交流是创新的源头</h2>  
            <div class="clear">  
            </div>  
        </div>  
        <div class="clear">  
        </div>  
    </div>  
</div>  
</body>
登入後複製

以上就是 小強的HTML5移動開發之路(11)——鏈接,圖片,表格,框架的內容,更喜歡框架的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板