简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

黄舟
黄舟Original
2017-01-22 11:30:061312browse

1. What is HTML?

HTML (hypertext mark-uplanguage) is a hypertext mark-up language. It is mainly used for making web pages. It can display text, images, videos, sounds on web pages...

HTML can only be used for static purposes. Web page

2. History of HTML development

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

The father of HTML-Tim Berners-Lee
Tim Berners-Lee Lee) was born on June 8, 1955 in London, England

For details, please see: http://blog.csdn.net/chinayaosir/article/details/2982025


3. Introduction to W3C


world wide web consortium Chinese means W3C Council or World Wide Web Alliance. W3C was established in October 1994 at the MIT Computer Science Laboratory by Tim Berners-Lee, the father of html.

The W3C organization is a non-profit organization that develops network standards. Standards such as HTML, XHTML, CSS, and XML are all customized by W3C.

First-rate companies make standards

Second-rate companies make services

Third-rate companies make products

Fourth-rate companies make projects

IV. HTML The basic structure of running

html

<html>  
    <head>  
        <title>html结构</title>  
    </head>  
    <body>  
        <!--注释-->  
    </body>  
</html>

1. Local operation (open directly with a browser)

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

2. Remote access

Remote access after installing for example tomcat server.

5. Symbol entities in html

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

6. Image display and links

<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>

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

<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>

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

##7. Display table

<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>

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

border: The width of the border, the default value is 0

width="60%": The width of the table, accounting for 60% of the parent container

cellpadding="10": Indicates The distance between the content and the cell

cellspacing="10": Indicates the distance between the cell and other cells

Alignment of the table:

align attribute: horizontal alignment

valign attribute: vertical alignment

Irregular table:

colspan attribute: merge horizontal cells

rowspan attribute: merge vertical cells


8. Frames


By using frames, you can display more than one page in the same browser window. Each HTML document is called a frame, and each frame is independent of other frames. Disadvantages of using frames:

Developers must keep track of more HTML documents at the same time

It is difficult to print the entire page


  • Frame structure tag ()

  • Frame structure tag () defines how to divide the window into frames

  • Each frameset defines a series of rows or columns

  • The value of rows/columns specifies the area of ​​the screen occupied by each row or column

Frame tag (Frame)

The Frame tag defines the HTML document placed in each frame.

Xiaoqiang’s HTML5 mobile development road (11) - links, pictures, tables, frames

Main page.html (note that when using a frame, the body tag cannot be used inside)

<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>

noresize=The function of "noresize" is that it cannot be stretched Each frame


frameborder="0" sets the border width to 0

title.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>

a.html

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

b.html

<body bgcolor="#F2F2F2">  
    <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>

The above is the content of Xiaoqiang’s HTML5 mobile development (11) - links, pictures, tables, and frames. For more related content, please pay attention to the PHP Chinese website (www .php.cn)!



Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Xiaoqiang’s HTML5 mobile development journey (10) – Online drawing boardNext article：Xiaoqiang’s HTML5 mobile development journey (10) – Online drawing board

Related articles

See more